Untuk membuat kolom widget recent post agar ada dibagian sidebar, silahkan anda ikuti langkah-langkah berikut ini
Silahkan masuk dulu ke akun Blogger anda
Silahkan masuk dulu ke akun Blogger anda
1. Masuk ke Template >> Edit HTML >> centang Expand Widget Templates >> tekan tombol Ctrl+F di keyboard
2. Cari kode ]]></b:skin>
3. Dan tambahkan kode berikut diatas kode ]]></b:skin>
4. Selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas </head>/* Navigasi Next dan Previous */
#mas-terbaru{border:1px solid #ccc;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:#fff;padding:2px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h5 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#fff}
.mas-elemen p{font:10px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-navigasifeed{border:1px solid #ccc;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#fff}
#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'>5. Silahkan simpan Template blog anda terlebih dahulu
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://4softcompute.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/AVvXsEhHS1ESg3jW908vrdlBCb0q_TKZCclp2coLaM1wfzE0bwwesE0JcWJUhtUnZMfmSQugGMQwUca8fmys7xWvkrCBRUDWa2ZYz2m0vNo6Rb6DxeL-SNVsqh6e7RuKZprGWjQ9D-J8N3-b7Dg/s1600/no+image.jpg";}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h5><a href='" + posturl + "'>" + posttitle + "</a></h5>";
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>
6. Sekarang tutup menu Template dan buka menu Tata Letak
7. Setelah berada di menu Tata Letak, silahkan anda klik Tambahkan Gadget HTML/Javascript dibawah ini
<div id="terbaru"></div>Simpan widget anda dan lihat hasilnya di homepage blog anda
<div id="mas-navigasifeed"></div>
============
Keterangan :
var numfeed = 5; adalah jumlah artikel yang tampil
var urlblog = "http://4softcompute.blogspot.com/"; silahkan ganti url ini dengan url blog anda.
var charac = 100; adalah jumlah ringkasan dari setiap artikel yang tampil
Itulah cara membuat kolom widget recent post yang bisa anda pasang didalam blog anda dan anda tidak perlu kuatir untuk loading blog setelah terpasang script ini, karena tidak akan mempengaruhi loading blog anda.
Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini Membuat Kolom Widget Recent Post
Posting Komentar