Script Random Post with Thumbnail

Dari kemaren pengen banget update postingan. Tapi bingung mau posting apa. Setelah berkelana kesana kemari sambil belajar design template buat blogspot, akhirnya saya menemukan sedikit bahan buat bahasan. Tema yang ingin saya bahas disini adalah tentang Script Random Post with Thumbnail.

Random Post with thumbnail atau gambar ini sebenarnya sudah disediakan oleh blogger dalam bentuk widget. Jika belum tahu widgetnya kalian bisa membaca langsung di Blogger Pluggins dipostingan Random Posts Widget for Blogger with Thumbnails. Namun saya disini tidak membahas tentang widget tersebut. Saya ingin membahas Cara memasang Random post tersebut Tanpa menggunakan Pluggin tapi hanya berupa mentahan scriptnya saja. Dan Bahasan Random Post with Thumbnail sangat banyak di share di google, tapi tidak satu pun yang benar-benar seperti yang saya inginkan.

Seperti kita ketahui bersama widget-widget bawaan blogger ini sudah mempunyai pengaturan default dan script yang digunakan juga All  in One. Sehingga hal ini juga pasti mempengaruhi loading dari blog. Apalagi pengguna dari script yang sama juga pasti tidak sedikit mengingat pertumbuhan dari para blogger baru yang demikian pesat.

Oleh sebab itu disini saya ingin share sebuah script yang bisa anda gunakan hanya di blog anda sendiri.

<script>
var numposts_gal = 1;
var random_posts = true;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts">
</script>

Keterangan:
var numposts_gal = 1; berfungsi untuk menentukan jumlah posting yang ingin ditampilkan. Ganti angka satu sesuai kebutuhan.
var random_posts = true; berfungsi untuk menampilkan secara acak. Jika ingin mematikan sistem acak, maka anda cukup ganti kata true dengan false

Perlu diketahui jika script tersebut hanya mentahan dan bisa menampilkan gambar dan Judul postingan. Agar bentuk dan tampilannya sesuai keinginan kalian bisa menambahkan CSS sesuai selera.

Melalui postingan ini juga saya ingin sedikit memberikan kritikan atau lebih tepatnya perbandingan dan sedikit penjelasan tentang script-script yang biasa di pakai oleh para designer blogger template untuk mempercantik blog mereka dengan fitur-fitur postingan mereka. Pada dasarnya hampir semua script tersebut berasal dari Blogger Pluggins, Hanya saja mereka biasanya sudah melakukan sedikit modifikasi.

Blogger Pluggins sendiri telah banyak menyediakan fitur-fitur siap pakai, diantaranya Pluggin Popular Post, Recent Post, Random Post, Featured Post, Related Post Dan banyak lagi yang lain. Perlu di ketahui jika  menurut yang saya ketahui setiap script tersebut mempunyai fungsi-fungsi yang berbeda.

Popular Post atau Entri Populer ini sesuai namanya merupakan sebuah fitur yang berfungsi untuk menampilkan Postingan yang paling banyak dibaca atau dilihat.
Recent Post = berfungsi untuk menampilkan artikel-artikel terakhir berdasarkan tanggal posting atau juga Artikel yang di update.
Featured Post berfungsi untuk menampilkan postingan atau artikel berdasarkan label-label khusus.
Related Post berfungsi dan memiliki cara kerja yang hampir sama dengan Featured post. Biasanya Related Post ini dibuat hanya tampil jika kita sudah masuk ke postingan.
Random Post berfungsi untuk menampilkan artikel-artikel secara acak, Baik itu secara keseluruhan maupun berdasarkan label-label tertentu.

Sebagai Contoh hasil dari Script Random Post with Thumbnail ini bisa kalian lihat di bagian footer blog ini. Silakan refresh halaman homepagenya, maka jika kalian perhatikan setiap kali direfresh maka gambar setiap label akan berubah.

Nah..
Jika ada para master-master blogger punya pendapat lain, Mohon di share dikolom komentar dibawah.

Cara membuat Recent Post by label horizontal diblogspot

Postingan Cara membuat Recent Post by label horizontal diblogspot ini juga masih berhubungan dan tidak beda jauh dari dengan postingan sebelumnya. yaitu Cara membuat Popular post horizontal. Namun pada postingan ini, saya tidak memberikan tutorial lengkap karena saya anggap semua sudah mahir dan jago design blogger template sendiri.

Oopss..!!!
Jangan protes dulu ya..!!!
Jika mengalami kesulitan, anda bisa tinggalkan komentar dibawah kok. Lagi pula kalau selalu diberikan tutorial siap pakai, kapan mau belajar dan pintarnya..??!!!!

Hehee...!!! ^_^

Ok..!!!

Tanpa banyak basa-basi, kita langsung saja masuk ke pokok pembahasan.

Yang harus kita lakukan pertama adalah membuat sebuah kolom tempat widget Recent Post by label horizontal ini akan kita pasang.

Anda bisa mengambil referensi CSS dibawah ini untuk membuatnya.

.gadgetr-wrapper{}
.gadget {
 color: #333;
 line-height: 1.2em;
 margin:0 text-align: left;
 padding: 0 }
 
.gadget ul {
  font: normal 13px Arial;
  text-transform: none;
  list-style: none;
  margin: 0;
  padding: 0 }
 
.gadget li {
  text-indent: 0;
  line-height: 1.2em;
  text-align: left;
  margin: 0 auto;
  padding: 0 auto }
 
.gadget li a:hover {
  color: #36c;
  text-decoration: none;
  text-shadow: 1px 1px #111 }
 
.gadget .widget {
  background: none;
  border-bottom: 1px ridge #125;
  margin: 0 0 5px;
  padding: 10px }
 
.gadget img.label_thumb {
  float: left;
  height: 60px;
  width: 60px;
  margin: 0 10px 5px 0;
  border: ridge 1px #125;
  padding: 4px }
 
.gadget .label_with_thumbs {
  float: left;
  width: auto;
  max-height: 65px;
  margin: 0 auto;
  padding: 0 auto }
 
.gadget ul.label_with_thumbs li {
  min-height: auto;
  width: 200px;
  float: left;
  border: none;
  clear: none;
  margin: 0 10px 5px 0;
  padding: 0 }
 
.gadget ul.label_with_thumbs li a:link,.gadget ul.label_with_thumbs li a:visited {
   color: #333;
   text-decoration: none;
   line-height: 1.2em;
   font: bold 13px Georgia }

.gadget ul.label_with_thumbs li a:hover {color:#35c;text-decoration: none }

Jika pembuatan kolom ini benar maka kira-kira kita akan mempunyai kolom pemasangan seperti format dibawah ini.

<div id='gadget-wrapper'>
        <b:section class='gadget' id='gadget' preferred='yes'/>
</div>

Karena semua udah jago otak-atik CSS, maka semua pasti tahu yang harus kita lakukan hanyalah sedikit menyesuaikan lebar dan warna dari area template utama yang kita pakai. Saya anggap semua sudah mengerti tentang cara pembuatan dan pembagian kolom ini. Jika belum mengerti, silakan baca terlebih dahulu baca postingan sebelumnya.

Selanjutnya kita tinggal pasang Script Recent Post by label melalui Dashboard -> Design -> Add Gadget -> HTML/Javascript. Script Recent Post by label ini bisa anda dapatkan pada postingan yang telah kita bahas dipostingan ini.

Semoga bermanfaat..!!

Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog

Dipostingan kali ini kita akan membahas bagaimana cara menghilangkan dan menampilkan suatu objek diblog. Dalam mendesign sebuat template, Penggunaan Trik dan Kode-kode Untuk Menampilkan dan Menghilangkankan ,atau lebih tepatnya menyembunyikan Widget Content Blog ini sangat diperlukan agar hasil template yang kita buat tidak terlihat monoton. Sebagai contoh adalah widget slider dan salah satu sidebar yang ada pada blog ini. Widget tersebut hanya akan muncul dihalaman utama dan kategori blog dan akan menghilang jika kita masuk kehalaman posting.

Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini biasanya pasti ada ditemplate-template dengan gaya magazine atau majalah. Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog

<b:if cond="data:blog.url == data:blog.homepageUrl">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika kita mengklik Label Post atau membaca postingan secara keseluruhan.

2. Kategori Post dan Single Post

<b:if cond="data:blog.url != data:blog.homepageUrl">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (postingan secara keseluruhan).

3. Halama Utama Blog dan Kategori Post

<b:if cond="data:blog.pageType != &quot;item&quot;">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.

4. Single Post atau Halaman Postingan

<b:if cond="data:blog.pageType == &quot;item&quot;">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.

5. Halama Utama Blog dan Kategori Post

<b:if cond="data:blog.pageType == &quot;index&quot;">

...Kontent...

</b:if>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond="data:blog.url == &quot;URL_POST_TERTENTU&quot;">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'>

...Konten...

</b:if>

Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain.

Cara penggunaan kode ini sangatlah gampang. Kita cukup menambahkan kode yang kita inginkan kewidget yang ingin kita tampilkan atau sembunyikan.

Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok atau dengan memberikan perintah melalui kode CSS-nya. Namun biasanya, penerapan kode-kode ini melalui CSS hanya di gunakan untuk mengatur komposisi dari suatu kolom widget konten. Misalnya lebar dan posisi widget atau objek berbeda dihalaman utama dan postingan. Mungkin hal ini akan kita bahas di postingan berikutnya.

Mungkin itu saja yang saya tahu tentang Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini. Jika teman-teman punya pendapat atau ilmu yang lain, silakan tinggalkan komentar dan url postingannya dibawah ini. Semoga bermanfaat.

Kode Script dan Cara Memasang Recent Post By Label Di Blogspot

Sebenarnya Cara Memasang Recent Post ini sudah banyak dibahas oleh para master blogger. Namun biasanya dan kebanyakan yang dibahas hanya bisa menampilkan artikel-artikel yang disortir berdasarkan postingan terakhir yang diterbitkan.

Nah, Pada postingan kali ini kita akan coba membahas yang sedikit berbeda. Yaitu Bagaimana Cara menampilkan postingan-postingan terakhir tersebut diurutkan berdasarkan label. Hal ini akan sangat berguna buat kita jika blog yang ingin kita tulis berupa Blog berita. Seperti yang kita ketahui bersama biasanya blog atau web yang berupa berita ini biasanya menggunakan design seperti halnya Magazine atau Majalah.

Perbedaan template ini biasanya dilengkapi dengan kolom yang banyak agar kita bisa memasang widget yang juga tidak sedikit. Dimana nantinya setiap widget ini mempunyai fungsi untuk menampilkan artikel-artikel terdahulu yang di shortir berdasarkan label dari postingan.

Berikut ini adalah fungsi yang bisa kita manfaatkan dengan Memasang Script Recent Post By Label ini.

1. Recent Post By Label Hanya Judul Postingan.
2. Recent Post By Label Judul dan Gambar Postingan.
3. Recent Post By Label Judul, Gambar dan Jumlah Komentar Postingan.
4. Recent Post By Label Judul, Gambar dan Tanggal Postingan.
5. Recent Post By Label Judul, Gambar, Jumlah Komentar dan Tanggal Postingan.
6. Recent Post By Label Judul, Gambar, Jumlah Komentar, Tanggal Postingan dan Baca Selengkapnya.

Cara pemasangannya.
1. Masuk ke Dashboard -> Design -> Edit Html.
2. Cari kode </head>
Kemudian letakkan kode berikut diatasnya.

4. Save Template.
5. Kembali ke Dashboard -> Design -> Add Element -> HTML/JavaScript.

<script type="text/javascript">
var numposts = 4;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = false;
var showcommentnum =   true ;
var showpostdate = true;
var showpostsummary =  true ;
var numchars = 340;
</script>

<script src="/feeds/posts/default/-/LabelPost?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

Keterangan kode:

1. var numposts = 4;  = jumlah Postingan yang ingin ditampilkan
2. var showpostthumbnails = false; = Kode Menampilkan gambar
3. var displaymore = false;  Kode Menampilkan tulisan read more
4. var showpostdate = true; = Kode Menampilkan tanggal posting
5. var showcommentnum =   true ; Kode Menampilkan Jumlah Komentar Postingan
6. var showpostsummary =  true ; Kode Menampilkan sebagian isi Postingan
7. var numchars = 340; Panjang karakter isi postingan yang ditampilkan
8. var displayseparator = false; Kode Untuk memberikan Pembatas setiap tampilan

Ganti false (kode warna merah) dengan  true (kode warna biru) untuk menampilkan, demikian juga sebaliknya.

<script src="/feeds/posts/default/-/LabelPost?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">

Ganti LabelPost (kode warna cokelat) Dengan Label yang ingin ditampilkan. Jika label tersebut menggunakan spasi, maka ganti kode spasi dengan %20.
Contoh Label = Belajar Blog maka untuk penulisannya harus dengan format seperti ini:

<script src="/feeds/posts/default/-/Belajar%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">

Tambahan:
Kode ini juga bisa dipakai untuk memanggil feed post blog kita yang lain. Caranya adalah cukup dengan menambahkan URL BLOG dan Label yang ingin ditampilkan.

Contoh:

<script src="http://URL-BLOG-ANDA/feeds/posts/default/-/Belajar%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript">