Membuat Widget Social Share Button di 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/AVvXsEhHH7xZhFmB6IupikH4s6QF3jW0qQXKAEuSjGHa60jxeM8nLpcEOGsM4tU613CBz_cyXkSaPvys3eT4qZgc3YfswTlYZ7hUvnCDiIVdzNLEvNb1vedTZ2jMjpfMA7hgktklJydjrCfBQRu2/s1600/btrix-facebook-icon.png);
    }
    ul.social_ntechno li.abtwitter {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK7Xr2ec7hi_oL5Wxavi6SHUvGzGsfzqOprmfFHVZunliZ0V2x7ME226z_sNW5Tn6tNNuOxSZbXQ7ODDDP3UIqmDkW2mQjED8fMNWg4fD4nLPiv6iOZp28Nbs2jYiA0buB-seyEl9z666e/s1600/btrix-twitter-icon.png);
    }
    ul.social_ntechno li.abgoogleplus {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg_G3DC8F2RvGG2jpMZqe2wipK7HvnYSuDwm4vu7eTkKmu9oB91T52jUSE7tgYpIAF9UZC0uJuz-4aLefLuS5m8W8RpTkS4ky2K7HzqiTAUaT2ij8TmzdwX_oOj-M9BHWAYio75XJ5_JW/s1600/btrix-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvymAoU5gMHhNoMNF4QxfkVVY8aLrZpgQHPtJ1Db1Hnx1zKdlh1Z84AIASqh1sy6lyYKyv5w_iK4QRTZ8yDVkcsskdzPVt95GT211O1expoUDcXe6LksJnCOZsh5568Ug6junouS4u-vTn/s1600/btrix-Pinterest-icon.png);
    }
    ul.social_ntechno li.abstumbleupon {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8htUJ2RflbcZtaoKHImW_HGXc5PjamzYR8VRW-OJdk-u11JxyQ8cgSQoZI8zJKlWrVEZevifqNqyikCJgOrgz85HEGBj_IJO_zz9U8mGROsvd4MRNJ17kmc1IccQ6nB5jeZ7jbwQoP7Mv/s1600/btrix-StumbleUpon-icon.png);
    }
    ul.social_ntechno li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUkkQKlBVVv5RQDPpgoDerSjbgt5blIVxs2zQKcJFGCoccjKh8-m2Xg4f6CM9qbbSLYbjG9Di4DgF60nZ3esrxoydRRhTYxkiZ-YLn7wsCMQoxlKp62cTj_JXRACZUMVcrTXf6OJi_h09k/s1600/btrix-Digg-icon.png);
    }
    ul.social_ntechno li.ablinkedin {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlXeNlfFIJRCwtpElRmcTYm9h_Sc0R6fb6QruHCyZx7o8Xy5n61e95FfmS_3Tew4M3v5JxkuFTpBykA5evEuy2ymBr2AzNt7652qSQ_g7cmAyad-MmVM0ndfg7RTQB8eLfLel8vpONgHw/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 .

Aness Silitonga

Masih muda dan giat belajar dalam hal coding,sangat tertarik dengan dunia internet marketing , kerja keras demi sebuah pencapaian!

1 komentar:

Click here for komentar

Anonymous

admin

7 September 2017 at 14:23 ×

makasih min sudah share...
http://cody.id/produk/pinset/pinset-cody-3-in-1/

Congrats bro Anonymous you got PERTAMAX...! hehehehe...

Aturan Berkomentar :
1. Berkomentarlah dengan Bijak
2. Tanyakan pertanyaan yang sesuai dengan Topic
3. Jangan menyisipkan link aktif
4. Gunakan bahasa yang sopan dan lugas!

Terima Kasih

ConversionConversion EmoticonEmoticon

Thanks for your comment

NewbieTechno