Papar Kotak Kod HTML

Nak promote banner?

Atau nak tunjuk kod HTML dalam tutorial?

Sebenarnya korang boleh pakai TextArea

Dalam kotak ni boleh masukkan kod HTML
Sebab, kod HTML tak boleh masukkan macam tu jerk kat entri
Untuk gunakan text area ni
Gunakan kod di bawah ni

<textarea cols="20" rows="5" >Masukkan kod HTML korang kat sini</textarea>

Korang boleh ubah lebar(cols) dan tinggi(rows)
Tulis biru tu boleh gantikan kod HTML mentah-mentah
Means tak payah convert

Contohnya masukkan

<textarea cols="20" rows="5" ><a href="http://www.asrolmania.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CkEG8s0yA_q8Kqy0SbH0KHjM3uKj8I3TJseGi0OSn-Y29sFOVylx3M3SpLSkvkNDdRDUVhPKbeoNr5H_Ys8TPPMy_VWBoNnK9nSfxImZOpNDcxgXzPahbs4uenmgSJWh1dgQC1UMQi-a/s1600/Banner-125x125.gif" /></a></textarea>

Hasilnya
<a href="http://www.asrolmania.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CkEG8s0yA_q8Kqy0SbH0KHjM3uKj8I3TJseGi0OSn-Y29sFOVylx3M3SpLSkvkNDdRDUVhPKbeoNr5H_Ys8TPPMy_VWBoNnK9nSfxImZOpNDcxgXzPahbs4uenmgSJWh1dgQC1UMQi-a/s1600/Banner-125x125.gif" /></a>

Perbezaan Label Dan Tag Blog

Semalam Asrol dapat emel

Ada peminat tanya beza label dan tag

Kedua-dua ni ada persamaan fungsi

Tapi bukan perkara sama

Label merupakan kategori entri kita

Manakala Tag lebih kurang macam label tapi dalam bentuk HTML
Dalam erti kata lain, tag ni adalah wakil

Sebab tu kita duk main tag-tag
Kita wakilkan pula kawan-kawan

Jom kita tengok

Label

Label merupakan kategori setiap entri yang kita post. Contohnya Lawak, Tutorial, Motivasi dan sebagainya. Fungsi Label boleh didapati penjuru bawah sebelah kiri editor kita.

Setiap entri boleh di wakili oleh beberapa label dan dipisahkan setiap kategori dengan koma (,)

Jika korang da sedia ada buat Label sebelum ni, korang hanya perlu klik butang Show All

Bila korang da publish entri ni, korang akan jumpa pada entri korang

Tag
Tag ni plak susah sikit. Sebabnya tag ni adalah general. Dalam HTML blog saja ada banyak tag. Tag-tag ni merupakan command atau arahan kepada skrip untuk sifat tertentu. Ha.. Tu dia bila orang IT bercakap lam BM. Lagi susah nak paham. Wakaka... Erm, contoh mudahnya adalah:

• Title
• Description
• Home page URL
• Page type

Tetapi, semua ni kita wakilkan dalam bentuk HTML

• <title><data:blog.pageTitle/></title>
• <b:include name='description'/>
• <b:if cond='data:blog.url == data:blog.homepageUrl'>
• <b:if cond='data:blog.pageType == &quot;index&quot;'>

Kadang-kadang, sesetengah blog pakai perkataan Tag sebagai wakil kepada kumpulan atau kategori bagi setiap entri (penerangan ayat ni sama seperti Label kat atas) Tag ni merupakan berfungsi macam label jugak, dia nak bagitahu bahawa setiap tag adalah wakil kepada sesuatu tetapi tag lebih kepada fungsi sifat diwakilkan dalam bentuk HTML.

Perbezaan Label Dan Tag Blog

Semalam Asrol dapat emel

Ada peminat tanya beza label dan tag

Kedua-dua ni ada perbezaan ketara

Bukan perkara sama

Tapi kadang-kadang kita fikir ni adalah sama

Label merupakan kategori entri kita

Manakala Tag merupakan kod html

Bukan tag-tag kawan tau

Jom kita tengok

Label

Label merupakan kategori setiap entri yang kita post. Contohnya Lawak, Tutorial, Motivasi dan sebagainya. Fungsi Label boleh didapati penjuru bawah sebelah kiri editor kita.

Setiap entri boleh di wakili oleh beberapa label dan dipisahkan setiap kategori dengan koma (,)

Jika korang da sedia ada buat Label sebelum ni, korang hanya perlu klik butang Show All

Bila korang da publish entri ni, korang akan jumpa pada entri korang

Tambah Butang Reply Pada Komen

Kepada owner blogspot yang femes

Mesti susah nak reply komen banyak-banyak kan

Kan senang kalo setiap komen leh tekan button reply

Macam iklan la plak

Haha..

Mesti korang da penah tengok kan

Tapi asrol ada komen kat beberapa blog

Diorang tak letak plak button tu

Mungkin diorang tak tau kot

So, meh sini Asrol nak ajar

Cara-caranya:

1) Pergi ke Design >> Edit HTML

2) Klik kotak Expand Widget templates

3) Cari kod ini

<data:commentPostedByMsg/>

4) Masukkan kod berikutnya selepas kod tadi

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

5) Gantikan YOUR-BLOG-ID dengan blog ID korang.

     Semasa korang tengah create new post, korang boleh tengok blog ID korang

6) Untuk paparan reply, korang boleh ubah [Reply] kepada perkataan lain. Contohnya [Balas], ('_') Lawan Balik dan sebagainya

7) Atau pon, kalau korang nak gantikan perkataan [Reply] dengan gambar pon boleh jugak. Tapi agak-agak la, pastikan gambar tu gambar butang atau kecil. Jangan plak letak gambar sebesar alam. Haha.. Cuma gantikan dengan kod berikutnya ni.

<img src="http://url_gambar@butang"/>

Okay.. Selamat berjaya..

Cara Mudah Buang NavBar Blogspot

Kalau korang pakai theme dari blogspot

Mesti ada NavBar kan

 

Tak mengganggu pun

Tapi macam tak best la

Bagi yang dah ada domain sendiri

Macam tak sesuai la ada NavBar

Sekurang-kurangnya bagi la nampak macam laman web sendiri

Hehehe

Cara-caranya:

1) Pergi ke Design >> Edit HTML

2) Cari kod <body> dan letakkan kod berikutnya atas kod tadi

<!--<body>-->

3) Lepas tu save. Sistem akan tanya sama ada nak delete atau tak widget tersebut, korang pilih Delete Widget

4) Ok.. Siap..

Page Navigation

Okay

Atas permintaan ramai

Wah.. Macam DJ plak erk..

Asrol nak ajar macam mana nak buat Page Navigation

Page Navigation

Page navigation ni sebenarnya berguna untuk blog-blog jenis yang tutorial, galeri dan sebagainya

Untuk blog-blog biasa

Yang banyak citer kesah hidup

Rasanya tak perlu sangat

Sekadar buat assesori jerk la..

Sebabnya

Page navigation ni berguna untuk lihat berapa page yang ada

Contohnya untuk page tutorial

Page navigation akan beritahu ada banyak mana tutorial sebenarnya dalam blog tersebut

Tapi takpe

Ilmu tetap ilmu dan boleh dipelajari

Kalo nak buat

Ikot la langkah bawah ni

1) Pergi kat Design > Edit HTML

2) Klik kotak Expand Widget Template

3) Cari

]]></b:skin>

4) Letakkan kod bawah ni kat atas kod tadi

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Kod-kod atas ni korang boleh ubah ikot suka korang

5) Lepas tu, cari kod ni plak

</body>

6) Letakkan kod berikutnya atas kod tadi

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

7) korang boleh ubah setiap kotak ada berapa post dan berapa paparan kotak. Kot la.. Wakaka... Korang try la godek-godek erk..

var pageCount=5;
var displayPageNum=5;

Ukie..

Have fun...

Kenapa Blog Perlu Word Verification?

Kadang-kadang kita komen blog orang

Kita kene isi Word Verification dulu kan

Ingatkan pasal pe la kene isi tuh

Word atau perkataan yang muncul ni

Untuk sahkan kita ni orang ke ape

Bukan sahkan kita ni orang ataupon haiwan

Wakaka

Ni adalah untuk elakkan mesin atau sistem

Komen entah pape kat blog kita

Pendek kata untuk elak spam daripada sistem automatik

Korang boleh enable atau disable kan bila-bila masa

Pergi kat Settings | Comments

Asrol rasa tak perlu kot

Kalo-kalo ada spam

Delete jerk la

Sebelum ni pon

Tak penah plak ada spam

Sume orang yang komen

Hahaha...

Papar Gambar Secara Rawak

Skrip java ni berguna kalo korang nak buat iklan dalam blog sendiri. Iklan tersebut akan dipaparkan secara rawak supaya pengunjung laman blog / web korang tak jemu tengok iklan yang sama. Gambar-gambar ini bertukar secara rawak setiap kali muat turun laman / page load atau refresh.




Tambah skrip ini sebagai widget

<script language="JavaScript">
<!--

function random_imglink(){
  var myimages=new Array()
  //specify random images below. You can have as many as you wish
  myimages[1]="http://url.gambar1"
  myimages[2]="http://url.gambar2"
  myimages[3]="http://url.gambar3"

  //specify corresponding links below
  var imagelinks=new Array()
  imagelinks[1]="http://www.urlgambar1.com"
  imagelinks[2]="http://www.urlgambar2.com"
  imagelinks[3]="http://www.urlgambar3.com"

  var ry=Math.floor(Math.random()*myimages.length)

  if (ry==0)
     ry=1
     document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}

  random_imglink()
//-->
</script>

Gantikan http://url.gambar dengan URL gambar anda dan http://www.urlgambar.com dengan link ke page

Have Fun.. Hehe..

Papar Widget Mengikut Keperluan Laman Blog

Apabila kita tambah widget dalam blog kita, widget tersebut akan papar pada semua halaman dalam blog kita. Bila widget terlalu banyak, blog kita jadi berat untuk load. Tetapi, kadang-kadang, widget pun berguna dan penting juga untuk blog kita. Contohnya, Trafik blog, Follower, Chat box dan sebagainya. Tetapi, tak semua widget ni penting / perlu ada dalam semua laman blog kita kan.

Bawah ni ada cara untuk kita buat widget-widget tersebut akan dipaparkan mengikut keperluan laman blog. Contohnya, Follower hanya muncul pada laman utama sahaja, di halaman post, widget Follower takkan muncul.

Jom kita mula
Pergi ke Dashboard >> Design >> Edit HTML >> Expand Widget Templates

Setiap widget ada tajuk tersendiri, untuk cari widget tersebut, samaada cari (ctrl + F)

• tajuk widget atau 
• <b:widget id=

Kamu akan jumpa code seperti bawah ni

<b:widget id='HTML1' locked='false' title='tajuk widget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Kamu boleh ubah kod atas ni mengikut keperluan

Papar widget dalam semua laman kecuali laman utama

<b:widget id='HTML1' locked='false' title='Unique Title of Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Papar widget hanya pada laman utama

<b:widget id='HTML1' locked='false' title='Unique Title of Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Papar widget pada laman tertentu / khas

<b:widget id='HTML1' locked='false' title='Unique Title of Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL laman khas"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Ok.. Selamat mencuba

Auto Create Read More Blog With Image

Sesetengah template blog paparkan entri penuh. Kalau nak bagi pendek untuk paparan muka depan, blogger tersebut kena guna fungsi page break. Kadang-kadang leceh jugak. Tapi tengok selera masing-masing la. Kali ni ada cara mudah untuk buat muka utama blog papar lebih entri.

Sekarang, aku ajar korang cara nak buat fungsi read more beserta gambar.

Login blog, Design >> Edit HTML. Klik kotak "Expand Widget Templates".

Lepas tu, cari kod </HEAD> dan copy kod bawah ni, paste sebelum kod </HEAD>.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

Untuk maklumat, korang boleh tukar kod ni untuk setkan saiz / tinggi post
summary_noimg = 430; tinggi saiz post jika post tanpa gambar
summary_img = 340; tinggi saiz post jika post tersebut ada gambar
img_thumb_height = 100; tinggi gambar
img_thumb_width = 120; lebar gambar

Skarang, cari kod ni plak <data:post.body/>, lepas tu replace ngan kod bawah ni

<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>

 kod read more kat atas ni korang leh ubah jadi perkataan yang korang suka..

Okay.. Selamat mencuba.. Have Fun.. Hahaha...

SEO: Tukar Tajuk Post Blog Untuk Mudahkan Search Engine Buat Carian

Kebiasaannya, apabila kita tukar sesuatu template blog, nama blog kita berada di depan tajuk post kita. Ini akan membuatkan rank post kita terletak jauh ke bawah dalam halaman enjin carian (Search engine results page). Jadi, kita perlu tukarkan nama blog supaya berada di belakang tajuk post.

Sebelum

Selepas

Untuk menukarnya, edit html,

cari tag ini

<title> <data:blog.pageTitle/> </ title>

lepas tu, gantikan dengan tag bawah ni

<b:if cond='data:blog.pageType == &quot;item&quot;'> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <title> <data:blog.pageTitle/> </title> </b:if>

Selamat Mencuba

Tukar Domain Blogspot Ke Domain Sendiri

Sedar tak sedar aku da punya domain sendiri untuk blogspot aku ni. Tapi aku masih lagi pakai hosting blogspot. Tengok la aku punya url ni.. Hehe..

Kan lebih menarik jika kita ada domain sendiri..

Jom aku ajar korang cara tukar domain blogspot ke domain pilihan hati korang.. Haha..

Pengenalan

Sebelum tu aku nak share dulu ngan korang apa itu domain dan hosting. Ramai yang masih keliru dan tertukar antara domain dan hosting. Kebanyakannya tutorial dalam versi Inggeris dan Indonesia. Kali ni aku terangkan dalam Bahasa Malaysia. Haha..

Domain: Merupakan url @ alamat sesebuah laman web seperti .com, .net, .co.cc dan banyak lagi. Inilah domain. Kalau domain blogspot adalah .blogspot.com.

Hosting: Merupakan storage/simpanan untuk file laman web dan kebanyakannya disimpan di dalam server.

Dalam entri ini, aku nak ajar korang cara nak tukar domain blogspot (cth: asrolmania.blogspot.com) ke domain sendiri (cth: www.asrolmania.com)

Langkah² Penukaran Domain Blogspot ke Domain Sendiri

Langkah 1
Anda perlu membeli domain dari mana² syarikat seperti MesraHosting, Exabyte, Ohdomain, NetKL dan sebagainya. Harga tertakluk kepada syarikat masing². Harga domain biasanya dalam RM30-RM50 untuk .com dan boleh mencapai RM50-RM100 lebih untuk domain yang lain seperti .com.my, .asia, .edu dsb.

Langkah 2
Kemaskini tetapan DNS Server. (Login client panel yang disediakan oleh penjual/syarikat domain)

• Masuk ke DNS Server Setting,
• Buat CNAME baru dengan meletakkan nama sebagai www (www adalah untuk laman utama)
• Pointkan ke ghs.google.com

Untuk pengetahuan korang, pengemaskinian tertakluk juga kepada penyedia/penjual domain samada korang boleh menukar sendiri atau korang perlu memberitahu kepada admin. Anda boleh memberitahu kepada admin untuk pointkan DNS CNAME www ke ghs.google.com

Langkah 3
Sekarang lakukan setting kat blogspot pulak.

• Masuk/login blogger.com
• Setting >> Publishing

• Klik pada Custom Domain
• Klik pulak Switch to advanced settings
• Masukkan domain yang korang beli (cth: www.asrolmania.com)

• Simpan tetapan korang.
• Ta daaaa... Da boleh guna da.

Tips

Kalau korang ada domain sendiri, blog anda akan jadi lebih menarik. Orang lain juga tak perlu taip url korang panjang².

Amat sesuai jika ada yang ingin memulakan bisnes secara online.

Apabila kawan lama korang masih taip url blogspot korang (cth: asrolmania.blogspot.com), maka google akan point terus address/url korang ke domain korang (cth: www.asrolmania.com). Selamat Mencuba..