Pada kali ini renovoc akan bagi bagi cara gimana caranya membuat Widget Postingan Terbaru simple nan SEO. Hasilnya bisa dilihat di widget blog ini yang Terbaru.
Daftar postingan terbaru merupakan hal penting bagi blog, yaitu berfungsi sebagai link internal dan navigasi blog, yang memudahkan pengunjung menjelajahi konten blog kita.
Bagaimana jika ingin menampilkan "Posting Terbaru" dan "Komentar Terbaru" di Blogspot di sidebar atau di footer?
Berikut ini langkah untuk membuat "Recent Post" di Blogspot
1. Klik "Layout" atau "Tata Letak".
2. Klik "Add a gadget" di salah satu sidebar atau footer.
3. Pilih "HTML/Javascript"
4. Masukkan kode dibawah ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRKhBNac2sWb3hMupnOgoeCS-gjkwwx3BCtp6t73WO2EkC3NuApqz-IOFHCY-mjvINBOiWE7N8f9Q9tgTkRzVZco0JBwtsbMfmNuADO4PxPDLn1HH7OrImhYS239yulbxdK1_F3AU6BE5/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}
#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-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);
}
#workwidget 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: #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://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" 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/AVvXsEjzepgcSPHqq3rOPqnRcgcL6JeLxFMT8la1YBbrVI10IS4kvqLT2-NJOc-MxqQpeVUnap6ufVUQsNRkHAZ37eJGGxKgYEYNcy1k8FSQn6-ol7TmFTrpMxj-yd2lL8Jz9mfiBgoQehleefTI/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzepgcSPHqq3rOPqnRcgcL6JeLxFMT8la1YBbrVI10IS4kvqLT2-NJOc-MxqQpeVUnap6ufVUQsNRkHAZ37eJGGxKgYEYNcy1k8FSQn6-ol7TmFTrpMxj-yd2lL8Jz9mfiBgoQehleefTI/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzepgcSPHqq3rOPqnRcgcL6JeLxFMT8la1YBbrVI10IS4kvqLT2-NJOc-MxqQpeVUnap6ufVUQsNRkHAZ37eJGGxKgYEYNcy1k8FSQn6-ol7TmFTrpMxj-yd2lL8Jz9mfiBgoQehleefTI/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzepgcSPHqq3rOPqnRcgcL6JeLxFMT8la1YBbrVI10IS4kvqLT2-NJOc-MxqQpeVUnap6ufVUQsNRkHAZ37eJGGxKgYEYNcy1k8FSQn6-ol7TmFTrpMxj-yd2lL8Jz9mfiBgoQehleefTI/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzepgcSPHqq3rOPqnRcgcL6JeLxFMT8la1YBbrVI10IS4kvqLT2-NJOc-MxqQpeVUnap6ufVUQsNRkHAZ37eJGGxKgYEYNcy1k8FSQn6-ol7TmFTrpMxj-yd2lL8Jz9mfiBgoQehleefTI/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://renovoc.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="workwidget">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>
Note :Jika template sobat sudah tersedia Jquery, copy selain code berikut : :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Settingan Widget :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Settingan Widget :
- Ganti kode http://renovoc.blogspot.com dengan url blog sobat.
- numposts = 10; =Jumlah post yang ingin ditampilkan.
- limitspy=4; = Jumlah post yang terlihat di widget.
- intervalspy=4000; = Kecepatan rotasi widget untuk menampilkan postingan yang lain.
Hasilnya bisa di lihat di widget blog saya ini. Semoga artikel pada kali ini dapat bermanfaat^^
Sign up here with your email
ConversionConversion EmoticonEmoticon