Cara Membuat Recent Post / Post Terakhir pada Blog
Langsung saja Screenshotnya
4. Simpan dan lihat hasilnya
Sumber : Creative Website
Gambar 1.1 Recent Post
1. Dashboard ~> Tata Letak~>Add Gadget~>HTML/Java Script
2. Pastekan kode dibawah ini pada kolom konten
3. Ganti Kode Bercetak Tebal dengan Alamat Blog sobat<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/AVvXsEhLPzHUDFYfouysjNuh68gtQwrwEww0QIGefbf1A2zugSJ2GM7WqgtBqYsY-Si-J2lyP7ZBq2eFOUU1Hvg7NC67Avv37Nbv7qOR_B5taOfhEf6RQlK3D2bpsx-Mtt26-QjfCVQWfb91NoI/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://tutorialseo-blog.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/AVvXsEhT815f5W5cwcma-rquEoBCAENEQ2vuOAyFKfZ5BaoQO_3beXBES6YhughwtwxstIb309_mXcw_f8UrVZgaXVrRQGxR9W2EKd50ofDUgJUzVGFrrofukRE6buEoCi4YVeqWB19uBEDtNKw/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>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
4. Simpan dan lihat hasilnya
Sumber : Creative Website
Andreano Calvin / Senin, 22 Oktober 2012 /
/
Read More »
Cara Membuat Tabel dengan Scroll pada Blog
Pada hari ini, saya akan memberikan tutorial yang berjudul Cara Membuat Tabel dengan Scroll pada Blog . Cara ini sering saya gunakan untuk meringkas space iklan dan info blog saya. Cara Membuat Tabel dengan Scroll pada Blog ini memiliki banyak fungsi yaitu meringkas beberapa gadget agar tidak terlalu menempati banyak ruang
1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isi Judul, dan isikan kode berikut pada kontennya
Gambar 1.1 Contoh Tabel yang saya pakai
Gambar 1.2 Contoh Tabel yang saya pakai
1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isi Judul, dan isikan kode berikut pada kontennya
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
Silakan letakan kode HTML disini
</center>
</div>
- Kode bewarna merah adalah lebar dari tabel tersebut (kira kira aja)
- Kode bewarna biru adalah tinggi dari tabel tersebut (kira kira aja)
Andreano Calvin / Sabtu, 20 Oktober 2012 /
/
Read More »
Langganan:
Postingan (Atom)