Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog

Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog
Tombol sosial media

Bila kita mempunyai sebuah website atau blog tentunya kita wajib mempunyai fitur tombol sosial media seperti follow us, ikuti kami atau fanspage di blog kita. Hal itu dikarenakan perilaku orang saat ini lebih sering membuka media sosial untuk mendapatkan berbagai informasi. Dengan kita mempunyai fanspage di salah satu media sosial  tentunya akan memudahkan orang-orang untuk mendapatkan informasi dari blog kita tanpa harus mengunjungi url halaman utama blog kita. 


Lebih jelasnya orang-orang akan mempersingkat waktu dalam mencari informasi yang diinginkan karena alamat url yang klik langsung tertuju ke halaman artikel blog kita. Dengan memiliki halaman penggemar di sosial media juga akan meningkatkan kunjungan atau trafik blog kita. Nah dengan memasang tombol sosial media seperti follow us memungkinkan orang-orang untuk mengunjungi kembali blog kita karena mereka menanti informasi terbaru dari blog kita. Lebih tepatnya seperti melakukan langganan namun lebih mengasikkan karena wadah langganannya berisi komunitas yang besar.

Informasi tombol follow us atau ikuti kami sosial media yang akan dibuat

Dalam tutorial ini kita akan membuat tombol sosial media dalam gambar berformat SVG tanpa menggunakan format gambar pada umumnya. Keunggulan gambar berformat SVG adalah tidak akan membuat loading blog menjadi berat karena gambar berformat SVG hanyalah kumpulan dari kode css yang kita buat. Jadi intinya SVG bukanlah sebuah gambar sebenarnya dan hanyalah kumpulan warna dari kode css yang membentuk sebuah pola warna icon. Dijamin tidak akan memberatkan loading blog dan sangat ringan sekalih.


Karena behubungan dengan kode html dan css sebaiknya kalian teliti saat mengikuti langkah-langkah yang di berikan. Tutorial ini akan dicontohkan pada platform blogger (blogspot) dan jika kalian menggunakan layanan web hosting sebaiknya edit file kalian  yang ingin ditambahkan kode sosial media.

Langkah langkah membuat tombol sosial media

Perlu diingat bahwa contoh tutorial ini kami implementasikan pada platform blogger atau blogspot.

Salin kode HTML dibawah ini
kode by igniel
Ubah kode berwarna merah dengan alamat fanspage kalian


<div id="ignielSubscribe">
<div class="medsos__">
<div class="medsos">
<a class="facebook" title="Facebook" href="https://www.facebook.com/langitsayaofficial" rel="nofollow noopener" target="_blank"><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></a>
<a class="twitter" title="Twitter" href="https://twitter.com/langitsayaofficial" rel="nofollow noopener" target="_blank"><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="youtube" title="Youtube" href="https://www.youtube.com/www" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
<a class="instagram" title="Instagram" href="https://www.instagram.com/www" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
<a class="pinterest" title="Pinterest" href="https://pinterest.com/www" rel="nofollow noopener" target="_blank"><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></a>
</div>
</div>
</div>



Langkah-langkah menempelkan kode html
  1. Buka menu tata letak
  2. Kemudian pilih kolom yang diinginkan di klik tambah gadget
    Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog 
  3. Lalu pilih gadget HTML atau Javascript
    Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog 
  4. Dan tempelkan kode html yang sudah di salin tadi
    Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog 
  5. Simpan

Setelah kode html berhasil dipasang di blog sekarang giliran memasang kode css di blog

Salin kode CSS di bawah ini
kode by igniel


/* Admin Badge on Blogger Comments */
#comments .comments-content .icon.blog-author{
width: 16px;
height: 16px;
margin-left: 5px;
vertical-align: -3px;
display: inline-block;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;
}


#ignielSubscribe {
width: auto;
height: auto;
background-color: none;

display: block;
margin: auto;
padding: 0px;
}

#ignielSubscribe .medsos__ {
padding: 15px 0px;
line-height: 0px;
}

#ignielSubscribe .medsos {
width: 100%;
text-align: center;
}

#ignielSubscribe .medsos svg {
width: 20px;
height: 20px;
margin-top: 7px;
}

#ignielSubscribe .medsos svg path {
fill: #fff;
}

#ignielSubscribe .medsos a {
display: inline-block;
margin-right: 7px;
width: 35px;
height: 35px;
box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.4);
transition: all ease-in-out 300ms;
border-radius: 100px;
}

#ignielSubscribe .medsos a:last-child {
margin-right: 0px;
}

#ignielSubscribe .medsos a:hover {
box-shadow: 0px 23px 15px -3px rgba(0, 0, 0, 0.25);
transform: translate(0px, -10px) scale(1.05);
}


#ignielSubscribe .medsos .facebook {
background: #3a579a;
}

#ignielSubscribe .medsos .twitter {
background: #00abf0;
}

#ignielSubscribe .medsos .googleplus {
background: #df4a32;
}

#ignielSubscribe .medsos .youtube {
background: #cc181e;
}

#ignielSubscribe .medsos .instagram {
background: #992ebc;
}

#ignielSubscribe .medsos .pinterest {
background: #e60023;
}

@-webkit-keyframes ignielRing {
0% {
-webkit-transform: rotateZ(0);
}
1% {
-webkit-transform: rotateZ(30deg);
}
3% {
-webkit-transform: rotateZ(-28deg);
}
5% {
-webkit-transform: rotateZ(34deg);
}
7% {
-webkit-transform: rotateZ(-32deg);
}
9% {
-webkit-transform: rotateZ(30deg);
}
11% {
-webkit-transform: rotateZ(-28deg);
}
13% {
-webkit-transform: rotateZ(26deg);
}
15% {
-webkit-transform: rotateZ(-24deg);
}
17% {
-webkit-transform: rotateZ(22deg);
}
19% {
-webkit-transform: rotateZ(-20deg);
}
21% {
-webkit-transform: rotateZ(18deg);
}
23% {
-webkit-transform: rotateZ(-16deg);
}
25% {
-webkit-transform: rotateZ(14deg);
}
27% {
-webkit-transform: rotateZ(-12deg);
}
29% {
-webkit-transform: rotateZ(10deg);
}
31% {
-webkit-transform: rotateZ(-8deg);
}
33% {
-webkit-transform: rotateZ(6deg);
}
35% {
-webkit-transform: rotateZ(-4deg);
}
37% {
-webkit-transform: rotateZ(2deg);
}
39% {
-webkit-transform: rotateZ(-1deg);
}
41% {
-webkit-transform: rotateZ(1deg);
}
43% {
-webkit-transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(0);
}
}

@-moz-keyframes ignielRing {
0% {
-moz-transform: rotate(0);
}
1% {
-moz-transform: rotate(30deg);
}
3% {
-moz-transform: rotate(-28deg);
}
5% {
-moz-transform: rotate(34deg);
}
7% {
-moz-transform: rotate(-32deg);
}
9% {
-moz-transform: rotate(30deg);
}
11% {
-moz-transform: rotate(-28deg);
}
13% {
-moz-transform: rotate(26deg);
}
15% {
-moz-transform: rotate(-24deg);
}
17% {
-moz-transform: rotate(22deg);
}
19% {
-moz-transform: rotate(-20deg);
}
21% {
-moz-transform: rotate(18deg);
}
23% {
-moz-transform: rotate(-16deg);
}
25% {
-moz-transform: rotate(14deg);
}
27% {
-moz-transform: rotate(-12deg);
}
29% {
-moz-transform: rotate(10deg);
}
31% {
-moz-transform: rotate(-8deg);
}
33% {
-moz-transform: rotate(6deg);
}
35% {
-moz-transform: rotate(-4deg);
}
37% {
-moz-transform: rotate(2deg);
}
39% {
-moz-transform: rotate(-1deg);
}
41% {
-moz-transform: rotate(1deg);
}
43% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(0);
}
}

@keyframes ignielRing {
0% {
transform: rotate(0);
}
1% {
transform: rotate(30deg);
}
3% {
transform: rotate(-28deg);
}
5% {
transform: rotate(34deg);
}
7% {
transform: rotate(-32deg);
}
9% {
transform: rotate(30deg);
}
11% {
transform: rotate(-28deg);
}
13% {
transform: rotate(26deg);
}
15% {
transform: rotate(-24deg);
}
17% {
transform: rotate(22deg);
}
19% {
transform: rotate(-20deg);
}
21% {
transform: rotate(18deg);
}
23% {
transform: rotate(-16deg);
}
25% {
transform: rotate(14deg);
}
27% {
transform: rotate(-12deg);
}
29% {
transform: rotate(10deg);
}
31% {
transform: rotate(-8deg);
}
33% {
transform: rotate(6deg);
}
35% {
transform: rotate(-4deg);
}
37% {
transform: rotate(2deg);
}
39% {
transform: rotate(-1deg);
}
41% {
transform: rotate(1deg);
}
43% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}



Langkah-langkah menempelkan kode CSS di blogger
  1. Buka menu Tema
  2. Pilih tombol Sesuaikan
  3. Pilih menu Lanjutan, setelah tampil daftar menu lainnya scroll ke bawah dan pilih menu Tambahkan CSS 
    Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog
    Abaikan saja kode yang ada gambar, tempelkan di bawahnya 

  4. Kemudian tempelkan kode CSS yang sudah disalin tadi di kolom menu Tambahkan CSS
  5. Simpan
  6. Selesai

Maka hasilnya akan seperti di bawah ini ya teman-teman. Selamat mencoba semoga berhasil.
Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog

Tidak ada komentar untuk "Membuat Tombol Follow Us Sosial Media SVG Ringan di Blog"