Tutorial Mewujudkan Bar Terapung Share & Butang Perkongsian Lain-lain

Langkah-langkah membuatnya sangat mudah. Apa yang anda perlukan adalah untuk copy dan paste  kod yang telah disediakan di bawah. Ikut langkah-langkah Dibawa nie:

1. Pergi ke Blogger> Templat
2. Backup template anda
3. Klik Edit HTML
4. Klik Teruskan
5. Kemudian Klik Expand Template Widget
6. mencari

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

Copy kode dibawa dan letakkan kode yang dicopy tadik tu kat bawah kode yang anda cari tadik...owkey

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<style>

.mbt_social_floating{

position:fixed; bottom:10%; margin-left:-60px; float:left;

width:60px;

background-color:#f7f7f7;

padding: 5px 0 0px 0px;

border-top:1px solid #ddd;

border-left:1px solid #ddd;

border-bottom:1px solid #ddd;

z-index:9999px !important;

border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;

}

.mbt_social_floating .mbt_side_social_button{

margin-bottom:5px;

float:none;

height:auto;

width:60px;

}

.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{

margin-left:5px;

}

.mbt_social_floating .st_fblike_vcount{

margin-left:5px;

}

.mbt_social_floating .stButton_gradient{

background:none !important;

height:21px !important;

padding-left:0 !important;

}

.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {

background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutUPlnAjcH3fhKNX5KWR1ISm1mvA_7E1s1FwqUEYTLiLGnrAxnaQyvu5HwQ8VwIO6P1GQ0Ej-CdslPUg2Uo4Zy7ziNssbk9P2vKL2CZuz_v22OJLHOd6Qgb7MnRoJcqfa2tzslkSBfuvT/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/AVvXsEhutUPlnAjcH3fhKNX5KWR1ISm1mvA_7E1s1FwqUEYTLiLGnrAxnaQyvu5HwQ8VwIO6P1GQ0Ej-CdslPUg2Uo4Zy7ziNssbk9P2vKL2CZuz_v22OJLHOd6Qgb7MnRoJcqfa2tzslkSBfuvT/s400/gc_social_sprite.gif&#39;) !important;

}

.mbt_social_floating .st_twitter_vcount .st-twitter-counter{

background-position:0 -58px !important;

}

.mbt_social_floating .stButton_gradient{

border:none !important;

}

.mbt_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;

}

.mbt_social_floating .st_twitter_vcount .stBubble_count{

color:#00a6df;

background-color:#f8fbfc !important;

}

.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;

}

.mbt_social_floating .stBubble{

background-position: 21px 31px !important;

height:35px !important;

}

</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});</script>

<span class='st_fblike_vcount' displaytext=''/>

<span class='st_twitter_vcount' displaytext='' st_via='KHAIRULAZMI21'/>

<div style='margin:5px 0 0px 0;'>

<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>

<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<script type='text/javascript'>

function run_pinmarklet() {

var e=document.createElement(&#39;script&#39;);

e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);

document.body.appendChild(e);

}

</script> </center>

</div>

<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 BLOGGER TRICKS&quot;,

ui_header_color: &quot;#ffffff&quot;,

ui_header_background: &quot;#0080FF&quot;

}

</script>

<span class='st_email' displaytext=''/>

<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://ciffahmimalomuchacha.blogspot.com/2012/07/tutorial-mewujudkan-bar-terapung-share.html' style='color:#CAC8C8;'>Widgets</a></p>

</div>

</b:if></b:if>

Hanya menggantikan KHAIRULAZMI21 dengan username Twitter anda. Simpan template anda dan Dah selesai! Kredit : mybloggertricks

Ranking: 5