Pasang Mini Icon Pada The Mez Template

Masih termasuk dokumetasi The Mez Template, agar di kemudian hari ada pertanyaan kang Rohman mudah untuk mengarahkan. Dokumentasi kali ini adalah mengenai Pasang Mini Icon Pada The Mez Template. 

Salah satu yang membuat The Mez Template terlihat lebih manis adalah dengan memasang mini Icon pada sudut widget.

Ada dua cara untuk memasang icon-icon tersebut, yaitu melalu edit HTML atau melalui Elemen Halaman, namun untuk yang Elemen Halaman hanya terbatas pada widget HTML/Javascript saja.

Mempersiapkan Icon

Langkah pertama yang harus dilakukan adalah mempersiapkan icons yang akan di pasang, icons tersebut bebas menurut selera anda sendiri. Sedangkan kang Rohman sendiri mengambil dari situs Iconspedia.

Berikut beberapa contoh icon yang di pakai :

Untuk mendapakan tampilan terbaik, ubahlah terlebih dahulu icon yang anda sukai menjadi 60X60 pixel. Ukuran ini sebenarnya dapat diubah sesuai dengan keinginan anda, namun kang rohman sendiri melakukan pengaturan pada kode CSS nya dalam ukuran tersebut.

Uploadlah icons tersebut ke hosting gambar yang biasa anda gunakan, bisa ke hosting lain atau langsung di blogger. Kemudian catat alamat URL icon-icon tersebut, misalkan :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtM4JT7uaCzPjA0c0ugE_SCS7xkyMS9RxjwufJE7VTZW4ZkTQvPUBnB5vTgqGVBgI9NY1MpwLMuPcjdjeue6COFzTJsmGJWy9zPvFv_RTHi1QsgRWsOJjW1HD8f_hFhz2eu4OoVNy0rQgF/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonaYmtGxgqrkQCLSxFT-0h5EBsOexZw4skCRtRJ7zPJy0FT0CUhP69trrzemI8khQRCrFAFnmtOUTaRibXlobHjrBRJVpKzhPKYlXjN6jw14zEK2QeJx9CzYtcuSxlZaFNAmAlbn9rE8/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIRyYsYIXtq7zLyGiMZue2lti4dwyUUB9C7PWWW-OO6_GdatA4ZHifSSZaGvthxK8s9DV5NjbJgCyYa-Whk1fsx1jg3Lt_Zae-ckXwpeI0JSJ7Mok8_lWr0AvoWs1c8pmJJDXy-mDyeg/

Buatlah kode HTML untuk menampilkan gambar, misal :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtM4JT7uaCzPjA0c0ugE_SCS7xkyMS9RxjwufJE7VTZW4ZkTQvPUBnB5vTgqGVBgI9NY1MpwLMuPcjdjeue6COFzTJsmGJWy9zPvFv_RTHi1QsgRWsOJjW1HD8f_hFhz2eu4OoVNy0rQgF/" alt="tutorial" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonaYmtGxgqrkQCLSxFT-0h5EBsOexZw4skCRtRJ7zPJy0FT0CUhP69trrzemI8khQRCrFAFnmtOUTaRibXlobHjrBRJVpKzhPKYlXjN6jw14zEK2QeJx9CzYtcuSxlZaFNAmAlbn9rE8/" alt="browser" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIRyYsYIXtq7zLyGiMZue2lti4dwyUUB9C7PWWW-OO6_GdatA4ZHifSSZaGvthxK8s9DV5NjbJgCyYa-Whk1fsx1jg3Lt_Zae-ckXwpeI0JSJ7Mok8_lWr0AvoWs1c8pmJJDXy-mDyeg/" alt="download" />

Sedangkan kode yang nanti akan dipakai adalah ditambah dengan kode :

<div class='icon'>

kode gambar

</div>

Sehingga kode lengkapnya menjadi :

<div class='icon'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtM4JT7uaCzPjA0c0ugE_SCS7xkyMS9RxjwufJE7VTZW4ZkTQvPUBnB5vTgqGVBgI9NY1MpwLMuPcjdjeue6COFzTJsmGJWy9zPvFv_RTHi1QsgRWsOJjW1HD8f_hFhz2eu4OoVNy0rQgF/" alt="tutorial" />
</div>

<div class='icon'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonaYmtGxgqrkQCLSxFT-0h5EBsOexZw4skCRtRJ7zPJy0FT0CUhP69trrzemI8khQRCrFAFnmtOUTaRibXlobHjrBRJVpKzhPKYlXjN6jw14zEK2QeJx9CzYtcuSxlZaFNAmAlbn9rE8/" alt="browser" />
</div>

<div class='icon'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIRyYsYIXtq7zLyGiMZue2lti4dwyUUB9C7PWWW-OO6_GdatA4ZHifSSZaGvthxK8s9DV5NjbJgCyYa-Whk1fsx1jg3Lt_Zae-ckXwpeI0JSJ7Mok8_lWr0AvoWs1c8pmJJDXy-mDyeg/" alt="download" />
</div>

Mengenali Widget

Langkah selanjutnya mengenali widget mana yang akan anda pasangi icon, Cara yang dianggap paling mudah menurut kang Rohman adalah melalui judul wisget :

Contoh judul widget diatas adalah :

 

• Useful Tutorials



• Work Everywhere



• Free Templates

Sekarang saya anggap bahwa anda telah mempunyai gambaran widget mana saja yang ingin anda tambahkan icon. Sebagai tambahan saja, widget yang bisa dipasangi icon adalah widget yang kolom atas, widget sidebar atau bisa juga widget yang ada di bagian footer.

Memang kode Icon

Langkah terakhir adalah memasangkan kode icon yang tadi telah di persiapkan. Cara pertama adalah melalui tab Edit HTML.

1. Login ke blogger dengan ID anda.



2. Klik Rancangan.
   
   

   

   
   



3. Klik tab Edit HTML.
   

   

   
   



4. 
   
   
   Lakukan backup terlebih dahulu untuk mejadi kemungkinan buruk apabila terjadi kesalahan ketika mengedit template. Klik link Download Template Lengkap.
   
   

   

   
   



5. 
   

   Beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget.

   
   
   

   

   
   
   
   
   



6. Cari kode widget yang mau dipasang kode icon, cara yang termudah adalah dengan kode judul widget seperti yang tadi diterangkan, misal : useful tutorials. ( Untuk pencarian cepat gunakan Ctrl+F lalu masukkan judul widgetnya ).
   

   

   
   



7. Paste kode icon yang tadi telah di pesiapkan persis diatas kode <data:content/>
   
   

   

   
   



8. Lakukan untuk widget-widget lainnya yang di inginkan.



9. Klik tombol SIMPAN TEMPLATE.



10. Selesai.

Cara yang kedua adalah melalui Elemen, namun cara ini terbatas pada penggunaan Widget HTML/Javascript saja, sedangkan untuk widget seperti Label, Arsip dan yang lainnya hanya bisa dilakukan melalui Edit HTML seperti yang diterangkan diatas. Caranya sederhana, anda tinggal paste kode icons pada isi elemen tersebut :

Selamat mencoba!

Tweet