Cara Membuat Share Button Simple Dengan Icon Facebook, Twitter, Google Plus dan Whatsapp
www.azid45.web.id - Cara Membuat Share Button Simple Dengan Icon Facebook, Twitter, Google Plus dan Whatsapp. Assalamualaikum, Wr.Wb, sebelumnya saya pernah share button juga namun tampilannya berbeda dengan yang akan saya share ini. Jika dulu share buttonnya sangat banyak sekali seperti ada Line, Facebook, Twitter, Whatsapp, Google Plus dan masih banyak lagi serta tampilan tersebut dulu lebih elegan dibawah postingan. Tahu template kompi flexsible milik kompiajaib.com? ya, itu dia share button yang pernah saya share. Tampilan share button tersebut memiliki keunggulan yaitu responsive, namun bagi saya share button jika terlalu banyak kalau dilihatnya terlalu rame. Untuk itu saya buat tutorial lagi bagi kalian share button yang lebih simple dan tentunya menu share buttonnya dijamin sering digunakan oleh orang banyak media sosial yang ada di share button kali ini, selin itu share button ini juga tidak kalah elegannya dengan share button yang saya bagikan sebelumnya yaitu memliki tampilan yang kecil dan berbentuk bundar.
Baca Juga: Membuat Share Button Responsive Seperti Template Kompi Flexible
Share button ini saya peroleh dari editing share button dari template Viomagz buatan mas sugeng. Ok, jika anda ingin menginginkan share button ini, bisa mengikuti langkah-langkah berikut;
Langkah Pertama, untuk membuat share button langkah awal yang harus anda lakukan adalah login blogger terlebih dahulu, kemudian klik menu template dan pilih edit HTML. Jika sudah, maka cari </b:template> atau </style> yang terletak diantara kode <head> .... </head>. Untuk mempermudah pencarian anda bisa menggunakan tombol Control+F. Jika sudah ketemu tombol yang dimaksud maka copy kode berikut ini dan pastekan tepat diatas </b:template> atau </style>
.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: 2px;background: #efefef;position: absolute;top: 50%;left: 0;margin-top: -2px;}
.bagikan {float:left;color: #555555;font-size: 12px;font-weight:600;line-height: 38px;margin-right: 8px;}
#sharex-container {margin: 0 auto;overflow: hidden;}
#sharex {width: 100%;text-align: center;}
#sharex a {width: 32px;height: 32px;display: inline-block;font-size: 15px;color: #fff;margin:0 3px 3px 0;transition: opacity 0.15s linear;float: left;line-height:16px;text-align:center;border-radius:18px;}
#sharex a:hover {opacity: 0.8;}
#sharex i {position: relative;top: 50%;transform: translateY(-50%);}
Langkah Kedua, Jika sudah mempastekan kode css diatas, langkah selanjutnya adalah cari script HTML berikut <b:include data='post' name='postQuickEdit'/>. Mungkin dari template satu ketemplate yang lain agak berbeda, untuk memudahkan anda bisa cari dengan Control+F ketik "postQuickEdit", setelah menemukan kode tersebut maka langkah selanjutnya adalah copy kode script HTML dibawah ini dan letakkan tepat dibawah kode <b:include data='post' name='postQuickEdit'/>
<b:if cond='data:blog.pageType == "item"'>
<div id='sharex-container'>
<div class='label-line-c'>
<span class='bagikan'>Bagikan :</span>
</div>
<div id='sharex'>
<!-- facebook -->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<!-- twitter -->
<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<!-- google plus -->
<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<!-- linkedin
<a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a> -->
<!-- pinterest
<a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'></i></a> -->
<a class='whatsapp' data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>
</b:if>
Langkah Terakhir, Jika sudah mempastekan langkah terakhir yang perlu anda lakukan adalah Save Template dan lihat hasilnya. Semoga berhasil.
Untuk lihat Demonya, bisa klik disini.
Demikianlah tutorial Cara Membuat Share Button Simple Dengan Icon Facebook, Twitter, Google Plus dan Whatsapp seperti template Viomagz yang sudah saya redisegn. Semoga artikel ini bermanfaat, Amin. Jika kurang jelas bisa menulis komentar dikolom komentar.
Sekian dan terimakasih.
Keterangan: icon share button ini menggunakan icon font awesome, jika blog anda belum ada scirpt css font awesome maka bisa menambahkannya terlebih dahulu, atau bisa diganti dengan icon SVG yang akan saya share dikemudian hari.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.