Cara Membuat Custom Random Post Responsive Sidebar Blogger

Cara Membuat Custom Random Post Responsive Sidebar Blogger

Cara Membuat Custom Random Post Responsive Sidebar Blogger

Cara Membuat Custom Random Post Responsive Sidebar Blogger

Cara Membuat Custom Random Post Responsive Sidebar Blogger - Setelah sebelumnya saya membuat artikel tentang Membuat Featured Random Post Responsive di Homepage Blogger, kali ini saya akan berbagi tutorial pemasangan widget Random Post yang diletakan pada sidebar. Kode Random Post ini terinspirasi dari situs MyBloggerTricks yang membagikan random post yang unik dan berbeda pada widet random post yang saya temukan di google pada umumnya. Script yang digunakan sangatlah rapi dan dinamis, sehingga tidak akan bentrok dengan javascript widget random post, featured post, popular post ataupun dengan widget yang membutuhkan Jquery. Random post ini juga sangat responsive, SEO friendly, dan customable dengan fitur-fitur yang dapat di on/off kan. Lebih lengkapnya akan tampak seperti gambar di bawah ini


Adapun Fitur yang terdapat pada widget ini adalah :
  • Foto Profil Penulis
  • Penghitung Komentar pada Artikel
  • Tampilan Label Postingan pada Gambar
  • Format Tanggal dapat diatur
  • Thumbnail Kualitas Tinggi/Rendah (Customable)
  • Support Youtube Thumbnail
  • Panjang artikel dapat diatur
  • Ringan dan Mudah Diatur
Jika anda tertarik untuk memasang widget ini, silahkan simak tutorialnya dibawah ini :

1. Masuk ke Blogger > Edit HTML 

2. Setelah itu klik Tambahkan Widget > HTML/Javascript pada bagian sidebar anda

3. Masukkan  CSS dan Javascript dibawah ini ke kolom Konten yang tersedia

CSS

Javascript
Perhatikan ! dalam script tersebut, ganti http://www.rizaldipriantama.com dengan url alamat homepage blog anda

4. Klik Simpan Dan lihat hasilnya



CUSTOMIZE WIDGET
Jika anda kurang suka dengan tampilan yang ada pada widget ini anda dapat mengaturnya pada bagian CSS yang saya sediakan diatas, lakukanlah eksperimen dan sesuaikan warna widgetnya dengan kebutuhan blog anda
Misalnya anda ingin mengatur ukuran dan jenis font pada widget. cari kode .randomon li. ganti font-size:12px menjadi ukuran yang anda inginkan
Anda juga dapat mengatur jumlah artikel yang tampil, menampilkan cuplikan artikel dan beberapa settingan yang telah tersedia pada Javascript. Berikut settingan yang dapat anda atur :

  • var ListCount = 7;  
Atur angka untuk mengatur jumlah artikel yang ditampilkan
  • var TitleCount = 70;
Atur angka 70 untuk mengatur jumlah karakter judul yang ditampilkan
  • var ImageSize = 150;
Atur angka 150 untuk mengatur ukuran gambar yang diinginkan
  • var showcomments = "on";
Atur on untuk mengaktifkan Comment Counts, dan off untuk meniadakan Comment Count
  • var showdate = "on";
Atur on untuk menampilkan tanggal artikel , dan off untuk meniadakan tanggal artikel
  • var showauthor = "off";
Atur on untuk menampilkan foto profil penulis, dan off untuk meniadakan foto profil penuis
  • var showthumbnail = "on";
Atur on untuk menampilkan gambar thumbnails artikel, dan off untuk mematikan thumbnails artikel
  • var showlabel = "off";
Atur on untuk menampilkan label pada thumbnails, dan off untuk mematikan label pada thumbnails
  • var showcontent = "off";
Atur on untuk menampilkan cuplikan dari konten artikel, dan off untuk mematikan cuplikan dari artikel

Jika anda memiliki pertanyaan seputar artikel Cara Membuat Custom Random Post Responsive Sidebar Blogger, silahkan layangkan pada kolom komentar
Semoga Bermanfaat. Terima Kasih
Bagikan Artikel ini Agar Bermanfaat
Bagikan artikel ini dengan alamat berikut: Get Short URLloading short url
Blogger
Pilih Sistem Komentar Yang Anda Sukai

1 komentar tentang "Cara Membuat Custom Random Post Responsive Sidebar Blogger"

Perhatian!
• Berkomentarlah relavan dengan artikel
• Dilarang mencantumkan link hidup, promosi, porno, SARA, anarkis, dll
• Komentar yang melanggar akan dihapus tanpa pemberitahuan sebelumnya
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar

Tampilkan Emoticon

Gunakan konversi parse HTML tool jika ingin menyertakan kode
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box