Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Widget Sharing ala Mashable

Sudah semestinya konten yang kita buat di blog, baik itu post berupa tulisan, foto, atau video mampu kita sebarkan ke khalayak ramai. Dengan ramainya orang yang menggunakan media sosial untuk berinterkasi dan menyebarkan informasi, begitupun kita sebagai pemilik blog (blogger) juga harus mampu memanfaatkannya. Tidak hanya untuk tempat sharing atau berbagi post terbaru, tetapi kita juga harus mengorganisir para pembaca agar blog tetap ramai.

Membuat jaringan atau networking melalui media soasil atau jejaring sosial adalah cara terbaik untuk mengikat para pembaca setia mendapatkan post terbaru dengan mudah. Selain itu, kita juga harus terus memperluas jaringan, dengan mengikat lebih banyak pembaca setia blog. Beberapa sosial media yang bisa digunakan diantaranya, halaman facebook, google plus, twitter dan langganan (subcribe) RSS. Untuk memperluas jaringan tentu kita harus mempromosikan diri, salah satu caranya dengan memasang widget di blog.

Dengan memasang widget sharing ala Mashable akan mempermudah pengujung untuk bergabung dengan jaringan blog kita di sosial media. Widget ini memang awalnya dibuat atau digunakan oleh Mashable, sebuah blog tekonologi yang sangat populer. Widget ini memberikan kemudahan pengunjung blog untuk bergabung dengan google plus, menyukai halaman facebook, mengikuti (follow) twitter kita, dan berlangganan RSS lewat email. Dengan tampilan yang menarik dan rapi, widget ini cocok dipasang di sidebar blog.

Cara Memasang Widget Sharing ala Mashable
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:250px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin:0px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        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;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}

    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        background: #EEF9FD;
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        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=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-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:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0} 
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        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://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.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://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

    </style>

    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" >

<!-- Google Plus-->
<div class="gplus"> <link href="http://plus.google.com/110258140289056999870" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render --> <g:plus href="http://plus.google.com/110258140289056999870" width="250" height="69" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox">

<!-- Facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FBelajarNgeblogdiBLOG&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=179027942166719" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe> </div>
<div class="googleplus">

<!-- Google --> <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="230"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter">

<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=kurniasepta&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe">

<!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=BelajarNgeblogDiBlogKurniaSepta', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 100px; font-size: 12px;" id="email" name="email" value="Enter Your Email" onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="tntbystc" 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">

<!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/BelajarNgeblogDiBlogKurniaSepta" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/kurniasepta"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/110258140289056999870" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" 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://kurniasepta.blogspot.com/2013/01/cara-memasang-widget-sharing-ala-mashable.html" target="_blank" > Get This Blogger Widget »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget-->

5. Jangan lupa, sebelum menyimpannya ganti kode yang yang berwarna merah sesuai dengan URL google plus, username halaman facebook, twitter, RSS feedburner kalian.

6. Tambahkan juga kode berikut ini di bawah ]]></b:skin> pada template blog:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

Kodenya memang panjang ya :D, tapi tampilan widget ini terkesan clean dan rapi. Cocok di pasang di sidebar blog yang lebarnya 250 pixel. Kamu dapat mengedit kembali kode di atas, tentu disesuaikan dengan tampilan blog masing-masing. Dengan widget ini akan bisa membuat semakin banyak yang mengikuti blogmu di google plus, menyukai (like) halaman blogmu di facebook, followermu di twitter bertambah, dan makin banyak yang subcribe RSS FEED. Sehingga traffik blog tetap terjaga.

