Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tombol Bagikan / Share Button Dibawah Judul Postingan Template Soho, Contempo

share button
share button

blogger telah merilis beberapa tema template terbaru untuk blogspot, diantaranya contempo, soho, emporio dan notable. set tema blog baru tersebut hadir dalam berbagai warna, dapat disesuaikan, dan dapat diterapkan ke tema blog dengan mudah.

sesuai dengan pernyataan blogger https://blogger.googleblog.com/2017/03/share-your-unique-style-with-new.html. blogger mengklaim bahwa Tema-tema ini tidak hanya dirancang agar terlihat hebat, tapi tema ini juga dirancang untuk bekerja dengan baik dan secara otomatis menyesuaikan dengan layar apa saja, sehingga pembaca akan dapat dengan mudah melihat blog yang berada di komputer, ponsel atau tablet.

walaupun demikian, tema bawaan blogger tersebut belom tentu sepenuhnya sesuai dengan keinginan pengguna blogger sendiri. walaupun tampilan bloger itu sendiri sangat modern sekali, misalkannya saja untuk tombol share contempo yang hanya bulat tiga yang disambung garis, kemudian tombol bagikan yang berupa tulisan share. sangat modern tapi kadang kita sendiri ingin tombol bagikan yang langsung tampak dan terlihat.


Cara membuat dan menempatkan Tombol Bagikan / Share Button Dibawah Judul Postingan Template Soho, Contempo, notable, emporio. berikut share tombol / tombol bagikan whatsapp (WA) linkin, pinterest, facebook (FB) , dan twiiter

1. sign in blogger

2. pilih theme lalu klik edit html
3. cari kode di bawah ini

<!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>

4. tempelkan kode html share button ditambah </div> dibawah kode tersebut, baik itu kode html yang menggunakan font awesome maupun svg misalnya kode seperti berikut :

<div id='sharemooreyi'>
 <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>
  <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>
  <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='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>
  <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>

5. Tempelkan kode berikut di bawah kode html tombol bagikan tersebut

<div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>

sehingga susunan kote html seperti berikut:

<!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>
<div id='sharemooreyi'>
<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>
  <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>
  <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='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>
  <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>
<div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>


  • apabila menggunakan html yang menggunakan font awesome, silahkan pasang kode berikut diatas tag </head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

6. untuk mempercantik tampilan, tambahkan css berikut sebelum kode ]]></b:skin>

/* Share button mooreyi */
#sharemooreyi {
 width: 100%;
   text-align: center;
}
#sharemooreyi a {
    width: 20%;
    height: 40px;
    display: block;
    font-size: 24px;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.15s linear;
    float: left;
}
#sharemooreyi a:hover {
 opacity: 1;
}
#sharemooreyi 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;
}
#sharemooreyi a:first-child {
 border-radius: 3px 0 0 3px;
}
#sharemooreyi a:last-child {
 border-radius: 0 3px 3px 0;
}

7. save theme

  • opsi lain menyimpan kode css diatas, yaitu lewat layout kemudian pilih theme designer, lalu di advancedpilih add css kemudian apply

demikianlah Cara Menyimpan Tombol Bagikan / Share Button Dibawah Judul Postingan Template Soho, Contempo, emporio, notable

semoga bermanfaat

1 komentar untuk "Cara Membuat Tombol Bagikan / Share Button Dibawah Judul Postingan Template Soho, Contempo"

data-ad-format="auto">
data-ad-format="auto">

Berlangganan via Email