Beranda  ›  Blogger  ›  Css  ›  Tutorial

Cara Membuat Tombol Share Sticky Blogger Versi 1

7 Des 2023 0 Komentar
SusahTidurZz - Kembali lagi bersama saya di artikel yang tentunya keren kali ini aku mau membagikan tutorial Cara Membuat Tombol Share Sticky Blogger Versi 1 tombol share ini merupakan tombol yang bisa melayang dipostingan bawah .

Membuat Tombol Share Sticky Blogger


Untuk icon yang digunakan di tombol ini menggunakan Icon SVG jadi kamu tidak usah khawatir mengenai kecepatan loading blogger kamu karena icon svg ini sangat ringan dan tentu sangat direkomendasikan di blogger kamu menggunakan icon SVG.

Fungsi Membuat Tombol Share Sticky Blogger Versi 1

Tombol share memang begitu penting bagi sebuah website atau blog, kareba hal ini berkaitan dengan trending nya suatu website atau blog tersebut semakin banyak pengunjung yang membagikan artikel maka akan semakin banyak juga pengunjung yang kita dapatkan dari hasil membagikan link artikel ke media sosial ini.

Cara Membuat Tombol Share Sticky Blogger Versi 1

1. Masuk ke Blogger.com
2. Pilih Tema > Edit HTML
3. Silahkan cari kode #wrapper , lalu ubah nilai dari properti overflow dari hiden menjadi unset
4. Maka kodenya akan seperti ini
#wrapper {
 background: $(posts.background.color);
 max-width: 1000px;
 margin: 0 auto;
 padding: 70px 30px 30px;
 overflow: unset;
}
5. Setelah itu cari kode CSS Share Button untuk pengguna Viomagz cari aja kode .share-this-please
6. Jika sudah ketemu hapus kode CSS share tersebut dan ganti dengan CSS share Button dibawah ini.
/* Share button */

.share-this {
    display: inline-block;
    margin: 0;
    color: inherit;
    text-transform: uppercase;
    font-size: 16px;
    color: #000;
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 0 10px;
    font-weight: 700;
    margin-top: 3px
}

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

#share {
    width: 100%;
    text-align: center
}

#share a {
    width: 20%;
    height: 40px;
    display: block;
    font-size: 24px;
    color: #fff;
    transition: opacity .15s linear;
    float: left
}

#share i {
    position: relative;
    top: 8px;
    margin-left: 10px;
    font-style: normal;
    white-space: nowrap;
    color: #009688;
}

.facebook {
    border-color: #3a579a;
    border-top-style: solid;
    border-top-width: 3px
}

.facebook:hover {
    background: #3a579a
}

#share svg {
    width: 24px;
    height: 24px;
    vertical-align: -12px
}

#share a:hover svg path {
    fill: #fff
}

.twitter {
    border-color: #55acee;
    border-top-width: 3px;
    border-top-style: solid
}

.twitter:hover {
    background: #55acee
}

.linkedin {
    background: #0077b5
}

.pinterest {
    border-color: #cb2027;
    border-top-width: 3px;
    border-top-style: solid
}

.pinterest:hover {
    background: #cb2027
}

.whatsapp {
    border-color: #25d366;
    border-top-width: 3px;
    border-top-style: solid
}

.whatsapp:hover {
    background: #25d366
}

.total {
    border-color: #009688;
    border-top-style: solid;
    border-top-width: 3px
}

.total:hover {
    background: #009688
}
7. Selanjutnya cari kode <b:includable id='postsharebutton' var='post'> ini khusus pengguna viomagz, jika kamu menggunakan template lain silahkan cari dan sesuaikan penempatan kodenya.

8. Setelah itu hapus kode HTML share Button bawaan template nya dan ganti dengan yang dibawah ini


<div class='label-line-c'>
<p class='share-this'>Bagikan Artikel ini</p>
</div>
<div id='share-container'>
<div id='share'>
<a class='total' target='_blank'>
<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' fill='#009688'/></svg></a>
  <!-- facebook -->
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow noopener' target='_blank' title='facebook'>
 <svg viewBox='0 0 24 24'>
  <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='#009688'/>
 </svg>  
  </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 noopener' target='_blank' title='twitter'>
 <svg viewBox='0 0 24 24'>
  <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z' fill='#55acee'/>
 </svg> 
  </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 noopener' target='_blank' title='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' fill='#cb2027'/>
 </svg>  
  </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' rel='nofollow noopener' target='_blank' title='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' fill='#25d366'/>
 </svg>
  </a>
</div>
</div> <!-- social sharing button end -->
9. Terakhir simpan tema dan lihat hasil nya.

Cara ini saya sudah pakai di template viomagz terbaru dan berhasil, jika kamu bukan menggunakan template lain silahkan sesuaikan saja untuk penempatan kode CSS dan HTML nya.

Baiklah itulah artikel kali ini mengenai Cara Membuat Tombol Share Sticky Blogger Versi 1 untuk versi 2 akan saya buat di artikel berikut nya ya jadi jangan sampai ketinggalan informasi terbari kami.

"Silahkan Share Artikel Ini "
"Terimakasih Sudah Berkunjung ya Sobat "
Buka Komentar
Tutup Komentar

Belum ada Komentar untuk "Cara Membuat Tombol Share Sticky Blogger Versi 1"

Posting Komentar

Berikan Komentar Terbaik mu agar situs ini berjalan lancar

Langganan: Posting Komentar (Atom)