Salam perkenalan dan salam hormat buat pembaca dan pengunjung Syoknyerblogging.blogspot.com. Terima kasih kerana sudi membaca blog ini sehinggalah ke module 16. Untuk module ke 16 ini sy ingin berkongsi sedikit tips untuk melajukan loading blog anda. Terlebih dahulu, cuba timbang berat blog anda disini http://syoknyerblogging.blogspot.com/2010/11/timbang-kelajuan-blog-anda.html. Jika berat blog anda melebihi 100kbps maka ia termasuklah didalam golongan overweight. :D.

1 Jangan paparkan terlalu byk post pada halaman utama. Cdgn maximum adalah 5. Untuk menukar jumlah post yang dipaparkan dalam satu page pergi ke Dashboard > Settings > Formatting.

2 Kurangkan size gambar. Gambar header,widget,footer,posting dan sebagainya. Anda boleh mencuba Image Optimizer disini. http://www.imageoptimizer.net/

3 Buang javascript yang tdk diperlukan. Semakin byk javascript semakin bertambah berat blog anda.

4 Padatkan Css yang digunakan didalam blog. Buang Css yang xdiperlukan. rujuk sini untuk compress css. http://syoknyerblogging.blogspot.com/2010/11/module-6-tambahkan-kelajuan-blog.html.

5. Jangan display terlalu byk iklan.

Ini sahaja tips sy untuk lajukan loading blog. Jika ada penambahan silalah tinggalkan komen anda disini. (^^,)

Sebelum ini sy telah postkan bagaimana hendak membuat static page pada blogspot. Jika anda menggunakan coding auto readmore disini, anda tidak perlu untuk mengubahnya. Terdapat beberapa user blogger yang menghadapi masaalah ini pada template yang mereka gunakan. Oleh itu, sy akan berkongsi cara untuk membuang auto readmore pada static page.

1 Pergi ke Dashboard > Design > Edit Html

2 Cari koding dibawah

<div class='post-body'>
<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;padding-top:20px;'><a  expr:href='data:post.url'> read more  "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Masukkan koding yang sy tandakan merah


<div class='post-body'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<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;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Untuk post kali ini sy akan berkongsi cara untuk membuat static page pada blogspot. Apakah bezanya static page dengan posting yang biasa? Posting biasa akan keluar di muka hadapan dan akan bercampur dengan posting2 yang lain. Static page adalah page keseorangan bermaksud page yang tidak bercampur dengan page lain. Agak sukar untuk sy jelaskan. Anda cuba dan anda akan faham apa maksud sy.

Untuk membuat static page senang sahaja. Features ini mmg sudah disediakan oleh blogger setelah mendapat request yang begitu banyak daripada pengguna.

1 Pegi ke Dashboard > New Post > Edit Pages. Klik pada new page

2 Isikan apa yang anda ingin letakkan pada page tersebut.

3 Selepas siap publish, seterusnya letakkan link ke page tersebut. Anda boleh memilih untuk
meletakkan sendiri didalam menu atau menggunakan widget page yang disediakan blogger.

4 Seterusnya Design > Page Elements kemudian Add a Gadget.

5 Pilih pages untuk membuat butang ke static page anda.



6 Anda boleh memilih setting yang diinginkan kemudian tekan save.

7 Selamat mencuba (^^,)

Anda mungkin juga berminat Membuang Auto Readmore pada static page

Untuk post kali ini sy telah membuat satu senarai free chatbox dan Shoutbox yang boleh digunakan untuk blog anda. banyak lagi servis yang wujud di internet tetapi hanya ini yang dpt sy senaraikan. Jika ada pertambahan bolehlah komen di post ini (^^,).

1) Shoutmix
2) Cbox
3) Sbox
4) Yellbox
5) Free Shoutbox
6) iShoutbox
7) Shoutjax
8) Shootbox
9) Chatango
10) Blom

Module 14: Cara letak lagu dalam blog. Untuk posting kali ini sy akan berkongsi cara untuk masukkan lagu kedalam blog anda. Terdapat 3 pilihan untuk pembaca Syoknyerblogging.


Apa bende plak fileden 2? Fileden 2 adalah online storage system dimana anda boleh simpan file dan boleh juga berkongsi dengan rakan2 anda. Nk guna hosting lain pun boleh. Tp yang boleh direct download sahaja. Mirror seperti rapidshare,megaupload dan sebagainya tidak boleh.

Bagaimana caranya 2?

1 Layari http://www.fileden.com/ dan upload file anda kat sana. Hanya ahli dpt upload file, jika tiada akaun kenelah reg dulu.

2 Dapatkan url file mp3 anda td. Ingat, fileden hanya memberi 1GB storage dan 5GB bandwidth sahaja untuk free user.

<object data="http://judahhimango.com/FlashAudioPlayer/player.swf" width="290" height="24" id="audioplayer1" type="application/x-shockwave-flash"> <param name="movie" value="http://judahhimango.com/FlashAudioPlayer/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=http://www.fileden.com/files/2010/12/2/3029215//EzadLazim-BertemuCintaku.mp3">
</object> 

3 Copy coding diatas dan letakkn pada kotak widget anda. Dashboard > Design > Page Elements. Gantikan url http://www.fileden.com/files/2010/12/2/3029215//EzadLazim-BertemuCintaku.mp3 dengan url lagu anda. Demo yang sy tunjukkan diatas adalah lagu Ezad Lazim - Bertemu Cintaku. Sy mmg jiwang skit. :D


Cara 2: Upload File kedalam Aimini.net

1 Jika anda belum menjadi ahli aimini.net anda hendaklah terlebih dahulu mendaftar sbg ahli. Percuma Sahaja. http://www.aimini.net/

2 Searchkan lagu yang anda inginkan pada kotak search yang disediakan. Ini untuk menjmatkan masa mengupload. Jika tiada, anda uploadlah lagu yang anda inginkan

3) Copy koding lagu yang anda jumpa atau upload. Dimana codingnya? berada dibawah kotak lagu, bahagian embed.


4 Pastekan coding dimana anda ingin letakkan lagu. Di posting ataupun di kotak widget

<object width="380" height="120"><param name="wmode" value="transparent"><param name="movie" value="http://f.a.h.t.aimini.net/player/mp3/?file=http://f.a.h.t.aimini.net/play/?fid=tHafFeAuc44CdkdiLAxl&auto=yes&repeat=yes"><embed src="http://f.a.h.t.aimini.net/player/mp3/?file=http://f.a.h.t.aimini.net/play/?fid=tHafFeAuc44CdkdiLAxl&auto=yes&repeat=yes" width="380" height="120" type="application/x-shockwave-flash"></embed></object>

5) Untuk play automatik tukarkan auto menjadi autoplay. Untuk menukarkan size anda boleh edit bahagian width untuk kelebaran dan height untuk ketinggian.


Layari http://fullmusik.co.cc/ dan cari lagu pilihan anda. Copy dan pastekan koding didalam blog anda.


Selamat mencuba. (^^,)

Untuk module ke 13 ini sy ingin berkongsi cara membuat breadcrumb pada blogspot. Apakah itu breadcrumb?. Breadcrumb umpama peta yang menunjukkan arah dimana pengguna berada sekarang atau nk lebih moden umpama GPS :D. Manusia mempunyai ingatan jangka pendek, breadscumb ini akan membantu pembaca mengetahui lokasi mereka berada sekarang. Tapi apa kaitannya breadcrumb dgn SEO?.

Contoh Breadcrumb Home>>Label>>Membuat Breadcrumb


1 Pergi kepada Dashboard > Design > Edit HTML
2 Cari coding dibawah

<b:include data='top' name='status-message'/>

3 Gantikan koding tersebut dengan koding dibawah

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

4 Sekarang cari <b:includable id='main' var='top'>
5. Gantikan koding tersebut dengan koding dibawah

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

6 Cari koding ]]></b:skin>
7 Copy dan Paste koding dibawah sebelum ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Post kali ini sy akan berkongsi cara untuk meletakkan tanda tangan dibawah posting anda. Mungkin ada dikalangan pembaca tertanya2 bagaimana penulis blog meletakkan tanda tangan pada blog mereka. Untuk tutorial kali ini, kita akan menggunakan servis percuma daripada MyLive Signature. Sy akan bahagikan dua iaitu untuk penulis keseorangan dan byk penulis didalam satu blog.
Terlebih dahulu sila membuat signature anda di MyLive Signature.


Tekan "Click Here to Start" dan ikuti langkah2 di web tersebut. Selepas siap, tekan "Want to use this signature?"



Pilih generate Html Code. Dapatkan koding signature anda. Anda akan dpt coding seperti dibawah

<a href="http://www.mylivesignature.com" target="_blank">
<img src="http://signatures.mylivesignature.com/54488/369/6F53071F5567C789FA335DB3BA234DFB.png" 
style="border: 0 !important; background: transparent;"/></a>

Ambil lokasi image sahaja. Lokasi image akan berada didalam <img src="ini adalah lokasi image">

http://signatures.mylivesignature.com/54488/369/6F53071F5567C789FA335DB3BA234DFB.png

Seterusnya masuk kedalam akaun blogger anda. Dashboard > Design > Edit HTML. Cari koding

<div class='post-footer-line post-footer-line-1'>

jika tiada cuba

<p class='post-footer-line post-footer-line-1'>

atau

 <data:post.body/>

Untuk Single Author

1 Copy dan paste coding dibawah selepas koding yang dicari td.

<img src='url_of_your_signature_image' style='border:0px;'/>

2 Gantikan url_of_your_signature_image dengan lokasi signature td.


Untuk Multiple Author

1) Copy dan Paste koding dibawah selepas koding yang dicari td.

 <b:if cond='data:post.author == &quot;Author1Name&quot;'>
<img src='url_of_author1_signature_image' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Author2Name&quot;'>
<img src='url_of_author2_signature_image' style='border:0px;'/>
</b:if>

Tukarkan kawasan yang diboldkan dengan nama author dan lokasi signature.


Save kan template anda dan lihat hasilnya. Semoga Berjaya (^^,)

Untuk Post Kali Ini Sy Akan Berkongsi Cara Untuk Membuat Auto Readmore pada blogspot. Dengan mengenakan coding ini pada blogspot, semua post anda akan automatic membuat auto readmore tidak kira untuk post baru ataupun lama. Untuk module sebelumnya sy telah berkongsi cara membuat Readmore pada posting. Untuk membuat auto readmore pastikan anda telah membuang semua readmore effect yang dikenakan pada post2 sebelum ini.

1 Pergi Dashboard > Design > Edit HTML.
2 Back up template.
3 Klik "Expand Widget" check box.
4 Cari coding </head>. (Ctrl + F untuk memudahkan perncarian)
5 Letak coding Read More dibawah selepas </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

6. Selepas itu cari koding <data:post.body/>
7 Gantikan coding tersebut dengan coding dibawah

<!-- Auto read more Start -->
<!-- http://www.syoknyerblogging.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

8. Klik preview, Jika tiada sebarang masalah,tekan save.
Menukar effect

Untuk menukar effect auto readmore sila tukar pada bahagian berikut

1. thumbnail_mode – tukarkan = "no" jika mahu memaparkan text sahaja yakni tanpa gambar.
2. summary_img – jumlah character yang ingin ditunjukkan bersama gambar sebelum auto readmore.
3. summary_noimg – Jumlah character yang ingin ditunjukkan jika tiada gambar.
4. img_thumb_height and img_thumb_width - Tukar kelebaran dan ketinggian gambar dalam pixels.

Diharapkan tutorial ini membantu anda. Selamat mencuba.. (^^,).

Kali ini saya ingin berkongsi bagaimana untuk membuat read more pada posting anda. Function ini memang telah disediakan oleh blogspot cuma mungkin ade antara anda yang tdk tahu bagaimana. Caranya mudah sahaja.

1) Masuk pada Dashboard > Settings. Dekat tab basic scrool sampai bawah sehingga anda jumpa Select post editor pada Global settings. pilih updated editor.

2) Selepas itu posting editor anda akan bertukar wajah seperti dibawah.

3) untuk membuat read more anda cuma tekan icon gambar pecah 2 dan satu garis akan muncul. masukkan post yang anda ingin muncul apabila read more ditekan di bawah garis tersebut seperti contoh dibawah 

4) Jika anda ingin menukarkan perkataan read more kepada nama lain seperti baca lagi or sambung baca or apa saja yang anda nk pergi dekat blogger>>layout pastu tekan edit pada blog post. satu popup akan keluar seperti dibawah.. tukarkan bahagian yang dibulatkan dengan perkataan anda sendiri.

5) Lepas itu Save.. Selamat mencuba.. Untuk post seterusnya sy akan berkongsi cara membuat Auto Readmore. Tunggu ~~