Halo Semuanya, Selamat Datang Di Pagodaimedia, Kali ini saya akan memberikan Cara Menambahkan Widget Media Sosial Dengan Ikon Di Blogger. Pada bawaan Template Plus UI pada Footer nya terdapat Widget Media Sosial tetapi tidak memiliki Ikon, Kali ini kita akan Menggantinya dengan Widget Media Sosial yang Disertai dengan Ikon.
Ayo Kita Memulai Pemasangannya Sekarang.
Ini hanya Dapat Dilakukan Pada Situs Blogger yang menggunakan Tema Plus UI Dengan Versi 2.6.2 atau 2.6.3
Cara Menambahkan Widget Media Sosial Dengan Ikon Di Blogger
1. Buka Dashboard Blogger.
2. Pada Dashboard Blogger, Klik Tema.
3. Kemudian Klik Dan Klik Edit HTML.
4. Cari Bagian /* --- Your Custom CSS goes here --- */ Dan Tempel Kode CSS Berikut Tepat Dibawahnya.
Peringatan!
Sebelum melakukan Perubahan yang Cukup Besar pada Tema Blogger Anda, Cadangkan Tema Blogger Anda terlebih Dahulu yang Bertujuan jika terjadi Sebuah kesalahan, Anda dapat Mengembalikkannya kembali.
/* Widget Media Sosial dengan Ikon - Pagodaimedia */
.sMedft{display:flex!important;align-items:center}
footer .LinkList .sMedft li::before{display:none}
footer .sMedft svg{width:22px;height:22px;opacity:.8}
footer .LinkList .sMedft a{display:flex;color:inherit;line-height:20px}
5. Cari Kode Widget Berikut (Ada pada bagian bawah <footer>:
<b:widget id='LinkList1' locked='false' title='Social Media Link' type='LinkList' version='2' visible='true'>
Isi Widgetnya akan Berisi Kode seperti ini:
<b:widget id='LinkList1' locked='false' title='Social Media Link' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Instagram</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='text-3'>Youtube</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
<b:widget-setting name='text-2'>Twitter</b:widget-setting>
<b:widget-setting name='text-4'>LinkedIn</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='sL'>
<b:loop values='data:links' var='link'>
<li>
<b:tag class='l' expr:data-text='data:link.name' expr:name='data:link.target != "#" ? "a" : "span"'>
<b:attr cond='data:link.target != "#"' expr:value='data:link.target' name='href'/>
<b:attr cond='data:link.target != "#"' expr:value='data:link.name' name='aria-label'/>
<b:attr cond='data:link.target != "#"' name='target' value='_blank'/>
<b:attr cond='data:link.target != "#"' name='rel' value='noopener'/>
</b:tag>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
Ganti Kodenya Dengan Kode ini:
<b:widget id='LinkList1' locked='true' title='Social Media' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='text-8'>Pinterest</b:widget-setting>
<b:widget-setting name='link-7'>#</b:widget-setting>
<b:widget-setting name='link-8'>#</b:widget-setting>
<b:widget-setting name='link-5'>#</b:widget-setting>
<b:widget-setting name='link-6'>#</b:widget-setting>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Instagram</b:widget-setting>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='text-3'>Tiktok</b:widget-setting>
<b:widget-setting name='text-2'>Twitter</b:widget-setting>
<b:widget-setting name='text-5'>Telegram</b:widget-setting>
<b:widget-setting name='text-4'>Whatsapp</b:widget-setting>
<b:widget-setting name='text-7'>LinkedIn</b:widget-setting>
<b:widget-setting name='text-6'>Youtube</b:widget-setting>
<b:widget-setting name='shownum'>6</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='mSoc sMedft'>
<b:loop index='soc' values='data:links' var='link'>
<b:if cond='data:soc <= 5'>
<li>
<b:tag class='a tIc bIc' expr:name='data:link.target != "#" ? "a" : "span"'>
<b:attr cond='data:link.target != "#"' expr:value='data:link.target' name='href'/>
<b:attr cond='data:link.target != "#"' name='role' value='button'/>
<b:attr cond='data:link.target != "#"' expr:value='data:link.name' name='aria-label'/>
<b:attr cond='data:link.target != "#"' name='target' value='_blank'/>
<b:attr cond='data:link.target != "#"' name='rel' value='noopener'/>
<b:if cond='data:link.name == "Facebook"'>
<b:include name='facebook-icon'/>
<b:elseif cond='data:link.name == "Instagram"'/>
<b:include name='instagram-icon'/>
<b:elseif cond='data:link.name == "Twitter"'/>
<b:include name='twitter-icon'/>
<b:elseif cond='data:link.name == "Youtube"'/>
<b:include name='youtube-icon'/>
<b:elseif cond='data:link.name == "LinkedIn"'/>
<b:include name='linkedIn-icon'/>
<b:elseif cond='data:link.name == "Pinterest"'/>
<b:include name='pinterest-icon'/>
<b:elseif cond='data:link.name == "Whatsapp"'/>
<b:include name='whatsapp-icon'/>
<b:elseif cond='data:link.name == "Telegram"'/>
<b:include name='telegram-icon'/>
<b:elseif cond='data:link.name == "Tiktok"'/>
<b:include name='tiktok-icon'/>
<b:else/>
<b:include name='circle-icon'/>
</b:if>
</b:tag>
</li>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
6. Lalu Klik Simpan, Selesai.
Anda dapat mengatur Menunya melalui Tata Letak, Seperti mengatur Apa saja Tombol ke Media Sosial yang akan Dimunculkan.
Kesimpulan
Jadi Ini Adalah Cara Menambahkan Widget Media Sosial Dengan Ikon Di Blogger. Saya harap Artikel ini dapat membantu anda, Jika ada yang ingin ditanyakan maka tanyakan Di Kolom Komentar.