Post Game

Cara Membuat Tombol Share Tersebunyi dan Muncul Ketika Di Sorot

Cara Membuat Tombol Share Tersebunyi dan Muncul Ketika Di Sorot

Assalamualaikum wr. wb para pembaca, pada kesempatan kali ini saya akan membagikan cara tentang membuat tombol share yang baru baru ini saya pasang di blog saya, tombol tersebut saya dapatkan dari Bloggermint dan script ori dari sananya tidak bisa di gunakan jadi saya otak atik lagi scriptnya heehehe dan setelah 2 hari ngotak ngatik akhirnya saya berhasil membuat script tersebut bekerja dengan baik, dan jika anda tertarik untuk memasangnya di blog anda, silahkan langsung cekidot..


1. Kita masuk dulu ke Blogger
2. Klik Template > Edit HTML > Lanjutkan.
3. Lalu Centang Expand Template Widget.
4. Setelah itu cari kode <data:post.body/> {gunakan CTRL + F}
5. Jika sudah COPAS kode berikut di atas atau di bawahnya

<b:if cond=data:blog.pageType != &quot;index&quot;>
 <b:if cond=data:blog.pageType != &quot;archive&quot;>
<style>
#sharetersembunyi_mini, #sharetersembunyi_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url(&quot;http://www.bloggermint.com/demos/mintshare/images/bkg-btn-grey.gif&quot;) repeat-x scroll 0 0 #EDEDED;
}
#sharetersembunyi_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
#sharetersembunyi_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url(&quot;http://www.bloggermint.com/demos/mintshare/images/plus.png&quot;) no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}
#sharetersembunyi_mini a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}
#sharetersembunyi_mini .flyout {
    background: none repeat scroll 0 0 #AAAAAA;
    height: 113px;
    left: 40px;
    position: relative;
    top: -4px;
    width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}
#sharetersembunyi_mini .flyout ul {
background:url(&quot;http://www.bloggermint.com/demos/mintshare/images/bkg-btn-grey.gif&quot;) repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute;
left:-1000px;
top:-27px;
width:310px;
height:30px;
border:1px solid #888;
border-left:0;
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}
#sharetersembunyi_mini:hover .flyout ul{
left:50px;
}
#sharetersembunyi_mini .flyout ul li {
float: left;
}
#sharetersembunyi_mini .flyout ul li a{
}
#sharetersembunyi_mini .flyout ul a img {
}
#sharetersembunyi_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#sharetersembunyi_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#sharetersembunyi_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#sharetersembunyi_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}
#sharetersembunyi_mini .flyout ul li.drop-li:hover &gt; a img {opacity:0.5; filter: alpha(opacity=50);}
#sharetersembunyi_mini .flyout ul li.drop-li:hover &gt; a b {opacity:1; filter: alpha(opacity=100);}
/* For IE6 */
#sharetersembunyi_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#sharetersembunyi_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}
/* Get Sharetersembunyi */
#sharetersembunyi_mini .get_sharetersembunyi {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}
</style>
<!-- Sharetersembunyi Mini -->
<div id=sharetersembunyi_mini>
 <a class=sharetext><b>Share This</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
  <div class=flyout>
   <ul class=icons>
<!-- AddThis Button BEGIN -->
<div class=addthis_toolbox addthis_default_style addthis_32x32_style>
<a class=addthis_button_preferred_1/>
<a class=addthis_button_preferred_2/>
<a class=addthis_button_preferred_7/>
<a class=addthis_button_preferred_8/>
<a class=addthis_button_preferred_9/>
<a class=addthis_button_preferred_10/>
<a class=addthis_button_preferred_3/>
<a class=addthis_button_compact/>
<a href="http://zamal-tkj.blogspot.com/2012/02/cara-membuat-tombol-share-tersebunyi.html" title=" HOW TO MAKE THIS"> [i] </a>
</div>
<script src=http://s7.addthis.com/js/250/addthis_widget.js type=text/javascript/>
<!-- AddThis Button END -->
   </ul>
  </div>
</div>
<!-- Sharetersembunyi Mini End-->
 </b:if>
</b:if>

6. Klik Simpan Template
selesai....

Sekian dari saya Assalamualaikum wr wb

Go to link Download