Widget Recent Post Animasi dengan Thumbnail - Hallo sahabat TIPS BELAJAR BISNIS ONLINE DAN INTERNET MARKETING, Pada Artikel yang anda baca kali ini dengan judul Widget Recent Post Animasi dengan Thumbnail, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger Widget, Artikel tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Widget Recent Post Animasi dengan Thumbnail
link : Widget Recent Post Animasi dengan Thumbnail

Widget Recent Post Animasi dengan Thumbnail

Membuat Recent Post Animasi dengan Thumbnail - Widget recent post atau posting terbaru tentu saja akan lebih menarik jika ditambahkan efek animasi atau efek berjalan (slider).

Anda bisa cek live demonya DISINI

Penerapannya cukup mudah, berikut ini saya bagikan panduan cara settingnya di Blogspot anda:

1. Login ke akun blogger anda, lalu masuk ke bagian lay out / tata letak

2. Klik add a gadget pada halaman tata letak tersebut, Pilih gadget HTML/Javascript

3. Kemudian masukan kode script berikut ini di kolom script gadget tersebut. Edit dulu beberapa bagian script tersebut seperti keterangan di bawah, lalu save.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu8sjwF0iHNE8WufBAoJC3w9l4cLPsP-wTBRob578vqcHSdoXJ33QwlBtdTs97e0YKoe4DJtyslCQq8pfZL-nzWOW8xZUldZmKpYpcqtXpB55gbO3do-5fhl1sTOX401UTN5H_t_bBqNb-/s1600/24work-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.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;
}
-->
</style><a href="http://www.tukangtokoonline.web.id/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Jasa Toko Online" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.tukangtokoonline.web.id" rel="dofollow" target="_blank" title="Jasa Toko Online"><img src="https://bitly.com/24workpng1" alt="Jasa Toko Online" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.tukangtokoonline.web.id" target="_blank" title="Jasa Toko Online"><img src="https://bitly.com/24workpng1" alt="Jasa Toko Online" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_YveDf0hFpbjIzNPJdpGH8tK3BXxaQYfnr1tlhtivJtlKtlN0ERyf948wHE59UJm8N4ygFlsL_P5oS4pbMaXOiBcqgtNmwzXmB4OdRqmylQHHUkqd4aF1RpiAxsy7MiRVI94US5MMPh3s/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_YveDf0hFpbjIzNPJdpGH8tK3BXxaQYfnr1tlhtivJtlKtlN0ERyf948wHE59UJm8N4ygFlsL_P5oS4pbMaXOiBcqgtNmwzXmB4OdRqmylQHHUkqd4aF1RpiAxsy7MiRVI94US5MMPh3s/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_YveDf0hFpbjIzNPJdpGH8tK3BXxaQYfnr1tlhtivJtlKtlN0ERyf948wHE59UJm8N4ygFlsL_P5oS4pbMaXOiBcqgtNmwzXmB4OdRqmylQHHUkqd4aF1RpiAxsy7MiRVI94US5MMPh3s/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_YveDf0hFpbjIzNPJdpGH8tK3BXxaQYfnr1tlhtivJtlKtlN0ERyf948wHE59UJm8N4ygFlsL_P5oS4pbMaXOiBcqgtNmwzXmB4OdRqmylQHHUkqd4aF1RpiAxsy7MiRVI94US5MMPh3s/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_YveDf0hFpbjIzNPJdpGH8tK3BXxaQYfnr1tlhtivJtlKtlN0ERyf948wHE59UJm8N4ygFlsL_P5oS4pbMaXOiBcqgtNmwzXmB4OdRqmylQHHUkqd4aF1RpiAxsy7MiRVI94US5MMPh3s/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;

home_page = "http://www.tukangtokoonline.web.id";

limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.dropboxusercontent.com/s/3frdg2yvzmdwsto/animated-recent-posts-ycode-1.js' type='text/javascript'></script>
</div>

Keterangan :
1. Hapus script berikut  (paling atas) :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

jika di template anda sudah ada.

2. Ganti script :

home_page = "http://www.tukangtokoonline.web.id";

text warna merah dengan url blog anda.

3. Ukuran Gambar, cari script berikut,

thumbwidth = 70;thumbheight = 70;

ganti dengan ukuran yg anda inginkan.

4. Posting yang tampil

numposts = 10; 

Defaultnya adalah 10, ganti sesuai keinginan.

Selesai.

Semoga bermanfaat.

Demikianlah Artikel Widget Recent Post Animasi dengan Thumbnail

Sekianlah artikel Widget Recent Post Animasi dengan Thumbnail kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Widget Recent Post Animasi dengan Thumbnail dengan alamat link https://tipstopmarketing.blogspot.com/2014/03/widget-recent-post-animasi-dengan.html

Tweet