Cara Gampil Membuat Widget Recent Post Berwarna

Tutorial Go Blog

Cara Mudah Membuat Recent Post Berwarna - Ketahuilah..untuk mendapatkan sebuah perhatian khusus dari mesin pencarian google, desain tampilan pada situs website/blog harus SEO friendly atau kata lainnya menarik. Dengan penampilan desain website/blog milik anda menarik, maka google tidak segan-segan mengunjungi situs website atau blog anda tersebut.

Jika anda ingin website/blog-nya di sukai oleh mesin pencarian google dan juga pengunjung, maka tidak ada salahnya anda untuk mencoba belajar menata atau men-desain website/blog milik anda sendiri. Disini, Tutorial Go Blog akan membantu anda untuk mempercantik dan memperindah penampilan website/blog anda. Kita ambil saja tema kali ini ialah membuat widget recent post warna-warni pada blog.

Caranya tidak sulit, dan siapapun bisa melakukannya dengan sangat mudah. Sebelum kita atau anda melakukan cara-cara pembuatannya, anda copy dahulu kode html yang ada dibawah ini dulu yaaa.

<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:Black;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQvi7zv99VuCPOVd5utYUH2UquGbq3LAXjrhsUsyPPDN9Q48oB7u9FQbjSpldS8DKpVylVXWowumhVHQo5A-fdeZBuH40YnMRnROxMrvcIARiucNiveHrNYnekrO0ylUA_OCIRLPOAjnQ/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:2;
padding:8px 5px ;
background-color:white;
border-bottom:0px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 0px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:bold normal 12px/normal Arial;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#B2B2B2;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://tutorialgo-blog.blogspot.com",
    rp_numPosts = 5,
    rp_thumbWidth = 70,
    rp_numChars = 75,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHgv3si2mTjaa2jh_VDVnGLNt-voD0eVEwA4TZ62FyXAlT3aNgSTlNiB8ReKEeDpZLVG5HtJTvb3igqM-39wIvVxwDywQ2XJpwxDXhaadXu8iaSktcNuQgZPJkdKU3COeppCbpK7ZhQQR/s1600/sun.jpg",
    rp_newTabLink = false,
    rp_loadTimer = "onload";
//]]>
</script>
<script src='https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js' type='text/JavaScript'></script>

Catatan :

1. Warna biru adalah URL blog, ganti dengan URL website/blog milik anda.
2. Warna hijau adalah jumlah postingan yang ditampilan.
3. Warna merah adalah tampilan gambar otomatis apabila postingan tak disertai gambar.

Nah, sekarang saatnya kita untuk melakukan praktek membuat recent post dengan warna-warni tersebut. Silahkan simak dengan baik.

Keterangan :
- Login ke blogger.com
- Masukkan email & kata sandi
- Buka dashboard

1. Langkah pertama. Anda cari menu "Tata Letak" tersebut. Biasanya menu yang disebutkan tadi berada di posisi kiri depan layar kaca komputer anda.

Gambar 1

2. Langkah kedua. Setelah anda masuk ke menu tata letak tersebut, kemudian anda langsung saja cari atau temukan menu yang bertuliskan "Tambahkan Gadget".

Gambar 2

3. Langkah ketiga. Anda pilih dan cari menu yang bertuliskan "HTML/JavaScript". Nanti anda akan disediakan sebuah kolom kosong untuk anda isi kode.

Gambar 3

4. Langkah keempat. Disini anda sudah disediakan sebuah kolom besar untuk anda masukkan kode script html yang sebelum-sebelumnya anda sudah meng-copy kode tersebut. Kemudian, anda "Simpan".

Gambar 4

5. Langkah kelima. Jika semuanya sudah anda lakukan dan anda merasa tidak ada yang tertinggal satu pun, maka anda langsung saja tekan menu "Simpan" dan kemudian anda tekan "Pratinjau" untuk mereview hasil yang sudah anda lakukan tersebut.

Gambar 5

6. Terakhir, anda akan melihat hasil tampilan widget recent post warna-warni sebagai tambahan pada website/blog yang anda miliki.

Hasil Gambar

Saya meyakini, anda pun akan suka dengan hasil yang sudah anda lakukan tersebut. Selain cantik tampilannya, juga akan membuat daya tarik bagi pengunjung untuk melihatnya lho. Dan itu adalah salah satu cara atau trik SEO friendly.

Sepertinya informasi Cara Mudah Membuat Recent Post Berwarna ini saya tutup saja. Bagi yang belum mencoba mempraktekkan langkah-langkah ini, maka silahkan untuk praktek sendiri pada blog masing-masing. Jika anda mencari tampilan recent post lainnya, anda bisa mencoba Cara Gampil Membuat Widget Recent Post Thumbnail dengan mudah. Terima kasih, salam perdamaian dan semoga berhasil...