Tambahkan Ikon Media Umum Ke Kafetaria Navigasi Anda Di Blogspot

Cara menambahkan ikon media umum ke bilah navigasi blog Anda sama menyerupai menambahkan tautan, tetapi sebagai ganti teks, kami akan memakai gambar / ikon. Saya telah memperbarui pos ini menjadi kurang spesifik sehingga sanggup 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 mempunyai navigasi kustom Anda.
Tambahkan class="navleft" ke ul navigasi tautan Anda, menyerupai ini

<ul class="navleft">

Kami akan memakai class nanti untuk memosisikan menu.

2. TAMBAH IKON SOSIAL MEDIA KE NAVIGASI

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

<ul id="cssnav" class="navright">
<li><a href="WEBSITE URL HERE" target="blank" title="TAMBAHKAN IKON MEDIA SOSIAL KE BAR NAVIGASI ANDA DI BLOGSPOT"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="TAMBAHKAN IKON MEDIA SOSIAL KE BAR NAVIGASI ANDA DI BLOGSPOT"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>
<li><a href="WEBSITE URL HERE" target="blank" title="TAMBAHKAN IKON MEDIA SOSIAL KE BAR NAVIGASI ANDA DI BLOGSPOT"> <img src="DIRECT URL OF IMAGE" border="0" /></a></li>

</ul>

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

Cara menambahkan ikon media umum ke bilah navigasi blog And TAMBAHKAN IKON MEDIA SOSIAL KE BAR NAVIGASI ANDA DI BLOGSPOT

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

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

Buka Tema > Edit HTML dan temukan yang berikut

]]> </b:skin>

Tambahkan isyarat berikut di atasnya

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

Anda sanggup mengubah nilai lebar kalau diperlukan. Nilai untuk margin-right dan margin-left menghilangkan margin Blogger default yang akan menjadikan tautan kita mati layar.

Baca Juga

4. TAMBAH LATAR BELAKANG / BACKGROUND

Jika sajian Anda kini terlihat menyerupai dua sajian terpisah, Anda harus menambahkan latar belakang ke div induk yang membungkus di sekitar kedua tag UL.

Misalnya kalau isyarat Anda terlihat menyerupai 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 menyerupai ini

.CLASSNAME {background: #000000;}

Ubah nilai # 000000 supaya sesuai dengan navigasi Anda.

5. SESUAIKAN RUANG / JARAK ANTARA IKON

Ikon Anda akan mempunyai jarak yang sama dengan tautan teks Anda alasannya yaitu CSS, untuk mengesampingkan bahwa Anda sanggup memakai yang berikut ini untuk mengurangi hanya jarak antar ikon

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

Sesuaikan nomor kalau Anda ingin menambahkan padding.

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