Cara Membuat Kategori Otomatis Dengan Thumbnail

63 views

alhadi.org – Cara Membuat Kategori Otomatis Dengan Thumbnail, Cara Membuat Kategori Otomatis Dengan Thumbnail

Cara Membuat Kategori Otomatis Dengan Thumbnail

Fitur kategori otomatis dengan thumbnail ini menampilkan kategori berdasarkan nama kategori beserta gambar thumbnail dengan ringkasan artikel. Sangat cocok buat sobat blogger yang ingin membangun blognya bertema magazine.

Contoh penerapan dari fitur kategori otomatis dengan thumbnail bisa anda lihat demonya pada Fresh Revolution Template.

Kategori atau label yang diinginkan akan tampil secara otomatis tanpa sobat harus mengeditnya setiap saat.
Apa yang harus dipersiapkan? yang harus sobat persiapkan hanyalah nama kategori yang ingin di tampilkan. Namun perlu diketahui bahwa nama label ini bersifat case-sensitive artinya nama yang di pasang hurufnya harus sama persis dengan label di blog, misal nama kategori Kesehatan berbeda dengan kesehatan oleh karenanya pastikan terlebih dahulu bahwa nama label sama persis hurufnya.

Cara yang mudah untuk melihat nama label secara tepat adalah coba tampilkan terlebih dahulu widget label di blog anda, kemudian sorot nama label yang diinginkan kemudian lihat pada statusbar browser internet sobat.

label name

Terlihat bahwa label Featured, nama label sebenarnya adalah featured (huruf kecil semua), ini terjadi karena tampilan di blog di pengaruhi oleh setting CSS. Dalam hal ini, yang diperlukan adalah nama label asli.
Berikut adalah langkah-langkah untuk membuat fitur kategori otomatis dengan thumbnail.

Langkah pertama

  1. Login ke blogger dengan ID sobat. 
  2. Klik Rancangan.
    rancangan
  3. Klik tab Edit HTML.
  4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
  5. Carilah kode ]]>, copy lalu paste kode berikut persis diatas kode ]]>

/*** Featured Categories ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
 

6. Carilah kode , copy lalu paste kode berikut persis diatas kode

 
  

  1. Klik tombol SIMPAN TEMPLATE.
  2. Langkah pertama selesai.

Langkah kedua

  1. Klik tab Rancangan.
    rancangan
  2. Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
    elemen laman
  3. Klik Tambah Gadget untuk menambahkan gadget baru.
    tambah gadget
  4. Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript
    html javascript 
  5. Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya sobat harus mengubah tulisan yang di beri warna merah dengan nama kategori yang di inginkan.

    gadget corner 

  6. Klik tombol SIMPAN
  7. Langkah kedua Selesai.

Jika sobat ingin menambahkan widget lain untuk nama kategori yang lain, sobat hanya melakukan hal yang sama dengan langkah-langkah diatas.

Apakah script diatas bisa di customisasi? bisa. Dalam kode diatas ada bebebrapa yang dapat sobat atur misal jumlah karakter yang ingin di tampilkan, thumbnail, jumlah posting, tanggal posting, komentar, serta more link.

Dalam script tersebut ada tulisan severti ini :
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var showcommentnum = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 80;
Kode berwarna merah adalah kode yang bisa anda edit, true berarti tampilkan, false berarti jangan di tampilkan, 80 adalah jumlah karakter, silahkan coba-coba ganti saja.

Source
Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Kategori Otomatis Dengan Thumbnail, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Kategori Otomatis Dengan Thumbnail berguna untuk anda.

Leave a reply "Cara Membuat Kategori Otomatis Dengan Thumbnail"