Deskripsi :
Cara mudah membuat tombol share sosial media yang bisa mewakili semua halaman web blogspot anda yang nggak pake ribet, 100% toKcer berhasil.
Blogger mana yang tak kenal dengan tombol berbagi ke sosial media ini. Selain membantu dalam menyebarkan halaman web ke berbagai social media serta ke berbagai group whattapps misalnya, share button ini juga memperindah akan tampilan sebuah halaman web. Oleh karena itu setiap pemilik web pastinya tak akan pernah ketinggalan menyertakan tombol berbagi ini pada setiap halaman web-nya.
Terinspirasi ketika ingin memasang tombol share yang mana terkadang kita mencoba-coba bentuk share button mana yang pas cocok dan ringan untuk blog kita, akhirnya saya mencoba untuk otak-atik sendiri dan hasilnya dapat anda lihat seperti gambar di bawah ini. Share button ini sudah aku test dan aku coba terapkan sendiri (tidak copas hehe..) dan tidak terdapat break link di dalamnya.
Dan jika anda tertarik untuk menenpatkannya di halaman blog anda anda bisa ikuti tentang bagaimana cara membuat social share button di bawah ini. Oh ya sobat blogger, perlu diketahui bahwa posisi tombol berbagi sosial media ini saya rancang untuk diletakkan dibawah artikel. Selengkapnya, silahkan ikuti tutorialnya di bawah ini :
Langkah Pertama Membuat Tombol Share Sosial Media (bulat)
Buka menu tema (template) lalu klik edit HTML. Kemudian copy lalu paste tag awesome di bawah ini di bawah tag head pembuka <head> :
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Langkah Kedua Membuat Tombol Share Sosial Media (bulat)
Copy lalu paste css di bawah ini dan letakkan di atas tag head penutup </head> :
#apmshare a {
display: block; float: left;
padding: 12px;
font-size: 15px;
width: 16px;
text-align: center;
text-decoration: none;
margin: 1px;
border-radius: 50%;
}
#apmshare a:hover {
opacity: 0.3;
}
#apmshare a.fa-facebook {
background: #3B5998;
color: white;
}
#apmshare a.fa-twitter {
background: #55ACEE;
color: white;
}
#apmshare a.fa-linkedin {
background: #007bb5;
color: white;
}
#apmshare a.fa-pinterest {
background: #cb2027;
color: white;
}
#apmshare a.fa-tumblr {
background: #2c4762;
color: white;
}
#apmshare a.fa-telegram {
background: #7baaf7;
color: white;
}
#apmshare a.fa-whatsapp {
background: #2af50f;
color: white;
</style>
Langkah Ketiga Membuat Tombol Share Sosial Media (bulat)
Cari tag <data:post.body/> , yang pertama biasanya tombol akan muncul di awal postingan dan yang kedua biasanya akan muncul di akhir postingan. Kemudian copy html di bawah ini lalu paste tepat di bawahnya :
<b:if cond='data:blog.pageType == "item"'>
<div id='apmshare'>
<a aria-label='Facebook' class='fa fa-facebook' expr:href='"https://www.facebook.com/sharer/sharer.php? u=" + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Facebook'/>
<a aria-label='Twitter' class='fa fa-twitter' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Twitter'/>
<a aria-label='LinkedIn' class='fa fa-linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on LinkedIn'/>
<a aria-label='Pinterest' class='fa fa-pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' rel='noopener' target='_blank' title='Share on Pinterest'/>
<a aria-label='Tumblr' class='fa fa-tumblr' expr:href='"http://tumblr.com/share/link?url=" + data:post.canonicalUrl + "&name=" + data:post.title + "&description=" + data:post.snippet' rel='noopener' target='_blank' title='Share on Tumblr'/>
<a aria-label='Telegram' class='fa fa-telegram' expr:href='"https://telegram.me/share/url?text=" + data:post.title + "&url=" + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Telegram'/>
<a aria-label='WhatsApp' class='fa fa-whatsapp' data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on WhatsApp'/>
</div>
<!--close div apmshare-->
<div class='clear'/>
</b:if>
Lantas bagaimana cara membuat share button bentuk kotak? Oke... untuk membuat share button bentuk kotak sangatlah gampang. Anda tinggal menghapus sebagian css (bulat) lalu menggantinya dengan css di bawah ini. Untuk lebih jelasnya, lihat gambar di bawah ini.
#apmshare a {
display: block;
float: left;
padding: 12px;
font-size: 15px;
width: 16px;
text-align: center;
text-decoration: none;
margin: 1px;
}
Done!
Semoga artikel ini bermanfaat, selamat mencoba dan salam sukses. Dan jangan lupa bagikan artike ini.
Share :
Tidak ada komentar:
Posting Komentar