Membuat share button efek slide dibawah postingan

Selamat malam sahabat RAB, 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. 

Nah langsung saja kali ya.

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!