Cara Menciptakan Tombol Sosial Media Share Plus Whatsapp

Baca Juga

Tombol share ini sudah tidak gila lagi dikalangan blogger atau situs website lainnya. Hal ini sangat bermanfaat diantaranya yaitu biar pengunjung sanggup membagikan artikel anda di sosial media. Karena sosial media yaitu paling banyak penggunanya sehingga dengan gampang orang mengetahui warta dari artikel yang kita bagikan ke media sosial. Membagikan artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi, jikalau blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke sosial media. Namun, membagikan artikel ke sosial media janganlah terlalu sering alasannya yaitu visitor anda bukan organik. Visitor organik yaitu visitor yang berasal dari pencarian google, jadi jikalau visitor anda berasal dari sosial media menyerupai Facebook itu bukanlah visitor organik. Namun, untuk blog gres disarankan untuk membagikan artikel ke sosial media, alasannya yaitu biasanya blog gres belum terindex oleh di mesin pencarian google sehingga untuk mendapat visitor sanggup dibilang susah maka dari itu disarankan untuk membagikan artikel ke sosial media.

Screenshoot:

Sesuai judul, disini juga aku telah menambahkan tombol share whatsapp yang mungkin mempunyai kegunaan buat anda, dan tombol share ke whatsapp ini sangat jarang dipakai sehingga banyak blogger yang tidak memasangnya. Bila anda suka, anda sanggup memasangnya juga. Oke eksklusif 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 instruksi berikut ini dan letakkan diatas instruksi ]]></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 instruksi <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 sanggup melatakan instruksi berikut sempurna diatas widget related post pada template anda (jika terpasang).

3. Copy & Paste instruksi 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 instruksi </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 memakai Icon dari font awesome icon, contoh: fa-fa-whatsapp

4. Copy & Paste instruksi 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