×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Tombol Share Seperti Blog Igniel

Jagoan Redesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Tombol Share Seperti Blog Igniel Share sangat penting untuk blog karena anda bisa mendapatkan visitor dari media sosial selain dari mesin pencarian. Dengan begitu blog anda  bisa mendapatkan pengunjung tetap atau bisa dibilang pengunjung yang berkunjung kembali.

Cara Membuat Tombol Share Seperti Blog Igniel
Tampilan Tombol Share yang dibuat pada blog pun harus juga mudah dipahami oleh pengunjung. 

Tutorial ini dikhususkan untuk pengguna template VioMagz tapi bisa juga digunakan di template lain asal kamu bisa memodifikasi scriptnya.

Cara Membuat Tombol Share Seperti Blog Igniel

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Cari kode #wrapper seperti dibawah ini. 

#wrapper {
background: $(posts.background.color);
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: hidden;
}

ganti kode hidden ke unset sehingga menjadi seperti ini.

#wrapper {
background: $(posts.background.color);
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: unset;
}

4. Selanjutnya kamu cari kode /* Share button */ seperti ini.

/* Share button */
.share-this-pleaseeeee {
 display: inline-block;
 margin: 0;
 color: $(label.color);;
 text-transform: uppercase;
 font-size: 16px;
 background: $(label.bg.color);
 z-index: 1;
 position: relative;
 padding: 0 10px;
 font-weight: bold;
}
#share-container {
   margin: 20px auto 30px;
 overflow: hidden;
}
#share {
 width: 100%;
   text-align: center;
}
#share a {
    width: 25%;
    height: 40px;
    display: block;
    font-size: 24px;
    color: #fff;
    transition: opacity 0.15s linear;
    float: left;
}
#share a:hover {
 opacity: 0.8;
}
#share i {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}
.facebook {
  background: #3b5998;
}
.twitter {
   background: #55acee;
}
.linkedin {
   background: #0077b5;
}
.pinterest {
   background: #cb2027;
}
.whatsapp {
   background: #25d366;
}

kemudian kamu ganti semua kode yang ada di atas dengan kode di bawah.

#share-container {
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
background-color: transparent;
margin-top: 10px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}

5. Setelah itu carilah kode </b:skin> dan letakkan kode di bawah ini tepat di atasnya.

/* Igniel Share by Jagoan Redesign */
.ignielshare{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#fff;color:#fff;padding:10px 0;border-top:7px dotted #ddd;z-index:1;transition:all .3s ease}
.ignielshare.show{position:sticky;position:-webkit-sticky;bottom:0}
.ignielshare svg{width:17px;height:17px;margin:auto;text-align:center}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:0}
.ignielshare svg path{fill:#fff}
.ignielshare .count{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;font-weight:500;color:#7bbefa;font-size:1.5em;margin-right:20px}
.ignielshare .count svg path{fill:#7bbefa}
.ignielshare i{font-style:normal;margin:0 3px;line-height:0}
.ignielshare a{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:100%;color:#fff;padding:7px;border-radius:25px;box-shadow:none;transition:all .3s ease}
.ignielshare a:not(:last-child){margin-right:7px}
.ignielshare a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}
.ignielshare a.facebook{background-color:#3a579a}
.ignielshare a.twitter{background-color:#00abf0}
.ignielshare a.pinterest{background-color:#cd1c1f}
.ignielshare a.linkedin{background-color:#2554BF}
.ignielshare a.tumblr{background-color:#314358}
.ignielshare a.whatsapp{background-color:#4dc247}
.ignielshare a.messenger{background-color:#448aff}
.ignielshare i{display:none}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
@media screen and (max-width:900px){
.ignielshare i{display:block}
.ignielshare .facebook svg,
.ignielshare .pinterest svg,
.ignielshare .tumblr svg{margin:0}
}
@media screen and (max-width:680px){
.ignielshare{justify-content:space-between}
.ignielshare a i{display:none}
.ignielshare a{justify-content:center}
.ignielshare a:not(:last-child){margin-right:5px}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
}
@media screen and (max-width:480px){
.ignielshare a:not(:last-child){margin-right:3px}
.ignielshare .count{margin-right:15px}
}
/* Igniel Share Button Dark Mode */
.Night .ignielshare{background-color:#292e38}

6. Cari kode <div id='share-container'> seperti ini.

<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p>
</div>
<div id='share'>
<!-- 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;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<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'/></a> 
<a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>

kemudian kamu ganti kode di atas dengan kode dibawah ini.

<div id='share-container'>
<div class="ignielshare"> 
<span class="count"> 
<svg viewbox="0 0 24 24">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"></path>
</svg> <i>SHARE</i> </span> 
<a class="facebook" expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick="window.open(this.href,&quot;sharer&quot;,&quot;   toolbar=0,status=0,width=626,height=436&quot;);return false;" rel="nofollow" title="Share to Facebook">
<svg viewbox="0 0 24 24">
<path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path>
</svg><i>Share</i></a> 
<a class="whatsapp" expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' onclick="window.open(encodeURI(this.href),&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;" rel="nofollow" title="Share to WhatsApp">
<svg viewbox="0 0 24 24">
<path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"></path>
</svg></a> 
<a class="messenger" href='fb-messenger://share?link= data:post.url'  rel="nofollow" title="Share to WhatsApp">
<svg viewbox="0 0 24 24">
<path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z"></path>
</svg></a> 
<a class="twitter" expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;" rel="nofollow" title="Share to Twitter">
<svg viewbox="0 0 24 24">
<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path>
</svg></a> 
<a class="pinterest" data-pin-config="beside" expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;" rel="nofollow" title="Share to Pinterest">
<svg viewbox="0 0 24 24">
<path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path>
</svg><i>Pin</i></a> 
<a class="linkedin" expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;" rel="nofollow" title="Share to Linkedin">
<svg viewbox="0 0 24 24">
<path d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z"></path>
</svg></a> 
<a class="tumblr" data-notes="right" expr:href='&quot;https://tumblr.com/share/link?url=&quot; + data:post.canonicalUrl + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;" rel="nofollow" title="Share to Tumblr">
<svg viewbox="0 0 24 24">
<path d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17"></path>
</svg><i><i>Share</i></i></a> 
</div> 
</div>

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Nah, itu adalah tutorial Cara Membuat Tombol Share Seperti Blog Igniel, Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.

Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel