Cara Memasang Widget Share Button di Postingan


Share button didalam postingan

Cara Memasang Widget Share Button di Postingan - Hari ini saya akan memberikan tips cara memasang share button pada postingan artikel. Sebelum itu apakah fungsi dari share button? Seberapa pentingkah share button itu?

Fungsi dari share button adalah memberikan kelangsungan tak terbatas dari sebuah artikel itu. Maksudnya; dengan adanya share button memungkinkan pengunjung untuk berbagi artikel ke socialmedianya. Hal ini membuat artikel anda mendapatkan traffic visitor dari pengunjung lain dengan cara cuma-cuma(gratis).

Share dalam dunia social media sangat powerfull dibandingakan cara yang lain. Share tidak melakukan paksaan namun share dari keinginan pengunjung untuk berbagi artikel yang ia temukan dan tentu sangat bermanfaat. So, buatlah artikel yang bermanfaat agar artikel anda memperoleh banyak share.

Pentingkah?
Tentu dong!dari ulasan fungsi dari share button tersebut, maka memasang share button dipostingan sangatlah penting untuk tujuan kelangsungan kualitas konten dan website itu sendiri.

Rumus: Banyak share = banyak traffic :)

Akumulasi share ini sangat fantastik jika artikel anda benar-benar bermanfaat dan mendapat respon positif. Akibat share yang berkelanjutan maka artikel anda akan menjadi viral. Dan apa akibatnya jika sudah viral? Ya..jawab sendiri ya sob. Hehe..

So pastikan dan segera pasang social share jika blog template anda belum memiliki fasilitas social share..

Cara Memasang Widget Share Button di Postingan

Sebelum menerapkan share button ini ada baiknya di template sobat sudah terdapat link fontawesome namun jika belum silahkan anda pasang didalam template, letakan kode link sebelum tag penutup </head>.



<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

“Font Awesome” adalah kumpulan icon yang telah dibuat sedemikian rupa, dan menggunakan system “Font Icon” yang memungkinkan kita untuk merubah warna dan ukuran font dengan menggunakan CSS tanpa takut Icon menjadi Pecah-pecah dan tantunya lebih ringan daripada Image Icon.

Bagi seorang Blogger terkadang untuk mempercantik tampilan sebuah tampilan web membutuhkan pemanis berupa icon. Dengan adanya icon-icon akan membuat visualisasi dari sebuah web menjadi tampak lebih segar dan tentunya lebih indah. Namun masalahnya adalah, membuat icon itu bukan sebuah hal yang gampang. Diperlukan skill khusus untuk mendesign icon. itulah fungsi dari Font Awesome.

NB: Mudah-mudahan anda tidak bosan jika saya mengatakan di setiap postingan yang menyangkut editing template maka diwajibkan untuk membackup template  terlebih dahulu. Panduan backup template anda di link ini. Klik

1. Buka blogger anda, kemudian klik template(theme) dan buka EDIT HTML kemudian cari kode ]]></b:skin> atau </style> kemudian pastekan kode dibawah ini tepat diatasnya. Anda boleh pilih salah satu letak penempatannya ya. Jangan meletakan kode dibawah di masing-masing lokasi tersebut.



/* CSS Tooltip */
.maskobus-tooltip {position:relative;display:inline-block;}
.maskobus-tooltip:before, .maskobus-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.maskobus-tooltip:hover:before, .maskobus-tooltip:hover:after {opacity:1;}
.maskobus-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.maskobus-tooltip:after {content:attr(data-maskobus-tooltip)!important;background:#494158;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.maskobus-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.maskobus-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}
/* CSS Share Button */
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .share-post ul {padding:0;}
.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}
@media only screen and (max-width:640px){
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}}
@media screen and (max-width:480px) {
.share-post li{width:100%}}


2. Selanjutnya tambahkan kode ini tepat di atas </article>



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-post'>
              <ul>
                <li><a class='twitter maskobus-tooltip maskobus-tooltip-top' data-maskobus-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook maskobus-tooltip maskobus-tooltip-top' data-maskobus-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus maskobus-tooltip maskobus-tooltip-top' data-maskobus-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr maskobus-tooltip maskobus-tooltip-top' data-maskobus-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest maskobus-tooltip maskobus-tooltip-top' data-maskobus-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
<div style='clear:both'/>
</b:if>

3. Silahkan simpan template anda dan lihat hasilnya :)

Social sharing

Semoga artikel ini bermanfaat untuk anda...

0 Response to "Cara Memasang Widget Share Button di Postingan"

Post a Comment

Ditunggu komentarnya ya? Semoga sajian dari situs ini bermanfaat dan bisa dishare ke lainnya :)