Cara memasang social widget mashable style box di blogger



Cara memasang social widget mashable style box di blogger
Social widget mashable style box adalah widget yang memungkinkan pembaca untuk berlangganan artikel blog Anda sekaligus berbagi dan bergabung dengan blog Anda melalui sosial media seperti facebook, twitter, google+, linkedin dll. Jadi saya rasa social widget mashable style box adalah widget yang wajib dipasang. Untuk detail dan penampakan social widget mashable style box bisa dilihat di screen shot , atau bisa dilihat langsung di sidebar blog saya ini.

Ok langsung saja saya bahas tentang bagaimana cara memasang sosial widget mashable style box pada sidebar blogger.

Sebelum melangkah lebih jauh, ada baiknya anda backup template anda dengan mengikuti langkah dibawah ini :
  1. Login ke blogger anda
  2. Pada menu “Template” lalu klik menu pada kanan atas “cadangkan/pulihkan” => unduh template lengkap.
Untuk memasang social widget mashable style box langkah2 nya sebagai berikut :

Memasang Style CSS untuk social widget mashable style box. Caranya :

1.    Pada menu template pilih menu edit HTML

2.    Cari kode ]]></b:skin> biar lebih gampang pake menu ctrl+F untuk mencari.
3.    Copy dan Paste kode dibawah ini tepat diatasnya ]]></b:skin> tadi

#email-news-subscribe .email-box{padding:10px
10px;font-family:"Arial","Helvetica",sans-serif;border-top:0;border-right:1px solid #C7DBE2;border-left:1px solid #C7DBE2;border-image:initial}#email-news-subscribe .email-box
input.email{background:#FFF;border:1px
solid #dedede;color:#999;padding:7px
10px 8px 10px;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;border-image:initial;font-family:"Arial","Helvetica",sans-serif}#email-news-subscribe .email-box input.email:focus{color:#333}#email-news-subscribe .email-box
input.subscribe{background:-moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));background:-moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);-pie-background:linear-gradient(270deg,#ffca00,#ff9b00);font-family:"Arial","Helvetica",sans-serif;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px
solid #cc7c00;color:white;text-shadow:#d08d00 1px 1px 0;padding:7px
14px;margin-left:3px;font-weight:bold;font-size:12px;cursor:pointer;border-image:initial}#email-news-subscribe .email-box input.subscribe:hover{background:#ff9b00;background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#fff,endColorStr=#ebebeb);outline:0;-moz-box-shadow:0 0 3px #999;-webkit-box-shadow:0 0 3px #999;box-shadow:0 0 3px #999background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px
solid #cc7c00;color:#FFF;text-shadow:#d08d00 1px 1px 0}#other-social-bar{background-color:#D8E6EB;box-shadow:0 1px 1px #FFF inset;padding:0px;font-family:"Arial","Helvetica",sans-serif;font-weight:bold;overflow:hidden;border:1px
solid #B6D0DA}
#other-social-bar
ul{list-style:none outside none;padding-left:4px}#other-social-bar .other-follow{float:left;color:#1E598E;overflow:hidden;height:16px;padding:10px;padding-bottom:7px;width:270px}#other-social-bar .other-follow
ul{list-style:none outside none;padding-left:4px}#other-social-bar .other-follow ul
li{font-size:12px;font-weight:bold;display:inline;border:0;text-shadow:1px 1px white}#other-social-bar .other-follow ul li
a{font-size:12px;color:#1E598E;font-weight:bold;display:inline;text-shadow:1px 1px white}#other-social-bar .other-follow
li{font-size:12px;font-weight:bold;display:inline;border:0;text-shadow:1px 1px white}#other-social-bar .other-follow li
a{font-size:12px;color:#1E598E;font-weight:bold;display:inline;text-shadow:1px 1px white}#other-social-bar .other-follow li.my-rss{background:url(http://i1116.photobucket.com/albums/k566/letmeclear/widget/rss-16x16.png) no-repeat transparent;line-height:1;padding:0px
3px 1px 20px;width:60px;margin-bottom:0px}#other-social-bar .other-follow li.my-linkedin{background:url(http://i1116.photobucket.com/albums/k566/letmeclear/widget/linkedin-16x16.png) no-repeat transparent;line-height:1;padding:0px
3px 1px 20px;width:60px;margin-bottom:0px}#other-social-bar .other-follow li.my-gplus{background:url(
http://i1116.photobucket.com/albums/k566/letmeclear/widget/gplus-16x16.png
) no-repeat transparent;line-height:1;width:60px;padding:0px
3px 1px 20px;margin-bottom:0px}
.googleplus{background:#F5FCFE;border-top:1px solid #ebebeb;border-bottom:1px solid #ebebeb;border-right:1px solid #D8E6EB;border-left:1px solid #D8E6EB;border-image:initial;font-size:.90em;font-family:"Arial","Helvetica",sans-serif;color:#000;padding:9px
11px;line-height:1px}.googleplus
span{color:#000;font-size:11px;position:absolute;display:inline-block;margin:9px
70px}
.g-plusone{float:left}

.twitter{background:#EEF9FD;padding:10px;border:1px
solid #C7DBE2;border-top:0}

4.    Lalu Save.

Langkah selanjutnya adalah Menambah widget HTML social widget mashable style box. Caranya :

1.    Buka dasboard blog anda.
2.    Pada menu “tata letak” Tambahkan widget “HTML/JavaScript” dan pastekan kode dibawah ini :

<!--begin of social widget-->
<div style="margin-bottom:10px;">
<div id="inspiredmagz-mashable-bar" style="width:300px;"> <!-- Begin Widget -->
    <div class="fb-likebox" style="background: #FFF;"> <!-- Facebook -->
        <iframe src="//www.facebook.com/plugins/like.php?

href=http://www.facebook.com/pages/Wawans-Blog/199302710101544&amp;send=false&amp;layout=standard&amp;width=290&amp;show_fac

es=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=199302710101544"

scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:80px;"></iframe>
    </div>
    <div class="googleplus" style="background: #F5FCFE;"> <!-- Google -->
        <span>Recommend Us on Google</span><div class="g-plusone" data-size="medium" data-href="http://blog.wawancoys.com"></div>
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    </div>
    <div class="twitter" style="background: #EEF9FD;"> <!-- Twitter -->
            <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button"

src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;align=&amp;button=blue&a

mp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=&amp;screen_name=Username twitter Anda&amp;show_count=&a

mp;show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe>
    </div>
    <div id="email-news-subscribe" style="background: #E3EDF4;"> <!-- Email Subscribe -->
        <div class="email-box">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post"

target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feedname',

'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                <input class="email" type="text" style="width: 140px; font-size: 12px;"

id="email" name="email" value="Enter your email" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"

onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />
                <input type="hidden" value="feedname" name="uri" />
                <input type="hidden" name="loc" value="en_US" />
                <input class="subscribe" name="commit" type="submit" value="Subscribe" />
            </form>
        </div>
    </div>
<div id="other-social-bar" style="background: #D8E6EB;"> <!-- Other Social Bar -->
    <ul class="other-follow">
        <li class="my-rss">
            <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/wawan-blog"

target="_blank">RSS Feed</a>
        </li>
        <li class="my-linkedin">
            <a rel="nofollow external" title="LinkedIn"

href="http://my.linkedin.com/in/linkedin-profile" target="_blank">LinkedIn</a>
        </li>
        <li class="my-gplus">
            <a rel="nofollow" title="Google Plus" rel="author"

href="http://plus.google.com/103795566429164379950" target="_blank">Google Plus</a>
        </li>
    </ul>
</div>
<div id="get-inspiredmagz" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid

white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family:

"arial","helvetica",sans-serif;">
      <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a

href="http://blog.wawancoys.com/" target="_blank" title="Home">Home »</a></span></div></div> <!-- End Widget

--></div>

Silahkan ganti yang berwarna merah sesuai dengan data blog anda
http://www.facebook.com/pages/Wawans-Blog/199302710101544 = ganti dengan url fanspage anda
199302710101544 = APP Id Fanspage anda contoh http://www.facebook.com/pages/Wawans-Blog/199302710101544 yang berwarna biru adalah id fanspage saya.
http://blog.wawancoys.com = Ganti dengan alamat blog anda
Username twitter Anda = Ganti dengan username twitter anda
Feedname = Nama feed anda di feedburner.com
http://feeds.feedburner.com/wawan-blog = URL feed anda di feedburner.com
http://my.linkedin.com/in/linkedin-profile = Url profil linkedin anda
http://plus.google.com/103795566429164379950 = Url profil google+ anda

4.    Lalu Save.

Sekarang anda bisa melihat hasilnya dengan membuka blog anda.

Bila ada yang perlu ditanyakan silahkan comment dibawah!

Description: Cara memasang social widget mashable style box di blogger
Rating: 4.5
Reviewed by: Wawan
On: 5:51 PM

7 comments

ane penggung ponsel gan, kesulitan kopas htmlnya, jadi ijinkan nyimak aja artike "Cara memasang social widget mashable style box di blogger", salam

Ini membuat loading blog lola ga bos ?

ok,,langsung di coba,,tapi kira2 kita bisa dapet backlink gak ??he33

@paranamoelya, silahkanbro
@Limit Komputer, ya jelas sedikit bikin lambat bos
@xamthone plus, silahkan, ya jelas dapet backlink lah kalo komentar disini, heheh :D

sebenarnya gw tertarik neh untuk pasang widgetnya, tapi code scriptnya banyak bener,,takut ntar bikin loading blog jadi lelet..

Terimakasih banyak atas informasinya...!
salam kenal dan semoga sukses...
informasi yang sangat bermanfaat.

TOP