Tutorial Membuat Share Bookmark Sosial Floating

Kembali saya ingin bagikan buat sobat blogger tutorial tentang design template kali ini saya ingin bagikan cara membuat share bookmark media sosial dengan floating atau melayang yang berada disisi templat blogger. mungkin sudah banyak sekali kalian jumpai widget seperti ini namun mungkin kalian masih bingung cara menerapkan di template kalian. sebenarnya mudah saja caranya kalau kalian lihat dengan seksama dan tentu dengan mengikuti tutorial dengan teliti.

Sosial bookmark ini kaitannnya sangat erat sekali dengan SEO OffPage karena dengan menggunakan media sosial ini kita akan menerima backlink yang dimana dengan reputasi backlink yang berkualitas akan membuat web atau blog kita semakin baik di SERP. nah dengan adanya widget ini kita akan mudah mempromosikan blog kita agar dikunjungi, berikut ini tutorialnya silahkan simak baik-baik.

1. login ke blogger.

2. silahkan menuju ke edit template.

3. cari kode 

<b:includable id='post' var='post'>

kalau kalian sudah mendapatkan kode tersebut sekarang silahkan taruh kode dibawah ini tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.gw_social_floating{position:fixed; bottom:10%; margin-left:-75px; float:left;width:65px;background-color:#f7f7f7;padding: 5px 5px 0px 0px;border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #ccc;z-index:9999px !important;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.gw_social_floating .mbt_side_social_button{margin-bottom:5px;float:none;height:auto;width:60px;}
.gw_social_floating .st_twitter_vcount, .gw_social_floating.st_plusone_vcount, .st_email{margin-left:5px;}
.gw_social_floating .st_fblike_vcount{margin-left:5px;}
.gw_social_floating .stButton_gradient{background:none !important;height:21px !important;padding-left:0 !important;}
.gw_social_floating .chicklets, .gw_social_floating .stMainServices {background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWf3nXr1HqfxOFnoO6kr0O5MIb-28nANFwZwWX0koIx-J7xCoapR1NCcXSBHD-HnC5hEKITuSk4vN_R1b8n37PGJ_LBcehA2yGsd-BHwh22SINDaDvMMErV6mVhBa_Nrd1Twpc9zF0BCx/s400/gc_social_sprite.gif&#39;) no-repeat !important;height:19px !important;width:45px !important;padding:0 !important;}
.st_email .chicklets{background-position:0 -77px !important;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWf3nXr1HqfxOFnoO6kr0O5MIb-28nANFwZwWX0koIx-J7xCoapR1NCcXSBHD-HnC5hEKITuSk4vN_R1b8n37PGJ_LBcehA2yGsd-BHwh22SINDaDvMMErV6mVhBa_Nrd1Twpc9zF0BCx/s400/gc_social_sprite.gif&#39;) !important;}
.gw_social_floating .st_twitter_vcount .st-twitter-counter{background-position:0 -58px !important;}
.gw_social_floating  .stButton_gradient{border:none !important;}
.gw_social_floating .stBubble_count{width:44px !important;font-size: 15px !important;font-weight: normal !important;padding-top:7px !important;height:23px !important;background:none !important;}
.gw_social_floating .st_twitter_vcount .stBubble_count{color:#00a6df;background-color:#f8fbfc !important;}
.gw_social_floating .stBubble{background-position: 21px 31px !important;height:35px !important;}
.gw_social_floating .st_pinterest_vcount{margin-left:5px;}
.gw_social_floating .st_pinterest_vcount .st-pinterest-counter{background-position:0 -19px !important;}
.gw_social_floating .st_pinterest_vcount .stBubble_count{color:#FF0505;background-color:#fbf8f8 !important;}
.gw_social_floating .st_pinterest_vcount .stBubble{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO20uJ1gJH5VRAyJEpNJIPwLIh9MA0FgXwoq7U2jJKLYSsAvCNhY9hln10gfW56-RM4nNZd5V-R0cyfgJ8Axsb6PSN6w54HMMVXU2vh3ryVKoUR8R595XRCis8vJvHhhIQ6juk52G9bBPh/s400/bubble_arrow_pinterest.png&#39;) !important;}
.st_pinterest_vcount{margin-bottom: 0px;display: block;}
.st_fblike_vcount{margin-bottom: 0px;display: block;}
.st_twitter_vcount{margin-bottom: 3px;display: block;}
.st_email{margin-bottom: 5px; margin-top: 3px;display: block;}
</style>
<div class='gw_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='giga_watts'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;MY GIGA WATT&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
  </div></b:if></b:if>

kalau sudah kalian taruh kodenya warna merah yang saya tandai silahkan kalian ganti dengan ID twitter kalian, setelah semua kalian teliti dengan benar silahkan langsung saja kalian simpan dan lihat hasilnya, kalau masih terjadi eror sobat bisa teliti lagi, namun agar semua bisa sukses dan tak terjadi kesalahan alangkah baiknya kalian backup templat dulu untuk menghindari terjadi eror. dan bila kalian masih ragu dengan tutorial ini silahkan pakai tombol media sharing yang beberapa waktu yang lalu aku bagiakan.

itulah Tutorial Membuat Share Bookmark Sosial Floating yang bisa saya bagikan semoga tutorial ini bermanfaat buat sobat blogger, saya kira hanya itu selamat mencoba semoga sukses.

Related Posts:

Tweet