Trik Cara Membuat Recent Post
Recent post ini sangat berguna agar pengunjung blog anda yang masuk ke salah satu artikel anda tidak usah harus ke homepage blog anda dulu agar bisa melihat postingan terbaru anda, ok hanya itu penjelasan singkatrnya berikut langkah-langkahnya!
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
<!--
#mediablogger-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#mediablogger-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#mediablogger-widget 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/AVvXsEjT9-qwdZVYQJFt4IuDHmqWEdukQBYUQduRkxGDEiThCvpAd_WEumqsXh9Isj4ebDVQTF6bZW5gYfZwurN1ajXhJc44KnXbtZQ5v2WDHLVhkvlnvAjdIduYd9zcD4ev2Htp1YbzWUXftSg/s1600/helperblogger.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#mediablogger-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#mediablogger-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#mediablogger-widget 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);
}
#mediablogger-widget 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>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.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://share-with-adi.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="mediablogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div></div>
Nb : kode yang berwarna biru, anda ubah dengan URL blog anda
- Login ke blog anda
- Masuk ke blog dashbor
- Masuk ke template
- Pilih edit HTML
- Cari kode </head> dengan menggunakan Ctrl+F
- Pastekan kode di bawah ini tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
- Save template
- Kemudian masuk ke tata letak/layout
- Klik tambah widget di manapun yang anda suka
- Pilih HTML/javascript
- Masukan kode di bawah ini
<style type="text/css" media="screen">
<!--
#mediablogger-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#mediablogger-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#mediablogger-widget 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/AVvXsEjT9-qwdZVYQJFt4IuDHmqWEdukQBYUQduRkxGDEiThCvpAd_WEumqsXh9Isj4ebDVQTF6bZW5gYfZwurN1ajXhJc44KnXbtZQ5v2WDHLVhkvlnvAjdIduYd9zcD4ev2Htp1YbzWUXftSg/s1600/helperblogger.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#mediablogger-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#mediablogger-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#mediablogger-widget 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);
}
#mediablogger-widget 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>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMiPqf-3TOIyWvAbPHf5qUnQSIuRIAgpHa4mRutqqsvIwEVlIdJYXnezAGCZfRPBamAadkhpzE9eyyHeaCcnZ2vJOxvbLrv9R3SYWnBe6rnFwtfd8Y8fRbCdGM-LLiEY9OAkuVtk9tVA/s1600/no-thumbnail.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://share-with-adi.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="mediablogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div></div>
Nb : kode yang berwarna biru, anda ubah dengan URL blog anda
- Beri nama sesuai keinginan anda
- Save dan lihat hasilnya
Komentar
Posting Komentar