Cara Membuat Random Post atau Postingan Acak

 

Widget postingan acak yang kali ini saya bagikan adalah widget yang bisa berjalan, dalam artian bergulir terus menampilkan postingan postingan dari blog secara acak. Dalam widget ini, terdapat gambar, judul postingan, tanggal postingan, dan jumlah komentar. Untuk memasangnya, kita hanya membutuhkan HTML/Javascript. Langsung saja saya sampaikan

Cara Membuat Postingan Acak Berjalan Dengan Gambar

Pertama, login ke akun blogger anda

Kedua, pada dashboard, klik Tata Letak lalu Tambah Gadget setelah muncul jendela baru, pilih HTML/Javascript

Ketiga, copy kode di bawah ini dan pastekan di kolom konten

<style type="text/css" media="screen"><!-- /* ========== student-brains.blogspot.com ======== */ #helperblogger-widget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; } #helperblogger-widget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #helperblogger-widget li { width: 282px; padding: 5px 5px; margin: 0px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ikJRPYSFEEJPlqCFn_3P7q8R8h-cA8TngJrBSzZNrCAquDDCuikHLxTe62Zia4Dvntofz3JncSQXL4LNGIe6Hwf0XwsNBHFyY8a6e3u3xm5QvXDqyGN6SNazmkmJ-1gCWnAZfiyje10/s1600/helperblogger.com-post.jpg) repeat-x; border: 1px solid #ddd; } #helperblogger-widget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #helperblogger-widget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #helperblogger-widget img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #helperblogger-widget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .spydate { overflow: hidden; font-size: 10px; color: #0284C2; padding: 2px 0px; margin: 1px 0px 0px 0px; height: 15px; font-family: Tahoma,Arial,verdana, sans-serif; } .spycomment { overflow: hidden; font-family: Tahoma,Arial,verdana, sans-serif; font-size: 10px; color: #262B2F; padding: 0px 0px; margin: 0px 0px; } /* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */ --></style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJ1uQGDc26OXEwfJ09OqXFlkxBBE7zRcPsI1fMV2i7jFIN7taFFdG9zmXO1UThoeGRkxzhxbw3SaFvp4bR2kn1HVc7o2kDDODCtwB68Twl9I8kFoKRNKUGRlbnDRBJ-5kQKqHPM_lYhk/s1600/no-thumbnail.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJ1uQGDc26OXEwfJ09OqXFlkxBBE7zRcPsI1fMV2i7jFIN7taFFdG9zmXO1UThoeGRkxzhxbw3SaFvp4bR2kn1HVc7o2kDDODCtwB68Twl9I8kFoKRNKUGRlbnDRBJ-5kQKqHPM_lYhk/s1600/no-thumbnail.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJ1uQGDc26OXEwfJ09OqXFlkxBBE7zRcPsI1fMV2i7jFIN7taFFdG9zmXO1UThoeGRkxzhxbw3SaFvp4bR2kn1HVc7o2kDDODCtwB68Twl9I8kFoKRNKUGRlbnDRBJ-5kQKqHPM_lYhk/s1600/no-thumbnail.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJ1uQGDc26OXEwfJ09OqXFlkxBBE7zRcPsI1fMV2i7jFIN7taFFdG9zmXO1UThoeGRkxzhxbw3SaFvp4bR2kn1HVc7o2kDDODCtwB68Twl9I8kFoKRNKUGRlbnDRBJ-5kQKqHPM_lYhk/s1600/no-thumbnail.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJ1uQGDc26OXEwfJ09OqXFlkxBBE7zRcPsI1fMV2i7jFIN7taFFdG9zmXO1UThoeGRkxzhxbw3SaFvp4bR2kn1HVc7o2kDDODCtwB68Twl9I8kFoKRNKUGRlbnDRBJ-5kQKqHPM_lYhk/s1600/no-thumbnail.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 15; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.student-brains.blogspot.com/"; limitspy=4; intervalspy=4000; </script> <div id="helperblogger-widget"><script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script> </div>

Keempat, editlah kode diatas dengan mengganti kalimat student-brains.blogspot.com dengan alamat blog anda
Terakhir, klik simpan