Johny Ganteng Banget

DEMO

DOWNLOAD

Johny Ganteng Banget, Bagi Anda yang menginginkan tampilan seperti template Johny Sompret Banget tapi dengan bentuk lebih sederhana dan lebih ringan yang pasti, saya juga menyiapkan satu lagi template yang bisa anda gunakan. Template ini dinamakan demikian karena disesuaikan dengan yang bikin.... hehehehehe. Pada template ini hanya ada dua fitur yang Anda perlu diperhatikan, yaitu :

1.Recent Post

Terdapat pada sidebar kanan paling atas, cara pasanganya, masuk ke layout kemudian pilih HTML/Javascript kemudian masukkan kode berikut ini ke dalamnya :

<style type='text/css'>

#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/AVvXsEjBWipjA4-Nn2uoyy8a6BjtqIKj7OdIFABtDyIFZONK8TrcIgz-iYOFwJ62Z3K_gAh40olJGltO-0aNkPkX5FFvuF4d5WIzqpxK1YLj3MEDFJw9b0_8TXLHNc3boFPnTRPCBLIhejUI-Mg/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}

</style>

<script type='text/javascript'>

//<![CDATA[

var numfeed = 5;

var startfeed = 0;

var urlblog = "http://johny-gantengbanget.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/AVvXsEh77PqrWIGK1BLAieGUUMf6AVg0eZtojuJ9v3hHE9MxTz68RUPbxBTDuEJ9tyqUe3_zcgC9bvS_n1Pt2z8I0raPpkI2t2qR9FOsAFzgsR4pMizcWuETI3fK7J0BOeaeG4dgLogW5JCWejU/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'>&#9668; Previous</a>";

} else {

showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";

}

if(urlnext) {

showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";

} else {

showblogfeed += "<span class='noactived next'>Next &#9658;</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>

<lt;div id="terbaru"></div>

<div id="mas-navigasifeed"></div>

2.Reply Comment
Untuk mengaktifkan fungsi reply pada komantar pada template ini, ganti Blog ID pada template ini pada Edit HTML (jangan lupa centang expand widget template) : 149656394876047094 setelah ketemu ganti dengan blog ID anda.