Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi - Hallo sahabat Seputar Teknologi Terkini, Pada Artikel yang anda baca kali ini dengan judul Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel TipsTrik, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi
link : Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi

Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi

Bagi seorang web ataupun blog developer, social sharing button merupakan hal yang wajib dan harus ada di website atau blog kita. Social share button berfungsi untuk membagikan postingan web kita ke berbagai media sosial. Selain fungsinya sebagai salah satu cara untuk mempromosikan website kita secara gratis, social sharing juga sekarang dijadikan pengukur bagus tidaknya SEO website atau blog kita.

Saat ini sudah banyak berkembang plug-in ataupun tutorial yang membahas tentang social share button. Namun ketika kita memakai plug-in dari pihak lain, biasanya mereka menitipkan link-link mereka ke plug-in tersebut. Disamping itu, bentuk plug-in social share button hanya sebatas itu-itu saja dan jarang bervariasi. Hal tersebut menjadikan tampilan website atau blog kita serupa dengan orang lain. Kalau kita mempunyai tampilan yang berbeda dari yang lain, tentunya itu akan menjadi nilai plus tersendiri.

Berikut merupakan tampilan social share button sederhana yang dapat dijadikan referensi buat kalian yang menyukainya. Untuk membuatnya, berikut kode-kode yang diperlukan.
Kode HTML

<div class="share-box">
<div align="center">
<h4>
Share this post <i class="fa fa-smile-o"></i></h4>
<div class="share-btn twitter">
<a class="twitter-share-button" data-count="vertical" data-hashtags="blognusa" data-related="blognusa" href="https://twitter.com/share">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="share-btn google-plus">
<g:plus action="share" annotation="vertical-bubble" lang="en-US">
</g:plus></div>
<div class="share-btn facebook">
<div class="fb-share-button" data-layout="box_count">
</div>
</div>
</div>
</div>

Tempatkan kode html tersebut di posisi dimana anda ingin menampilkan share button. Kemudian, untuk kode CSS nya letakkan di atas ]]></b:skin> , berikut kode-kodenya :

<style type="text/css">
.share-box {
  background-color:#fff;
  font-size:14px;
  padding:10px 0 11px;
  position:relative;
  margin-top:10px;
  color:#444;
  box-shadow:0 0 0px 2px #f5f5f5;
}
a.more {
  font-family:&#39;Oswald&#39;;
  text-transform:uppercase;
  background:#01c0f4;
  font-size:14px;
  color:#fff;
  text-align:center;
  padding:1px 6px;
  margin-top:-6px;
  border-radius:2px;
}
a.more:before {
  content:&quot;\f0fe&quot;;
  font-family:FontAwesome;
  font-style:normal;
  font-weight:normal;
  font-size:18px;
}
a.more:hover {
  background:#eac965;
  color:#fff;
}
.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    padding: 0.2em;
    width: 80px;
    height: 70px;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
}
.share-btn:hover {
  color: #eeeeee;
}
.share-btn:active {
  position: relative;
  top: 2px;
  box-shadow: none;
  color: #e2e2e2;
  outline: none;
}
.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.email       { background: #444444; }
</style>

Share button ini disesuaikan dengan model vertikal dengan penghitung jumlah pengguna yang membagikan konten anda. Kalian dapat mengedit sendiri tampilannya, baik warna background maupun bentuk social share nya dengan mengedit kode html dan css di atas.

Demikianlah Artikel Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi

Sekianlah artikel Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Mudah Membuat Social Share Botton di Blog Hanya 5 Menit Jadi dengan alamat link https://teknologiterkini09.blogspot.com/2018/09/cara-mudah-membuat-social-share-botton.html

Tweet