Cara Membuat Label Dengan Icon Berbeda Di Blogger

Bismillahirohmanirohim. Hai Sobat ketemu lagi nih.
Ok langsung saja, disini saya akan menjelaskan cara membuat icon label dengan menggunakan Javascript.
Pada awalnya saya membuat ini karena widget bawaan dari template menurut saya tidak ada yang menarik. Akhirnya saya searching sana searching sini, tapi yang Saya temukan hasilnya nihil. Kebanyakan yang posting cuma memodifikasi sedikit label bawaan bloger kemudian ditambahkan icon, hasilnya ketika kita menambahkan widget label diblog, yang terlihat adalah semua icon pada label terlihat sama.
Pada akhirnya saya berpikir kenapa tidak membuat label sendiri saja. yang pasti lebih menarik dengan menampilkan icon yang berbeda dan akhirnya Saya bisa membuat Label dengan icon yang berbeda-beda setiap labelnya.
Memang cara ini sedikit merepotkan, tapi menurut saya hasilnya tidak mengecewakan ko.
Disini saya tidak memasang widget itu, Sobat bisa melihatnya di Blog saya yang ini www.apphoax.com.

Ok Sobat langsung saja kita buat widget label nya.

Ini adalah contoh tampilan widget nya.

Aktivator

---

Browser

---

Converter

---

Driver

---

Emulator

---

Firmware

---

IDM

---

Media Player

---

Microsoft

---

Utilities

---

Widget

Nah untuk lebih mudah, Sobat bisa menggunakan Notepad untuk meng-edit Htmlnya

• Sekarang buka notepad nya kemudian copy code berikut ke notepad

<br/><hr align="right" /> <a href="Isi dengan URL Label sobat"> <img alt="Isi dengan Nama Label" src="Isi dengan URL Gambar Icon" / </a><a href="Isi dengan URL Label sobat">  Ii dengan nama Label</a> <br/><hr align="right" /> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66671998-1', 'auto');ga('send', 'pageview'); </script>

• Dalam kolom dengan tulisan "Isi dengan URL Sobat" Sobat ganti dengan URL Label sobat Contoh: http://indi-infokus.blogspot.co.id/search/label/Belajar Bloging
• Dalam kolom dengan tulisan "Isi dengan Nama Label" Sobat ganti sesuai Nama label yang ingin sobat tampilkan
• Dalam kolom tulisan "Isi dengan gambar url icon" Sobat ganti dengan URL gambar yang sudah sobat upload.

Jika sobar bingung bagaimana cara menempelkan url gambarnya, Sobat bisa lihat disini

Cara membuat URL gambar di Blogger. 

Untuk menambah Icon dan Labelnya sobat bisa menempelkan Code ini di atas code <script>

<br/><hr align="right" /><a href="Isi dengan URL Label sobat"> <img alt="Isi dengan Nama Label" src="Isi dengan URL Gambar Icon" /> </a><a href="Isi dengan URL Label sobat">  Ii dengan nama Label</a> <br/><hr align="right" />

Tinggal dicopas saja code diatas berulang ulang untuk membuat icon dan label yang sama.

Jika sobat sudah selesai membuatnya, langkah berikutnya adalah menempelkan widget ini di Blog punya Sobat.

• Pertama Login ke www.blogger.com kemudian masuk ke menu dasbor.
• Pilih Tata Letak kemudian Tambahkan Gadget
• Tambahkan HTML/JavaScript 
• Copy/Paste code yang sudah Sobat buat di Notepad. Beri judul atau di kosongkan juga tidak masalah.
• Simpan HTML/JavaScript
• Selesai

Nah itulah cara membuat label dengan icon yang berbeda. semoga artikel ini bermanfaat buat Sobat Blogger semua.

Boleh copas asla tempelkan sumberlinknya ya :) http://indi-infokus.blogspot.co.id/

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Jendela Informasi. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Jendela Informasi dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Saturday 12 September 2015