Post Game

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

cara Membuat Widget Share Melayang Disebelah Kiri

cara Membuat Widget Share Melayang Disebelah Kiri

Kali ini saya akan memberikan tips Cara Membuat Widget Share Melayang Disebelah Kiri,bagi yang belum tahu apa itu Widget Share?Widget Share adalah tombol untuk membagikan postingan seseorang dalam facebook,twitter,gmail dan lain-lain.
sudah ngerti kan?oke langsung aja kita bahas Cara Membuat Widget Share Melayang Disebelah Kiri.
Dibawah Berikut:

1.Buka dulu Blogger Sobat.
?Cari Bacaan "Tata Letak/Layout".







2.Tambahkan Gadget HTML/JavaScript.








3.Copy Kode Dibawah Berikut Dan Paste Di Gadget Sobat Tadi Lalu Save.

Go to link Download

Cara Membuat Tombol Share Melayang di blogspot

Cara Membuat Tombol Share Melayang di blogspot.
Dengan adanya tombol share melayang dapat mempercantik blog kita juga dapat  memudahkan pengunjung blog untuk membagikan postingan atau isi blog yang kita buat.

Adapun caranya adalah sebagai berikut :



1.Login ke Blog Anda
2.Klik Dasbor
3.Klik Rancangan terus klik elemen laman
4.Klik add gadget/tambah gadget,dan pilih/klik HTML/javascript
5.Masukkan kode HTML( silahkan sobat copy paste kode HTML) di bawah ini :

<!-- Tombol Share Melayang Start-->
<style>
#pageshare {position:fixed; bottom:35%; margin-left:-190px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id=pageshare title="Get this from tips blogbego.blogspot.com">
<div class=sbutton id=fb>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class=sbutton id=rt>
<script src="http://tweetmeme.com/i/scripts/button.js" type=text/javascript></script>
</div>
<div class=sbutton id=gb>
<a class=google-buzz-button data-button-style=normal-count href=http://www.google.com/buzz/post title=post on google buzz>
<script src=http://www.google.com/buzz/api/button.js type=text/javascript></script>
</a></div>
<div class=sbutton id=gplusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class=sbutton id=digg style=margin-left:3px;width:48px>
<script src=http://widgets.digg.com/buttons.js type=text/javascript></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class=sbutton id=su>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<!-- Tombol Share Melayang End --></div>

bottom:35%; margin-left:-190px; 
Apabila menurut anda telah sesuai dengan keadaan template anda barulah di SAVE.

Selesai.

Go to link Download