Footer Widget #2
Widget
Cara Membuat Recent Post Dengan Thumbnail Keren
17.25 // 0 komentar // Update // Category: Tutorial Blogspot //Cara Membuat Recent Post Dengan Thumbnail Keren - Recent Post atau List Artikel Terbaru banyak sekali digunakan oleh para blogger. Memasang widget recent post juga berperan dalam Optimasi Seo On Page. dengan memasang Widget Recent Post di Halaman Blog pengunjung akan lebih mudah mengakses setiap artikel terbaru kamu. Tentunya kemudahan mengakses artikel dihalaman blog akan meningkatkan jumlah page view blog kamu.
Recent Post yang Master Chef katakan keren disini karena gayanya berbeda dengan gaya recent post yang lainya karen Widget Recent Post ini dilengkapi dengan Fitur Previous dan Next dibawahnya seperti terlihat pada gambar dibawah ini :
Nah buat Sobat Blogger Dapur Tutorial Blogspot dan Seo yang tertarik dengan Widget ini kamu bisa memasangnya dengan sedikit melakukan Edit HTML pada halaman blog kamu. Berikut resepnya untuk Membuat Recent Post Dengan Thumbnail Keren.
- Login terlebih dahulu kehalaman blog
- Dari bagian Dashbord blog kamu pilih Template untuk Masuk kehalaman Edit HTML (Baca Cara Masuk ke Halaman Edit HTML)
- Downlad dulu template lengkap blog kamu untuk mengantisivasi kesalahan Edit HTML (Baca Caranya Upload dan Back-Up Template Blog)
- Jangan lupa Centang Expand Template Widget
- Jika sudah cari kode ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
- Setelah kode berhasil ditemukan Copy Kode dibawah ini dan paste diatas kode ]]></b:skin>
- Masih di are Edit HTML, sekarang cari kode </head>
- Copy kode dibawah dan letakan diatas kode </head>
- Setelah itu Klik pada tombol Save Template
- Kembali ke Dashbord blog kamu, Pilih Tata Letak
- Klik Add a Gadget atau Tambah Gadget
- Pilih Widget HTML Java/Script
- Copy Kode Berikut :
- Paste kedalam kolom HTML/JavaScript
- Klik Simpan
- Selesai dan Lihat hasilnya
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvdv-59XzrGF2jNY7lmBI4PEnkHLcU0MxENVKNwRBZ6oN8qGDK4iM6IvfbGx8x3zovBznxiO5mReikic-bNu8FO9THpCs9RL_NaDi7O5qy0muGWL87G2zrAAwkUDvyt4-zzLHCa2bgfk/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
<script type='text/javascript'>Keterangan :
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://dapur-tutorial.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9BI_HgH7FKJ2P302Z1tqW7o0n-YSKd9Hm3jNtfFo685M9Bl-OfQiNE__L3QSAd-MgbaDKf_qKC5sEm-dA0HwsZbr56G6H15B4CbYPRJLUNR3qoP4U0MY2iFvqh8qk8S5W9OVUnQQSgk/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
Kode yang berwarena merah adalah URl blog kamu, ganti dengan URL Kamu. Sedangkan kode yang berwarna Hijau menunjukan jumalah Artikel yang ditampilkan, dan kode yang berwarna kuning adalah jumlah karakter yang ditampilkan
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
Related posts :
Blogger news
Followers
Berbagi Pembelajaran Berbagai Tips dan Trick penggunaan blogger.
Pejuang Technology. Diberdayakan oleh Blogger.
Popular Posts
-
Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog - Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari o...
-
Cara Memasang Meta Tag Otomatis di Setiap Postingan Blog - Sudah lama banget Master Chef tidak Update Tutorial Seo Blogspot . Kali ini Mate...
-
Topik-Topik Yang Blog Ramai Dengan Pengunjung - Siapa yang tidak ingin blog ramai pengunjung ?, tentunya semua blogger menginginkannya. Sel...
-
Cara Memasang Search Engine Di Blog Dengan Mudah - Search Engine atau Mesin Pencari, pastinya sobat blogger Dapur Tutorial Blogspot dan Seo...
-
Membuat Reply Komentar Di Blog - R eply komen pada blog sangat bermanfaat, adapun salah satu manfaat dengan adanya reply komen pada koment...
-
Cara Mendaftar Atau Membuat Akun Squidoo - Setelah kemaren didalam positingan Master Chef berudul Pengenalan Squidoo untuk Memperoleh Bany...
-
Cara Posting Artikel Beserta Gambar Dan Video - Tutorial Blog Master Chef kali ini berhubungan dengan sobat blogger Dapur Tutorial Blogspot...
-
Cara Memasang Tanda Tangan Di Blog - Setelah tadi siang Master Chef Share tetang Cara Menyembunyikan Judul atau Title Blog, Master Chef dat...
-
Istilah-Istilah Yang Digunakan Dalam Squidoo - Sebelum memulai aktifitas dengan Squidoo hal terpenting yang harus diketahui adalah memahami...
-
Belajar Squidoo Untuk Memperoleh Trafik Di Blog - Selamat malam sobat blogger Dapur Tutorial Blogspot dan Seo. Senang sekali malam ini blog...
About Me
Blog Archive
-
▼
2012
(25)
-
▼
November
(14)
- Cara Memasang Tanda Tangan Di Blog Step 1
- Cara Menyembunyikan Judul Atau Title Blog
- Cara Memasang Meta Tag Otomatis di Setiap Postinga...
- Cara Membuat Tab View Menu Tanpa Edit HTML Di Blog
- Cara Membuat Tab View Menu Di Blog
- Cara Posting Artikel Beserta Gambar Dan Video Di Blog
- Cara Memasang Jam Digital Berlogo Garuda Di Blog
- Cara Memasang Follower Box Twitter Di Blog
- Cara Lengkap Membuat Read More Otomatis Di Blog
- Cara Memasang Like Box Facebook Melayang Di Blog
- Cara Membuat Recent Post Dengan Thumbnail Keren
- Cara Memasang Kamera CCTV Di Sudut Kanan Atas Blog
- Cara Membuat Artikel Kamu Tidak Bisa Di Block
- Cara Memasang Foto,Logo atau Gambar Animasi Di Blog
-
▼
November
(14)
- 2008 - 2009 SimplexDesign. Content in my blog is licensed under a Creative Commons License.
- SimplexPro template designed by Simplex Design.
- Powered by Blogger.com.