Widget ini selain sangat Aktraktif, Widget ini murni menggunakan CSS3 yang akan membuat loading cepat, dan ditambah beberapa flatform jejaring sosial yang terkenal, seperti
Twitter,Facebook, Reddit, DLL.
apalagi dengan adanya background ikon yang bewarna hitam, akan menambah sempurna bagi template para Blogger.
Langsung yuk, Nih Caranya :
- Buka atau Login di Blogger anda.
- Kemudian Pilih menu Dropdown --> Template --> Edit HTML.
- Cari Kode ]]></b:skin> agar mudah pencarian CTRL + F
- Copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>.
<style>
ul.bssocial {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.bssocial li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.bssocial li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.bssocial 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.bssocial li.bsfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZ08t6pZ3NiLG4jtwPHPcqyHpI6dKF8C1kSN5sg1VmwJD3NtdisH6ndShQ_ny2UyQhobz78M9aLpK3t1Pv74Agnm4vPEZPTAO-N3acDaU-qB1XKRLN37IUcalU3S_n9Sg-BgPIaaZCfw/s320/BS+Black+facebook.png);
}
ul.bssocial li.bstwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje1wcOf8jaw9AqvWBLyk2-RCG-U_BZQXW6LHZfOTWO2fwYI0Z9jl6PgFgwQy8zxFIfhyphenhyphenChAUjq1dR9YUfwF0wyA0mh79Zknr8wfpI14FgJ54i5sURtwouUYpvKMnJhWBlDv11HKszGf4/s320/BS+Black+twitter.png);
}
ul.bssocial li.bsredit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEaWIMCa1rzxY4FibWCOmfFYniKWPjYQTRLw5feK8_uwjum41btZpYogPOGkDQzr7Ts8ASlg0bJIgeYoQUIxxCXfa0cY35_4j747SQdRfkf_PNINI-VJ6AOrf1pvD8U0k5JW63pm4V7i8/s320/BS+Black+reditt.png);
}
ul li.bstechnorati {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3kY76ZF1EZojj6NKVI8uP0AsOW_7G5ucCjQuXvLXAdqcHYxLR07DzbHlJG3aUCO8n1GasLb82hoA-beqOhvRFXF-pBBU7ilBS6FqB_BVSrykTz4ZoUWYfxLL5ptIJlLc0PZXX3rJUHM/s320/BS+Black+technorati.png);
}
ul.bssocial li.bsstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnTOStcrmKovK_b3JGEdv7H_RbyOylmw-am4D8ajH-TN6OVk9piNw0R2fHvxrz8ekhIfbC8l2148pGHaBzS-rhJzh7ibJzKzn0dZoUx9N50J6Y6foiKeXe4OordJldjsbDIdxJcsXf4U/s320/BS+Black+stumbleupon.png);
}
ul.bssocial li.bsdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5gHn1DIL5M61lIz9gdViN7F_tcKb0OtIApXbGh_aVKOJK91nK6mrNv7vwexkCJvTQGJiaVzAtSK1OUNL4wa7oHhVC3fw0VWttn3YkTzvvW5VKwkP2qpyscXaoXcP-V8GyR8F_ANR2mlk/s320/BS+Black+digg.png);
}
ul.bssocial li.bslinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTE3_UfvGiKpL6PA8UgefeP0RcburxGzPBfPfL-YwWjEXEsqKapL4HI-1GVa7uu5gMkseX_qKAiv0F0mskFh3Fg8zPOkj45rMZNCtr9mquCKpLahaC0D9zQN45v4IQL826DNrXwT_lZQs/s320/BS+Black+linkedin.png);
}
ul.bssocial li.bsdelicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-1PQcoZ0Z5i6nGAWggBggy0QTe6b8TQ1hvTED0SYKDJtcOpwJSidx12qCXQlN2p-gHMerJ3y_3NRG6qxGwpVCiNjmVHIIlOM8qvVC90z8SzC32C0FU2H-Pb7XBXZmXMPKhXtoycbfrE/s320/BS+Black+delicious.png);
}
#bscssanimation:hover li {
opacity:0.2;
}
#bscssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#bscssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#bscssanimation li:hover {
opacity:1;
}
#bscssanimation li:hover a strong {
opacity:1;
top:-10px;
}
</style>
- Kemudian cari lagi kode <data:post.body/>
- Pastekan kode berikut tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'><div style='font-size: 22px;'><b>Anda Menyukai Postingan di Atas? Silahkan di share...</b></div> <ul class='bssocial' id='bscssanimation'> <li class='bsfacebook'> <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='bstwitter'> <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='bsredit'><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a> </li> <li class='bstechnorati'><a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a> </li> <li class='bsstumbleupon'> <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='bsdig'> <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='bslinkedin'> <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 class='bsdelicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a> </li> </li> </ul> </b:if>
- Simpan Template.. Selesai deh :)
SEMOGA BERMANFAAT ..!!!
Judul : Cara Mudah Membuat Variasi Widget Jejaring Sosial Dengan Ikon Warna Hitam
Deskripsi : Widget ini selain sangat Aktraktif, Widget ini murni menggunakan CSS3 yang akan membuat loading cepat, dan ditambah beberapa flatform j...
