×

Owner / Author / Admin / etc

    Muhamad Arsad    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Blogger, Template, Widget, Internet, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Icon Share Artikel Mengambang Igniel


Cara Membuat Icon Share Artikel Mengambang Igniel - Hai sahabat blogger pada kesempatan kali ini saya akan membagikan Cara Membuat Icon Share Artikel Mengambang Igniel dimana saya mendapatkan inspirasi dari blog Mas Azid Zainuri, di blog diapun banyak tutorial - tutorial menarik lain nya silahkan kunjungi www.azid45.web.id

Sebenar nya tidak banyak yang perlu kita rubah dari CSS dan Icon Share Artikel yang ada di Template Viomagz disini saya hanya menambah satu Icon Svg dan sedikit merubah CSS nya saja, tampilan nya cukup bagus untuk demo silahkan lihat dibawah ini ya baiklah kita langsung saja kita ke tutorialnya dibawah ini

Cara Membuat Icon Share Artikel Mengambang Igniel

1. Silahkan Login ke Blogger
2. Buka Tema kemudian Edit HTML
3. Silahkan cari CSS dibawah ini dan ganti dengan kode dibawah nya.
Sebelum
/* Share button */
.share-this-pleaseeeee {
display: inline-block;
margin: 0;
color: inherit;
text-transform: uppercase;
font-size: 16px;
color: #000000;
background: #ffffff;
z-index: 1;
position: relative;
padding: 0 10px;
font-weight: bold;
margin-top: 3px;
}
#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 .15s linear;float:left}
#share i{position:relative;top:50%;transform:translateY(-50%)}
.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}

Sesudah
/* Share button */
.share-this-pleaseeeee{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}

4. Kemudian cari kode <b:includable id='postsharebutton' var='post'> kemudian ganti dengan kode di bawah ini
<b:includable id='postsharebutton' var='post'> 
<div id='share-container'> <!-- social sharing button -->
<div class='label-line-c'>
<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"></path>
 </svg>
</a>
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' 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='#3a579a'/>
</svg>
</a>
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' 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' 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' target='_blank'>
<svg style='width:24px;height:24px' 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://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='#25d366'/>
</svg>
</a>
</div>
</div>
</div>
</b:includable> 

5. Kemudian cari kode #wrapper jika sudah ketemu ganti overflow:hidden menjadi overflow:unset untuk lebih jelasnya silahkan lihat dibawah ini
#wrapper {
background: #ffffff;
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: unset;
}

6. Kemudian cari kode dibawah ini ganti dengan kode dibawah nya
Sebelum
#share-container {
margin: 20px auto 30px;
overflow: hidden;
}

Sesudah
#share-container {
width:100%;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap: nowrap;
align-items: center;
background-color: #ffffff;
margin-top: 30px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}

7. Kemudian cari kode dibawah ini kemudian hapus margin-bottom: 20px;
.label-line-c {
text-align: center;
margin-bottom: 20px;
}

Penutup

Demikianlah tutorial yang dapat saya bagikan semoga bermanfaat, bila ada pertanyaan silahkan tinggalkan komentar dibawah ini
Admin Ganteng Tapi Jomlo :v
  • Facebook
  • Twitter
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    9 Responses to "Cara Membuat Icon Share Artikel Mengambang Igniel"

    1. Keren banget bisa ngambang. Mau masang sih tapi rada mikir. Nanti pengunjung susah baca cerita aku. Jadi nanti dulu lah. Btw share bottom kamu banyak bet. Ada tutorialnya?

      ReplyDelete
    2. Bagi juga tutor yang tombol sharenya banyak kaya di template yang abang pake /-\

      ReplyDelete
      Replies
      1. Tinggal di kreasikan aja mas, pasti bisa

        Delete
    3. Nunggu tutor diblog agan aja hehe

      ReplyDelete
    4. Btw cara bikin button download kayak diblog ini itu gimana gan??

      ReplyDelete
      Replies
      1. Gampang mas nanti akan saya buatkan tutorial nya mas

        Delete
      2. Silahkan di coba mas https://googledeso.blogspot.com/2020/04/cara-membuat-tombol-download-di-viomagz.html?m=1

        Delete
      3. Thnks, tinggal nunggu tutor tombol share artikel yang banyak itu gan

        Hehehe :)

        Delete

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel