Cara Membuat Tombol Share di bawah Postingan Blog Dengan Menggunakan Tombol Whatsapp

adscblog

Cara Mudah Memasang Tombol Share di bawah Postingan Blog - Seperti Pada Pembahasan sebelum nya saya Juga pernah Share tentang cara Pemasang Tombol Share di Bawah Postingan Blog dengan Tampilan simple namun Keren

Memang Tombol share yang di simpan baik itu berada di bagian atas Postingan atau pun di bawah Postingan sangatlah penting karena dengan ada nya tombol share tersebut bisa saja Pengujung yang mengujungi blog anda adalah sebagian nya dari Social Media

Tombol Share Keren

Apabila ada pengujung yang men share artikel milik blog anda ke akun media social nya,maka blog anda ada harapan untuk bisa terkenal,karena kekuatan social media untuk blog menjadi terkenal sangatlah dahsyat sekali

Karen Jika setiap artikel yang di anggap berguna oleh para pengujung blog,maka mereka akan berbagi satu sama lain artikel tersebut melalui tombol share ke akun media social mereka,baik itu Facebook,Google+ ataupun Twitter

Cara Membuat Tombol Share dengan Tampilan Keren

Oleh karena itu tidak heran jika di setiap Blog Pasti ada tombol share atau like,karena setiap blogger pasti tau akan guna ada nya tombol share di bagian halam Blog anda.
Selain itu banyak Macam Jenis variasi dari tombol share tersebut

Baca Juga : Cara Membuat tombol Share Floating di Blog

Nah untuk anda Para blogger yang tertarik dengan Tombol share seperti gambar di atas,andapun dapat memasang nya di blog sobat,dengan mengikuti langkah-langkah penerapan nya di bawah ini

• Silahkan anda masuk ke akun Blogger anda
• Lalu kemudian masuk ke Bagian Edit HTML
• Setelah berada di Bagian edit HTML silahkan anda simpan Kode CSS berikut

.share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase;
font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}
#share-container {margin: 20px auto;overflow: hidden;}
#share {margin:0 0 8px;padding:0;overflow:hidden}
#share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;
text-align: center;text-transform: uppercase;}
#share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff;
transition: opacity 0.15s linear;float: left;text-align: center;}
#share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}
.label-line {text-align: center;margin-bottom: 6px;position:relative;}
.label-line:before {z-index: 1;content: "";width: 100%;height: 3px;background: #efefef;position: absolute;

• Setelah itu silahkan ada cari Kode <data:post.body/> agar Mudah anda mencari nya,silahkan anda tekan Ctrl+F Secara bersamaan lalu tulis kode tersebut di kolom yang tersedia
• Setelah anda Menemukan nya,Biasanya kode tersebut lebih dari satu,maka pilih kode yang kedua dan letakan kode HTML berikut di bawah kode tersebut

<div id='share-container'>
<div class='label-line'>
<p class='share-judule'>Bagikan Artikel ini</p>
</div>
<div id='share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'/></a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a>
<a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' style='background:#43d854'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>

• Lalu kemudian Save Template dan Lihat Hasil nya,

Nah itulah Cara membuat Tombol Share di bawah Postingan blog,semoga artikel nya bisa membantu sobat blogger semua.

Sumber : sidobey.com

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 24 April and have 0 komentar