Cara Membuat Artikel Terbaru Bergambar

Cara Membuat Artikel Terbaru Bergambar , widget artikel terbaru bergambar berfungsi untuk mempercantik tampilan blog maupun untuk memperkuat SEO onpage , sehingga dalam sisi visual bisa menarik dan pada sisi seo dapat diperkuat , dalam membuat artikel terbaru ini anda bisa melihat hasilnya pada sisi kanan blog ini , disana ada tulisan posting terbaru , nanti akan berbentuk seperti posting terbaru bergambar di blog ini .

Membuat Artikel Terbaru Bergambar

Untuk membuat artikel terbaru bergambar cukup sederhana dan mudah , anda hanya perlu memasukan script artikel posting terbaru bergambar ini ke blog anda , untuk lebih jelasnya akan saya bahas cara buat artikel terbaru bergambar ini.

Artikel Terbaru Bergambar
Artikel Terbaru Bergambar


1. Login ke akun blogger anda.
2. Lalu klik rancangan - tambah gadget - pilih HTML/Javascript.
3. Copy dan paste kode dibawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.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>

<script language="javascript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "url blog anda";
limitspy=5
intervalspy=4000
</script>

<div id="spylist">
<script type="text/javascript">
//<![CDATA[

jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("
<li>"+e(this).html()+"</li>
")});o=i.length;l.wrap('<div class="spyWrapper" />

').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='
<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">

'+n+'</div>
<div class="spycomment">

'+cmtext+"</div>
";document.write(v);j++}document.write("</ul>
")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script></div>


boxwidth = 300 adalah lebar widget , sesuaikan dengan lebar sidebar blog.
home_page=url blog anda
numposts = 20; adalah jumlah posting terbaru yg akan diindex.
limitspy=5 adalah jumlah posting terbaru yang akan ditampilkan.
intervalspy=6000 adalah kecepatan bergerak scroll  , ganti nilainya untuk mengatur kecepatannya dalam milisecond (ms).

4. Save.

Cukup mudah bukan untuk membuat artikel bergambar di sidebar blog ini , kalau anda ingin sesuatu yang lain anda juga bisa membaca posting yang serupa Cara Membuat Recent Post Bergambar Di Blogspot

Pin It!

fb comment box

12 komentar:

OTAK KANAN mengatakan...

Kalo tutorialnya membuat artikel terbaru tanpa tumbnail gambar gimana ya gan? Pengen yang tampil judul artikel terbarunya aja. Terima Kasih......

tutorial blog | tips blog mengatakan...

kiranya apa tidak membuat loading blog berat dengan kode yang seperti itu, banyak sekali gan, tolong penjelasannya karena kalau ternyata ringan saya akan mencobanya, terima kasih sebelumnya

Mizwar007 mengatakan...

thax atas info'y...

Alul Bahlul mengatakan...

thank's gan

Dunia Guru mengatakan...

Muakasich nich
dicoba dulu dech
salam

Andikwin K.A mengatakan...

sip gan....di coba dulu

Go Forex mengatakan...

Nice Info..

See about forex update on GoForex

Mas Aran mengatakan...

wah jadi berat gan loadingnya...mending ngag usah dipasang...

Imam mengatakan...

makasih bosssss

Ade mengatakan...

Dah saya terapkan kok gak tampil ya gan ? pdhlsaya pngn bngt pasang kaya ginian, salah dmn ya kira2 ?

Bang Gopar mengatakan...

ini yang berjalan itu ya??

Juntenx mengatakan...

ini tutorial lama tahun lalau ,, jadi tidak diperhatikan apa masih berfungsi atau tidak

Poskan Komentar

◄ Newer Post Older Post ►