Tuesday, January 30, 2018

Cara Membuat Share Button Keren Dibawah Artikel

Cara Membuat Share Button Keren Dibawah Artikel

Tags

Share Button Keren Dibawah Artikel
Share Button

Ketemu lagi sobat blogger, tidak bosan-bosanya saya membagikan kembali tips yang sudah saya coba aplikasikan dan saya rasa itu bermanfaat. Supaya sobat blogger juga bisa menikmatinya. Kode-kode html, javascript dan CSS yang di peroleh dari berbagai sumber sebagai dokumentasi bagi saya pribadi dan semoga juga bermanfaat buat pembaca sekalian.

Masih seputar redesign template kali ini saya akan membagikan cara membuat share button keren di bawah posting artikel. Share button sendiri berfungsi untuk mempermudah penggunjung menshare ke media sosial artikel yang telah kita posting. Hampir di setiap website dan blog menggunakan share button. Bentuk tampilanyapun tentu berbeda-beda tergantung dari jenis template yang di gunakan.

Jika sobat merasa share button dari template sobat kurang menarik ada baiknya untuk mencoba tips berikut ini. Untuk penampakanya sobat bisa lihat gambar di atas atau bisa juga lihat share button yang sedang saya gunakan. Share button ini juga menggunakan tombol share whatsapp jadi saya rasa akan sangat berguna. Baiklah tanpa panjang lebar lagi mari kita menuju ke topik pembahasan cara memasangnya.

Langkah pertama yang harus sobat lakukan adalah buka dashboard blog sobat. Kemudian menuju ke thema dan edit HTML. Copy kode CSS di bawah ini dan letakan tepat di atas
]]></b:skin>

/* share button keren */
.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: 17px;
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 span {
    display: none;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{color:#fff;background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{color:#fff;background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{color:#fff;background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{color:#fff;background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{color:#fff;background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art .wat-art{color:#fff;background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}

@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
}
.rancax{display:block;position:relative;padding:22px 0 0 0;margin:0 10px;text-align:center;border-top:1px solid rgba(0,0,0,0.25)}

Langkah selanjutnya copy kode HTML di bawah ini dan letakan di bawah kode
<div class='post-footer'>
pada template sobat.

<div class='rancax'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
 
          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'> 
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>

<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>

<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); 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='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  

<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>

<whatsapp expr:href='data:post.url' expr:text='data:post.title'/>
<a class='wat-art' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>

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

Perlu di ingat share button ini menggunakan font awesome. Jadi jika pada template sobat belum ada font awesome silahkan di pasang dulu. Langkah selanjutnya simpan template sobat dan lihat hasilnya. Sampai di sini seharusnya sobat sudah berhasil memasang share button keren pada blog sobat. Jika masih ragu silahkan tanyakan pada kolom komentar.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon