Cara Menampilkan Label di Laman Statis pada blogspot

Cara menampilkan label di laman statis pada blog. Kali ini Admin akan memberikan artikel dan bagi-bagi kode tentang bagaimana cara menampilkan label di laman statis pada blog. 

Label adalah kategori yang diberikan pada artikel ataupun postingan blog yang kita buat atau tulis. Label atau kategori memudahkan kita dalam pengkelompokan artikel. Selain itu juga memudahkan para pengunjung blog agar lebih mudah menemukan konten yang dicarinya. Seperti seorang pengunjung mengunjungi blog anda pada artikel tentang puisi, karena pengunjung tersebut menyukai puisi maka ia juga akan mencari artikel tentang puisi di blog sahabat dan biasanya mencarina pada label atau kategori artikel.

Seperti yang kita tahu, biasanya sahabat atau para blogger lainnya memasang label pada widget sidebar maupun footer. Namun dalam artikel ini, kita akan memasang label pada laman statis pada blog.

Memang membosankan bukan melihat label dipasang di widget sidebar maupun footer pada blog?Mungkin sahabat blogger juga bosan, mau tempat yang baru untuk menampilkan label pada blog. Agar lebih menarik dan enak dilihat, tak ada salahnya kan dipasang di laman statis?

Adapun contoh live-nya adalah seperti pada blog kelinci dibawah. 

• DEMO RESULT

Bagaimana cara membuat  label berada laman statis pada blog?

Setelah melihat live demo pada blog kelinci, mungkin sahabat tertarik untuk mencoba memasangnya pada blog personal maupun blog lainnya yang sahabat miliki. Cara membuatnya cukup mudah, ikutilah tutorial berikut ini.

Langkah-langkah memasang kategori artikel di laman statis pada blog

1. Buka blog admin > laman > laman baru.
Sahabat bisa memberi nama laman seperti "Kategori Artikel" atau juga judul lainnya sesuka sahabat.

2. Masukan kode dibawah pada postingan pada mode HTML.

HTML<!-- CREATED BY RIDOUS - CARI TUTORIAL BLOG -->
<script type="text/javascript"> 
function mbtlist(json) { 
var  ListTag= "";
for (var k = 0; k < json.feed.category.length; k++) 
{ 
ListTag +=  "<div class='kategorinya'><a href='/search/label/" + json.feed.category[k].term + "'><span class=''></span>"+json.feed.category[k].term+"</a></div>";
}
var listing = "<div id='kategori'>" 
+ListTag+ 
"</div> " ;
document.write(listing); 
} 
</script>

<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&callback=mbtlist"> 
</script>


<style> 
#kategori {width:100%}
#kategori a{
    color: #FFF
}
.kategorinya {
    width: 18%;
    float: left;
    text-align: center;
    padding: 1em;
    font-size: 1em;
    position: relative;
   margin: .5em;
    background: #3cc091;
}
.kategorinya span {
width: 100%;
    font-size: 2em;
    color: #FFF;
    margin: .1em;
}
.kategorinya span:before{
    content: "f08a"; 
    font-family: FontAwesome;
    color: #FFF;
    font-size: 20px;
    position: relative;
    float:left;
    width:100%;
}

@media only screen and (max-width:768px) {
.kategorinya {
    width: 30%;
}
}
@media screen and (max-width:640px) {
.kategorinya {
    width: 45%;
}
}

@media screen and (max-width:480px) {
.kategorinya {
    width: 100%;
}
}
</style>

3.Lalu publikasikan.

Jangan ubah mode pengeditan laman pada compose. Akan membuatnya error dan kode tidak berjalan. Lebih baik setelah memasukan kode, langsung saja publikasikan laman.

Bagaimana mudah bukan, jika tampilan tidak sesuai sahabat bisa mengubahnya suka-suka kok. Eksperimen saja...

✖

Share this Posts

• Share To Facebook Share To Twitter Share To Pinterest Share To Whatsapp Share To Linkedin Share To Tumblr Share To Telegram Share To Reddit Share To Gmail

Subscribe Our Newsletter