Membuat Widget Social Share Button di bawah Postingan Blog

Cara Membuat Social Share Button di blog

1. Login di Blogger.com
2. Masuk ke Dashboard > Template
3. Terus click Edit HTML > "CTRL + F"
Kemudian cari kode ]]></b:skin> , jika sudah masukkan kode CSS ini diatas kode tersebut .

ul.social_ntechno {
    list-style:none;
    display:inline-block;
    margin:15px auto;
    }
    ul.social_ntechno li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
    }
    ul.social_ntechno li a {
    display:block;
    width:50px;
    height:50px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
    }
    ul.social_ntechno 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_ntechno li.abfacebook {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bqDpUlhA6RB4pu6-cEJzLzd-WiEBkulMXneJKddPS8g3IBP5CmEVWJ1TsgQi9zWnAZnQ3VyQLV-FNvVQ_jW3x3ggVQfsKb4fDUEAMbAdhamZLAfHPvDTGclihOKX932HnyW6osjwKLrm/s1600/btrix-facebook-icon.png);
    }
    ul.social_ntechno li.abtwitter {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2-I6vfu7SZAylKu5TlCRxXWrSSp8xszn8komUkjhRrfrfAWDrumV6rGp9TTVxaoNSAg2i4dZVhawSfmHmHtfYXNAQ3y41L92h5k7mVVfGnfeBkwAtBWmdyMn-nLRoCbrSG2_oyLETVHf9/s1600/btrix-twitter-icon.png);
    }
    ul.social_ntechno li.abgoogleplus {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSO1iwoLmAq5TqChd2izUvknl6G1n9u6JiBFvPWWseJJz5rS-8djRAAfu6Io9eKE7Kg2rta8Bn2cx_T2Q3ava1251G6moL6bRF-7jnQ1UuzpdWHLfn_lCOG__MJGap972chu9E95pkjpgm/s1600/btrix-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqA9dmxsBigN-g2SwvHiKzNWrewUhv-YA7iT_cR5PbNIMmrpbK8g_tkpA2fMOcV0lrAq7YdNKfskWv9nr_rl2EpE8eLwXAAeU2bQKVnXo2unyWX0g7uEWwlME0BAHafVuE1M21b2ZXz3Mz/s1600/btrix-Pinterest-icon.png);
    }
    ul.social_ntechno li.abstumbleupon {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKnv3FlzFyac7jZy9beDhmjWM3EvsIPDHNdo6PzyQKYPrhRSPHBy7TRDkfBbBO8qUw26bd_TlZuhH6pe0vGZlIZd7L1x6hSn9cIs23UX8MjNaYSGewXbHjehaASLfQn5GTlwo0NZgw1z4E/s1600/btrix-StumbleUpon-icon.png);
    }
    ul.social_ntechno li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHumP92-Q8Ubcd8LzOy-GUqadI4CqRqD41xs0NoQJTE9rHuQehbGJQcgHfXTzr-tMknc9wKFh4v1qNo-smU0SaaEP7JI90IwR6kxG6nC8VJd3FtCrlzcmEhpN6kTUPtDQfzZBCwkJOXva/s1600/btrix-Digg-icon.png);
    }
    ul.social_ntechno li.ablinkedin {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOONhi0abxELse_vVJVtkRtPCJKgwWrdmnp2Fw1ZKDB1A5q6wNoBXtlhymAq-Z2zTlvVNjlMZofdnZVcnrZVXNMPSeslXes_8hVRlUdJZ8txXuYqvhEHCf1oCpPwPVZycEjQKbsJ7rD-q/s1600/btrix-Linkedin-icon.png);
    }
    #animation_ntechno:hover li {
    opacity:0.2;
    }
    #animation_ntechno li {
    -webkit-transition-property:opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    }
    #animation_ntechno li a strong {
    opacity:0;
    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:300ms;
    -moz-transition-property:opacity, top;
    -moz-transition-duration:300ms;
    }
    #animation_ntechno li:hover {
    opacity:1;
    }

#animation_ntechno li:hover a strong {
    opacity:1;
    top:-10px;
    }

4. Kemudian cari kode <data:post.body/> jika kamu menemukan beberapa kode tersebut ( biasanya ada 4 ) pilih yg nomor pertama atau terakhir saja jika kalian sudah memasang read more otomatis .

5. Jika sudah pastekan kode Pemanggilnya dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>
<div style='text-align:center'>
<ul class='social_Ntechno' id='animation_Ntechno'>
<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;' ><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' title='Twitter' 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;' title='G+' 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)());' target='_blank' title='Pinterest'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' title='Stumbleupon' 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' title='Dig' 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="' target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>
</li>
</ul></div>
</b:if>

6. Setelah itu cari kode <head> lalu pastekan kode css berikut dibawah kode <head> :

7. Kemudian Save Template dan lihat hasilnya .

Masukan email Anda untuk Dapatkan Update terbaru dari Newbie Techno.Gratis!

Share this article to your friends

Newbie Techno

Thursday 23 April 2015

Membuat Widget Social Share Button di bawah Postingan Blog

Labels

Blog Archives

Popular Post

Author Info