Headlines News :
Home » » 1 | Cara Membuat Widget MintShare Sosial Share Button Layout

1 | Cara Membuat Widget MintShare Sosial Share Button Layout

Written By Johannes Nababan on Monday, June 18, 2012 | 11:00 AM

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
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

banner ads banner ads

 
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