Cara Menambahkan Widget Social Share Elegan Di Blog

Mungkin sudah tidak asing lagi mendengar kata SocialSharing, Yap widget yang satu ini mungkin sudah seharusnnya ada, selain memudahkan pengunjung blog untuk berbagi ke sosialmedia, widget ini juga sangat membantu blog kita agar terlihat seperti blog yang professional.

Kali ini saya bakal membagikan tutorial bagaimana cara membuat/menambahkan css widget Social sharing yang sangat simple,premium dan sangat responsive, jadi widget ini sangat rapih meskipun digunakan dalam browser desktop/ponsel mana saja.

Tapi sebelum melakukan editing pastikan blog kamu sudah ditambahkan Fontawesome. Karena tanpa penambahan alat ini kemungkinan besar beberapa icon widget tidak akan berfungsi. langsung saja kita mulai dari hal yang pertama.

Cat. Silahkan Backup terlebih dahulu template original kamu, biar jika terjadi error/sesuatu lainnya anda bisa mengembalikan template ke sebelumnnya.

2. Masuk Blogger.com - Tema/template - Edit HTML.

3. Jika suda masuk, silahkan tekan CTRL + F lalu cari kode ini ]]></b:skin> jika sudah dapat kode tersebut silahkan masukan kode dibawah ini tepat diatas kode bskin.

.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}

4. Jika sudah, langkah selanjutnnya penambahan kode di HTML. silahkan cari kode ini <data:post.body/> .Dan pastekan kode HTML dibawah ini tepat dibawah post body.

<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'>

<h8 class='share-title'>Share This:</h8>
<div class='share-art'>
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
</div>
</div>

<div style='clear:both'/>
</b:if>

Selesai, Selamat mencoba.

Cat. Jika terjadi kerusakan Dalam editing HTML/CSS kami tidak bertanggung Jawab, Pastikan kamu mem-backup terlebih dahulu template original kamu agar jika terjadi sesuatu, template kamu bisa dikembalikan.