[TUTORIAL] Not-So-Ordinary Social Media Button For Fun
Friday, August 30, 2013
Jadi kali ini mau bagi-bagi tutorial untuk nambahin widget social media yang nge-hip. Sebenarnya udah banyak yang bikin tutos ini, cuma pengen aja karena kebanyakan yang di share orang kek plain dan gak seru gitu. Ini adalah beberapa social media button terbaik versi gw, you can find it in a whole internet for sure. Just simply follow these steps and configure it on your own.
SOCIAL MEDIA BUTTON LIKE MINE
(coba lihat di bagian bawah tiap postingan gw, habis author box)
1. Login ke Blogger
2. Template, klik Edit HTML
3. CTRL + F buat cari ]]> </ b: skin> terus copy code ini buat ditaruh diatasnya
ul.social_Socmed
{
list-style:none;
display:inline-block;
margin:15px
auto;
}
ul.social_Socmed
li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_Socmed
li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_Socmed
li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px
1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0
0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0
0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0
0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_Socmed
li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtm76hJNywn2DcaCWjGrsA9zLGClti_0pt-YqxPS4kZZhjBMOM9edQSJ57xCVGmwcOulbGsflijz7BmlXZEss6FH81t68ylBgQjAEYZn95Tj9bEZkiDLr6zdVl7rDV9cFVSUiDeydeacPO/s1600/Socmed-facebook-icon.png);
}
ul.social_Socmed
li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYy5TrugD4Pf2X3ku09JQVodWrxmIMOgA2K1_bi7mHoQ1q3g7dsaU0dDZ88VSPnRWKll7rC7Yi6kmGiLbA2PIvXc8ZPP2czSnD25oC5bONi6aFqkklc2ubkwmWCbpnorGiL17yI0-meqH/s1600/Socmed-twitter-icon.png);
}
ul.social_Socmed
li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6yW5NLGKXQvWSR7qXuU4lgIrmGJnfC3QpKHWlQAYoqAELlBZnvoGiNrHoZxGfN0DPvQNtQ2lmj6O_dSvgdsJRa9xXEz0Tsm9PuSyj52YF9EQ2ZsFL5VOIObUBHfG5bchltHoSOWRJIu1P/s1600/Socmed-google-icon.png);
}
ul
li.abpinterest {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImfthC6H6DE6vsWJBLYw587fjFlg4pdeOqjK7GleoWdfTit2llxVOabg4u405MFtvCn2AM23edw4gppU3YUruUQ6pozCTpyoCeqHDDtQTq_O-5ue1ew6_qdLRmm3V2f06e8MO9vUjVeLf/s1600/Socmed-Pinterest-icon.png);
}
ul.social_Socmed
li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAJgBeQruphV_h1p8FsIAQWP95fytGkG2zy-v9hjRVagh3Lo76Epone88hh-i87XfepXHPeoQbG6cfBm6txxZbXKo3NqmDEm4sAFE4HDbBeouPEiY1_orxCKR4ggdSkn9TYkNt26oZp6W-/s1600/Socmed-StumbleUpon-icon.png);
}
ul.social_Socmed
li.abdig
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN68LKlJbH1NsTx3GydQ3DN3VpJ9XCUvvEHIaqEVN_tZuonf0P5S7jZaA1dZoz0NphoSY-3G9A1gbGUC2LnbpVHEd2jmDWixBdqOGvEdFdXAv7zJuLkd_fdplfta4Ick9aqho9nOK-RS2/s1600/Socmed-Digg-icon.png);
}
ul.social_Socmed
li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizbjILP2LFOoTZ11UUvkaci1Gqx385G_HPYBPhl5vBFMaVvO2XbtOKprMi5XcOAHVb-lDaGRSB6L-_zXuvB0ldG9-nRX64oz08KdNZr2wpMtO1UI0iaMVCdpwfDrzpTRIvyX4kXbvovDgH/s1600/Socmed-Linkedin-icon.png);
}
#animation_Socmed:hover
li {
opacity:0.2;
}
#animation_Socmed
li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_Socmed
li a strong {
opacity:0;
-webkit-transition-property:opacity,
top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity,
top;
-moz-transition-duration:300ms;
}
#animation_Socmed
li:hover {
opacity:1;
}
#animation_Socmed
li:hover a strong {
opacity:1;
top:-10px;
}
4. Kalo udah, CTRL + F <data:post.body/> dan taruh kode ini sebelum kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_Socmed' id='animation_Socmed'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
</ul>
</b:if>
FINISH. SAVE TEMPLATE.
Udah? Iya dong. Udah. Simple banget kan? Comment aja kalo mau request tutorial/ada kode error di template.
0 comments