1 | Cara Membuat Widget MintShare Sosial Share Button Layout - Blog

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/>

<div id='mintshare_mini'>

                <a class='sharetext'><b>Share This</b></a>

                                

                                <div class='flyout'>

                                                <ul class='icons'>

<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bOxo-JyQdtzmuZqhkXZc3eVPxXbGmBe_HpdhK1vvpOcNvNI32hsGsM7EA3s65megQUW1o7IE93ecR4YOXBShIPiWmnVOfK-qXZl3xcZFGH2grptOEHZVdTh7YNFjmJSUEpEQ33oZbsyr/s1600/facebook_small.png"/></a></li>

<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + 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"/></a></li>

<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQpo1P2neg3zbTGxNM3KknKj6IJPq_4YuR6MiagnBaCYF2N3zFxnSI4nWP4Z4I_CUraiGiFtWGFGf582sUP2eSZJNfSbOMmcmwrqdkzVILCTPixCDqtrfS38lPrHSS7RCPmCY1s6Q5Wcm/s1600/stumbleupon_small.png"/></a></li>

<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + 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"/></a></li>

<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + 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"/></a></li>

<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + 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"/></a></li>

<li class="drop-li"><a expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwn3b4LRcHvrqToAA04niUt-KhUYdoov2HE3J6drRnV3T2qu5_YOF43sZJvxRoDiZST7ZPYcFB-xvaqa33L8Catv9MQNakfEAi2tc4X9UePKPTyhTQu5ALi1AY7CNt7I9qUnUyrPHG0e9O/s1600/yahoo_small.png"/></a></li>

<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + 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"/></a></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>

Lalu Save Template

Blog | Joe

1 | Cara Membuat Widget MintShare Sosial Share Button Layout

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

0 komentar:

Speak up your mind

Popular Label

Archive

Pages

Fans Page