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.

Pengenalan JQuery

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Selain dukungan fasilitas yang lengkap, membuat plugin jquery juga cukup mudah. Dukungan ajax adalah salah satu fasilitas yang sudah tersedia di jquery.

JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Bagi Web Developer jQuery akan sangat menyederhanakan kode-kode JavaScript, seperti saat digunakan untuk penanganan event, interaksi Ajax yang cepat. jQuery ini dirancang untuk mengubah cara Kita menulis JavaScript.

Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

Dikarenakan Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan, adalah salah satu alasan kenapa banyak web developer lebih memilih JQuery dibandingkan dengan Javascript Framework lain.

Apa itu Javascript Framework?

Framework, jika diterjemahkan ke bahasa kita, bisa berarti “area kerja”, atau “lingkungan kerja”. Dalam bahasa susahnya, berarti sebuah area kerja yang sudah disediakan fungsi-fungsi yang kita tinggal menggunakannya. Jadi tidak perlu lagi membuatnya dari awal.

Analoginya, seperti kita menyewa sebuah kantor yang didalamnya sudah terdapat semua macam kebutuhan kantor seperti telepon, meja kerja, ruangan, dapur, dan lain-lain. Nah, Framework ini juga berarti sama. Sebuah framework sudah banyak menyediakan kegunaan-kegunaan yang dengan mudah kita gunakan.

Framework inilah yang kini menjadi trend di dunia pemrograman. Tidak hanya di Javascript, tapi juga di PHP. Dan pengertian Framework semua sama.

JQuery dan kemudahannya

JQuery punya sebuah slogan yang “ngena” banget. “Write less, do more” memang bukan sembarang slogan. Menulis sedikit, bisa melakukan hal yang banyak.

Mari kita tengok bagaimana JQuery mempermudah kita.

Jika kita punya halaman HTML seperti ini:

<div id="container">This is container</div>

Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan adalah salah satu alasan kenapa banyak web develover lebih memilih JQuery dibandingkan dengan Javascript Framework lain.

Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.

<script src="jquery.js" type="text/javascript">

</script>

<script type="text/javascript">

$("#container").append("<strong>Ini hasil tambahan dari JQuery</strong>");

</script>

Untuk keterangan lebih lanjut, bisa dibaca manual JQuery di websitenya disini.

Trik Cepat menghilangkan Navbar dan widget bawaan blogger

Salah satu keuntungan dari menggunakan custom template untuk blogger biasanya kita tidak terlalu repot edit sana edit sini dari template yang disediakan. Sebuah custom template juga rata-rata telah dilengkapi dengan berbagai widget dan konten-konten favorite dan disukai oleh para blogger.

Salah satu cirinya lagi adalah telah menghilangnya widget-widget bawaan dari blogger, seperti misalnya navbar bawaan blogger. Tapi tahukah anda jika sebenarnya widget tersebut sebenarnya tidaklah hilang dari template anda. Widget tersebut biasanya hanya disembunyikan oleh designernya.

Coba saja ada masuk ke menu edit html dari dashboard anda. Kemudian cari kode berikut ini.

#navbar atau .navbar

Biasanya kode CSS yang akan mengikuti dari kode tersebut adalah seperti ini:

#navbar {
visibility:hidden;
}

.navbar {
visibility:hidden;
}

#navbar {
display:none
}

.navbar {
display:none
}

Memang betul jika dengan kode tersebut maka Navbar bawaan blogger tersebut akan menjadi hilang atau tersembunyi. Namun bukan berarti navbar bawaan blogger tersebut hilang. Sebagai buktinya adalah jika kita sedikit tahu tentang inspect element atau dilihat dari page sourcenya, sebenarnya widget tersebut masih ada.

Lalu bagaimana caranya agar Navbar dan widget bawaan blogger tersebut benar-benar hilang??
Caranya cukup gampang.

1. Login ke dashboard -> design -> edit html.
2. Cari kode:

 <body>
3. Letakkan kode berikut tepat diatasnya.

<script type="text/javascript">
<![CDATA[
<!--/*<body>*/-->
]]>
</script>

4. Save Template.
Maka kita akan ada pemberitahuan seperti ini. Klik saja hapus atau delete widgets.

Maka widget-widget bawaan dari blogger tersebut akan benar-benar hilang termasuk juga widget bawaan lainnya seperti tanda obeng atau quick edit dan lain sebagainya.

Tambahan:
Jika kita ingin memunculkan kembali widget tersebut, maka kita tinggal hapus kode tersebut. Gampangkan??

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">

Pengenalan JAVASCRIPT Fungsinya

Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya untuk apa??

Javascript adalah bahasa skrip yang diletakkankan dalam kode HTML dan diproses disisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Dengan demikian bisa dikatakan bahwa javascript itu berfungsi sebagai pemanggil suatu fungsi dari suatu argumen, baik itu berupa bilangan, parameter, variable, value, properti, metode dan lain sebagainya dengan menggunakan even-even tertentu.

Penggunaan javascript sendiri bisa dilakukan dengan menyisipkannya langsung ke dalam kode html (Internal) atau dengan melakukan pemanggilan dari luar/hosting tertentu (external). Penulisan javascript ini sendiri biasanya diletakkan didalam tag <body> atau pada umumnya (khususnya diblogspot template) diletakkat diatas tag </head>. Cara penulisannya sendiri sebenarnya sangat sederhana yaitu kita hanya perlu menuliskan nama fungsi yang ingin kita panggil beserta parameter yang mengukutinya.

Contoh penulisan Internal:

<script type="text/javascript">
document.write(“Test”);
</script>

Contoh penulisan External:

<script type="text/javascript" scr='http://.../test.js'> 
</script>

Contoh penggunaan dalam Blogspot HTML/XML.

<HTML>
<HEAD>
<title> <h1>Belajar javascript</h1> </title>
<b:skin><![CDATA[
Tempat peletakan Kode CSS
]]</b:skin>
<script type="Javascript">
Kode javascript di sini
</script>
</HEAD>
<BODY>
Kode HTML di sini
</BODY>
</HTML>