Headlines News :

Latest Post

Maaf

Written By Johannes Nababan on Tuesday, June 4, 2013 | 11:26 AM

Maaf, untuk waktu yang lama saya vakum dalam aktivitas Blogging :)

Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger

Written By Johannes Nababan on Monday, June 18, 2012 | 1:06 PM

Demo Image - Before
Jika sebelumnya saya memposting tentang Cara Membuat Widget MintShare Sosial Share Button Layout  Versi 1, 2, 3, 4, dan 5. Saya akan memposting lagi tentang Widget Label Cloud ala Wordpress.

Demo Image - After
Bagi para blogger yang menginginkan blognya terlihat profesional, ada baiknya mengubah tampilan Widget Label Defaultnya menjadi Widget Label Cloud ala Wordpress, disamping tampilannya cantik dan terlihat Profesional, Widget Label Cloud memiliki kelebihan, yaitu tidak menggunakan kode-kode javascript dan Jquery yang membuat loading blog kita lambat, namun menggunakan kode-kode CSS yang loadingnya ringan. Pada kasus kali ini, kita hanya sedikit mengutak-atik kode widget label default pada template blog kita dan sedikit menambahkan kode-kode CSS yang ringan.





Baiklah langsung saja saya akan jelaskan tentang Cara Membuat Widget Label Cloud ala Wordpress untuk Blogger di bawah ini:
 
»Cara Pemasangan« 
 
Sebelum memasang Widget ini, anda harus terlebih dahulu memasang WIdget Label Default dahulu. Sesuaikan dengan gambar berikut :
 
 
http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/599200_323998744349610_156645286_n.jpg
 
  • Login account blogger kamu
  • Pilih template
  • Klik edit HTML
  • Centang Expand Template WidgetCarilah kode
  • Carilah kode ]]></b:skin>
  • Setelah ketemu, pastekan kode CSS di bawah ini tepat diatas kode ]]></b:skin> 
/* -- Labels -- */
.label-size {line-height: 1.2;float: left;font:normal normal 13px Cuprum;}
.label-size a {-khtml-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background: #aaa;border: none;border-radius: 3px;color: #fff;text-shadow:0 -1px 1px rgba(0,0,0,0.25);float: left;margin: 0 4px 4px 0;padding: 5px 6px;}
.label-size a:hover {background: #ffcb0f;}-
.label-size span {float: right;font-size: 9px;margin: 0 0 4px;}
  • Save Template

5 | Cara Membuat Widget MintShare Sosial Share Button Layout

Sekarang kita akan posting kembali tentang widget. Widget kali ini adalah Versi 5 dari Cara Membuat Widget MintShare Sosial Share Button Layout. Widget Versi ke 5 ini adakah Versi terakhir dari Widget MintShare Sosial Share Button Layout yang ada. Sebelumnya saya juga sudah memposting tentang Versi 1, Versi 2, Versi 3, Versi 4. Postingan kali ini saya tidak menjelaskannya lagi karena saya sudah menjelaskannya di Versi 1. Cara pemasangan widget ini agak berbeda karena langkah berikutnya tidak meletakkan nya melalui Edit HTML melainkan di Add Gadget yang berada di Tata Letak. Untuk demonya bisa langsung teman-teman lihat disini

»Cara Pemasangan«

  • Masuk ke Blogger
  • Pilih Template, kemudian lanjutkan
  • Centang Expand Widget Template
  • Lalu cari kode ]]></b:skin>
  • Setelah ketemu, letakkan kode CSS berikut ini diatas kode ]]></b:skin>:
/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_ft_c, #mintshare_ft_c ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetAElBmy4UuxPNYimgSQv1jeM-zeROLkuT6b9420XN8MIPvNKDgoJ1SYTwc5Wa5DKCre8PvvNaVv0bRzsCkoHgSaBTVweBTy4YNGzK5ixlDrkgLJfN4pYZEovve_yU6exYclKpKrjt5nL/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_ft_c {width:100px; height:30px; border:1px solid #888; position:relative; z-index:100; margin-left:70px;padding: 0 15px;
-o-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
position:fixed;
top:0;
z-index:1001;
}

#mintshare_ft_c div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_ft_c div.mintshare-wrap a.top-a {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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9xb9wYQUrSBRMAe2F277W0hg69lfuXcbhl9EKjiSaRcjQpcMQ4Sysnx7zuBd0Xaf9ZZNOerp7ffp0kpvpx_PlHGMNCAi_2MjOeyJiCKEgWsiWscoKszPt4jZ71X002KjjCEGvQjlj13Q/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_ft_c div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}

#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top:10px;
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 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:40px; height:45px; float:left; z-index:100; margin-left:6px;}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons 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);margin-right:5px;
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;
}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; height:60px; padding-top:20px; 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;
}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout {height:522px;}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout:hover {height:522px;}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}


/* for IE6 */
#mintshare_ft_c div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_ft_c div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_ft_c div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}

#mintshare_ft_c table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}

/* Misc */

#mintshare_ft_c .get_mintshare {
font-size:10px;
margin-left:3px;
}
  • Selanjutnya masuk ke Tata Letak
  • Lalu Add Gadget
  • Copy-paste kode berikut ini :
<!-- MintShare Compact Float Top -->
<div id="mintshare_ft_c">
                <div class="mintshare-wrap"><a class="top-a">Share This<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <div class="flyout">
                                                <ul class="icons">
<li class="drop-li"><a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeJAhpQcM4t2my1IPdUhbG6MITetw2MF1pe0Q5DEWTUMTMgkMmiFYFXAoz_IHMSdHmVdQtD0TlC9DHZFaPO36tWUEGD8InYCO1Q2P2YkuLG7mFMZaDVfFZ9apEf8fH1bcmEYKVHphBjA6/s1600/facebook_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5kq4iHuU1ikt5CyjR8GQ1H8gSgjJap558eySrfRkqFrwEjf9D6pVA8TRxCx5jucAth5xy22CNE_3wS7JB7RFMeb7pLiadanh5C73k80jXumLXsQiu8sCkYP12JlzQrDLSNQ3o1tgJlJYg/s1600/twitter_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphl6iNLnZeclqbSALmGikJ3MFgPmn_ku6ZB63u6pHHpxRjn87PDSUtUE8WYfUVw13XQoKnrilbdZTH-xLsPcWPjYMrru2zrBcpZryrXQWhj3P5pvHQBpIWCBRzPTS1qn8aiFtB3ct8dYA/s1600/delicious_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXmRmFyELdmj719VUmj_7Z7YrgHXXhaF6MqMCMsXAOXLX3qeuw_885w6Xeygs_MDx8_WIHuZjnIM8bohZH4ux4g1AruKK6Dg5kR1YFZJTrRQH16kWt4OgxybMjWvedACynbqQvjIJINcW/s1600/stumbleupon_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAspixiEDMcUXf_qWnILKSdmuefQh43hBHIc9E6AbDqJ1WbRmR3f4-n6aQhgifWPN0MoKKSn0Tbiwtzumpmpkh3vr1kNWd5ZQV2JxyQkfRlTm7TmiKhYxwikpW_xx782ZVqN_hPOtVHqnL/s1600/digg_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw47wx8fzYGaFWBtoHKU0oGGGZ5JCW_h9JAbajvMR66QqmlE7zY4jzaU-y_3YtzE_D2GutOuAhNCEsdfUyZFDUJ_XD-DJcvM1uocAv16iTyf49HaOPTbATdMNvI_dz0EDQ6A4mgL8Zbkz9/s1600/technorati_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqB62IcbYqHSLPHVXdGb6FG3JvDjzK3leEPv5_MKWV6um-4YFFmhA9j2pyi64thdBN3RXKritwc_l8NLQcF-VKVbZefB4c4u2yxoYgaqtkyI_WzLiqqYwFyNI0iBVNcrGWBT2FYobv0a2/s1600/reddit_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhig1kTRLVj671HNwo149x6gNLka-jWNs8GL_gz8yI2b2NxSZnyQ4vs1rDXVb8L7NrqRZ4Q9WyWorO54tEwWTC4XJx8wvAIaOhm1PON85WXgX7uU55cUHCY9bHssJKn2yU5PoqIHU15jre0/s1600/yahoo_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>
                                                </ul>
                                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </div>
