Cara Membuat Share Button di Blogger: Di Bawah Judul, Di Atas Artikel dan Di Bawah Artikel

Cara Membuat Share Button di Blogger: Di Bawah Judul, Di Atas Artikel dan Di Bawah Artikel
Cara Membuat Share Button di Blogger: Di Bawah Judul, Di Atas Artikel dan Di Bawah Artikel - Salah satu sumber traffic yang banyak dari blogger adalah dari media social, makanya sangat penting untuk membuat tombol share media social di blog, pada kesempatan kali ini saya akan membahas Cara Memasang Tombol Share Media Social di Blog, Anda bisa menempatkan tombol share media sosial ini di halaman statis blogger seperti di Bawah Judul, di Atas Postingan, dan di Bawah Postingan.

Social Media adalah salah satu cara untuk mempromosikan blog Anda agar di kenali oleh banyak orang dan mendapatkan banyak pengunjung dari media social itu sendiri. Untuk memanfaatkan social media, seperti Facebook, Twitter, atau Google+, bukan hal yang tidak mungkin jika misalkan blog anda akan mendapatkan lonjakan traffic yang cukup banyak dari media social.

Untuk dapat mengoptimalkan penggunaan social media, Anda juga dapat memfasilitasi pengunjung blog Anda dengan suatu fitur yang dapat mempermudah mereka untuk membagikan artikel ke social media. Kali ini saya akan membagikan tutorialnya untuk pemasangan tombol share media social di bawah judul, di atas artikel dan di bawah artikel kode HTML share media social ini di lengkapi Facebook, Google+, Twitter, Linkedin, Pinterest, dan Whatsapp.

Cara Membuat Share Button di Blogger :


Di Bawah Judul, Di Atas Artikel, Di Bawah Artikel? Mari ikuti langkah-langkah berikut ini dengan benar:

1. Buka blogger > Klik Template buka Edit HTML > Cari kode ]]></b:skin> atau </style> kemudian tambahkan kode CSS di bawah ini tepat diatasnya.

/* Share button */
.share-this-pleaseeeee {
 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-container {
   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%);
}
.facebook {
  background: #3b5998;
}
.twitter {
   background: #55acee;
}
.googleplus {
   background: #dd4b39;
}
.linkedin {
   background: #0077b5;
}
.pinterest {
   background: #cb2027;
}
.whatsapp {
   background: #25d366;
}

2. Selanjutnya tambahkan kode di bawah ini tepat di atas <data:post.body/> untuk di Atas Artikel dan untuk di Bawah Artikel silakan copy di bawah <data:post.body/> biasanya kode tersebut lebih dari dua pilih yang ketiga aja.

<div id='share'>
<!-- facebook -->
<a class='facebook' expr:href='&quot;https://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;https://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;https://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;https://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'/></a> 
<!-- pinterest -->
<a class='pinterest' expr:href='&quot;https://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'/></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>

3. Simpan template dan lihat hasilnya

Untuk Cara Membuat Tombol Share Media Social di Bawah Judul silakan ikuti cara ini:

1. Buka blogger > Klik Template buka Edit HTML > Cari kode di bawah ini.

<h1 class='post-title entry-title' itemprop='name headline'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
                <b:else/>
                  <data:post.title/>
              </b:if>
            </b:if>
          </h1>
</b:if>

2. Selanjutnya tambahkan kode media social tadi tepat di atas kode </b:if> yang terakhir.

3. Klik save template dan lihat hasilnya

Untuk tutorial Cara Membuat Share Button di Blogger: Di Bawah Judul, Di Atas Artikel dan Di Bawah Artikel, sekarang sudah selesai Semoga bermanfaat kawan.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Share Button di Blogger: Di Bawah Judul, Di Atas Artikel dan Di Bawah Artikel"

Posting Komentar

> KOMENTAR SPAM & LINK AKTIF TIDAK AKAN DITAMPILKAN

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel