Skip to main content

Recent Disqus

Click Here On Load Disqus

Cara Membuat Share Button Simple Dengan Icon Facebook, Twitter, Google Plus dan Whatsapp

Cara Membuat Share Button Simple Dengan Icon Facebook, Twitter, Google Plus dan Whatsapp
Konten [Tampil]
Cara Membuat Share Button Simple Dengan Icon Facebook, Twitter, Google Plus dan Whatsapp

www.azid45.web.idCara 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 == &quot;item&quot;'>
<div id='sharex-container'>
<div class='label-line-c'>
<span class='bagikan'>Bagikan :</span>
</div>
<div id='sharex'>
  <!-- facebook -->
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
  <!-- twitter -->
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
  <!-- google plus -->
  <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
  <!-- linkedin
  <a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a> -->
  <!-- pinterest
  <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + 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='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + 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.
Reactions
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 085733513782 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar