Kumpulan Widget Sosial Media Keren Untuk Blogger

Kumpulan Widget Sosial Media Keren Untuk Blogger. Postingan kali ini saya akan share tentang Kumpulan Widget Sosial Media Untuk Blogger. M...

Kumpulan Widget Sosial Media Keren Untuk Blogger. Postingan kali ini saya akan share tentang Kumpulan Widget Sosial Media Untuk Blogger. Menurut saya widget seperti ini sangat penting di terapkan dalam suatu blog atau website. Selain berfungsi untuk memudahkan pengunjung dalam meninjau dan melihat profil si penulis blog, widget ini juga dapat memperindah tampilan blog. Oleh karena itu PAJA TAPUIH memberikan beberapa pilihan widget sosial media berikut ini ;

Cara Menerapkan Widget Sosial Media di Blog

1. Login ke blog sobat

2. Klik Tata letak >> Tambah Gadget >> HTML/JavaScript>>

3. Silahkan Copy kode script di bawah ini dan Atur posisi widget semenarik mungkin

4. Klik simpan

Cool Social Icons with Tooltip Hover Effect
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/TWITTERID class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/GOOGLEPLUSID" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/FANPAGEID" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://YOURBLOG.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="url" target="_blank">Facebook</a></li>
<li><a class="twitter" href="url" target="_blank">Twitter</a></li>
<li><a class="google-p" href="url" target="_blank">Google plus</a></li>
<li><a class="rss" href="url" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 0}
</style>

<li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="http://3.bp.blogspot.com/-9gpsltkgVP0/Ud1ZFcm_cyI/AAAAAAAABuM/0u5oe5uRmuQ/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
float: left;
width: 147px;
height: 147px;
margin: 0 6px 6px 0;
padding: 0 0 0 0;
border-bottom: none;
list-style: none;
}
#abt-social-icons li a {
line-height: 1px;
display: block;
}

#abt-social-icons li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}

#abt-social-icons li a span {
display: none !important;
}
</style>

.socialize-panel > div{display:block;text-align:center}.socialize-panel > div a{display:inline-block;margin:0 3px;color:#fff;width:65px;margin-bottom:15px}.socialize-panel > div a span{display:block;background:#444;color:#fff;margin-bottom:1px;font-size:18px;font-weight:700;padding:6px 0}.socialize-panel > div a:hover span{background:#444;color:#FACE0C}.socialize-panel > div a i{display:block;background:#4667AE;font-size:10px;color:#FFF;padding:4px 0;font-style:normal}.socialize-panel p{font-size:13px;margin:0}

</style>

<div class="socialize-panel">
<div>
<div class="social-like">
<a href='http://www.facebook.com/YOURID' rel='nofollow' target='blank' ><span>2.6k</span><i style="background: #4667AE;">Facebook</i></a>
<a href='http://www.twitter.com/YOURID' rel='nofollow' target='blank'><span>974</span><i style="background: #009BDA;">Twitter</i></a>
<a href='http://plus.google.com/YOURID' rel='nofollow' target='blank' ><span>403</span><i style="background: #DC4B39;">Google+</i></a>
<a href='http://feeds.feedburner.com/YOURID' rel='nofollow' target='blank' ><span>832</span><i style="background: #FFE620;">RSS Feed</i></a>
</div>
</div></div>

Catatan Penting :

Setelah memenentukan tampilan widget seperti apa yang sobat sukai, maka langkah selanjutnya silahkan di ganti tulisan yang sengaja di tandai dengan ID atau URL akun media sosial sobat. Terimakasih telah membaca Kumpulan Widget Sosial Media Keren Untuk Blogger, semoga artikel ini bermanfaat.

Blog iTapuih.com

Header$type=social_icons

Kumpulan Widget Sosial Media Keren Untuk Blogger

Cara Menerapkan Widget Sosial Media di Blog

Label:

COMMENTS

/fa-clock-o/ WEEK TRENDING$type=list

English Updates$quote=Paja Tapuih

RECENT WITH THUMBS$type=blogging$m=0$cate=0$sn=0$rm=0$c=4$va=0

RECENT$type=list-tab$date=0$au=0$c=5

REPLIES$type=list-tab$com=0$c=4$src=recent-comments

RANDOM$type=list-tab$date=0$au=0$c=5$src=random-posts

/fa-fire/ YEAR POPULAR$type=one

Footer Social$type=social_icons

Kumpulan Widget Sosial Media Keren Untuk Blogger

Cara Menerapkan Widget Sosial Media di Blog

Label:

SHARE:

COMMENTS

/fa-clock-o/ WEEK TRENDING$type=list

English Updates$quote=Paja Tapuih

RECENT WITH THUMBS$type=blogging$m=0$cate=0$sn=0$rm=0$c=4$va=0

RECENT$type=list-tab$date=0$au=0$c=5

REPLIES$type=list-tab$com=0$c=4$src=recent-comments

RANDOM$type=list-tab$date=0$au=0$c=5$src=random-posts

/fa-fire/ YEAR POPULAR$type=one

Footer Social$type=social_icons