Cara Membuat Widgets Twitter dan Facebook Share Buttons Melayang

Widget

Berikut adalah widget yang sangat baik yang akan mengapung vertikal di samping posting blog pribadi Anda. Tombol-tombol terlibat akan memungkinkan pengunjung Anda untuk dengan mudah berbagi konten Anda di facebook , twitter, google ditambah, dll Hal yang besar tentang widget ini adalah bahwa ia menghitung berapa kali posting Anda yang dibagi pada setiap jaringan sosial.

Cara Membuat Widgets Twitter dan Facebook Share Buttons Melayang

Tambahkan Widget ke Blogger

1. Pergi ke Blogger> Template
2. Backup template Anda
3. Klik   Edit HTML
4. Klik   Berjalan
5. Kemudian Klik   Expand Template Widget
6. Cari kode ini:

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><b:includable id=post var=post></span> <b:includable id=post var=post></span>

dan di bawahnya paste kode berikut. 

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style> .mbt_social_floating{ position:fixed;</span> . <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style> mbt_social_floating {position: fixed;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">bottom:10%;</span> bottom: 10%;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">margin-left:-60px;</span> margin-left: 60px-;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">float:left;</span> float: left;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">width:60px;</span> width: 60px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">background-color:#f7f7f7;</span> background-color: # f7f7f7;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">padding: 5px 0 0px 0px;</span> padding: 5px 0 0px 0px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">border-top:1px solid #ddd;</span> border-top: 1px solid # ddd;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">border-left:1px solid #ddd;</span> border-left: 1px solid # ddd;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">border-bottom:1px solid #ddd;</span> border-bottom: 1px solid # ddd;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">z-index:9999px !important;</span> z-index: 9999px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;</span> border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .mbt_side_social_button{ margin-bottom:5px;</span> ..} Mbt_social_floating mbt_side_social_button {margin-bottom: 5px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">float:none;</span> mengapung: none;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height:auto;</span> height: auto;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">width:60px;</span> width: 60px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ margin-left:5px;</span> ..} Mbt_social_floating st_twitter_vcount, mbt_social_floating.st_plusone_vcount, st_email {margin-left:.. 5px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .st_fblike_vcount{ margin-left:5px;</span> ..} Mbt_social_floating st_fblike_vcount {margin-left: 5px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .stButton_gradient{ background:none !important;</span> ..} Mbt_social_floating stButton_gradient {background: none penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height:21px !important;</span> height: 21px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">padding-left:0 !important;</span> padding-left: 0 penting;!</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {</span> }. Mbt_social_floating. Chicklets,. Mbt_social_floating. StMainServices {</span> background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWMEXlFDmog6GtDoztFTTAM3MaNIjtkVBSrhQo9ys-yW6D5tiUGuhWsUAzDRJz_9KYQYGigeOIzhEEwTdUHLiq486vtepgjfVZyt4k2ldXiEbx6_58Ts_a_7ZpOiqrFrqFsHkJluMiNVT4/s400/gc_social_sprite.gif') <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat !important;</span> no-ulangi penting!;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height:19px !important;</span> height: 19px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">width:45px !important;</span> width: 45px penting;!</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">padding:0 !important;</span> padding: 0 penting;!</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .st_email .chicklets{ background-position:0 -77px !important;</span> .} St_email chicklets {background-position:.! 0-77px penting;</span> background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWMEXlFDmog6GtDoztFTTAM3MaNIjtkVBSrhQo9ys-yW6D5tiUGuhWsUAzDRJz_9KYQYGigeOIzhEEwTdUHLiq486vtepgjfVZyt4k2ldXiEbx6_58Ts_a_7ZpOiqrFrqFsHkJluMiNVT4/s400/gc_social_sprite.gif') <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">!important;</span> ! Penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .st_twitter_vcount .st-twitter-counter{ background-position:0 -58px !important;</span> ... St_twitter_vcount} mbt_social_floating st-twitter-counter {background-position: 0-58px penting;!</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .stButton_gradient{ border:none !important;</span> ..} Mbt_social_floating stButton_gradient {border: none penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .stBubble_count{ width:44px !important;</span> ..} Mbt_social_floating stBubble_count {width: 44px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">font-size: 15px !important;</span> font-size: 15px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">font-weight: normal !important;</span> font-weight: biasa penting;!</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">padding-top:7px !important;</span> padding-top: 7px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height:23px !important;</span> height: 23px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">background:none !important;</span> background: none penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .st_twitter_vcount .stBubble_count{ color:#00a6df;</span> ..} Mbt_social_floating st_twitter_vcount stBubble_count {color:. # 00a6df;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">background-color:#f8fbfc !important;</span> background-color: # f8fbfc penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .st_fblike_vcount{ margin-bottom: 0px;</span> .} St_fblike_vcount {margin-bottom: 0px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">display: block;</span> display: block;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .st_twitter_vcount{ margin-bottom: 3px;</span> .} St_twitter_vcount {margin-bottom: 3px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">display: block;</span> display: block;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .st_email{ margin-bottom: 5px;</span> .} St_email {margin-bottom: 5px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">margin-top: 3px;</span> margin-top: 3px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">display: block;</span> display: block;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .stBubble{ background-position: 21px 31px !important;</span> ..} Mbt_social_floating stBubble {background-position: 21px 31px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height:35px !important;</span> height: 35px penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}.mbt_social_floating .st_pinterest_vcount{ margin-left:5px;</span> ..} Mbt_social_floating st_pinterest_vcount {margin-left: 5px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{ background-position:0 -19px !important;</span> ... St_pinterest_vcount} mbt_social_floating st-Eautalk-counter {background-position: 0-19px penting;!</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .st_pinterest_vcount .stBubble_count{ color:#FF0505;</span> ..} Mbt_social_floating st_pinterest_vcount stBubble_count {color:. # FF0505;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">background-color:#fbf8f8 !important;</span> background-color: # fbf8f8 penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .mbt_social_floating .st_pinterest_vcount .stBubble{</span> } Mbt_social_floating st_pinterest_vcount... StBubble {</span> background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewutYxvnZLuwv2GhWWXiA8ai1FuOOpjLG4EpJGJoPWRBpPKkItjb8qGm-klVCaMjddADZxe8-DzTnQ_D0VBVgqd-f9ce4Cqkr1o2PC3_5SXn8Mc2HKd6IuMppOV6GIzfGJdoedpO-_uTp/s400/bubble_arrow_pinterest.png') <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">!important;</span> ! Penting;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} .st_pinterest_vcount{ margin-bottom: 0px;</span> .} St_pinterest_vcount {margin-bottom: 0px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">display: block;</span> display: block;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">} </style> <div class=mbt_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='theblogwidgets'/> <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: "TheBlogWidgets.com", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script> <span class=st_email displaytext="" /> <p style=" line-height:0px;</span> } </ Style> <div class=mbt_social_floating> <script type=text/javascript> var switchTo5x = true; </ script> <skrip 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> <- Tidak ada lagi bekerja dengan baik sehingga mengeluarkannya dari daftar MBT <span class='st_fblike_vcount' displaytext=''/> -> <div style="margin:0px 0 0px 10px;"> <div id=fb-root /> <skrip 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='theblogwidgets'/> <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> <skrip src =' http://s7.addthis.com/ js/250/addthis_widget.js 'type =' text / javascript '/> <script type='text/javascript'> var addthis_config = {ui_cobrand: "TheBlogWidgets.com", ui_header_color: "# ffffff", ui_header_background: "# 0080FF "} </ script> <span class=st_email displaytext="" /> <p style =" line-height: 0px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">font-size:10px;</span> font-size: 10px;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">font-weight:bold;</span> font-weight: bold;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">text-align:center;"> <a</span> text-align: center; "> <a</span> href=http://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=/search%3Fq%3Dthe%2Bblog%2Bwidgets%26espv%3D2%26biw%3D1280%26bih%3D675&rurl=translate.google.co.id&sl=en&u=http://www.theblogwidgets.com/2013/11/floating-share-buttons-widget-with.html&usg=ALkJrhi95pCFpavm499FwwAqjy5Lr5DUCA <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">style=color:#CAC8C8;>Widgets</a></p> </div> </b:if></b:if></span> style = color: # CAC8C8;> Widget </ a> </ p> </ div> </ b: if> </ b: if></span>

Tambahkan Widget di Website
Hanya tempat kode di atas di mana saja antara bagian badan template Anda. Widget akan muncul di mana kode tersebut ditempatkan. 

Terima kasih sudah membaca post saya. Jangan ragu untuk mengirim saya setiap komentar dan saran

Kustomisasi
Ganti kode di bawah ini dengan nama pengguna twitter Anda sendiri. 

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">st_via='theblogwidgets'</span> st_via = 'theblogwidgets'</span>

Thanks !!!

Bagikan

Jangan lewatkan

Cara Membuat Widgets Twitter dan Facebook Share Buttons Melayang

4/ 5

Oleh Wahyu

Wahyu 11:09 AM Komentar