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 Gambar Di Blog Membesar Ketika Di Sorot Menggunakan JavaScript

Assalamualaikum wr.wb para pembaca sekalian, pada kesempatan kali ini saya akan membagikan cara tentang cara membuat gambar yang ada pada blog kita membesar tetapi tanpa menghalangi tulisan yang sedang di baca oleh si pembaca, jadi mereka tetap bisa enjoy baca artikel blog kita dan juga tanpa membuat blog kita terlalu berat... kalo contohnya sudah ada di samping :]...
nah cara membuatnya mudah, cukup COPAS kode berikut di postingan anda atau di tempat lain

<script src="http://zamalsblog.googlecode.com/files/Zoom%20Image.js" type="text/javascript"></script>
<img border="0" class="expando" height="90" src="ISI DENGAN URL GAMBAR YANG KAMU INGINKAN" width="130" />

keterangan:
biru = ukuran tinggi gambar, bisa di ganti sesuai selera
Merah = Ganti dengan link gambar yang akan kalian buat zoom
Kuning = ukuran lebar gambar, bisa di ganti sesuai selera

lalu simpan
selesai....

ya mungkin sekian dari saya assalamualaikum wr. wb dan

Go to link Download