Aneka Modifikasi Tampilan Label Postingan

Setelah mengulas mengenai cara membuat menu blog atau daftar isi, pembahasan kali ini adalah cara membuat kode script yang dimasukan ke salah satu kolom menu tersebut. Bisa juga digunakan bila Anda menginginkan modifikasi tampilan label tersendiri di sidebar tanpa scroll, maupun dengan menggunakan scroll. Tinggal pilih sesuai selera masing-masing..

Cara membuatnya seperti biasa, masuk ke akun blogger. Kemudian klik Rancangan, lalu Add Gadget, pilih yang HTML/JavaScript. Kode script yang harus dimasukkan akan disisipkan pada kode tertentu, misalnya seperti di bawah ini.

<a href="http://katubungweb.blogspot.com/search/label/Jangan%20Diklik">Jangan Diklik</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Oprek%20Blog-Ngesot">Oprek Blog-Ngesot</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Motivasi">Motivasi</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Trik%20Corat%20Coret">Trik Corat Coret</a><br />

Keterangan :

• Tulisan yang berwarna biru, diganti dengan alamat blog Anda.
• Tulisan yang berwarna merah adalah label postingan, ganti sesuai label yang digunakan pada artikel-artikel Anda.
• Tulisan yang berwarna hijau adalah spasi.
• Tulisan yang berwarna abu-abu adalah label artikel yang akan tampil di dalam menu tersebut. Untuk penulisan spasi tidak perlu diberi tanda %20, gunakan saja spasi biasa.

Nah untuk proses pembuatannya dari masing-masing menu label seperti dicontohkan pada tiap gambar yang ditampilkan, kita ulas satu persatu.

Menyisipkan Label Tulisan Di Menu Blog

Pastikan dahulu telah mengetahui menu daftar isi blog (tab view) yang dimaksud, cara membuat atau contohnya klik di sini. Setelah itu sisipkan kode yang berwarna biru, diantara kode-kode berwarna hitam.

<div class="Page">
<div class="Pad">
<a href="http://katubungweb.blogspot.com/search/label/Jangan%20Diklik">Jangan Diklik</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Oprek%20Blog-Ngesot">Oprek Blog-Ngesot</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Motivasi">Motivasi</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Trik%20Corat%20Coret">Trik Corat Coret</a><br />
</div>
</div>

*Tulisan yang berwarna biru adalah kode label postingan, sedangkan tulisan berwarna hitam adalah kode bawaan dari menu daftar isi tersebut. Jadi yang copy-paste hanya pada tulisan yang berwarna biru saja.

Membuat Label Tulisan Dengan Scroll

Sisipkan kode yang berwarna merah, diantara kode berwarna hitam.

<div style="overflow:auto;width:320;height:150px;padding:2px;border:1px solid #eee">
<a href="http://katubungweb.blogspot.com/search/label/Jangan%20Diklik">Jangan Diklik</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Oprek%20Blog-Ngesot">Oprek Blog-Ngesot</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Motivasi">Motivasi</a><br />
<a href="http://katubungweb.blogspot.com/search/label/Trik%20Corat%20Coret">Trik Corat Coret</a><br />
</div>

*Tulisan yang berwarna merah kode label postingan, sedangkan tulisan berwarna hitam adalah kode scrollnya. Jadi copy-paste semua kode tersebut ke dalam kolom "Add Gadget". Agar tampilannya tampak rapi, ubah angka pada kode width:320; sesuai lebar sidebar template blog. Sedangkan height:150px; adalah tinggi scroll tersebut, ukurannya bisa diubah sesuai keinginan Anda.

Membuat Label Tulisan Tanpa Scroll

Copy-paste kode di bawah ini ke dalam kolom "Add Gadget", adalah kode label artikel yang cara membuatnya sudah diulas seperti di atas.

<a href="http://om-rame.blogspot.com/search/label/Jangan%20Diklik">Jangan Diklik</a><br />
<a href="http://om-rame.blogspot.com/search/label/Oprek%20Blog-Ngesot">Oprek Blog-Ngesot</a><br />
<a href="http://om-rame.blogspot.com/search/label/Motivasi">Motivasi</a><br />
<a href="http://om-rame.blogspot.com/search/label/Trik%20Corat%20Coret">Trik Corat Coret</a><br />

Jika semua kode-kode seperti di atas sudah dimasukan ke kolom add gadget klik tombol Simpan maka proses pembuatan telah selesai dan tinggal lihat hasilnya.

* * * * * * * * * *

Posted in: internet