Cara Membuat Recent Posts Keren Pada Blog. Tentunya kita akan sangat merasa bosan dengan tampilan Recent Posts pada bawaan blog sendiri. Namun jika kita ingin merubah tampilannya menjadi terlihat keren tentunya akan ada sedikit perubahan yang akan kita rubah sendiri. Oleh karena itu saya akan mencoba berbagi cara membuat recent posts ini agar kelihatannya lebih keren dan tidak membosankan. Lihat contoh gambar di bawah ini.
Jika anda tertarik anda tinggal mengikuti langkah-langkah berikut ini :
1. Tentunya sobat blog sudah Login terdahulu pada akun masing-masing
2. Setelah anda masuk menu Dasbor pilih >>Template<<
3. Kemudian pilih >>Edit HTML<<
4. Untuk menghindari hal-hal yang tidak di inginkan sebaiknya anda back-up dulu template original anda pada menu >>Cadang/Pulihkan<< pada menu yang sudah di sediakan.
5. Setelah itu cari kode script </head> dengan menggunakan CTRL+F pada keyboard anda untuk memudahkan pencarian.
6. Setelah itu masukkan kode script di bawah ini di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
7. Simpan Template setelah jika sudah di masukkan kode tersebut.
8. Setelah itu pilih menu >>Tata Letak<< dan >>Tambahkan Gadget<<
9. Pilih menu >>HTML/JavaScript<< dan masukkan kode script di bawah ini.
<div style="overflow:auto;width:270px;height:285px;padding:10px;border:1px solid #eeee">
<style type="text/css" media="screen">
<!--
#mediablogger-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 485px;
}
#mediablogger-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#mediablogger-widget li {
width: 228px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #ffcc77 url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTEUTr-wF3PM-VH0LO7Z3REC65MN-bK2ZfLqSci58C3smxvXOuD) repeat-x;
border: 1px solid #ffcc77;
}
#mediablogger-widget li a {
text-decoration: none;
color: #ffcc77;
font-size: 14px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#mediablogger-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #ffcc77;
border: 0;
}
#mediablogger-widget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(0.5, #000000), color-stop(0.5, #ffcc77), to(#000000));
background: -moz-linear-gradient(top, #000000, #000000 50%, #000000 50%, #000000);
-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);
}
#mediablogger-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: #000000;
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: #000000;
padding: 0px 0px;
margin: 0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8glfiw3_WhgIY29WMNPs3zPV0oFitAqGOd3r539nuLeExyRzGX1mfPCTzkWA5TtbsAV3ilQCKQs9H5n88_caNINhT72VtMA7Tl_EYy6svrU9DvUnTdwRPmBaiVk3eO5my6v4kEXM9K9E/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8glfiw3_WhgIY29WMNPs3zPV0oFitAqGOd3r539nuLeExyRzGX1mfPCTzkWA5TtbsAV3ilQCKQs9H5n88_caNINhT72VtMA7Tl_EYy6svrU9DvUnTdwRPmBaiVk3eO5my6v4kEXM9K9E/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8glfiw3_WhgIY29WMNPs3zPV0oFitAqGOd3r539nuLeExyRzGX1mfPCTzkWA5TtbsAV3ilQCKQs9H5n88_caNINhT72VtMA7Tl_EYy6svrU9DvUnTdwRPmBaiVk3eO5my6v4kEXM9K9E/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8glfiw3_WhgIY29WMNPs3zPV0oFitAqGOd3r539nuLeExyRzGX1mfPCTzkWA5TtbsAV3ilQCKQs9H5n88_caNINhT72VtMA7Tl_EYy6svrU9DvUnTdwRPmBaiVk3eO5my6v4kEXM9K9E/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8glfiw3_WhgIY29WMNPs3zPV0oFitAqGOd3r539nuLeExyRzGX1mfPCTzkWA5TtbsAV3ilQCKQs9H5n88_caNINhT72VtMA7Tl_EYy6svrU9DvUnTdwRPmBaiVk3eO5my6v4kEXM9K9E/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#998877";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 14;
acolor = "#998877";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#998877";
icon2 = " ";
numposts = 10;
home_page = "http://harapansebuahcintaabadi.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<div id="mediablogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div></div>
10. Untuk warna biru silahkan masukkan URL blog anda. Dan untuk yang berwarna merah adalah untuk menu scroll nya dan di tutup dengan kode </div> yang berwarna merah juga.
11. Anda bisa merubah lebar dan pnjang scroll pada kode width:270px;height:285px dan di sesuaikan dengan selera anda.
12. Untuk warna lainnya anda tinggal merubahnya sesuai dengan yang anda inginkan pada warna yang Ungu dengan kode-kode warna lainnya. Dan untuk warna orange adalah gambar cokelatnya yang bisa anda rubah dengan gambar URL yang anda sukai sesuai dengan selera.
13. Jika anda ingin merubah lebar dan panjang Recent Posts nya anda tinggal merubah angka yang berwarna Hijau.
14. Setelah semuanya selesai sesuai dengan selera lalu Simpan dan lihat hasilnya.
Selanjutnya anda tinggal mengotak-atik sendiri jika ingin tampilan yang lainnya sesuai dengan dengan selera anda.
Naah sobat bloger sekian dulu informasi dari saya. Semoga bermanfaat dan selamat berkreasi lagi. Sampai jumpa di episode selanjutnya. :-)
Sumber Inspirasi : Klik Di Sini
Tidak ada komentar:
Posting Komentar