Cara pasang Recent Posts Slider di Blogspot

Sungguh tiada habisnya bila kita ingin mempercantik tampilan blog kita, Nah untuk itu Education For All akan sharing lagi dengan para sobat blogger mania pemula seperti EFA ini. Nah sharing kali ini EFA akan posting artikel tentang Cara pasang Recent Posts Slider di Blogspot. Seperti apa kira kira tampilanya?? silahkan sobat blogger mania arahkan kursor sobat blogger mania pada gambar disebelah kanan postingan ini.  Widget tersebut akan menjelaskan  post terbaru beserta thumbnail (image) yang berefek slider.Untuk memasang widget recent post slider ini pada blog sobat blogger mania silahkan,  ikut beberapa langkah di bawah.

Pertama : Login ke Blog
Kedua : klik Design ==> Klik add Gadget
Ketiga : Pilih klik pada HTML/Javascript lalu Copy paste kode dibawah ini pada halaman  HTML/Javascript
 

JUDUL ARTIKEL

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function(){ var first = 0; var speed = 700; var pause = 4500; function removeFirst(){ first = $('ul#listticker li:first').html(); $('ul#listticker li:first') .animate({opacity: 0}, speed) .fadeOut('slow', function() {$(this).remove();}); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; $('ul#listticker').append(last) $('ul#listticker li:last') .animate({opacity: 1}, speed) .fadeIn('slow') } interval = setInterval(removeFirst, pause); }); </script> <style type="text/css"> #listticker{ height:277px; width:280px; margin-bottom:15px; padding:0px; overflow:hidden; } #listticker li{ background:#FDE1E1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIQfnIe9BjaVdhdhGVR7zqqtzFLGsigaS39wu8vbHfEsh9ZEGiI6tBP0R1nMkxm7x5aGywlRuaiIbWcCJFZAHer5OKqwiaBzYEtgmBOoOhDoBZZXY87f5XqRSfnCR8kIZJsXCyVDYlwN5/s320/gradient.png) repeat-x 0 -100px!important; border: 1px solid #C6C6C6; list-style:none; line-height:0.90em; height:46px; margin:3px; padding:2px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3); } #listticker li a{ font-family: 'arial'; text-transform:normal; text-shadow:0 1px 2px rgba(0,0,0,0.6); letter-spacing:0.05em; overflow:hidden; } #listticker img{ float:left; margin:3px 3px 4px -7px; padding:0px; border:#EAE7E7 solid thin;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6); box-shadow: 1px 1px 2px rgba(0,0,0,0.6); -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } #listticker img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); } </style> <script language="JavaScript"> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; showRandomImg = true; tablewidth = 250; cellspacing = 0; borderColor = ""; bgTD = "#"; imgwidth = 35; imgheight = 35; fntsize = 12; acolor = "#262626"; aBold = true; icon = ""; text = "no"; showPostDate = false; summaryPost = 0; summaryFontsize = 0; summaryColor = "#"; icon2 = ""; numposts = 15; home_page = "http://fajar7siblings.blogspot.com/"; </script> <script src="http://javscript-code.googlecode.com/files/recent_posts_slider.js" type="text/javascript"></script>

Silahkan edit kode yang berwarna biru sesuai blog sobat blogger mania.
width:280px; (lebar kotak)
tablewidth = 250 (lebar teks pada kotak)
background:# FDE1E1; ( background kotak)
acolor = "#262626"; (Warna teks)
numposts = 15; (jumlah post yang ingin ditampilkan)
home_page = "http://fajar7siblings.blogspot.com/"; ( URL blog sobat blogger mania)

Akhir sekali, klik Preview dan jika tiada pesan error, klik saja Save.

Selamat mencoba Semoga bermanfaat.......

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «