Wednesday, April 12, 2017

Cara Membuat Menu Blog Berdasarkan Label Artikel

Bersama Bang Kumbang - Bagaimana cara membuat menu dengan label yang kita punya ? Yah, mungkin anda punya pertanyaan ini, membuat menu dengan label akan lebih membuat tampilang blog kita lebih
dinamis. Menu sendiri sangat penting bagi sebuah blog atau website untuk lebih memudahkan para pembaca untuk dalam mengakses konten konten dari website kita.


Cara kerja menu berdasarkan label ini adalah apabila kita membuat artikel baru dengan label yang kita cantumkan kemenu secara otomatis pasti postingan kita tampil di menu dan label yang telah kita pilih. Nah, tak perlu berlama lama langsung saja kita ke cara membuat menu berdasarkan label berikut.

Langkah 1 : Pembuatan Label Pada Artikel

Yah, langkah pertama dalam pembuatan mebu berdasarkan label adalah pembuatan label. Dimana label ini nantinya akan kangsung diponiting ke menu sebagai tempat artikel berdasarkan labelnya tentunya.
Mula mula dalam penulisan artikel buat sebuah label yang tentunya berhubungan dengan artikel kita.
Yah sebagai contoh saya membuat label Blog pada postingan saya dan nantinya saya akan membuat menu dengan caption "Blog" tentunya. Setelah artikel selesai dan lebel telah dibuat selanjutnya publikasikan.

Langkah 2 : Mencari URL Label Dengan Widget Label

Setelah kita membaut artikel dan label, yang kita butuhkan selanjutnya adalah pembuatan widget label untuk mendapatkan url dari label Blog tadi. Penempata widget ini terserah anda letakkan dimana saja, umumnya widget label seperti ini di posisikan pada sidebar blog. Langusng saja.

Pertama, Pilih Tata Letak --> Pilih Tambahkan Widget pada sidebar --> Pilih Widget Label dan Simpan


Setelah penambaha widget label selesai, masuk ke tampilan index blog anda, lalu perhatikan widget label dan pilih dan klik label "Blog" unuk mendapatkan url dari label ini.

Kemudian copy url tersebut.

Langkah 3 : Membuat Koding Menu Di Blog

Setelah kita dapat kan url nya, kemudian kita membaut menu pada blog kita.. nah anda sendiri bisa memposisikan template anda dimanpun anda suka, tapi lazimnya menu berada pada posisi dibawah header atau diatasnya. Anda bisa membaut menu ini dari template ataupun darai tata letak. Langsung saja..

Pertama, masuk ke dashboard blogger --> Pilih Tema --> Edit Template
Setelah masuk ke koding template, tambahkan kode dibawah ini.
<div class='blog-menu'>
<ul>
<li><a href='http://bang-kumbang.blogspot.com'>Home</a></li>
<li><a href='http://bang-kumbang.blogspot.com/search/label/Blog'>Blog</a></li>
</ul>
</div>
 Keterangan :

- Merah : URL BLOG ANDA
- Biru  : URL LABEL BLOG ANDA

Nah, apabila anda ingin jumlah artikel yang tampil per label pada menu itu sesuai keinginan anda anda bisa tambahkan kode ?max-result=5 pada penghujung url label blog anda. Contoh...
<li><a href='http://bang-kumbang.blogspot.com/search/label/Blog?max-result=5'>Blog</a></li>
Selanjutnya, Untuk CSS tampilan mungkin anda kustom sendiri, tapi saya akan tetap memberikan dasar kustom css nya berikut
.blog-menu {
width:100%;
background:#09f;
}
.blog-menu ul {
position:relative
}
.blog-menu ul li {
line-height:40px;
padding:5px 10px;
display:inline-table;
}
.blog-menu ul li a {
color:white;
text-decoration:none;
}
.blog-menu ul li a:hover {
color:lightgrey;
text-decoration:underline
}
Copykan kode CSS diatas tepat diatas </style> atau  ]]> , atau dilokasi CSS anda

Selanjutnya simpan template dan lihat tampilan blog anda apakanh menu telah muncul dan coba klik apakah artikel yang anda posting berdasarkan label tadi muncul.
Jika muncul berarti anda sukses dan jika tidak muncul silahkan komen dibawah nanti coba saya bantu deh :D

Demikianlah, tentang Cara Membaut Menu Blog Berdasarkan Label Artikel semoga bermanfaat bagi para blogger.
Sekian dan Terima Kasihh....

Labels: ,

4 Comments:

At 4/12/2017 08:57:00 PM , Blogger Ahmad Salim M said...

Keren ini gan, thx infonya

 
At 4/12/2017 09:13:00 PM , Blogger Unknown said...

ini nih yang dicari cari hehehe, apalagi yang baru nge blog kayak saya

 
At 4/12/2017 09:51:00 PM , Blogger dwiky maulana said...

ini bagus gan infonya bagi yg pemula kaya ane nih,thanks gan!

 
At 4/12/2017 11:22:00 PM , Anonymous Anonymous said...

Hehe,lumayan juga nih.Soalnya saya sering lupa nih.

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home