Cara Membuat Tombol Sosial Media Share Plus WhatsApp

Tombol share ini sudah tidak asing lagi dikalangan blogger atau situs website lainnya. Hal ini sangat bermanfaat diantaranya adalah agar pengunjung dapat membagikan artikel anda di sosial media. Karena sosial media adalah paling banyak penggunanya sehingga dengan mudah orang mengetahui informasi dari artikel yang kita bagikan ke media sosial. Membagikan artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi, jika blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke sosial media. Namun, membagikan artikel ke sosial media janganlah terlalu sering karena visitor anda bukan organik. Visitor organik adalah visitor yang berasal dari pencarian google, jadi jika visitor anda berasal dari sosial media seperti Facebook itu bukanlah visitor organik. Namun, untuk blog baru disarankan untuk membagikan artikel ke sosial media, karena biasanya blog baru belum terindex oleh di mesin pencarian google sehingga untuk mendapatkan visitor bisa dibilang susah maka dari itu disarankan untuk membagikan artikel ke sosial media.

Screenshoot:

Sesuai judul, disini juga saya telah menambahkan tombol share whatsapp yang mungkin berguna buat anda, dan tombol share ke whatsapp ini sangat jarang digunakan sehingga banyak blogger yang tidak memasangnya. Bila anda suka, anda bisa memasangnya juga. Oke langsung saja ke proses pembuatan.

Cara Membuat Tombol Sosial Media Share Plus WhatsApp

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema/Template.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini dan letakkan diatas kode ]]></b:skin> atau </style>

/* Share button */
.share-postingan{display:inline-block;margin:0;color:#afafaf;text-transform:uppercase;font-size:14px;background:#fff;z-index:1;position:relative;padding:0 10px;font-weight:500}
#share-button{margin:20px auto;overflow:hidden}
#share{width:100%;text-align:center}
#share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;opacity:0.8;transition:opacity 0.15s linear;float:left}
#share a:hover{opacity:1}
#share i{position:relative;top:50%;transform:translateY(-50%)}
.label-line,.label-line-c{position:relative}
.label-line-c{text-align:center;margin-bottom:6px}
.label-line:before,.label-line-c:before{z-index:1;content:"";width:100%;height:1px;background:#dddddd;position:absolute;top:50%;left:0;margin-top:-1px}
.label-info-th a{color:#888888;background:#f8f8f8;display:inline-block;padding:6px 12px;margin:1px 0;font-size:11px;font-weight:500;text-transform:uppercase;border:1px solid #dddddd}
.label-info-th a:hover{border:1px solid #777777;color:#777777}
.facebook{background:#3b5998}
.twitter{background:#55acee}
.googleplus{background:#dd4b39}
.linkedin{background:#0077b5}
.pinterest{background:#cb2027}
.whatsapp{background:#25d366}

2. Temukan lagi kode <data:post.body/> atau <div id='related-post'/>

Catatan :

Kode <data:post.body/> biasanya lebih dari satu, silakan anda pilih yang kedua atau ketiga, untuk kode <div id='related-post'/> anda bisa melatakan kode berikut tepat diatas widget related post pada template anda (jika terpasang).

3. Copy & Paste kode berikut ini dan letakkan dibawah kode <data:post.body/> atau diatas kode <div id='related-post'/>

<div id='share-button'>
<div class='label-line-c'>
<p class='share-postingan'>Share this post</p>
</div>
<div id='share'>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'></i></a>
<a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'></i></a>
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'></i></a>
<a class='whatsapp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a>
</div>
</div>

3. Terakhir, Temukan kode </head>

Catatan :

Buat anda yang sudah dipasang font awesome icon tidak usah dipasang lagi, dan buat anda yang belum dipasang font awesome icon wajib memasang ini. Karena tombol share ini menggunakan Icon dari font awesome icon, contoh: fa-fa-whatsapp

4. Copy & Paste kode berikut ini dan letakkan diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Arimo:400italic,400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
//]]>
</script>

5. Simpan Template!


Demikian, bila anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Tombol Sosial Media Share Plus WhatsApp

Share this post

Related Post