</div>
<!-- MintShare Compact Float Top End-->
  • Lalu Save Template

4 | Cara Membuat Widget MintShare Sosial Share Button Layout

Sekarang kita akan posting kembali tentang widget. Widget kali ini adalah Versi 4 dari Cara Membuat Widget MintShare Sosial Share Button Layout. Sebelumnya saya juga sudah memposting tentang Versi 1, Versi 2, Versi 3. Postingan kali ini saya tidak menjelaskannya lagi karena saya sudah menjelaskannya di Versi 1. Cara pemasangan widget ini agak berbeda karena langkah berikutnya tidak meletakkan nya melalui Edit HTML melainkan di Add Gadget yang berada di Tata Letak. Untuk demonya bisa langsung teman-teman lihat disini.


»Cara Pemasangan«
  • Masuk ke Blogger
  • Pilih Template, kemudian lanjutkan
  • Centang Expand Widget Template
  • Lalu cari kode ]]></b:skin>
  • Setelah ketemu, letakkan kode CSS berikut ini diatas kode ]]></b:skin>:
/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the footer links intact which provides
credit to its author.
=================================================================== */

#mintshare_ft, #mintshare_ft ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetAElBmy4UuxPNYimgSQv1jeM-zeROLkuT6b9420XN8MIPvNKDgoJ1SYTwc5Wa5DKCre8PvvNaVv0bRzsCkoHgSaBTVweBTy4YNGzK5ixlDrkgLJfN4pYZEovve_yU6exYclKpKrjt5nL/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_ft {width:100px; height:30px; border:1px solid #888; position:fixed; z-index:1001; top:0; margin-left:70px;padding: 0 5px;
-o-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#mintshare_ft div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_ft div.mintshare-wrap a.top-a {margin-left: 5px;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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9xb9wYQUrSBRMAe2F277W0hg69lfuXcbhl9EKjiSaRcjQpcMQ4Sysnx7zuBd0Xaf9ZZNOerp7ffp0kpvpx_PlHGMNCAi_2MjOeyJiCKEgWsiWscoKszPt4jZ71X002KjjCEGvQjlj13Q/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}
#mintshare_ft div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}

#mintshare_ft div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top: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 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:100px; height:65px; float:left; z-index:100;}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_ft div.mintshare-wrap div.flyout ul.icons 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);margin-left:20px;
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;
}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; padding-top:20px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
text-shadow:0 1px #FFF;
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;
}

#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

#mintshare_ft div.mintshare-wrap:hover div.flyout {height:522px;}

#mintshare_ft div.mintshare-wrap:hover div.flyout:hover {height:522px;}

#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}


/* for IE6 */
#mintshare_ft div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_ft div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_ft div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}

#mintshare_ft table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}


/* Misc */

#mintshare_ft .get_mintshare {
font-size:10px;
margin-left:3px; }
  • Selanjutnya masuk ke Tata Letak
  • Lalu Add Gadget
  • Copy-paste kode berikut ini :
<!-- MintShare Classic Float Top -->
<div id="mintshare_ft">
                <div class="mintshare-wrap"><a class="top-a">Share This<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <div class="flyout">
                                                <ul class="icons">