96 komentar untuk "Cara Memasang Widget Sharing ala Mashable"

  1. lengkap banget share widgetnya, gak ada yang ketinggalan. Mantap.

    BalasHapus
  2. terima kasih sudah berbagi ilmunya

    BalasHapus
  3. nice post gan,,terima kasih untuk infonya

    BalasHapus
  4. terima kasih sudah berbagi infonya,,bermanfaat sekali gan

    BalasHapus
  5. terima kasih untuk informasinya,,di tunggu info selanjutnya

    BalasHapus
  6. artikel yang bermanfaat sekali,,terima kasih

    BalasHapus
  7. mantap nih infonya,,terima kasih sudah berbagi infonya

    BalasHapus
  8. info yang bermanfaat,,,saya coba ach,,hhee

    BalasHapus
  9. info yang bermanfaat sekali,,saya akan coba gan,,terima kasih

    BalasHapus
  10. boleh juga nih untuk dicoba,,,,ijin untuk di coba gan

    BalasHapus
  11. wiihhh cukup rumit juga yeh syntaxnya..thx Bro

    BalasHapus
  12. oohh begitu yaaaa..makasih bnget udh sharing

    BalasHapus
  13. thanks banget Kang,, sya mau coba...

    BalasHapus
  14. ajarin dong gan...belum ngerti nih cara ngeblog..
    saputra.acho@gmail.com

    BalasHapus
  15. makasih bnyak gan infonya,,membantu sekali..

    BalasHapus
  16. Dapat banyak ilmu blogging disini ya,,recomended bgt lah admin

    BalasHapus
  17. Salam sukses mas bro, izin untuk mencoba widgetnya di blog saya, terima kasih atas share nya.

    BalasHapus
  18. artikel yang bagus mas ..
    izn di praktekkan ...

    BalasHapus
  19. klo ane pasang iklam disini size 125x125 bisa sob dan ane mau coba dan hub ane di 0857 3388 9597.

    BalasHapus
  20. boleh dicoba juga nih.... nggak makan banyak tempat semua dalam 1 widget

    BalasHapus
  21. Sipp.. komplit, ane coba ya, thank's infonya

    BalasHapus
  22. Thanks sob...
    mantab sharenya...:)

    BalasHapus
  23. nyoba emotion ah, aku ber ketombe ~x( ahahaha

    BalasHapus
  24. Siiip ... sy sudah ikutan masang, trims http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif

    BalasHapus
  25. scriptnya panjang sekali ya mas
    nanti akan saya coba pasang di blog wp, semoga bisa ni

    BalasHapus
  26. perlu di coba nich, ....

    tambah info untuk keluarga boleh kan di baca, ...

    BalasHapus
  27. Thanks mas tutorialnya..

    BalasHapus
  28. tutorial nya sangat bermanfaat,, saya tunggu tutor berikutnya,,

    BalasHapus
  29. wah panjang banget, pasti capek ngetiknya, sangat bermanfaat artikelnya

    BalasHapus
  30. Lumayan.. nemu lagi trik yg bagus, tq sob. mau saya coba lagi

    BalasHapus
  31. Tips yang bermanfaat untuk menampilkan blog lebih keren. Thanks ya

    BalasHapus
  32. Thanks mas, udah ane pasang..

    silakan dicek

    BalasHapus
  33. thnaks

    oh iya
    nih ada berita dan info menarik unik dan aneh terupdate dan di jamin 100% beda , asli original.
    http://webunic.blogspot.com/

    BalasHapus
  34. wew, kayaknya bagus.. boleh di coba nih....

    BalasHapus
  35. maksih informasinya saya akan coba praktekan di blog saya..

    BalasHapus
  36. thanks tutorial nya sob, isin pasang dah

    BalasHapus
  37. Kern banget gan,,,coba lihat hasilnya di blog ane...lagi proses perbaikan juga nih

    BalasHapus
  38. wiih keren gan ijin praktek gan ..

    ouh iya blog nya sudah saya follow kalo berkenan follow back iya gan =))

    BalasHapus
  39. Ilmu yang bermanfaat... semoga sukses gan...

    BalasHapus
  40. kunjungan dimalam hari gan... blogwalking...

    BalasHapus
  41. makasih ya sob tutorialnya, ini patut untuk dicoba.

    BalasHapus

Berlangganan via Email