Cara Membuat Postingan Acak Ringan Valid HTML5 dengan Gambar - Erend Elektronik

Cara Membuat Postingan Acak Ringan Valid HTML5 dengan Gambar - Random Posts atau Postingan Acak adalah satu widget yang kita perlukan dalam blogger untuk mendongkrak skor SEO. Pasalnya widget Random Posts ini menampilkan artikel dengan cara acak mengacak dari yang terlama hingga artikel yang terbaru. Hal ini memudahkan pengunjung blog untuk menemukan artikel yang dicarinya.

Dimanakah kita bisa menampilkan Widget Random Posts atau Postingan Acak ini baiknya? Kita bisa meletakan dimana saja, seperti di Blog Kang Erend ini saya meletakannya di bawah widget Postingan Populer (Popular Posts). Atau bila sobat suka, bisa juga meletakannya dibawah artikel dekat dengan widget You Might Also Like atau bisa juga di widger footer.

Cukup rasanya basa-basi kita, mari kita masuk ke kode yang sebenarnya. Cara Menampilkan Random Posts Widget Blogger Ringan Valid HTML5 dengan Gambar di Halaman Utama Untuk Blogger seperti Postingan Acak di Blog ini. Silahkan Salin dan tempel kode di bawah ini di bagian CSS atau Style dari tema Anda untuk menampilkan posting acak.

/* Random Posts */

#HTML4 .widget-content ul{width:100%;margin:0;padding:0;list-style-type:none;}

#HTML4 .widget-content ul li{margin:0;padding:10px 0 0;}

#HTML4 .widget-content ul li:last-child{padding:10px 0}

#HTML4 .widget-content ul li a{display:block;text-decoration:none;font-size:14px;font-weight:500;line-height:1.1;position:relative;padding:0 10px 0 0;overflow:hidden;}

#HTML4 .widget-content ul li .random-post-item-summary{display:none}

#HTML4 .widget-content ul li .random-post-item-thumbnail

img{width:42px;height:42px;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}

#HTML4 .widget-content ul li .random-post-item-thumbnail img{display:block}

#HTML4 .widget-content ul li .random-post-item-thumbnail{display:inline-block;float:left;margin:0 0 0 10px}

Lalu langkah kedua adalah membuat Widget dengan cara Tambahkan Widget pada draft blogger Tata Letak. Masukan kode berikut pada kotak kosong widget. Widget beri judul "Random Posts".

<div class='lazyloadimg'><!--<div id="random-post" class="random-post"></div>--></div>

Penampakan Kode "Widget 4 atau Widget 2" akan seperti ini;

<b:widget id='HTML4' locked='false' title='Random Posts' type='HTML' version='1'>

                      <b:widget-settings>

                        <b:widget-setting name='content'><![CDATA[<div class='lazyloadimg'><!--<div id="random-post" class="random-post"></div>--></div>]]></b:widget-setting>

                      </b:widget-settings>

                      <b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

 <h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

</b:includable>

Jika pada template anda yang muncul bukan id widget-nya bukan HTML4 yakni HTML2 maka CSS diatas ganti juga dengan #HTML2

/* Random Posts */

#HTML2.widget-content ul{width:100%;margin:0;padding:0;list-style-type:none;}

#HTML2 .widget-content ul li{margin:0;padding:10px 0 0;}

#HTML2 .widget-content ul li:last-child{padding:10px 0}

#HTML2 .widget-content ul li a{display:block;text-decoration:none;font-size:14px;font-weight:500;line-height:1.1;position:relative;padding:0 10px 0 0;overflow:hidden;}

#HTML2 .widget-content ul li .random-post-item-summary{display:none}

#HTML2 .widget-content ul li .random-post-item-thumbnail

img{width:42px;height:42px;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}

#HTML2 .widget-content ul li .random-post-item-thumbnail img{display:block}

#HTML2 .widget-content ul li .random-post-item-thumbnail{display:inline-block;float:left;margin:0 0 0 10px}

Langkah terakhir adalah menambhakan kode script berikut dibawah ini sebelum kode ;
&lt;!--</body>--&gt; &lt;/body&gt; atau </body>

<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

Save Template dan lihat hasilnya.
Happy Blogging !

Artikel Terkait