Rabu, 13 Juni 2012

Letak Read More Pada Setiap Post

T.K.J TEKNIK.KOMPUTER.JARINGAN.

Dengan fungsi ini, setiap entri post akan diringkaskan dan di set kepada read more. Image yang ada pada setiap entri akan disetkan kepada saiz yang lebih kecil dan di letakkan pada sebelah kiri. Fungsi ini juga akan menghadkan secara auto jumlah teks yang akan dipaparkan pada satu entri.

Untuk membina fungsi auto read more ini, sila ikut beberapa langkah di bawah:

P/S: Sebelum itu, sila backup template anda terlebih dahulu sebagai langkah berjaga-jaga.

1) Sign in akaun blogger anda

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

</head>

4) Copy kod di bawah dan pastekan sebelum/di atas kode </head>yang anda cari dalam langkah 3 tadi

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

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>

5) Sekali lagi, dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod di bawah pula, 

<data:post.body/>

6) Copy kod merah di bawah dan gantikan pada kod<data:post.body/> tadi

<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifNV-CM7T3vqZ7olAU3a_BPvGLU6t-tPO5_9LgqhFkcxzh7FkfE5WJPWFTMFyBbfY0II-q7hpg1b903aroYUATCEWkiK-v8AiyTf5A3lEAXk-6NiVa0huGVaCKOFtX991IdZsXXjJjwnA/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Pada url yang diboldkan purple di atas, masukkan url button pilihan anda. Pilih button di sini. 

7) Akhir sekali klik preview, dan jika tiada error, klik save.

Selamat mencoba! :)

Selasa, 12 Juni 2012

Cara membuat Scroll pada widget label, Blog archive, Popular post

T.K.J TEKNIK.KOMPUTER.JARINGAN.
1. Login ke Blogger
2. Klik Rancangan รข Edit HTML
3. Klik tulisan Download Template Lengkap


Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

Kemudian cari kode seperti berikut :

<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>

Contoh membuat Scroll untuk arsip blog (BlogArchive1) caranya cari kode ]]></b:skin> Copy kode dibawah ini dan Paste di atasnya kode tadi :

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Simpan Template......

Contoh lainnya jika ingin memasang kan scroll pada widget lain tinggal ganti Kode id berwana biru (BlogArchive1) contoh untuk label blog masukkan kode id berikut Label1 atau untuk Entri Populer dengan kode id PopularPosts1 nama id tersebut silahkan sesuaikan dengan template kawan-kawan....

Selamat mencoba.............

 
Ransel-Kids © 2011 Templates | uzanc