<li class="drop-li"><a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCsYXpehtrhm9LKEJbW5UXP2hvamlrPTt0dDROGKRUuB4enVTC-Azn8W7hzVztugNlerBCUkcAt7p9AiwWhIvh414E2wAea1H1lBFgSgCI0Y2pcuBzyc8-WOpMQWV3obOFZsBwiBiIO7I/s1600/facebook.png"/><b>Share on FB</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LIcdlv11WTTojKveFDlWrQcWL7y_Ymu0ROrBdya9ijns77py9vV3t3b7Ui4HEAOMEbEeI7ibj0Qw2lyRWqIKx3N_nC1MkO5C3l_fJnwotmho7ASilfvhyphenhyphenDQV2w_UejY3lsAOCeLF7Z7u/s1600/twitter.png"/><b>Tweet This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgexDG3_aLXyr2mi2ZJF75k5uoF2dTvdxkLJ7w154MSm0npJPWDFtFLpmLMeCWcEzOfw_8PuMZ2bKue-g18swz9BzxgkO6SmAO8UYqL3t6HT5n8JMcbIfxkQg0tlOAVxjiwFbHpeo6nuyfP/s1600/stumbleupon.png"/><b>Stumble It</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuAiCZQCTR7rhMA87rmLD-MWYNxfEWzudUQD8dyyEc78U9v3w4FHiRlehDO_7m5MPFF0oNlDtO9HD-2VNV3aka5s1Tp3yjYC2M8U9zlCg52LMSLSSUjRQCSv91Brw-U6otLjNmJOj2Ix3s/s1600/digg.png"/><b>Digg This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQFhp-UiEJ-5nkpCIYws0R1WsQyQI1ymF454j0OK2ad6b7h2DsroQ21xyGBMyIFdiU53CMeLSr59NoMpRbRAcJ0vn8FdPP8lGpLc7O4czzGoI_WLwVEvemmy2pa8nUgAWnBkZxV8Dz7zUG/s1600/technorati.png"/><b>Technorati</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJLKN19iWhr1aYukAQvG4zW09kYLJy2NvyQlE7Bbu19HKrx_6woSJ7QJ1PdrkSCtxgWsfs0wp-IGeN4hELfseJNnTC01AGuaKlQ9PaB_yvMv-9l_hVeuXwJ_MGAsNpgXdpkViaLaAgzHM/s1600/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                                               
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>

                                                </ul>
                                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </div>
</div>
<!-- MintShare Classic Float Top End -->

  • Lalu Save Template

3 | Cara Membuat Widget MintShare Sosial Share Button Layout

Sekarang kita akan posting kembali tentang widget. Widget kali ini adalah Versi 3 dari Cara Membuat Widget MintShare Sosial Share Button Layout. Sebelumnya saya juga sudah memposting tentang Versi 1 dan Versi 2. Postingan kali ini saya tidak menjelaskannya lagi karena saya sudah menjelaskannya di Versi 1. Cara pemasangan widget ini agak berbeda karena langkah berikutnya tidak meletakkan nya melalui Edit HTML melainkan di Add Gadget yang berada di Tata Letak. Untuk demonya bisa langsung teman-teman lihat disini.

»Cara Pemasangan«

  • Masuk ke Blogger
  • Pilih Template, kemudian lanjutkan
  • Centang Expand Widget Template
  • Lalu cari kode ]]></b:skin>
  • Setelah ketemu, letakkan kode CSS berikut ini diatas kode ]]></b:skin>:
/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_fl {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7D7xrRr2fX71hDqnJhk9eyOX5NN2dkx0EyUYdfUeGc1HDrE9n_z1ym9R-iGYAzA7wQn_o7gOOhZKZx6uArr9NU6PW9iwfXDpp9C_tPZ0UC5OPrI5IRxpcPrzUDsGAsg7zQDjnZvzFDUz/s1600/btn-grey-hori.gif") repeat-y scroll 0 0 #EAEAEA;
    border: 1px solid #888;
    float: left;
    height: 100px;
    padding: 5px 0;
    position:fixed;
    left:0;
    z-index:1001;
    width: 35px;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    -o-border-radius:0 5px 5px 0;
    border-radius:0 5px 5px 0;
    top:100px;
}

#mintshare_fl a.sharetext {
                display: block;
                float: left;
                line-height: 30px;
                text-decoration: none;
                cursor:pointer; 
}

#mintshare_fl a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}

#mintshare_fl .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;
}

#mintshare_fl .flyout ul {
background:#FFF;
list-style:none;
position:absolute;
left:-570px;
top:-5px;
width:440px;
height:85px;
border:1px solid #888;
border-left:0;
padding-right:10px;
z-index: 500;
padding-left: 5px;
overflow: hidden;
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 5px 5px 0;
-icab-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);

}

#mintshare_fl:hover .flyout ul{
left:-4px;
}

#mintshare_fl .flyout ul li {
float: left;
}

#mintshare_fl .flyout ul li a{

}

#mintshare_fl .flyout ul a img {

}

#mintshare_fl .flyout ul li.drop-li {position:relative; width:65px; height:65px; float:left; z-index:100; margin-top: 3px;}
#mintshare_fl .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}


#mintshare_fl .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);margin-left:20px;
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;
}

#mintshare_fl .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;
}

#mintshare_fl .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_fl .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}


/* For IE6 */

#mintshare_fl .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_fl .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_fl .get_mintshare a img {
border:none;
margin-left: 35px;
margin-top: 7px;
}
  • Selanjutnya masuk ke Tata Letak
  • Lalu Add Gadget
  • Copy-paste kode berikut ini :
<!-- MintShare Classic Float Top -->
<div id="mintshare_ft">
                <div class="mintshare-wrap"><a class="top-a">Share This<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <div class="flyout">
                                                <ul class="icons">
<li class="drop-li"><a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCsYXpehtrhm9LKEJbW5UXP2hvamlrPTt0dDROGKRUuB4enVTC-Azn8W7hzVztugNlerBCUkcAt7p9AiwWhIvh414E2wAea1H1lBFgSgCI0Y2pcuBzyc8-WOpMQWV3obOFZsBwiBiIO7I/s1600/facebook.png"/><b>Share on FB</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LIcdlv11WTTojKveFDlWrQcWL7y_Ymu0ROrBdya9ijns77py9vV3t3b7Ui4HEAOMEbEeI7ibj0Qw2lyRWqIKx3N_nC1MkO5C3l_fJnwotmho7ASilfvhyphenhyphenDQV2w_UejY3lsAOCeLF7Z7u/s1600/twitter.png"/><b>Tweet This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgexDG3_aLXyr2mi2ZJF75k5uoF2dTvdxkLJ7w154MSm0npJPWDFtFLpmLMeCWcEzOfw_8PuMZ2bKue-g18swz9BzxgkO6SmAO8UYqL3t6HT5n8JMcbIfxkQg0tlOAVxjiwFbHpeo6nuyfP/s1600/stumbleupon.png"/><b>Stumble It</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuAiCZQCTR7rhMA87rmLD-MWYNxfEWzudUQD8dyyEc78U9v3w4FHiRlehDO_7m5MPFF0oNlDtO9HD-2VNV3aka5s1Tp3yjYC2M8U9zlCg52LMSLSSUjRQCSv91Brw-U6otLjNmJOj2Ix3s/s1600/digg.png"/><b>Digg This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQFhp-UiEJ-5nkpCIYws0R1WsQyQI1ymF454j0OK2ad6b7h2DsroQ21xyGBMyIFdiU53CMeLSr59NoMpRbRAcJ0vn8FdPP8lGpLc7O4czzGoI_WLwVEvemmy2pa8nUgAWnBkZxV8Dz7zUG/s1600/technorati.png"/><b>Technorati</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJLKN19iWhr1aYukAQvG4zW09kYLJy2NvyQlE7Bbu19HKrx_6woSJ7QJ1PdrkSCtxgWsfs0wp-IGeN4hELfseJNnTC01AGuaKlQ9PaB_yvMv-9l_hVeuXwJ_MGAsNpgXdpkViaLaAgzHM/s1600/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                                               
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>

                                                </ul>
                                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </div>
</div>
<!-- MintShare Classic Float Top End -->
  • Lalu Save Template

2 | Cara Membuat Widget MintShare Sosial Share Button Layout

Sekarang kita akan posting kembali tentang widget. Widget kali ini adalah Versi 2 dari Cara Membuat Widget MintShare Sosial Share Button Layout. Sebelumnya saya juga sudah memposting tentang Versi 1. Postingan kali ini saya tidak menjelaskannya lagi karena saya sudah menjelaskannya di Versi 1. Untuk demonya bisa langsung teman-teman lihat disini


»Cara Pemasangan« 

  • Masuk ke Blogger
  • Pilih Template, kemudian lanjutkan
  • Centang Expand Widget Template
  • Lalu cari kode ]]></b:skin>
  • Setelah ketemu, letakkan kode CSS berikut ini diatas kode ]]></b:skin>:

/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_c, #mintshare_c ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetAElBmy4UuxPNYimgSQv1jeM-zeROLkuT6b9420XN8MIPvNKDgoJ1SYTwc5Wa5DKCre8PvvNaVv0bRzsCkoHgSaBTVweBTy4YNGzK5ixlDrkgLJfN4pYZEovve_yU6exYclKpKrjt5nL/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_c {width:100px; height:30px; border:1px solid #888; position:relative; z-index:100; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_c div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_c div.mintshare-wrap a.top-a {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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9xb9wYQUrSBRMAe2F277W0hg69lfuXcbhl9EKjiSaRcjQpcMQ4Sysnx7zuBd0Xaf9ZZNOerp7ffp0kpvpx_PlHGMNCAi_2MjOeyJiCKEgWsiWscoKszPt4jZ71X002KjjCEGvQjlj13Q/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_c div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}

#mintshare_c div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top:10px;
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 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:40px; height:45px; float:left; z-index:100; margin-left:6px;}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a img {padding:0; background:none; display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);margin-right:5px;
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;
}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; height:60px; padding-top:20px; 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;
}

#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

#mintshare_c div.mintshare-wrap:hover div.flyout {height:522px;}

#mintshare_c div.mintshare-wrap:hover div.flyout:hover {height:522px;}

#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}


/* for IE6 */
#mintshare_c div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_c div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_c div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}

#mintshare_c table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}


/* Misc */

#mintshare_c .get_mintshare {
font-size:10px;
margin-left:3px;
}
  • Selanjutnya cari kode <data:post.body/>, lalu letakkan kode berikut ini dibawah kode <data:post.body/>
<!-- MintShare Compact -->
<div id="mintshare_c">
                <div class="mintshare-wrap"><a class="top-a">Share This<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <div class="flyout">
                                                <ul class="icons">

<li class="drop-li"><a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeJAhpQcM4t2my1IPdUhbG6MITetw2MF1pe0Q5DEWTUMTMgkMmiFYFXAoz_IHMSdHmVdQtD0TlC9DHZFaPO36tWUEGD8InYCO1Q2P2YkuLG7mFMZaDVfFZ9apEf8fH1bcmEYKVHphBjA6/s1600/facebook_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5kq4iHuU1ikt5CyjR8GQ1H8gSgjJap558eySrfRkqFrwEjf9D6pVA8TRxCx5jucAth5xy22CNE_3wS7JB7RFMeb7pLiadanh5C73k80jXumLXsQiu8sCkYP12JlzQrDLSNQ3o1tgJlJYg/s1600/twitter_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphl6iNLnZeclqbSALmGikJ3MFgPmn_ku6ZB63u6pHHpxRjn87PDSUtUE8WYfUVw13XQoKnrilbdZTH-xLsPcWPjYMrru2zrBcpZryrXQWhj3P5pvHQBpIWCBRzPTS1qn8aiFtB3ct8dYA/s1600/delicious_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXmRmFyELdmj719VUmj_7Z7YrgHXXhaF6MqMCMsXAOXLX3qeuw_885w6Xeygs_MDx8_WIHuZjnIM8bohZH4ux4g1AruKK6Dg5kR1YFZJTrRQH16kWt4OgxybMjWvedACynbqQvjIJINcW/s1600/stumbleupon_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAspixiEDMcUXf_qWnILKSdmuefQh43hBHIc9E6AbDqJ1WbRmR3f4-n6aQhgifWPN0MoKKSn0Tbiwtzumpmpkh3vr1kNWd5ZQV2JxyQkfRlTm7TmiKhYxwikpW_xx782ZVqN_hPOtVHqnL/s1600/digg_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw47wx8fzYGaFWBtoHKU0oGGGZ5JCW_h9JAbajvMR66QqmlE7zY4jzaU-y_3YtzE_D2GutOuAhNCEsdfUyZFDUJ_XD-DJcvM1uocAv16iTyf49HaOPTbATdMNvI_dz0EDQ6A4mgL8Zbkz9/s1600/technorati_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqB62IcbYqHSLPHVXdGb6FG3JvDjzK3leEPv5_MKWV6um-4YFFmhA9j2pyi64thdBN3RXKritwc_l8NLQcF-VKVbZefB4c4u2yxoYgaqtkyI_WzLiqqYwFyNI0iBVNcrGWBT2FYobv0a2/s1600/reddit_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhig1kTRLVj671HNwo149x6gNLka-jWNs8GL_gz8yI2b2NxSZnyQ4vs1rDXVb8L7NrqRZ4Q9WyWorO54tEwWTC4XJx8wvAIaOhm1PON85WXgX7uU55cUHCY9bHssJKn2yU5PoqIHU15jre0/s1600/yahoo_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>

                                                </ul>
                                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </div>
</div>
<!-- MintShare Compact End-->

  • Lalu Save Template

1 | Cara Membuat Widget MintShare Sosial Share Button Layout

Pada postingan kali ini, Blog | Joe akan beri widget lagi kepada anda. Postingan sebelumnya adalah  Widget List Tweet of Your Account, tapi kali ini tentang Cara Membuat Widget MintShare Sosial Share Button Layout | 1. Widget sosial share botton ini dikembangakan oleh bloggermint
Dalam pembuatannya, widget ini murni hanya menggunakan CSS dan HTML saja, tanpa JQuery maupun Javascript, sehingga membuat loading widget ini cepat.
Widget ini terdiri dari 5 layout tampilan berbeda, yang semuanya murni hanya menggunakan CSS dan HTML seperti yang saya katakan tadi. Ok langsung saja akan saya berikan tutorialnya. Untuk demonya bisa langsung teman-teman lihat disini.
»Cara Pemasangan«

  • Masuk ke Blogger
  • Pilih Template, kemudian lanjutkan
  • Centang Expand Widget Template
  • Lalu cari kode ]]></b:skin>
  • Setelah ketemu, letakkan kode CSS berikut ini diatas kode ]]></b:skin>:
/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetAElBmy4UuxPNYimgSQv1jeM-zeROLkuT6b9420XN8MIPvNKDgoJ1SYTwc5Wa5DKCre8PvvNaVv0bRzsCkoHgSaBTVweBTy4YNGzK5ixlDrkgLJfN4pYZEovve_yU6exYclKpKrjt5nL/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_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;
}

#mintshare_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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9xb9wYQUrSBRMAe2F277W0hg69lfuXcbhl9EKjiSaRcjQpcMQ4Sysnx7zuBd0Xaf9ZZNOerp7ffp0kpvpx_PlHGMNCAi_2MjOeyJiCKEgWsiWscoKszPt4jZ71X002KjjCEGvQjlj13Q/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_mini a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}


#mintshare_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;
}

#mintshare_mini .flyout ul {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetAElBmy4UuxPNYimgSQv1jeM-zeROLkuT6b9420XN8MIPvNKDgoJ1SYTwc5Wa5DKCre8PvvNaVv0bRzsCkoHgSaBTVweBTy4YNGzK5ixlDrkgLJfN4pYZEovve_yU6exYclKpKrjt5nL/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute;
left:-1000px;
top:-27px;
width:365px;
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;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#mintshare_mini .flyout ul li {
float: left;
}

#mintshare_mini .flyout ul li a{

}

#mintshare_mini .flyout ul a img {

}

#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}


#mintshare_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;
}

#mintshare_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;
}

#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}


/* For IE6 */

#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}
  • Selanjutnya cari kode <data:post.body/>, lalu letakkan kode berikut ini dibawah kode <data:post.body/>
<!-- MintShare Mini -->
<div id='mintshare_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'>
<li class="drop-li"><a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bOxo-JyQdtzmuZqhkXZc3eVPxXbGmBe_HpdhK1vvpOcNvNI32hsGsM7EA3s65megQUW1o7IE93ecR4YOXBShIPiWmnVOfK-qXZl3xcZFGH2grptOEHZVdTh7YNFjmJSUEpEQ33oZbsyr/s1600/facebook_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDSKQPrpvFfF1tM8mCf6QKMm-gCmPlw5QMYuRGUCEV0tgqgzAAYoYYxxeKNoQ-EAOJ5o1TI9qwr2QlearV3Mo-RPPO6izWXhNayJS6-8T69lM3R4TE6CZsNmyjWBnhva4Jvu30MtII9Is/s1600/twitter_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQpo1P2neg3zbTGxNM3KknKj6IJPq_4YuR6MiagnBaCYF2N3zFxnSI4nWP4Z4I_CUraiGiFtWGFGf582sUP2eSZJNfSbOMmcmwrqdkzVILCTPixCDqtrfS38lPrHSS7RCPmCY1s6Q5Wcm/s1600/stumbleupon_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8Xua0qRiYZBMSJrk_9yujrtKLkwje-kDb-5kWuq-E-Ox8Mm8Z0_aE287VmNjs0G8iYMX7jzb6ftF4BMapiogmARWkVVxqNqzsjwTOkkYFjy3dCKQEM_R3lW3Huu2Z5XUWg31i-7eWfF9/s1600/digg_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU_CWXg-sgnwcw0gwGq44H3dH6Hzn-2mqWEP1DpzyWuHKTd7VcV6lfF9y4vWDHGym4P-ULiQFxKIXFJ8tEDbT-kJCLDtUyHj4S_cJ0lT0n4mhK_SWzcIc3UHXKdtFNqKblL-Tm_I18-sx_/s1600/technorati_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHzyUyHS3bFMv-ujhVLnRyrqPZ34aP_CHRKejGHVOJg55Pm6pUFbb-5QluNr6j9ImmU_FQs72cNGH3N79VnhWtXor94W9z2tJmPzsuzuC5vztqMnD96-sBiA2eqGLd1biNO46g7pcdfaQ6/s1600/reddit_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwn3b4LRcHvrqToAA04niUt-KhUYdoov2HE3J6drRnV3T2qu5_YOF43sZJvxRoDiZST7ZPYcFB-xvaqa33L8Catv9MQNakfEAi2tc4X9UePKPTyhTQu5ALi1AY7CNt7I9qUnUyrPHG0e9O/s1600/yahoo_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFAz2EcI33HIqU_rYP21qRmjIN8uAn3YFKz9Pywh9dIowV_Be6-PlQyikTuSn9bJoIBUSnBefjVGEICuvHj7PuvKltW3ea2ifKt1sRbDF4UiBK8JtwS_d2S-mT_tdB1-YACURBqM6Pysq/s1600/delicious_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare!</a></span>

                                                </ul>
                                </div>
</div>
<!-- MintShare Mini End-->
  • Lalu Save Template

Translate

Total Tayangan Laman

Contact Form

Name

Email *

Message *

banner ads banner ads

Followers

 
Support : Blog | Joe | Johny Template
Copyright © 2011. Blog | Joe - All Rights Reserved
Template Created by Johny Template Published by Blog | Joe
Proudly powered by Blogger