Cara membuat Share button Facebook, Twitter dan G+ Full CSS Responsive

Cara membuat Share button Facebook, Twitter dan G+ Full CSS  Responsive - Selamat malam sahabat, di kesempatan kali ini saya Zakaria Adhitri akan memberikan sebuah tutorial bagaimana Cara Membuat Box Comment, Facebook, Twitter, Google Plus dan Tanggal pada blog khususnya blogger.  Box ini diambil dari template baru nya mas sugeng yaitu Simple Faster yang sudah responsive. Box ini jika di sentuh akan mengembang (pada :hover) dan otomatis melacak tanpa ada yang harus diganti lagi. Berikut tutorial nya:

1. Masuk ke Blogger >> Template >> Edit HTML.

2. Masukkan kode CSS berikut tepat diatas Tag pemuka ]]></b:skin>

.box {
text-align:center;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.box2 {
position:relative;
z-index:4;
border-radius:17px;
font-size:1.8em;
font-weight:bold;
background:#00CED1;
border:2px solid #00FFFF;
float:left;
line-height:34px;
height:34px;
width:34px;
padding:0px;
text-shadow:1px 1px #ccc;
}
.komentar {
width:auto;
min-width:34px;
max-width:80px;
}
.jam{
background:#00CED1 url(http://2.bp.blogspot.com/-6f3YMV7Kv-U/UUxBe6vEd9I/AAAAAAAAAFI/kCdm0LdV7Xo/s1600/jam.png) no-repeat 7px 7px;
}
.box a {
color:#333;
}
a.au:hover {
color:green;
}
a.fb:hover {
color:#3B5998;
}
a.tw:hover {
color:#1BB2E9;
}
a.gp:hover {
color:#CF4332;
}
span.plus {
position:relative;
top:-7px;
font-weight:normal;
font-size:13px;
}
span.google {
position:relative;
top:-3px;
font-family:Alegrian;
}
.box3 {
position:relative;
left:-17px;
box-shadow:inset 0px 0px 13px #ddd;
-moz-box-shadow:inset 0px 0px 13px #ddd;
-webkit-box-shadow:inset 0px 0px 13px #ddd;
-webkit-transition:margin 0.6s linear,width 0.3s linear;
-moz-transition:margin 0.6s linear,width 0.3s linear;
-o-transition:margin 0.6s linear,width 0.3s linear;
transition:margin 0.6s linear,width 0.3s linear;
float:left;
background:#00FFFF;
border-radius:0 17px 17px 0;
border:1px solid #ccc;
width:0px;
height:34px;
line-height:34px;
overflow:hidden;
margin:0 8px 0 0px;
}
.box3 span {
margin:0px;
}
.box2:hover {
border:1px solid #aaa;
}
.box:hover .box3 {
margin:0 -7px 0 0;
width:100px;
}
.box:hover .box3.panjang {
margin:0 -7px 0 0;
width:150px;
}

3. Letakan kode pemanggil berikut tepat dibawah Tag <data:post.body/>

<br/><br/>
<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='box'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><div class='box2 komentar'><b:if cond='data:post.numComments'><data:post.numComments/></b:if></div><div class='box3'><span>Komentar</span></div></a></b:if></div></b:if>

<div class='box'><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><div class='box2'>f</div><div class='box3'><span>Share</span></div></a></div>

<div class='box'><a class='tw' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=blogmassugeng&amp;lang=id&quot;' rel='nofollow' target='_blank'><div class='box2'>t</div><div class='box3'><span>Tweet</span></div></a></div>

<div class='box'><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><div class='box2'><span class='google'>g</span><span class='plus'>+</span></div><div class='box3'><span>Share</span></div></a></div>

<div class='box'><a class='au' expr:href='data:post.authorProfileUrl' target='_blank'><div class='box2'>?</div><div class='box3 panjang'><span class='vcard'><span class='fn'><data:post.author/></span></span></div></a></div>

<div class='box'><a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><div class='box2 jam'/><div class='box3'><span><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span></div></a></div><br/><br/>

4. Simpan template anda.

Sekian dari saya,,

Thanks God!