Cara Membuat Auto Read More Pada Blog

Mungkin di antara kalian ada yang belum menggunakan bantuan read more untuk memperpendek halaman utama blog kita ,

berikut script yang dapat digunakan untuk kita pasang di blog kita :

read more ini tidak seperti read more yang lain karna kita tidak perlu mengcopy paste kode saat kita akan membuat artikel baru,,


langkah 1
cari kode di bawah ini :
gunakan cntrl + f untuk mempercepat pencarian

</head>

langkah 2
copy paste kan kode di bawah ini tepat di atas kode pada langkah 1 :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://www.kha-mu.co.cc to get more cool tips 
********************************************/
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
}
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

langkah 3
Simpan template yang baru saja di edit

langkah 4
masih tetap di halaman EDIT HTML beri centang pada "Expand Widget Template" dan cari kode di bawah ini :

<data:post.body/>

atau kode ini

<p><data:post.body/></p>

langkah 5
Ganti kode pada langkah 5 dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Langkah 6
simpan template dan lihat hasilnya ,,


Keterangan:
var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

selamat mencoba dan semoga berhasil ...
keep the spirit despite failing
happy blogging ,,,

Read more »

Posted in: tricks N tips on blogging

by Mau pasang facebook comment?kesini aja ?

Disable klik kanan

Mungkin anda sering membuka suatu situs yang melarang blognya untuk diklik kanan oleh pengunjungnya atau dengan kata lain mendisablekan klik kanan khusus pada blog/situsnya saja. Guna dari disable ini ialah untuk melindungi konten atau foto yang anda miliki untuk dicopy oleh orang lain dengan kepentingan yang kita tidak tahu. Nah berkut ini ada javascript untuk mendisablekannya yaitu :

<script language=JavaScript>
<!--
 
//Matikan Klik Kanan 
 
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
 
document.oncontextmenu=new Function("return false")
// -->
</script>

Script ini dicopykan ke blog anda dengan cara :

1. Klik Layout dan pilih edit html

2. Cari kode di bawah ini dan Copykan kode tersebut dibawahnya.

</head>

3. Save.

4. Silahkan dicoba!!!

Read more »

Posted in: tricks N tips on blogging

by Mau pasang facebook comment?kesini aja ?

Membuat Daftar Isi dengan Efek jQuery Accordion

Demo 1 Demo 2

Bismillah. Alhamdulillah... sudah Beberapa hari ini tidak membuat artikel atau pun tips-n-trik karena terkonsentrasi untuk membuat daftar isi dengan efek jQuery accordion . Bahan dasar dari pembuatan daftar isi ini masih menggunakan JSON Feed dengan diberikan sentuhan efek animasi accordion (slideup slidedown) dan efek animasi bergoyang dengan framework jQuery, sehingga menjadikan daftar isi versi ini layak untuk dicoba. Dipilihnya efek animasi accordion supaya daftar isi ini lebih ringkas dan tidak terlalu panjang serta artikel yang di susun berdasarkan Label/Kategori. Daftar isi yang ringkas, mudah dan rapi untuk blog anda yang ingin tampil lebih profesional

Integrasi Daftar Isi dengan Efek jQuery Accordion pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
cari kode di bawah ini :

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 3:

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQsxml_OrpKeFu0j7_8Yo9k7aPrAxxFGZPZpL2XtHImmAc_Aa1dbHNgHZvT091gCfi3A2E9KEMv52debVF8mESJrZVsMjR68QbfVUOn-b3MHCOTgmtntYM1T_TO1xQZxZjPp32QlEPCsI/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVTLk_VSc7rnUUP2LG45ikPPozt8NW0s3ryWseQtVaWsnWrRxcR7jhgnbBR-q_XkMYn6Hult_v45iqQOiOsnvpdVR50yVbsU9FfCnGEjQ6dpND-jwACjV1UxJQsWwawOzqsk_r0VKsPbo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA-S-2PzcuaOw0SNM9_hvnMw0P_xSOKmHIoDzBFp2h3YloogsjUwUwmvdJmpxumtKHd-QFvjoHoM8i1xFM3uwhLznrL4CBZFn3spKYo4yEEUdBeSenAs3-KkbsPtFOH282STNGOdFpiyE/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

Langkah 5 

cari kode di bawah ini :

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada Langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

 Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6 ini

Langkah 7

simpan  template yang baru anda edit ...

Integrasi Daftar Isi dengan Efek jQuery Accordion pada Artikel

Langkah A
Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content)
Langkah B
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah C
Masukan (copy paste) kode dibawah ini ke dalam artikel :

<script type="text/javascript" src="http://imerka.fileave.com/acoordion/asset/dafis_acc.js"></script>
<script src="http://kha-mu.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Langkah D
Ubah URL blog pada langkah C (yang di blok) sesuai dengan URL Blog anda
Langkah E
Terbitkan artikel dan preview artikel tersebut...

selamat mencoba dan semoga berhasil ...
keep the spirit despite failing
happy blogging ,,,


wasallam ..

Read more »

Posted in: tricks N tips on blogging

by Mau pasang facebook comment?kesini aja ?