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
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://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
feedburner

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

17 komentar :

  1. . . wachhhhhhhhhhhhh,, skarang ada emo nich. he..86x . .

    BalasHapus
  2. wah mantep sob..perlu di coba :D
    Sobat boleh tukeran link gax???

    BalasHapus
  3. Balasan
    1. Sobat ko ngajak tukeran link tapi diblog sobat ga ada temapt tukeran link Gimana?
      =))

      Hapus
  4. pengen coba tapi template saya ga cocok buat hal seperti itu.. =(

    jadi nyimak ajalah.. heheee :cxz

    BalasHapus
  5. Buluh Perindu Ki Semar, Media Pelet Paling Ampuh
    Ini Adalah Media Pelet Jarak Jauh, dengan media ini Anda tidak harus kenal dengan target yang Anda Tuju, Cukup tahu wajahnya saja Maka Anda bisa memeletnya. dengan menjilat 3x media ini dia akan simpati pada Anda, dibaca mantranya maka dia akan rindu siang malam selalu pingin ketemu dengan Anda. Garansi (untuk Pria/Wanita). hubungi Dani Akbar : 0838 5688 7373 atau kunjungi peletrokok.blogspot.com

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |