Headlines News :

Membuat Widget Kategori dengan 1 Thumbnail (Cuplikan Gambar)

Membuat Widget Kategori dengan 1 Thumbnail, setelah artikel terdahulu saya share Membuat widget Kategori Ala website portal nah tutorial ini pada intinya sama seperti tutorial tersebut namun yang membedakan yaitu pada pemasangannya, pada tutorial ini pemasangannya sangat mudah karena kita bisa menempatkan widget kategorinya pada Gadget bawaan secara langsung, jadi kita bisa memasang dimana saja sesuai selera kita baik itu disidebar maupun dibawah postingan. kalau pada tutorial terdahulu kita memasang widget khusus dibawah postingan saja, namun pada widget sekarang apabila mau menambahkan dibawah postingan template sobat harus sudah ada gadget dibawah postingan terlebih dahulu, mungkin kalau yang templatenya masih bawaan blogger sobat tinggal menambahkan pada atur tata letak sehingga bisa menambahkan 2 atau 3 gadget dibawah postingan. Namun apabila template sobat sudah dirubah dan pengaturan tata letak sudah tidak berfungsi maka harus menambahkan gadget terlebih dahulu. nah buat sobat yang mau menambahkan gadget dibawah postingan atau diatas postingan baca di Membuat 2 kolom dibawah Postingan II
Selanjutnya kita langsung aja ke poko bahasan  Membuat Widget Kategori dengan 1 Thumbnail.

Langkah-lankahnya:

Langkah 1:
  • Seperti biasa saja login ke blogger
  • klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
  • Klik edit HTML klik lanjutkan  kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#C0C0C0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
  • Klik edit HTML klik lanjutkan  kemudian cari kode </head> setelah ketemu letakan kode brikut ini tepat diatas kode tersebut.
 <script src='http://my-project-favicon.googlecode.com/files/Kategorywiththumb.js' type='text/javascript'/>
  • Simpan template sobat
Langkah 2:  

Langkahnya sebagai berikut :
  • Masih pada halaman blogger
  • Pilih Rancangan > Elemen laman > Tambah Gadget> HTML/Javascript
  • Copy kode dibawah ini pada kota HTML/Javascript
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="http://hnvernalin.blogspot.com/feeds/posts/summary/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://hnvernalin.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://hnvernalin.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">Artikel lain Kategori ini &#187;</a>
Silahkan tulisan berwarna merah ganti dengan URL Sobat
Yang berwarna biru ganti dengan label blog yang sobat inginkan, ingat apabila label yang mau dipasang lebih dari satu kata maka harus dipisah dengan %20 serta pada penulisannya harus memperhatikan apakah awal kata tersebut besar atau kecil, Contoh untuk label Optimasi SEO diblog ini penulisannya "Optimasi%20Seo" tanpa tanda kutip jadi harus sama dengan yang ada pada label blog sobat.
untuk memudahkan mengetahui label blog sobat apabila blog sobat sudah dipasang breadcrumb maka lihatlah pada halaman postingan bagian atas biasanya dibawah atau diatas judul dan label blog biasanya setelah Home atau beranda. atau bila sobat belum memasang breadcrumb sobat bisa membuka pada halaman edit post.

Membuat Widget Kategori dengan 1 Thumbnail (Cuplikan Gambar) 9 out of 10 based on 10 ratings. 9 user reviews.

Di terbitkan pada :

Monday, August 5, 2013

0 comments:

Post a Comment