Membuat Widget Kategori dengan 1 Thumbnail

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Widget Kategori dengan 1 Thumbnail dan semoga artikel ini bermanfaat.

---

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.

Lihat Demo

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://azzam10.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://azzam10.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://azzam10.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.
Catatan:
Widget ini bisa menggunakan URL atau link dari web/blog lain, silahkan masukan alamat URL lain pada warna merah dan labelnya pada warna biru. 

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Widget Kategori dengan 1 Thumbnail kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 10:56