TAMBAHKAN IKON MEDIA SOSIAL KE BAR NAVIGASI ANDA DI BLOGSPOT

Cara menambahkan ikon media sosial ke bilah navigasi blog Anda sama seperti menambahkan tautan, tetapi sebagai ganti teks, kami akan menggunakan gambar / ikon. Saya telah memperbarui pos ini menjadi kurang spesifik sehingga dapat diubah dan diterapkan ke navigasi apa pun.

1. TAMBAHKAN CLASS KE NAVIGASI SAAT INI

Pergi ke Tata Letak dan klik edit pada gadget HTML / Javascript yang memiliki navigasi kustom Anda.
Tambahkan class="navleft" ke ul navigasi tautan Anda, seperti ini

<ul class="navleft">

Kami akan menggunakan class nanti untuk memosisikan menu.

2. TAMBAH IKON SOSIAL MEDIA KE NAVIGASI

Tepatnya tempat Anda menempatkan ikon sosial tergantung pada bagaimana Anda mengatur navigasi Anda. Jika Anda menggunakan tutorial ini untuk navigasi breadcrumbs, kemudian tambahkan kode berikut di bawah < ul> tetapi sebelum </div>.

<ul id="cssnav" class="navright">
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<!-- ADD MORE ICONS HERE -->
</ul>

Perhatikan bahwa kami juga menambahkan kelas ke UL ini. Isi informasi Anda dan tautan langsung ke ikon gambar. Untuk menambahkan lebih banyak ikon atau menambahkan efek rollover / hover over periksa tutorial lengkap di sini.

3. POSITION BOTH MENUS - PINDAHKAN LINK KE KIRI, ICON KE HAK

Kita bisa menggunakan pelampung untuk memposisikan tautan di sebelah kiri dan ikon di sebelah kanan. Mengambang objek pada dasarnya "mendorong" ke satu sisi untuk memungkinkan elemen lain untuk membungkus / mengalir di sekitarnya. Saya akan melakukan posting tentang ini di masa depan. Kami telah menambahkan kelas di atas ke kedua tag UL (class="navleft" dan class="navright") sehingga kami dapat menerapkan float ke mereka.

Buka Tema > Edit HTML dan temukan yang berikut

]]> </b:skin>

Tambahkan kode berikut di atasnya

.navleft {float:left; width: 50%;} .navright {float:right; width: 50%;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;}

Anda dapat mengubah nilai lebar jika diperlukan. Nilai untuk margin-right dan margin-left menghilangkan margin Blogger default yang akan menyebabkan tautan kita mati layar.

4. TAMBAH LATAR BELAKANG / BACKGROUND

Jika menu Anda sekarang terlihat seperti dua menu terpisah, Anda harus menambahkan latar belakang ke div induk yang membungkus di sekitar kedua tag UL.

Misalnya jika kode Anda terlihat seperti berikut

<div class="CLASSNAME">
<ul class="navleft"> ... </ul>
<ul class="navright"> ... </ul>
</div>

Gunakan kelas dari div, dalam hal ini CLASSNAME untuk menambahkan warna latar belakang seperti ini

.CLASSNAME {background: #000000;}

Ubah nilai # 000000 agar sesuai dengan navigasi Anda.

5. SESUAIKAN RUANG / JARAK ANTARA IKON

Ikon Anda akan memiliki jarak yang sama dengan tautan teks Anda karena CSS, untuk mengesampingkan bahwa Anda dapat menggunakan yang berikut ini untuk mengurangi hanya jarak antar ikon

.navright li a {padding-left: 0; padding-right: 0; }

Sesuaikan nomor jika Anda ingin menambahkan padding.

Template Anda mungkin mengesampingkan kode. Jika ini kasusnya dan Anda tidak merasa nyaman mengedit kode template asli, Anda dapat menambahkan 

!important;

ke kode di atas, seperti ini:

.navright li a {padding-left: 0 !important; padding-right: 0 !important; }