Slide show resent post for blogspot

Kali ini Tio-tutorblog akan berbagi tentang slide show resent post for blogspot dimana tampilan kita setiap posting akan muncul / update pada slide tersebut dan dipercantik dengan tumbnail, selain mengoptimalkan SEO pada blogspot yang tio tutorblog bahas pada postingan SEO On Page dan Off Page Blogspot alangkah baiknya kita mempercantik blog kita dengan slide show resent post for blogspot tanpa basa basi kita lanjut dengan caranya :

• Login ke blog kamu
• Klik rancangan
• Klik gadget >> pilih HTML/JavaScript Tambah
• COPAS code dibawah ini :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br /> <style type="text/css" media="screen"><br /> <!--<br /> <br /> #spylist {<br /> overflow:hidden;<br /> margin-top:5px;<br /> padding:0px 0px;<br /> height:350px;<br /> }<br /> #spylist ul{<br /> width:220px;<br /> overflow:hidden;<br /> list-style-type: none;<br /> padding: 0px 0px;<br /> margin:0px 0px;<br /> }<br /> #spylist li {<br /> width:208px;<br /> padding: 5px 5px;<br /> margin:0px 0px 5px 0px;<br /> list-style-type:none;<br /> float:none;<br /> height:70px;<br /> overflow: hidden;<br /> background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;<br /> border:1px solid #ddd;<br /> }<br /> <br /> #spylist li a {<br /> text-decoration:none;<br /> color:#4B545B;<br /> font-size:11px;<br /> height:18px;<br /> overflow:hidden;<br /> margin:0px 0px;<br /> padding:0px 0px 2px 0px;<br /> }<br /> #spylist li img {<br /> float:left;<br /> margin-right:5px;<br /> background:#EFEFEF;<br /> border:0;<br /> }<br /> .spydate{<br /> overflow:hidden;<br /> font-size:10px;<br /> color:#0284C2;<br /> padding:2px 0px;<br /> margin:1px 0px 0px 0px;<br /> height:15px;<br /> font-family:Tahoma,Arial,verdana, sans-serif;<br /> }<br /> <br /> .spycomment{<br /> overflow:hidden;<br /> font-family:Tahoma,Arial,verdana, sans-serif;<br /> font-size:10px;<br /> color:#262B2F;<br /> padding:0px 0px;<br /> margin:0px 0px;<br /> }<br /> <br /> --><br /> </style><br />     <script language='javascript'><br /> <br /> imgr = new Array();<br /> <br /> imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";<br /> <br /> imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";<br /> <br /> imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";<br /> <br /> imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";<br /> <br /> imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";<br /> showRandomImg = true;<br /> <br /> boxwidth = 600;<br /> <br /> cellspacing = 6;<br /> <br /> borderColor = "#232c35";<br /> <br /> bgTD = "#000000";<br /> <br /> thumbwidth = 70;<br /> <br /> thumbheight = 70;<br /> <br /> fntsize = 12;<br /> <br /> acolor = "#666";<br /> <br /> aBold = true;<br /> <br /> icon = " ";<br /> <br /> text = "comments";<br /> <br /> showPostDate = true;<br /> <br /> summaryPost = 40;<br /> <br /> summaryFontsize = 10;<br /> <br /> summaryColor = "#666";<br /> <br /> icon2 = " ";<br /> <br /> numposts = 10;<br /> <br /> home_page = " http://tio-tutorblog.blogspot.com/";<br /> <br /> limitspy=4<br /> intervalspy=4000<br /> <br /> </script><br /> <br /> <div id="spylist"><br />     <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script><br /> </div>
• Setelah di paste cari dan ganti ULR http://tio-tutorblog.blogspot.com/ dengan URL blog kamu
• Dan simpan

Selesai dah.
Bagaimana hasilnya cukup mudah bukan, oke cukup sekian dulu tio-tutorblog berbagi tips untuk mempercantik blog kamu salam tio-tutorblog

---

Tutorial Terkait

Apa itu HTML
Code HTML teks
Code HTML Background image
Code HTML background
Gambar link code dengan border
Code HTMl link new window
HTML link new window
Code HTML link
Marquee code HTML crolling image
Marquee code HTML crolling teks

Posted in: Tutorial Blog