Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog

 Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog - Gallery foto atau gambar di blog memang banyak sekali kita jumpai pada halaman blog yang mengutamakan promosi melalui gambar maupun foto image, Biasanya dipasang pada widget blog situs jual beli online. Namun pada tutorial blog yang akan saya share kasih trik dan tips-nya berikut ini adalah cara membuat gallery foto di blog dengan efek bergerak atau berjalan, Efek ini populer disebut efek Marquee. Jadi hasilnya tidak seperti gallery foto yang biasa, Karena gallery foto ini akan bergerak atau berjalan.

 Untuk cara membuat gallery foto gambar bergerak berjalan di blog, Caranya sangat mudah sekali. Ukuran lebar dan tinggi foto atau gambar bisa di atur agar sesuai dengan keinginan sobat. Karena cara ini adalah cara manual dan sobat bisa sesuka hati mengaturnya. Silahkan sobat mengikuti langkah-langkah yang akan saya berikan nanti.

 Tampilan dari gallery foto gambar bergerak berjalan di blog, Tentu saja akan mengikuti sesuai dengan gambar atau foto yang sobat terapkan. Sobat bisa melihat dalam Blog Demo yang sudah saya pasang widget Gallery foto gambar bergerak berjalan di blog. Silahkan klik DISINI.

DEMO

 Ada beberapa opsi pilihan dari gallery foto gambar bergerak berjalan di blog yang bisa sobat pilih, Diantaranya:

• Gallery foto gambar bergerak berjalan di blog default (Biasa).
• Gallery foto gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.
• Dan masih banyak lagi, Tergantung pandai-pandainya sobat untuk berexperiment menambahkan kode-kode tertentu dalam gallery.

 Agar sobat tidak bingung dengan penjelasan saya di atas, Nanti akan saya jelaskan caranya satu-persatu, Agar sobat bisa mengerti dengan mudah.

Cara Membuat Gallery foto gambar bergerak berjalan di blog default (Biasa)

1. Silahkan sobat >> Masuk atau Login ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.

3. Beri judul widget, Contoh "My Foto Gallery". Kemudian letakkan semua kode di bawah ini pada kotak HTML/JavaScript.

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlPVlUtPelYQ0Jyc6wHzeP3RO028zKfidMGeA1vslfQEHJ_hb_8Agb2GjibrcG3ja-9pdnb_krsqA_FPFzublLy0V6uMLa9Bmd5lSxNJ6blc8E2XKXb5Iwesx0gB2AFBByfpUtQBnsDI/s1600/PINK1.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOSBVc6JSCjQShuyzqdNMPrhtwE162K63FPJ75h33S6ZXg42Ol6q55W8x5KM5z5klSf-5XF5VKS9hGGKRZuAwx9k53wl6xUpup6KWyzil0fAwIHAimAyPjevYXO_Q09TThymWLcwPiNo/s1600/HT3.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-msJ95wDQ5mBN-x91yPMm8FXxiPLMSeGYqOpQEU3Qvxl46Xv_YAkYlM73otPGoqCm2XKyj-DjX3CLdHxnl82DoYf2kQwEuD2DHxm72ou0h9pqTr4DCR_4QMHSzFOfr2Es4pbV1axb-U/s1600/sonal_chauhan.jpg" width="120" height="120" /></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>

Keterangan:

• Warna Merah adalah Alamat URL gambar atau foto image. Silahkan sobat ganti dengan alamat URL gambar atau foto image sobat.

• Warna Biru, width="120" dan height="120" adalah ukuran Lebar dan Tinggi image gambar atau foto. Silahkan sobat atur nilainya sesuai dengan keinginan sobat agar sesuai dengan widget blog sobat.

•  <marquee direction="up" adalah arah bergerak berjalan ke atas. Silahkan sobat ganti up jadi down jika ingin arah berjalan bergerak ke bawah.

Cara Membuat Gallery foto gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.

 Cara yang berikut ini adalah cara yang mudah dilakukan oleh para blogger mania, Sebab cara ini hanya menambahkan beberapa kode saja. Namun agar sobat tidak kesulitan dalam menambahkan kode, Di sini akan saya kasih contoh penerapan kode yang benar.

Berikut kode yang menggunakan alamat url link tujuan bila image gambar foto di klik.

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlPVlUtPelYQ0Jyc6wHzeP3RO028zKfidMGeA1vslfQEHJ_hb_8Agb2GjibrcG3ja-9pdnb_krsqA_FPFzublLy0V6uMLa9Bmd5lSxNJ6blc8E2XKXb5Iwesx0gB2AFBByfpUtQBnsDI/s1600/PINK1.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOSBVc6JSCjQShuyzqdNMPrhtwE162K63FPJ75h33S6ZXg42Ol6q55W8x5KM5z5klSf-5XF5VKS9hGGKRZuAwx9k53wl6xUpup6KWyzil0fAwIHAimAyPjevYXO_Q09TThymWLcwPiNo/s1600/HT3.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-msJ95wDQ5mBN-x91yPMm8FXxiPLMSeGYqOpQEU3Qvxl46Xv_YAkYlM73otPGoqCm2XKyj-DjX3CLdHxnl82DoYf2kQwEuD2DHxm72ou0h9pqTr4DCR_4QMHSzFOfr2Es4pbV1axb-U/s1600/sonal_chauhan.jpg" width="270" height="270" /></a></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>

Keterangan:

• Warna Hijau adalah Alamat Url tujuan bila image gambar foto di klik. Silahkan di ganti dengan alamat url tujuan sobat.

• Warna Orange adalah Title teks yang keluar jika Mouse pointer menyantuh gambar image foto pada gallery. Silahkan sobat ganti dengan title teks sesuai keinginan sobat.

• Kode yang saya berikan di atas adalah contoh untuk tiga gambar image foto saja. Sobat bisa menambahkan kode image-nya sesuai dengan keinginan sobat.

 Demikian tutorial blog tentang Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog secara manual. Jika ada pertanyaan mengenai tutorial ini, Silahkan sobat bertanya pada form kotak komentar yang tersedia. Senang bisa berbagi dan membantu sobat KUCOPAS semua. Semoga bisa sangat bermanfaat.

Selamat Berkarya

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Mengembalikan Widget (Gadget) Followers Blog Yang Menghilang

 Cara Mengembalikan Widget (Gadget) Followers Blog Yang Menghilang - Widget Followers atau pengikut yang mengikuti blog kita memang sangat penting dan tidak bisa di pandang sebelah mata dalam dunia blogger, Karena jika banyak followers yang mengikuti blog kita berarti blog kita memang laris atau pantas untuk di ikuti dan di tunggu-tunggu artikel terbaru dari blog kita untuk di baca maupun di share ke jejaring sosial.

 Followers Blog Google Friend Connect adalah milik google, Salah satu fungsinya yakni untuk jalinan teman seperti layaknya jejaring sosial. Dan sepertinya dengan perkembangan Google dalam menciptakan situs jejaring sosial yaitu Google+ (Google Plus), Maka Google Friend Connect kemungkinan akan di hilangkan secara halus.

Bukti kemungkinan Google Friend Connect akan di hilangkan.

 Buktinya sekarang sudah jelas, Coba silahkan sobat cari saja di search engine dengan keyword Google Friend Connect. Klik link asli dari situs google.com, Maka hasilnya tidak ada lagi Google Friend Connect yang bisa di akses. Dan Sobat akan di alihkan pada halaman (http://support.google.com/blogger/bin/answer...) Pertanyaan Umum - Blogger Bantuan. Kecuali sobat mengakses langsung dari situs blog sobat yang berhubungan dengan followers google friend connect yang terdapat pada dashboard blog sobat.

Widget Google+ Followers jadi pengganti Widget Followers Google Friend Connect.

 Gadget Google+ Followers yang bisa kita terapkan dengan mudah dalam widget blog adalah fitur terbaru dari google bagi pengguna blogger, Salah satunya blogspot. Karena blogspot dan juga Google+ adalah satu jiwa, Jadi kita bisa dengan mudah menerapkannya dalam blog, Sebab dengan satu akun google saja kita bisa menikmati semua fitur yang di miliki oleh google. Tidak terkecuali blogspot dan Google+ bisa saling terhubung.

 Agar sobat bisa lebih jelas silahkan baca keterangannya langsung dari situs googleblog.blogspot.com, Tentang Google Friend Connect kemungkinan akan di ganti Google+ Followers, Sobat bisa membacanya DISINI. Gunakan translate untuk mempermudah mengartikannya.

Pengalaman pribadi saat Widget Followers di blog menghilang.

 Widget Followers blog menghilang, Itulah masalah yang pernah saya alami. Tanpa tahu apa penyebabnya tiba-tiba widget followers atau pengikut blog saya menghilang, Dan bingungnya lagi dalam widget tersebut hanya ada petunjuk dari Webmaster yang tertulis "Kami minta maaf…Gadget ini salah dikonfigurasi. Petunjuk webmaster: Pastikan bahwa "Setelan Jalinan Teman – URL Beranda" sesuai dengan URL situs ini".

Analisa dalam setelan blog.

 Ada beberapa kesalahan yang pernah saya lakukan dalam setelan blog, Salah satunya adalah template blog KUCOPAS ini saya kloning untuk blog baru yaitu DEMO KUCOPAS. Namun ternyata penyebab hilangnya widget followers bukan itu saja, Karena dalam setelan dasar blogger khususnya untuk bagian penerbitan alamat blog juga pernah saya ganti alamat url-nya. Sehingga widget gadget Followers blog tidak muncul dan tiba-tiba saja menghilang dalam halaman blog saya dan yang muncul adalah teks petunjuk dari webmaster seperti di atas.

Cara mengatasi dan mengembalikan widget gadget Followers blog yang menghilang.

 Setelah saya melakukan analisa dalam pengaturan setelan blogger, Akhirnya saya tahu kesalahan apa yang mengakibatkan widget gadget followers blog saya bisa menghilang. Penyebabnya tidak lain karena alamat url blog pernah saya ganti atau ubah dengan url alamat blog yang baru namun belum jadi di buat atau di verifikasi. Alhasil widget gadget followers blog saya jadi menghilang secara tiba-tiba.

 Bayak sudah berbagai cara yang saya lakukan untuk mengembalikan followers blog saya agar bisa kembali muncul pada halaman blog saya, Diantaranya membuat kode iframe atau image src, Bahkan membuat kode followers blog secara manual. Namun lagi-lagi cara yang saya praktekkan tidak berhasil untuk mengembalikan widget gadget followers blog saya, Dan herannya lagi rata-rata semua tutorial dari blog lain yang pernah saya coba praktekkan berakhir pada pertanyaan umum support google.

Langkah-langkah untuk mengembalikan widget gadget followers blog yang menghilang.

 Jika sobat mengalami hal permasalahan seperti yang pernah saya alami, Yaitu tentang widget gadget followers blog menghilang secara tiba-tiba, Silahkan sobat bisa mengikuti langkah-langkah yang pernah saya lakukan untuk mengembalikan widget gadget followers yang menghilang dengan cara sebagai berikut:

1. Langkah yang pertama saya lakukan adalah cek followers atau pengikut blog pada dashboard akun blogger saya.

Cara melakukannya:

• Silahkan sobat >> Masuk atau Login ke Blogger.com menggunakan akun sobat.
• Pada Dashboard tampilan blogger baru, Pilih Blog sobat, Kemudian Klik >> Pengikut atau Followers. Lihat contoh gambar screenshot dibawah ini.

• Setelah klik Pengikut atau Followers, Maka akan muncul seperti halaman dibawah ini.

• Silahkan sobat klik >> Invite your Friends. Lalu akan muncul halaman seperti gambar screenshot dibawah ini.

• Cara diatas adalah untuk cek alamat url situs, Apakah sudah cocok dengan alamat url blog sobat atau tidak. Jika tidak cocok, Maka sobat harus melakukan langkah yang kedua. Agar widget gadget followers blog sobat bisa muncul kembali pada halaman blog sobat.
• Jika alamat URL situs sudah cocok, Sobat tidak perlu melakukan langkah yang kedua. Karena mungkin ada kesalahan yang lain yang diterapkan dalam kode HTML template blog sobat.

2. Langkah yang kedua, Jika alamat URL situs yang tertera tidak sama dengan alamat URL situs blog sobat seperti gambar di atas, Maka silahkan sobat melakukan analisa pada setelan dasar blogger yang berhubungan dengan blog sobat.

Cara melakukannya:

• Silahkan sobat kembali lagi pada Dashboard blog sobat, Kemudian klik >> Setelan >> Dasar.
• Lalu edit Penerbitan Alamat Blog sobat. Klik >> Edit >> Masukkan Alamat URL Blog Sobat >> Jangan lupa klik >> Simpan. Lihat contoh gambar screenshot di bawah ini. 

Catatan:

• Meski yang ada dalam kotak edit sama dengan alamat URL blog sobat, Namun cara ini memang harus di lakukan guna untuk menyimpan ulang alamat URL blog sobat agar lebih falid dan sesuai dengan widget gadget followers blog sobat sebagai pemiliknya.
• Cara ini terbukti manjur dan berhasil saya lakukan untuk mengatasi dan mengembalikan widget gadget followers blog saya yang hilang secara tiba-tiba. Semua langkah diatas saya tempuh karena mengikuti petunjuk teks dari Webmaster, Yaitu "Kami minta maaf…Gadget ini salah dikonfigurasi. Petunjuk Webmaster: Pastikan bahwa "Setelan Jalinan Teman – URL Beranda" sesuai dengan URL situs ini".
• Oleh sebab petunjuk itu saya melakukan pembenahan konfigurasi setelan dasar dan menyimpan ulang alamat URL situs agar sesuai atau cocok dengan URL situs blog KUCOPAS.

 Jika sobat masih mengalami kesulitan memahami penjelasan saya, Silahkan sobat bertanya pada form komentar yang tersedia. Sebisa mungkin saya dengan senang hati akan membantu sobat.

 Semoga tips dan trik tutorial blog yang mengulas tentang Cara Mengatasi Dan Mengembalikan Widget Gadget Followers Blog Yang Menghilang, Bisa sangat membantu dan bermanfaat banget bagi sobat KUCOPAS semua.

Selamat Berkarya...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog

 Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label (Category) Di Blog - Daftar Isi by label (Category) itulah kata familiarnya dalam dunia blogger untuk artikel yang akan saya share ini. Membuat daftar isi dalam blog merupakan keinginan dari setiap blogger maupun design web. Sebab dengan cara ini akan dapat mempermudah para pengunjung atau visitor yang datang ke blog kita, Agar bisa dengan cepat menemukan saat mencari artikel posting apa yang di inginkan.

 Tampilan dari daftar isi by label ini kurang lebih seperti daftar isi Jquery Accordion, Kerena fungsinya juga sama-sama daftar isi by label. Namun untuk daftar isi dengan Jquery Accordion sudah menggunakan efek Jquery dan akan menampilkan daftar isi dari isi keseluruhan blog itu sendiri, Sedangkan daftar isi by label atau banyak label ini bisa di atur manual perlabel atau banyak label yang kita ingin tampilkan di halaman posting, laman maupun widget blog.

 Agar sobat tidak bingung dan ingin melihat seperti apa daftar isi dengan Jquery Accordion, Silahkan sobat bisa lihat pada artikel posting yang sudah pernah saya share dan perbarui sebelumnya, Yaitu tentang Cara Membuat Daftar Isi Jquery Accordion Di Blog.

 Oke sekarang kita kembali ke pokok bahasan cara membuat daftar isi label tertentu atau banyak label di blog. Cara pemasangannya di blog sangat mudah sekali, Karena sobat tidak usah repot-repot Edit HTML dalam template blog sobat yang tentunya sangat rumit dan membingungkan. Cukup hanya menaruh kodenya dalam rancangan atau Tata Letak blog melalui Tambah Gadget, Jadi sangat gampang sekali untuk di pindah-pindah widgetnya seperti yang sobat inginkan agar sesuai dengan tampilan blog sobat.

Lihat contoh gambar screenshot berikut atau lihat pada blog DEMO KUCOPAS.

DEMO

Cara memasangnya di blog ada dua cara yaitu:
1. Memasang Daftar isi label tertentu atau banyak label pada Widget blog.
2. Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.

Untuk cara memasangnya silahkan sobat ikuti langkah-langkahnya sebagai berikut.

1. Cara memasang Daftar isi Label tertentu atau banyak Label pada Widget Blog

• Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.

• Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.

• Kemudian masukkan semua kode berikut ke dalam kotak HTML/JavaScript.

<script>
var numposts = 100;
var standardstyling = true;
</script>
<script src="http://kucopas-js.googlecode.com/files/DaftarIsiByLabel.js" type="text/javascript"></script>
<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
<h3>
TUTORIAL BLOG</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/TUTORIAL%20BLOG?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
<h3>
TRIK FACEBOOK</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/trik%20facebook?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
<h3>
TECHNO</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/trik%20komputer?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>

• Jika sudah di masukkan semua kodenya, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Catatan:

- Warna Hijau : Silahkan sobat ganti dengan alamat URL blog sobat.
- Warna Merah : Nama Judul Label, Silahkan sobat ganti sesuai dengan keinginan sobat.
- Warna Biru : Nama label blog yang daftar isinya akan di tampilkan, Silahkan sobat ganti dengan label blog sobat, Besar kecil huruf harus sesuai dengan label blog sobat. Gunakan %20 untuk label yang ada space atau spasinya.
- Jika sobat ingin menambahkan atau mengurangi daftar label yang di tampilkan, Silahkan sobat bisa menambah atau mengurangi kode script-nya.
- Warna Pink adalah ukuran box atau kotak scroll. Silahkan sobat ganti sesuai dengan keinginan sobat.

2. Cara Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.

• Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.
• Pada Dashboard pilih >> Buat Entri Baru Untuk posting.
• Untuk Laman pilih Menu >> Laman >> Laman Baru.
• Pada Kotak Posting atau Laman, Pilih Mode HTML. Bukan Compose.
• Kemudian masukkan semua kode di atas tadi.
• Jika sudah, Silahkan sobat klik >> Publikasikan dan lihat hasilnya.

 Jika sobat mengikuti cara dan langkah-langkahnya dengan benar, Maka dapat saya pastikan trik dan tips ini berhasil dengan sempurna. Namun jika sobat mengalami kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel tentang Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat Berkarya...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Footer 2 Kolom Di Blog

 Cara Membuat Footer 2 Kolom Di Blog - Footer adalah kolom widget yang biasa berada paling bawah di bagian blog, dan tentunya sobat bisa mengisinya dengan berbagai widget yang sobat inginkan. Kali ini saya akan memberikan tutorial bagaimana caranya membuat dan memasang footer 2 (dua) kolom diblog dengan fungsi bisa langsung tambah gadget atau Add Gadget tanpa harus susah-susah membuat atau menambah kolom lagi. Karena sobat bisa langsung tambah gadget di atas atau di bawah kolom widget yang sobat inginkan.

 Untuk lebih jelasnya sobat bisa melihat contoh gambar screenshot berikut di bawah ini.

 Keterangan dari gambar di atas adalah tampilan yang terlihat pada bagian tata letak blog yang sudah di pasangi footer 2 (dua) kolom. Lihat gambar yang sudah saya kasih lingkaran warna merah. Jadi sangat gampang untuk tambah gadget, Karena sobat hanya tinggal klik tambah gadget atau add gadget saja bila ingin mengisinya dengan widget blog yang sobat inginkan.

 Untuk cara membuat dan memasang footer 2 (dua) kolom di blog, caranya sangat mudah. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.
2. Pilih blog, Lalu pada Dashboard pilih menu Template.
3. Sebelum sobat klik Edit HTML, Ada baiknya sobat Unduh template lengkap, Guna untuk berjaga-jaga jika ada kesalahan saat Edit HTML dan sobat bisa mengembalikan template seperti semula. Caranya klik >> Cadangkan / Pulihkan (Tombol berada di bagian kanan atas)>> Unduh template lengkap. Jika sudah di unduh, silahkan klik tutup atau close.
4. Sekarang kita kebagian Edit HTML. Silahkan sobat klik >> Edit HTML >> Lanjutkan >> Centang "Expand Template Widget".
5. Jika sudah, Silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempermudah pencarian).
6. Kemudian tambahkan semua kode berikut diatas atau sebelum kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

7. Langkah yang selanjutnya, Sobat cari kode berikut di bawah ini. (Gunakan CTRL + F kembali untuk mempercepat pencarian). Cari salah satu kode saja.

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>

8. Jika sudah ketemu, Kemudian sobat tambahkan kode berikut dibawah atau sesudah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Catatan:
Jika pada template yang sobat gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode-nya dibawah atau sesudah kode <div id='footer'>


9. Sebelum sobat klik Simpan, Ada baiknya klik dulu Preview atau pratinjau. Jika tidak terjadi eror pada template blog sobat, Langkah yang terakhir silahkan sobat klik Simpan template.

10. Selesai dan lihat hasilnya pada Dashboard Tata letak blog sobat. Jika sudah seperti yang ada pada contoh gambar screenshot diatas, Berarti sobat sudah berhasil Membuat Dan Memasang Footer 2 (Dua) Kolom Di Blog sobat.

 Jika ada pertanyaan mengenai tutorial ini, Sobat jangan sungkan-sungkan untuk bertanya melalui form komentar yang tersedia. Semoga bermanfaat bagi sobat KUCOPAS semuanya, Selamat berkarya.

---

| Source By www.maskolis.com | Supported by http://kuc0pas.blogspot.com |

---

Cara Memasang Box Subscribe di Blog

1. Login ke Blogger
2. Kemudian Rancangan -> Edit HTML ( Tampilan Lama )
2. Kemudian Masuk ke Template -> Edit HTML ( Tampilan Baru )
3. Kemudian Letakan kode Berikut di atas </head>

.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}

4. Kemudian Save Template

5. Silahkan Copy kode Ini dan Pastekan di Add Gadget

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUdAUcz7872bj8_DMQ8ntU3REdjO8XgsdZoLjAQgu9DK-9r235TydQi5LBSbW3-qh7C2KUohh-rE88VggKxOPOAHSe6h99BZt48zWm6jbC31tZoZ0XbvkcPaJkTkzCLMMLeHy20gDxoro/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79QQBqNzDU8KpgC240JEcaWcsjf85B9UwVFUknTUeBMa2cMPHVPtUjkg9QWSE6YZvg1Yw0zFaSPgxCebJWnqdrz4wswf85kmH0Z0vOGVvsP_MFS7DA1DvfpIzH4_WVKr5zsOMX-N8tlKq/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhbqAyT7KR2ZSapEd8VRbWoGBNX3Fgu86anJhn_yroC3WzGdwpSE0zhEbyxz_pC6HdXhAnZXSWefuydx3qpE4b8JIEmdurRpPG7XReTlklqTil9MzdP4tSP2Yipzkz7MrYVqC1QmE9yAN/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixPFuatHFpY9c1qj8i0g_9C4WZxlAp__-7traFsK3_J22FfD47tT3GSqeRbj8g3xoLLqXr8tHkj_UY5BDJed0xMjiv_-Z2EEMh3vayKP6BzWcicw0M9mwNdm6y8TD4k8zt7xAwxZ8JVnxs/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-igEwb84Oydy-bsq2hbLtsTRNKwsjQmp7w2xNaqnru9v3ZBeUv18_WwoKdyssCECbjyUEijVM1RFlmJ4TrVik194FZYy4nv3fj48lUvqkzX86lRTkkJwDdNSrqPzMUEThWDRFQpayuM/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqidpjzgy3hDt1A6buRPqDv1UkvwaJkuHvuWvoAop1sT7EMbYGL9NfnmZbuy3qU1fEAYTm1GNIPQzmMAMO2orm3vF1dqz5yfy7gJ_8PhRNyrlX9y4hXV66zkzjrwHtNNfamu1Os9BJx3g/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHoKgUTSRX-EsKRfSQzH5aiodp1IFU9nmzfve6yysP67ET45MS_ElmomqixlpD6yJf-Q_VjDjWVzamaYwfjJwZcJqyJv5ocKDKX6zGT_GomHoHG6RFF5C2NCBixUflER-HB79JOCo3FQ/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtnv6bP8VcpyNE0VQIl62ZXQ7weaRQIU7BU8HV0RQnAIjOBSpMZIFta-Pkud-O7mUBNXTmZsVuOErh1LwnkYTRTPpaFOejYoDczRMfeVtGteyX51Efavc0x9DX2iOLUjV8JA_0Ya7zRc/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixKrOswMRGVh2jzm-ntlfEhkDdQ2WPlUYNwlVS1lCBFFH-d1YSgEtWoTKSJamq_DHXMZHrqu-UnYNYHxWjB9GBw9Al_VafjpoInrtO57nru817__i_aO6nwgUmkMjn45XjFv7gDoeyhso/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdiy9GMgFIbfhfWLD2uL4ap96cRpKXSLUjsxMtTGxtCKcy-gXhLC0MR8fKbYy8W7QooSOIvFKb21RXFULSC0HpUg0HkY-uwTqaOlkrzQxWU2U5jgze5L_BiZR_FHzTu4dnMGf6DJUeDus/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2Qo6zZ8ipyFUKOUs0CdYbEQ_MmSZaAvtHQDb5T5hshMsnbqO63s1WXuN8ExO3QNNGUHm_K_PdBj-eo4O6TXdouJKRPI8SqdwfEo-Wponxq3KRehIeFy2lfRsBZD54hQ2t9MZM3pHnck/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div> 

Keterangan :
Jangan lupa ganti Semua dengan ID Sobat ...

Barnstormin'

Wild West Milkshakes

Naruto Widget

The Game Collection

Maukie - the virtual cat

Cara Membuat Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog

 Cara Membuat Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog - Kali ini saya akan share artikel yang masih berhubungan dengan trik blog. Yaitu tentang label atau kategori blog yang otomatis dengan thumbnail gambar atau foto.

 Fitur kategori label otomatis dengan thumbnail sebenarnya merupakan pengembangan dari trik sebelumnya mengenai Cara Membuat Dan Memasang Daftar Isi Berdasarkan Label Di Blog. Namun bedanya fitur ini bisa menampillkan kategori berdasarkan nama kategori atau label tertentu yang disertai dengan gambar thumbnail atau foto dan juga sedikit ringkasan atau potongan artikel dari isi setiap masing-msing postingan blog.

 Contoh tampilan dan penerapan dari fitur Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog, Bisa sobat lihat demonya pada Blog Demo Kucopas. Kurang lebih tampilanya seperti gambar screenshot di bawah ini.

DEMO

 Fungsi dari fitur Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog adalah untuk mempermudah pengunjung blog kita agar menemukan artikel yang di cari, Karena tampilannya yang di sertai dengan thumbnail gambar atau foto, Maka pengunjung pun akan lebih tertarik untuk melihat isi dari artikel postingan tersebut secara lengkapnya.

 Jika sobat tertarik untuk membuat dan memasangnya di blog sobat, Silahkan ikuti langkah-langkahnya sebagai berikut:

• Langkah pertama.

1. Silahkan sobat >> Login/Masuk >> Ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" >> Expand Template Widget.
4. Kemudian cari Kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
5. Setelah ketemu, Silahkan sobat Taruh semua Kode berikut tepat sebelum atau di atas Kode ]]></b:skin>

/*** Fitur Kategori ***/
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 {}

• Langkah Kedua.

1. Masih dalam "Edit HTML" Template, Silahkan sobat cari Kode </head> (Gunakan CTRL+F lagi untuk mempercepat pencarian).
2. Jika sudah ketemu, Silahkan sobat Taruh semua Kode berikut tepat Sebelum atau di atas Kode </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1kC4Wa4W9T2F74m3zPJiRaDN9OSmgmsB79cwaS2wgEiklWJKiXtdtuYe8m9r0x46DzE1D8mL6pHPUWyXkJtefdofvrVrAl7SBWo1ehKKy0yI2H4Sq-0a-yrfGtvayB5NOidk6mSCMHC7/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

4. Demi untuk menghindari kesalahan saat Edit HTML dalam Template, Silahkan sobat klik >> Preview/Pratinjau, Jika tidak terjadi eror, Silahkan sobat klik >> Simpan Template.

Langkah Terakhir.

1. Silahkan sobat menuju ke Dashboard, Pada tampilan blog baru pilih dan klik Menu >> Tata Letak >> kemudian pilih dan klik >> Tambah Gadget >> Lalu pilih dan klik >> HTML/JavaScript.
2. Langkah yang berikutnya, Silahkan sobat Masukkah semua kode berikut kedalam kotak HTML/JavaScript.

<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script>

<script type="text/javascript" src="/feeds/posts/default/-/TUTORIAL%2OBLOG?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

3. Silahkan sobat klik >> Simpan dan lihat hasilnya pada blog sobat akan ada widget Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto.

Keterangan:

• var numposts = 5 adalah Jumlah daftar isi label atau kategori yang di tampilkan. Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.

• var numchars = 50 adalah Jumlah karakter ringkasan isi posting yang di tampilkan. Silahkan sobat ganti nilainya seperti keinginan sobat.

• true adalah Kode perintah untuk di tampilkan.

• false adalah Kode perintah untuk tidak di tampilkan.

• TUTORIAL%2OBLOG adalah Label yang isinya akan di tampilkan. Silahkan sobat ganti dengan label atau kategori blog sobat yang ingin isinya di tampilkan. (Besar kecil huruf harus sama dengan label atau kategori blog sobat, Gunakan %20 jika label atau kategori sobat ada space atau spaci-nya).

 Sampai disini pastinya sobat sudah bisa memasang Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto di blog sobat semua. Jika sobat masih menemui kesulitan, Silahkan bertanya pada kolom kotak komentar yang tersedia. Senang bisa berbagi dan membantu sobat. Semoga artikel ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Terus berkarya...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Recent Post Berdasarkan Label Kategori Dengan Thumbnail Gambar Di Bog

 Cara Membuat Recent Post Berdasarkan Label Kategori Dengan Thumbnail Gambar Di Bog - Pada kesempatan kali ini saya akan berbagi trik seputar dunia blogger, Yaitu tentang cara membuat recent post berdasarkan label atau kategori dengan gambar (Thumbnail) di blog.

 Recent Post adalah artikel postingan blog yang paling terbaru, Namun trik yang akan saya share kali ini adalah recent post berdasarkan label atau kategori dengan thumbnail atau gambar. Jadi intinya recent post ini hanya akan menampilkan artikel terbaru dari label atau kategori yang bisa kita tentukan sendiri.

 Fungsi dari recent post perlabel atau kategori dengan gambar atau thumbnail ini adalah bisa untuk mempercantik tampilan blog kita dan juga bisa untuk mengategorikan isi dari semua masing-masing artikel blog kita yang ingin di tampilkan pada satu widget maupun laman. Selain itu juga bisa untuk memudahkan para pengunjung blog kita untuk mencari artikel yang di butuhkan dalam label atau kategori tertentu.

 Sobat bisa melihat contohnya yang sudah saya pasang pada laman blog ini, Silahkan sobat klik menu "Trik Blog" pada menu dropdown blog ini atau lihat DEMO. Tampilan dari recent post perlabel dengn thumbnail ini kurang lebih seperti gambar screenshot berikut dibawah ini.

DEMO

 Cara pemasangan recent post perlabel atau kategori dengan gambar atau thumbnail di blog, Caranya sangat mudah sekali. Karena sobat tinggal memasukkan semua kode script yang saya sediakan ke dalam kotak HTML/JavaScript yang berada pada Tambah Gadget Tata letak blog. Selain itu sobat juga bisa memasangnya di postingan maupun laman blog. Dan tentu saja tanpa susah-susah Edit HTML dalam Template blog sobat.

 Jika sobat tertarik untuk memasang recent post perlabel atau kategori dengan gambar atau thumbnail di blog sobat, Silahkan ikuti langkah-langkahnya sebagai berikut:

1. Langkah pertama, Silahkan sobat >> Masuk/Login >> ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> Tambah gadget >> HTML/JavaScript.
3. Kemudian >> Masukkan semua Kode berikut ke dalam kotak HTML/JavaScript.

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}
</style><script src="http://kucopas.googlecode.com/files/recent-post-by-label-thumbnail.js">
</script><script>
var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;
</script><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/TUTORIAL%20BLOG?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>

4. Setelah sobat masukkan semua kode kedalam kotak HTML/javaScript, Langkah yang terakhir silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan:

• var numposts = 10 adalah Jumlah artikel posting yang akan di tampilakan. Ganti nilainya sesuai dengan keinginan sobat.

• var numchars = 150 adalah Jumlah karakter atau cuplikan tulisan posting yang akan di tampilkan. Ganti nilainya sesuai dengan keinginan sobat.

• http://kuc0pas.blogspot.com Ganti dengan alamat URL blog sobat.

• TUTORIAL%20BLOG adalah Label atau kategori yang akan di tampilkan daftar isinya. Ganti dengan Label atau kategori blog sobat. Besar kecil huruf harus harus sesuai dengan label blog sobat. Gunakan %20 jika label blog sobat ada Space atau spasinya.

 Cara di atas adalah cara penerapan dalam widget blog. Jika sobat ingin memasangnya dalam postingan atau laman blog, Ikuti cara berikut:

1. Silahkan sobat >> Masuk/Login >> Ke Blog sobat.
2. Setelah berhasil masuk, Silahkan sobat pilih dan klik >> Buat Entri Baru atau klik Menu Laman.
3. Kemudian sobat masukkan semua Kode di atas tadi, Dengan catatan sobat masukkan Kode pada Mode HTML dan bukan Compose dalam Entri Baru maupun Laman.
4. Langkah yang terakhir silahkan sobat klik >> Publikasikan dan lihat hasilnya.

 Sampai disini saya rasa sobat pasti sudah bisa membuat dan memasangnya di blog sobat. Namun jika sobat masih menemui kesulitan untuk memasang recent post perlabel atau kategori dengan gambar atau thumbnail di blog sobat, Silahkan bertanya dalam form komentar yang tersedia.

 Semoga trik artikel seputar dunia blog yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat berkarya...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Menu Tab View Tanpa Edit HTML Template Blog

 Cara Membuat Menu Tab View Tanpa Edit HTML Template Blog - Menu tab view di blog adalah menu yang mempunyai isi widget yang berbeda dalam setiap tab menu, Kurang lebih seperti itulah definisi yang saya ngerti dan pahami tentang menu tab view. Karena di sini saya telah membuat dan memasangnya di blog DEMO saya.

 Fungsi dari menu tab view ini juga bisa untuk menghemat tempat dalam penempatan widget-widget yang di pasang di sidebar maupun dimana saja pada tata letak blog. Sebab dalam menu tab view ini bisa di isi dengan tiga widget sekaligus atau lebih dalam satu kotak atau kolom.

 Tampilan dari menu tab view ini sekilas mirip dengan menu-menu yang lain, Namun perbedaanya menu tab view ini yang sering di pasang pada sidebar blog dan mempunyai tampilan yang dinamis dan ringkas. Dalam blog DEMO yang saya buat, Menu tab view ini sudah saya isi dengan tiga widget. Diantaranya ada Recent Post (Posting artkel terbaru), Popular Post dan Label Claud (Kategori).

 Ke-unikan dari menu tab view ini adalah semua widget tersebut akan berada pada satu kolom atau kotak, Efeknya yaitu widget akan muncul sesuai dengan tab menu yang sobat klik atau pilih. Hebatnya lagi sobat bisa menggantinya dengan widget-widget yang lain sesuai dengan keinginan sobat.

 Agar sobat tidak bingung dan penasaran lagi tentang bagaimana tampilan dari menu tab view ini, Di sini saya buatkan screenshot gambar dari menu tab view yang saya maksud. Dan sobat juga bisa melihatnya secara langsung pada blog DEMO saya.

DEMO

 Cara pemasangan di blog sangatlah mudah, Karena kita tidak usah repot-repot Edit HTML dalam template blog yang mungkin bisa memakan banyak waktu dan kesulitan dalam edit template blog. menu tab view ini nanti akan kita pasang di sidebar blog dengan cukup hanya melalui Tambah Gadget dalam Tata letak.

 Jika sobat tertarik untuk membuat dan memasang menu tab view ini di blog sobat, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> Login/Masuk >> ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Sobat pilih dan klik Menu >> Tata Letak >> kemudian klik >> Tambah Gadget >> Lalu pilih dan klik tanda + pada >> HTML/JavaScript.
3. Langkah selanjutnya, Silahkan sobat Masukkan semua kode script berikut ke dalam kotak  HTML/JavaScript.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 83px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #3d85c6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#ffffff; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Terbaru</a>
<a>Popular</a>
<a>Label</a>
</div>
<div style="width:255px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<script src="http://kucopas.googlecode.com/files/Recent%20Post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
 [ <a href="http://kuc0pas.blogspot.com/2012/09/cara-membuat-menu-tab-view-tanpa-edit.html" target="blank"><b><font color="green">Get Widget<font></font></font></b></a> ]
</div>
</div>
<div class="Page">
<div class="Pad">
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://kuc0pas.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
<div id="w2bFlashContent">
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl       : "http://kuc0pas.blogspot.com/", /* ganti dgn alamat blog sobat */
color          : "000000", /* warna link menu claud  */
hoverColor     : "0000FF", /* hover link menu claud*/
backgroundColor: "transparent", /*  background claud*/
size           : 10, /* ukuran font claud*/
speed         : 100, /* kecepatan animasi claud*/
width          : 210, /* lebar label cloud animasi */
height         : 200 /* tinggi label cloud animasi */
};
/*]]>*/
</script>
<script type="text/javascript" src="http://kucopas.googlecode.com/files/Label%20Cloud.js"></script>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

4. Jika semua kode sudah sobat taruh dalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan:

• Warana ORANGE adalah keterangan dari menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna MERAH adalah kode warna dan ukuran dari tampilan menu tab view, silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna BIRU MUDA adalah Judul bagian atas dari menu tab view.

• Warana PINK adalah ukuran lebar dan tinggi kotak widget dari menu tab view.

• Warna BIRU adalah Kode widget yang ditampilkan  (Recent Post, Popular, Label) pada menu tab view, Sobat bisa menggantinya dengan widget blog atau apapun yang sobat inginkan.

• Warna HIJAU silahkan sobat ganti dengan URL blog sobat.

 Sampai disini saya rasa sobat sudah berhasil membuat dan memasang menu tab view tanpa edit html di blog. Sobat bisa bereksperimen sendiri untuk mendapatkan ukuran maupun tampilan warna dari menu tab view tersebut agar menjadi seperti yang sobat inginkan. Jika sobat menemui kesulitan, Silahkan bertanya dalam form komentar.

 Semoga artikel tutorial blog tentang cara membuat menu tab view tanpa edit html template blog ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog

 Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Postingan Blog - Kali ini saya akan share artikel tips dan trik yang berhubungan dengan tutorial blog, Yaitu tentang cara menambah dua kolom widget di bawah postingan blog.

 Sedikit pengetahuan untuk sobat KUCOPAS semua, Menambah dan membuat dua kolom widget dibawah postingan blog ini merupakan panduan untuk para blogger yang memaksimalkan pada halaman postingan blog. Karena dengan menambah dua kolom widget dibawah postingan blog, Sobat dapat memaksimalkan serta mengisi ruang kosong yang ada dan menambahkan widget seperti yang sobat inginkan.

 Tehnik menambah dan membuat dua kolom widget dibawah postingan blog ini sudah banyak di gunakan oleh para blogger. Dan biasanya di dalam kolom widget mereka menambahkan atau mengisinya dengan iklan (sponsor), widget artikel terkait (related post), kotak berlangganan email dan juga widget-widget yang lain.

 Manfaatnya jika sobat menggunakan teknik menambah dan membuat dua kolom widget dibawah postingan blog ini adalah agar tidak menjejali atau memenuhi pemasangan widget pada sidebar blog yang bisa berpengaruh pada kecepatan loading blog saat di buka atau di kunjungi para visitor. Mungkin hal ini sering diabaikan dan tidak di perhatikan oleh para blogger karena keasikkan untuk mempercantik tampilan blog dengan widget-widget yang notabenya tidak telalu penting. Alhasil loading blog bisa menjadi sangat berat saat di buka atau di akses.

 Karena itu jika sobat tertarik untuk memaksimalkan halaman postingan blog, Sobat bisa melakukannya dengan menambah dan membuat dua kolom widget dibawah postingan blog. Lihat contoh gambar dua kolom widget dibawah postingan blog berikut ini.

DEMO

 Menambah dan membuat dua kolom widget dibawah postingan blog seperti gambar di atas caranya sangat mudah, Silahkan sobat ikuti langkah-langkah yang akan saya berikan tutorialnya secara detail dan jangan sampai ada yang terlewatkan berikut ini:

1. Silahkan sobat >> Masuk/Login >> ke akun blog sobat.
2. Pada "Dashboard" tampilan blog Baru, Pilih menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" >> Expand Template Widget.
4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
5. Jika sudah ketemu, Letakkan semua kode script berikut tepat sebelum atau diatas kode ]]></b:skin>

.kucopas {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}
.bawahkiri {float:left;width:47%;margin-right:5px;border: 1px solid #000000; padding: 5px; background: #3d85c6;-moz-border-radius:5px;}
.bawahkanan {float:right;width:47%;border: 1px solid #000000; padding: 5px; background: #3d85c6;-moz-border-radius:5px;}

Keterangan:

• #000000 adalah Kode warna untuk Garis tepi widget. Silahkan sobat ganti kode warnanya sesuai dengan keinginan sobat.
• #3d85c6; adalah Kode warna untuk Background widget. Silahkan sobat ganti kode warnanya sesuai dengan keinginan sobat.

6. Masih dalam Edit HTML, Silahkan sobat cari lagi kode <data:post.body/> (Gunakan CTRL+F untuk mempercepat pencarian).

7. Jika sudah ketemu, Letakkan semua kode script berikut tepat sesudah atau dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='kucopas'>
<div class='bawahkiri'>
Taruh Kode Script Widget atau tulisan Sobat di sini
</div>
<div class='bawahkanan'>
Taruh Kode Script Widget atau tulisan Sobat di sini
</div>
</div>
</b:if>

8. Sebelum di save atau di simpan, Silahkan sobat klik preview atau pratinjau terlebih dahulu, Guna untuk menghindari terjadinya eror saat Edit HTML pada Template blog sobat.

9. Jika hasil dari preview atau pratinjau tidak terjadi eror, Silahkan sobat klik >> Simpan Template >> dan lihat hasilnya pada postingan blog sobat, Disitu akan terlihat ada dua kolom widget tadi yang sudah sobat pasang.

Keterangan:

• Jika sobat tidak menggunakan fungsi  Readmore pada blog sobat, Maka letakkan kode script tersebut tepat sesudah atau dibawah kode <data:post.body/> yang pertama.

• Namun jika sobat telah menggunakan fungsi Readmore pada blog sobat, Maka akan ada dua kode <data:post.body/> atau lebih. Kemudian letakkan kode script tersebut tepat sesudah atau dibawah kode <data:post.body/> yang kedua atau terakhir.
• Warna PINK silahkan sobat ganti dengan Kode Script Widget atau tulisan sesuai dengan keinginan sobat.

Contoh Penerapan kode Widget:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='kucopas'>
<div class='bawahkiri'>
<center>KOLOM WIDGET KANAN
<H2>Artikel Terkait:</H2></center>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</div>
<div class='bawahkanan'>
<center>KOLOM WIDGET KIRI
<H2>TRANSLATE</H2></center>
<!-- Begin TranslateThis Button -->

<center><div id='translate-this'><a class='translate-this-button' href='http://www.translatecompany.com/' style='width:180px;height:18px;display:block;'>translation</a></div>

<script src='http://x.translateth.is/translate-this.js' type='text/javascript'/>
<script type='text/javascript'>
TranslateThis();
</script></center>

<!-- End TranslateThis Button -->
</div>
</div>
</b:if>

Keterangan:

• Warna BIRU adalah Kode Script Widget bawah postingan sebelah KIRI yang saya pasang pada contoh DEMO. Silahkan sobat ganti dengan Kode Widget milik blog sobat sesuai dengan keinginan sobat.

• Warna PINK adalah Kode Script Widget bawah postingan sebelah KANAN yang saya pasang pada contoh DEMO. Silahkan sobat ganti dengan Kode Widget milik blog sobat sesuai dengan keinginan sobat.

 Jika sobat mengikuti langkah-langkahnya seperti apa yang sudah saya jelaskan tutorialnya diatas, Sampai disini saya rasa sobat pasti sudah bisa memasang atau menerapkan dua kolom widget dibawah postingan pada blog sobat. Namun bila sobat masih menemui kesulitan, Silahkan sobat bertanya pada form komentar yang tersedia.

 Semoga artikel posting tutorial blog tentang cara menambah dan membuat dua kolom widget dibawah postingan blog yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---