Dilarang Melarang

Percuma Layout Blogger : Cubismo

2009-07-22T13:19:00.001+08:00

Nampaknya berbaloi juga usaha aku beberapa jam ini selepas berjaya menconvertkan sebuah layout untuk pengguna Blogspot. Harap siapa yang rekues templat ini berpuas hati sebab aku tak sempat nak test templat ni kat browser lain kecuali Firefox. Tapi aku tengok kat browser Google Chrome nampak tak ada cacat cela pun.

Kalau ada masalah kamu boleh tanya terus aku kat ruang komen. Kalau ada tambahan pun kamu juga boleh turut sama membantu.

Sebenarnya layout ini memang cantik dan semenjak aku gunakan Wordpress inilah salah satu theme feveret aku. Oh ya! Kamu ada mana-mana theme yang betul-betul cantik untuk aku convertkan di lain masa? Kongsi-kongsilah.

Kelebihan layout ini

Salah sebuah theme Wordpress.
2 Navigation bar yang sangat cantik berserta search box.
Layout 2 kolum, sidebar di sebelah kanan.
Blockquote yang cantik.
Sistem komen yang cantik dengan numbering comment.
Navbar disembunyikan.

Berminat untuk menderma?

Aku tak harapkan apa-apa dari templat ini, cuma jangan buang kredit kat footernya saja. Kamu boleh juga menderma kepada aku jika kamu bermurah hati untuk sponser bil internet, bil air dan bil elektrik sepanjang aku berhempas pulas menyiapkan templat ini. Chewah.

Maybank (163082136760) | Bank Islam (13044020790049)

Lihat Demo | Muatturun Layout (Dalam bentuk Zip)

10 Layout Menarik Untuk Blogspot Juga Wordpress #03

2009-07-21T02:25:00.001+08:00

Kepada mereka yang gilakan layout aku cadangkan kamu cuba layout yang ini pula. Aku tak tahu kenapa mereka suka tukar layout setiap minggu tapi bagi aku ianya mungkin sebab nikmat kot.

Untuk versi ini tak banyak designer baru yang muncul, asyik-asyik muka sama je. Aku harap ada sesiapa di antara kita dapat buatkan layout yang unik. Dulu aku tengok Jerry ada juga buat layout untuk pengguna Blogspot tapi sekarang tengah sibuk belajar agaknya.

Aku memang tak ada masa untuk buat layout, ada sesiapa berkenan dengan layout terbaru aku! Haha.

Paper Wall

Layout ini memang betul-betul teliti buatannya. Dari header sehingga footer semuanya menarik. Untuk Blogspot kalau nak guna kena ada hosting sendiri, lagipun banyak imej yang digunakan dalam layout ini. Apa-apa pun layout ini paling menarik untuk versi ketiga ini, setuju?

Blogspot : Muatturun
Wordpress : Demo / Muatturun

Typographic Times

Satu lagi layout menarik, nampak macam ringkas tapi aku rasa ianya juga tak boleh pandang sebelah mata. Cuba kamu tengok navigation barnya, ditambah lagi dengan post footernya. Memang berbaloi kalau kamu sukakan typografi. Eh! Apa yang aku perasan sekarang memang trend layout bercirikan typografi. Konfirm!

Blogspot : Demo / Muatturun

Light Word

Aku dah berkenan lama dengan layout ini. Navigation barnya seakan-akan 3 dimensi bukan? Buttonnya pun nama macam menyerlah je dengan penggunaan Css yang menarik. Kalau headernya kamu stailkan semula pasti nampak lebih elegan. Lain-lain aku rasa kamu dah tak perlu nak edit apa-apa pun.

Blogspot : Demo / Muatturun
Wordpress : Muatturun

Showcase

Aku suka imej backgroundnya, sangat-sangat sesuai dengan stail layout ini. Cuma ianya tak berapa atau memang tak sesuai langsung dengan blog yang tidak bergambar. Kalau blog kamu seperti direktori mungkin ianya sesuai untuk kamu.

Blogspot : Demo / Muatturun

Puppet

Berat hati nak cakap layout ini menarik. Secara jujurnya aku suka imej backgroundnya, lain-lain aku rasa biasa saja. Apa-apa pun headernya mungkin berupaya menutup kelemahan layout ini.

Blogspot : Demo / Muatturun
Wordpress : Demo / Muatturun

Inove

Layout ini memang popular dikalangan pengguna Wordpress, kiranya paling top tenlah. Oh ya! Aku memang pernah guna layout ini tapi agak membosankan kerana kamu memang tak boleh tukar imej beckgroundnya sendiri jika kamu tak terer dalam penggunaan Adobe Photoshop. Tapi navigation bar tu memang betul-betul aku jatuh hati, apa ketidaknya aku dah pernah ajarkan tutorial navigation barnya dulu. Tapi navigation bar tu versi berapa entah, mungkin aku patut update esok lusa.

Blogspot : Demo / Muatturun
Wordpress : Demo / Muatturun

Dreamy

Pendesign layout ini memang terer dalam menkombinasikan warna dengan bentuk layout. Itu aku paling tabik dekat dia. Sama je macam layout Showcase, jadi tak perlu aku cakap banyak. Dan memang tak ada versi untuk pengguna Wordpress, maaf!

Blogspot : Demo / Muatturun

Curious

Layout yang unik. Kalau kamu memang terer dalam Adobe Photoshop jangan lupa tukar imej kartun itu dengan kartun sendiri. Nanti layout yang unik jadi tak unik plak, betul tak?

Blogspot : Demo / Muatturun
Wordpress : Demo / Muatturun

SimplePaper

Sesuai dengan namanya, layout ini memang simple. Walaupun begitu, ianya memang dari buahtangan Jai, nama yang tak asing lagi bagi pengguna 'anak ayam' Wordpress. Alah, tak payah malu-malu. Masa aku baru guna Wordpress dulu pun aku memang rujuk dengan dia, banyak info yang aku dapat melalui dia. Layout dia memang hebat.

Blogspot : Demo / Muatturun
Wordpress : Demo / Muatturun

Stitches

Untuk penutup, aku berikan layout ini untuk mereka yang bercitarasa simple dan mementingkan kekemasan. Tak banyak kombinasi warna yang digunakan, semuanya ala-ala lembut je. Bagi pengguna Blogspot dengar-dengar ada widget yang tak support. Kalau kamu perlukan pertolongan kamu boleh hubungi aku melalui private message. Maksud aku Twitterlah!

Blogspot : Demo / Muatturun
Wordpress : Muatturun

Memasang Adsense Di Bawah Tajuk Entri

2009-07-15T21:35:00.003+08:00

Aku sekarang mula berjinak-jinak dengan Google Adsense, kononnyalah! Aku harap setiap iklan yang aku pasang kat sini kamu janganlah tengok sebelah mata je.

Google Adsense ni merupakan program kerjasama pengiklanan melalui internet yang diselenggarakan oleh Google. Melalui program pengiklanan AdSense ni, kamu yang telah mendaftar dan disetujui keanggotaannya layak memasang unit iklan yang bentuk dan materinya telah ditentukan oleh Google di halaman web mereka. Kamu juga akan mendapatkan pemasukan berupa pembagian keuntungan dari Google untuk setiap iklan yang diklik oleh pengunjung blog kamu, yang dikenal sebagai sistem pay per click (ppc) atau bayar per klik.

Tu aku copy dari Wikipedia, jadi sekarang mari kita pasang Google Adsense plak. Kalau kamu memang pengiklan tegar dari Nuffnang atau Adverlets tak perlulah bimbang sebab Google Adsense boleh digunakan sama dalam sesebuah blog.

Html Google Adsense

Aku anggap kamu dah daftar Google Adsense. Dan sekarang kamu perlu ada iklan Google Adsense bersaiz 300 x 250 piksel sebab tu adalah saiz yang paling berpontensi untuk diklik.

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

</div>

</b:if>

Letakkan kod Html Google adsense di bawah kod <data:post.body/>. Sila tukar no google ad client dan google ad pub untuk memastikan itu adalah no akaun kamu.

Pastikan kod Html Google Adsense tu kamu encode kat Centricle dulu (Aku dah highlight).

Mengawal Jumlah Label Count Pada Label

2009-07-14T01:50:00.004+08:00

Aku tak tahu berapa banyak label yang aku ada, mungkin beratus-ratus label aku ada rasanya setakat ini. Jika aku paparkan ia sebagai widget disidebar sudah tentu ia menggunakan ruang yang besar bukan? Aku bukanlah seorang yang suka membazirkan ruang blog, dan ini mungkin tidak seronok untuk dipandang oleh penggunjung blog kamu.

Bagi pengguna Wordpress mereka mungkin bertuah kerana sudah ada label dan tag pada blog mereka. Mereka boleh meletakkan seberapa banyak tag dan dalam masa yang sama mereka hanya perlu memaparkan beberapa label saja pada widget label mereka. Bagi pengguna Blogspot pula mereka tiada tag dan hanya bergantung pada label untuk menguatkan Seo mereka.

Kali ini aku ada tip untuk memaparkan hanya label yang memiliki jumlah yang banyak saja untuk dipaparkan. Jadi jika kamu banyak label yang berjumlah 1 maknanya kamu boleh sembunyikan kesemuanya. Jadi sudah tentu ia menjimatkan ruang blog kamu bukan?

Html Label Count

Pertama sekali kamu kena buang kod Html label count asal yang berada dalam templat kamu. Lain templat lain kod, jadi sila search dengan teliti.

Pastikan kamu tick pada Expand Widget Templates dulu.

<b:loop values='data:labels' var='label'>

</b:loop>

Kemudian gantikan dengan kod Html label count yang baru.

<b:loop values='data:labels' var='label'>
if (<data:label.count/> > 2) {
document.write("<li><a expr:href='data:label.url + "?max-results=5"'
rel='nofollow'><span><data:label.name/></span></a> (<data:label.count/>)</li>");
}
</b:loop>

</script>

Tak kisahlah kamu guna widget label dari Blogger, widget label cloud dari Phydeaux3 ataupun widget label cloud blogumus dari siapa entah tapi rasanya semua kod Html label countnya sama saja.

Kamu juga boleh tukarkan label 2 kepada angka yang lebih tinggi untuk meminimumkan jumlah label yang hendak dipaparkan pada widget.

Menstail Header #01

2009-07-12T01:42:00.014+08:00

Ramai juga yang berminat dengan header yang aku guna sekarang ni ya, aku dapat tahu pun kat entri khas untuk rekuas tutorial yang aku poskan itu hari. Dah lebih 100 komen aku terima dalam sedar tak sedar.

Tapi janji tau lepas buat tutorial ni kamu tukar warna headerbar dan navigation bar ni ya! Malulah aku nanti semua blogger pakat-pakat guna warna yang sama je.

Gurau jelah!

Html Header

Pertama sekali kamu kena buang kod header asal yang berada dalam templat kamu. Lain templat lain kod, jadi sila search dengan teliti.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>

</b:section>

</div>

Kemudian letakkan kod Html header yang baru di bawah kod Html <body>.

<p>

</a>

</p>

</div>

<div id='navigationbar'>

<p>

<a Title='Home' expr:href='data:blog.homepageUrl'>Home</a>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
<a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments</a>
<a href='http://dilarangmelarang.com'>DilarangMelarang</a>

</p>

</div>

Imej Header

Memandangkan aku gunakan imej menggantikan teks, maka kamu perlu gunakan perisian Adobe Photoshop, PhotoScape atau apa-apa perisian mengedit imej untuk mencipta imej sendiri. Pastikan height imej adalah 30 piksel ya!

Css Header

Memandangkan kamu dah buang kod Html header asal, maka kamu kena buang kod Css header asal juga. Lain templat lain kod, jadi sila search dengan teliti.

Kemudian gantikan dengan kod Css header yang baru.

#headerbar{

background:#215976;
color:#999;
font-size:12px;
height:46px;
width:auto;

}
#headerbar a:link,#headerbar a:visited{

color:#fff;
font-size:11px;
font-weight:700;
margin-right:14px;
text-decoration:none;

}
#headerbar a:hover{

color:#ccc;

}
#navigationbar{

background:#454545;
height:32px;
width:auto;

}
#navigationbar a:link,#navigationbar a:visited{

border-right:1px solid #ccc;
color:#fff;
display:block;float:left;
font-size:12px;
font-weight:700;
height:20px;
line-height:20px;
margin-top:6px;
padding:0 10px;

}
#navigationbar p,#headerbar p{

border:0;
width:990px;
margin:0 auto;
padding:0;

}

Kalau kamu menggunakan templat minima, kamu mungkin menjumpai kod Css header asal sebegini.

Selamat berjaya!

Memahami Dan Menstail Post Footer

2009-07-10T06:48:00.002+08:00

Post Footer merupakan sebahagian daripada bahagian entri tersebut. Secara amnya ia terletak pada bahagian bawah entri, nama pun footer kan? Bagi yang mahir mengedit Css dan Html kebiasaanya mereka akan merestail mengikut kehendak masing-masing.

Ada yang pasang kat atas entri, ada yang pasang kat atas dan bawah entri, dan ada pula yang tak pasang langsung.

Secara asasnya post footer dipecahkan kepada 3 post footer line, setiap post footer line pula mengandungi item-item tertentu seperti tarikh, nama penulis, jumlah komen, email dan sebahagiannya. Kamu juga boleh rujuk pada main page option kalau masih tak faham.

Html Post Footer

</div>

Setiap satu post footer line mengandungi item masing-masing. Kamu boleh memindahkannya pada mana-mana bahagian contohnya post line 1 untuk diletakkan pada bahagian atas entri.

</div>
<div class='post-footer-line post-footer-line-2'>

</div>
<div class='post-footer-line post-footer-line-3'>

</div>

Kebiasaannya aku akan pindahkan Html post footer line-1 pada bahagian bawah post header line 1.

Aku dah tunjukkan kod Html keseluruhan post footer kat web TinyPaste, bolehlah kamu rujuk jika templat kamu kekurangan item post footer. Hal ini mungkin terjadi jika kamu menggunakan templat yang dibuat atau belum diupdate sebelem tahun 2009.

Sebagai tambahan post footer juga boleh ditambah item seperti social bookmark button, subsribe message box ataupun related post. Terpulang!

Css Post Footer

.post-footer{

color:#000;
text-transform:uppercase;
letter-spacing:.1em;
font:normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
line-height:1.4em;
margin:.75em 0;

}

Kamu juga boleh menstailkan bahagian post footer mengikut citarasa masing-masing. Untuk nampak lebih bergaya aku cadangkan kamu turut menggunakan ikon dalam post footer kamu.

.post-author{

background:url(.../author.png) left no-repeat;
padding:2px 10px 2px 20px;

}
.post-labels{

background:url(.../labels.png) left no-repeat;
padding:2px 10px 2px 20px;

}
.post-comment-link{

background:url(.../comments.png) left no-repeat;
padding:2px 10px 2px 20px;

}
.post-timestamp{

background:url(.../timestamp.png) left no-repeat;
padding:2px 10px 2px 20px;

}

Ini adalah sebahagian Css post footer icon yang biasa aku gunakan. Kamu boleh rujuk setiap class yang ada pada post footer. Dalam contoh ini aku gunakan class author, comment link, labels dan timestamp bergantung pada contoh Html yang aku gunakan.

Ikon Post Footer

Jangan lupa upload ikon pada hosting masing-masing sebab aku tak bercadang nak perbaharui hosting aku pada tahun hadapan. Ada sesiapa nak sponser hosting untuk aku?

Aku syorkan kamu gunakan ikon dari Sweetie Icons, Mini Icons ataupun Tango Icons. Semuanya bersaiz 16 piksel.

Memasang Subscribe Message Box

2009-07-09T17:35:00.006+08:00

Pernah lihat Subscribe Message Box sebegini digunakan oleh mana-mana blogger?

Mesti kamu berkenan bukan? Aku dah lama nak buat tutorial ini mujurlah hari ini aku berpeluang nak buat tutorial. Ini pun aku buat dalam tergesa-gesa, sekejap lagi aku nak pergi ke Kuala Terengganu.

Apa-apa pun Subscribe Message Box memang cantik, ianya juga banyak digunakan oleh pengguna Wordpress. Subscribe Message Box mengandungi link subscribe dan dalam masa yang sama ia boleh meningkatkan jumlah subscriber kamu. Subscribe Message Box amat-amat sesuai bagi templat yang berkelebaran 500px atau ke atas.

Memasang Subscribe Message Box

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini.

]]></b:skin>

03. Tambahkan kod ini di atasnya.

.subscribe-message{

background:#dfffcf;
border:1px solid #85c765;
margin:10px 0 15px;
padding:5px;

}
.subscribe-message img{

border:none;

}

04. Cari kod ini.

05. Tambahkan kod ini di bawahnya.

<img align='left' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/feed-below.gif'/>
If you enjoy this post, make sure you <a href='http://feedburner.google.com/fb/a/mailverify?uri=dilarangmelarang' target='_blank'><strong>Register For Free</strong></a>! or get <a href='http://feeds.feedburner.com/dilarangmelarang' target='_blank'><strong>Feed Rss</strong></a>.

</div>

Kamu boleh gantikan teks dengan pelbagai ayat mengikut kemahuan kamu, selain itu jangan lupa ganti ikon Rss supaya Subscribe Message Box kamu dilihat lebih berbeza. Aku gunakan ikon Rss dari Zeusbox, jangan lupa upload sendiri kat hosting masing-masing.

06. Pilih Save.

Menstailkan Bahagian Post Comments

2009-07-07T03:12:00.007+08:00

Bahagian post comment adalah sebahagian dari layout yang perlu diberi penekanan kerana ia mampu menarik minat pembaca untuk meninggalkan komen. Kebiasaanya para pendisgner layout mengetepikan bahagian ini lebih-lebih lagi bagi pendisgner yang baru mengenal Css dan Html. Mungkin kerana bahagian post comment berada dalam single page dan bukannya main page.

Satu lagi, tutorial ini mungkin sukar sedikit oleh itu berhati-hati apabila mencari kod. Sebelum mengedit, back-uplah layout asal untuk mengelakkan berlaku sebarang insiden yang tidak dikehendaki. Sendiri fahamlah ya!

Aku gunakan templat Minima untuk memudahkan rujukan, harap kamu boleh sesuaikan dengan templat yang sedang kamu gunakan itu. Sila Back-up dulu templat yang sedang kamu gunakan sebab tutorial ini sedikit sukar jika kamu tak biasa mengedit.

Menstailkan Bahagian Post Comments

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini.

]]></b:skin>

03. Tambahkan kod ini di atasnya.

#comments-block{

margin:0;
padding:0;

}
#comments-block .comment-author{

background:#000 !important;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #191919;

}
#comments-block .comment-body{

margin: 0;
font-size: 12px;
border-left: 1px solid #191919;
border-right: 1px solid #191919;
margin-top: -5px; /*position*/
padding: 5px;

}
#comments-block .comment-footer{

margin:0;
font-size: 10px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #191919;
border-right: 1px solid #191919;
border-bottom: 1px solid #191919;
margin-top: -12px; /*position*/
padding: 5px;

}
#comments-block .deleted-comment{

font-style:italic;
color:gray;

}
#comments-block .comment-author a{

color:#fff !important;

}
#comments-block .comment-footer a, .comment-body a{

color:#39cb43 !important;

}

Untuk mengelakkan sebarang kecelaruan kod, sila buang kod css asal templat. Memandangkan aku guna templat Minima, aku tunjukkan kod css asal templat Minima.

04. Cari kod ini.

05. Kod kamu mungkin sama seperti kod di bawah. Jika berbeza sila gantikan dengan kod di bawah.

<b:loop values='data:post.comments' var='comment'>

</dt>
<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>

</dd>
<dd class='comment-footer'>

</dd>

</b:loop>

</dl>

05. Pilih Save.

Notakaki : Masih ingat pada pos aku tentang permasangan threaded comment? Ianya hanya sesuai untuk paparan fullpage dan bukannya pop-up atau embeded. Maaf kalau ia sedikit menyusahkan.

Memasang Social Bookmark Button #03

2009-07-04T02:24:00.013+08:00

Social Bookmark merupakan salah satu widget yang amat penting dalam sesuatu blog. Bukan saja ia untuk memudahkan pengunjung mengsubmit kat laman social malahan ia sedikit sebanyak membantu blog anda mendapat backlink yang lebih.

Terdapat pelbagai stail mengikut kretiviti blogger itu sendiri, kali ini aku akan berikan satu lagi Social Bookmark Button yang begitu menarik bagi pandangan aku. Aku harap kamu bukan lihat saja, kalau boleh kongsikan rajin-rajinlah mengsubmitnya tidak terhad kepada blog ini saja. Lagipun ianya bukanlah sebagai perhiasan, betul tak?

Jangan lupa tunggu Social Bookmark Button versi seterunya ya!

Memasang Social Bookmark Button #03

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya.

div.spacer{

clear:both;
height:10px;
display:block;

}

04. Cari kod ini.

05. Tambahkan kod ini di bawahnya.

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

<h3>Share this post</h3>
<div class='spacer' style='border-top: 1px solid rgb(222, 222, 222);'/>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>

<tbody>

<tr>

<tbody>

<tr>

<td height='24' width='24'><img border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/facebook_16.png' width='16'/></td>
<td height='24'><a class='social_links_facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;amp;amp;t=" + data:post.title' rel='nofollow' title='Share on Facebook.'><strong>Share on Facebook</strong></a></td>

</tr>

<tr>

<td height='24'><img border='0' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/tweeter_16x16.png'/></td>
<td height='24'><a class='social_links_twitter' expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Twit this.'><strong>Share on Twitter</strong></a></td>

</tr>

<tr>

<td height='24'><img border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/stumbleupon_16x16.png' width='16'/></td>
<td height='24'><a class='social_links_stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;amp;amp;title=" + data:post.title' rel='nofollow' title='Bookmark this post on StumbleUpon.'><strong>Share on StumbleUpon</strong></a></td>

</tr>

<tr>

<td height='24'><img border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/delicious_16x16.png' width='16'/></td>
<td height='24'><a class='social_links_delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;amp;amp;title=" + data:post.title' rel='nofollow' title='Bookmark this post on del.icio.us.'><strong>Share on Delicious </strong></a></td>

</tr>

<tr>

<td height='24'><img border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/reddit_16x16.png' width='16'/></td>
<td height='24'><a class='social_links_reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;amp;amp;title=" + data:post.title' rel='nofollow' title='Submit this post on reddit.com.'><strong>Share on Reddit</strong></a></td>

</tr>

</tbody>

</table>

</td>

<td valign='top' width='50%'>

<tbody>

<tr>

<td height='24' width='24'><img border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/digg_16x16.png' width='16'/></td>
<td height='24'><a class='social_links_digg' expr:href='"http://digg.com/submit?phase=2&amp;amp;amp;url=" + data:post.url + "&amp;amp;amp;title=" + data:post.title' rel='nofollow' title='Digg this post on digg.com.'><strong>Share on Digg </strong></a></td>

</tr>

<tr>

<td height='24'><img border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/designbump_16x16.png' width='16'/></td>
<td height='24'><a class='social_links_negaraku' expr:href='"http://negaraku.net/submit.php?url=" + data:post.url + "&amp;amp;amp;title=" + data:post.title' rel='nofollow' title='Bookmark this post on negaraku.net.'><strong>Share on NegaraKu</strong></a></td>

</tr>

<tr>

<td height='24'><img border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/technorati_16x16.png' width='16'/></td>
<td height='24'><a class='social_links_technorati' expr:href='"http://technorati.com/cosmos/search.html?url="+data:post.url' rel='nofollow' title='Search Technorati for links to this post.'><strong>Share on Technorati</strong></a></td>

</tr>

<tr>

<td height='24'><img alt='Feeds RSS' border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/rss_16x16.png' width='16'/></td>
<td height='24'><a href='http://feeds2.feedburner.com/dilarangmelarang'><strong>Subscribe to Feeds RSS</strong></a>
</td>

</tr>

<tr>

<td height='24'><img alt='Email' border='0' height='16' src='http://i381.photobucket.com/albums/oo254/dilarangmelarang/email_16x16-1.png' width='16'/></td>
<td height='24'><a href='mailto:marzuki_jalil@yahoo.com'><strong>Email to Marzuki Jalil</strong></a>
</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>
<div class='spacer' style='border-top: 1px solid rgb(222, 222, 222);'/>
<div style='clear: both; height: 30px;'/>

</b:if>

06. Pilih Save.

Pengiklanan

2009-06-29T03:07:00.011+08:00

Oke, ini cuma entri pemberitahuan yang aku sudah menyediakan ruang pengiklanan untuk mereka yang berminat untuk beriklan. Tak kisah la nak iklankan minyak wangi ke, minyak lintah ke, ubat urut ke, ubat tegang ke, gambir Sarawak ke atau gambir Terengganu ke..

Aku tak tahu macam mana nak terangkan apa kekuatan blog ini untuk membuatkan kamu tertarik kepada pengiklanan di sini.

Aku bermula menulis blog sejak awal tahun 2004 lagi, lebih kurang 6-7 tahun dah aku menulis blog. Walaupun aku kerap bertukar-tukar blog, pagerank 3 memang tak pernah tak dapat. Kalau sebut BlogMenjerit (domain lama) dan DilarangMelarang paling tidak pun 7/10 mengenali aku. Jadi jangan bimbanglah kalau kamu check yang blog ni baru berusia 2 tahun.

Jangan pandang rendah pada Blogspot, menggunakan domain Blogspot bukan menjadi penghalang untuk mendapat tempat enjin pencari Google mahupun Yahoo. Dan blog ini adalah mesra SEO.

Rujukan kamu sebelum beriklan*

Alexa Rank - 337,097

Google Pagerank - 4
Google Friend Connect - 634
Google Feedburner - 1059

Sitemeter Total Visit - 55127
Sitemeter Per Day - 305

Technorati Rank - 37061
Technorati Authority - 84
Technorati Reaction - 304

Twitter Follower - 3043
Twitter Following - 237

Backlinks Google - 309
Backlinks Yahoo! - 7,584
Backlinks Altavista - 4,740
Backlinks Alltheweb - 1,660

*akan diupdate dari masa ke semasa.

Semua kat atas ni adalah info tentang blog DilarangMelarang, kamu boleh nilai dari segala aspek. Jadi ianya merupakan pilihan yang berbaloi kerana aku menawarkan harga pengiklanan yang begitu murah sekali.

Jangan risau, aku adalah blogger yang konsisten dalam penulisan. Paling minimum aku akan update 2 kali sebulan dan paling maksimun aku akan update 2 kali sehari.

Pakej-pakej yang ditawarkan

Pakej A
Saiz iklan 125 x 125 piksel.
Bayaran Rm 10 sebulan.
Kedudukan iklan adalah dibahagian single page (main footer).

Pakej B
Saiz iklan 200 x 78 piksel.
Bayaran Rm 15 sebulan atau Rm 40 tiga bulan (jimat Rm 5).
Kedudukan iklan adalah dibahagian main page (top sidebar).

Pakej C
Saiz iklan 468 x 60 piksel.
Bayaran Rm 30 sebulan atau Rm 80 tiga bulan (jimat Rm 10).
Kedudukan iklan adalah dibahagian main page (top main).

Banner

Kamu boleh gunakan banner kamu sedia ada atau aku sendiri yang designkan untuk kamu. Setakat ini tiada sebarang bayaran akan dikenakan. Kebiasaanya aku menggunakan perisian Adobe Photoshop atau PhotoScape.

Kaedah pembayaran

Maybank - 163082136760
Bank Islam- 13044020790049

Tunggu apa lagi?

Percuma Layout Blogger : Aurora Borealis Blue

2009-06-27T01:00:00.005+08:00

Akhirnya siap juga templat ketiga aku. Aku rasa templat ni lebih baik dari templat-templat aku yang dulu. Betul tak?

Memandangkan aku dah dapat pagerank 4 maka aku berbesar hati untuk berkongsi templat ini walaupun ianya lebih kurang sama dengan templat yang aku pakai sekarang. Ingat, jangan sesekali buang alamat blog aku kat templat itu sebab aku dalam proses mengejar Alexa rak Knizam yang merupakan musuh terbaik aku. Haha.

Dan kalau ada sesiapa yang nak bertukar alamat blog dengan aku jangan segan silu ek? Kamu boleh klik navigation aku tu atau terus klik saja di sini untuk bertukar alamat blog. Ada berani?

Kelebihan layout ini

Navigation yang sangat cantik berserta search box.
Layout 3 kolum, sidebar di sebelah kanan.
Blockquote yang cantik.
Sistem komen yang cantik dengan border dan background.
Navbar disembunyikan.

Maklumat Lesen dan Hakcipta

Layout ini telah dilesenkan dibawah edaran Creative Commons Non-Commercial Attribution 3.0 lesen. Ini bermakna kamu boleh menggunakan layout ini mengikut kehendak kamu selagi ia tidak dikomersialkan.

Pendapat Kamu?

Lihat Demo | Muatturun Layout (Dalam bentuk Zip)

Memasang Label Cloud

2009-06-23T19:12:00.010+08:00

Sebenarnya tutorial pemasangan Label Cloud dah lama diwujudkan oleh Phydeaux3 cuma hari ini aku rasa nak pos balik sebab ianya sangat berguna untuk tutorial aku pada masa-masa akan datang.

Mungkin entri seterusnya aku akan tutorialkan bagaimana untuk memasang page khusus untuk Archieve dan Label Cloud. Aku dah pratikkan, kamu boleh rujuk di sini. Pada awalnya aku nak guna Flash Animated Label Cloud : Blogumus tapi memandangkan label aku terlalu banyak mungkin ia akan nampak menyerabutkan.

Oke, tutorial pemasangan Flash Animated Label Cloud : Blogumus pun aku akan buat pada entri seterusnya, maka bersabarlah!

Memasang Label Cloud

01. Pilih Template > Edit Html (tanpa tick pada Expand Widget Template).

02. Cari kod ini.

]]></b:skin>

03. Tambahkan kod ini di atasnya.

#labelCloud{

font-family:arial,sans-serif;
text-align:center;

}
#labelCloud .label-cloud li{

background-image:none !important;
border:0 !important;
display:inline;
margin:0;
padding:0 5px;
vertical-align:baseline !important;

}
#labelCloud ul{

list-style-type:none;
margin:0 auto;
padding:0;

}
#labelCloud a img{

border:0;
display:inline;
margin:0 0 0 3px;
padding:0;

}
#labelCloud a{

text-decoration:none;

}
#labelCloud a:hover{

text-decoration:underline;

}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {

color:#000;
font-size:9px;
padding-left:0.2em;

}
#labelCloud .label-cloud li:before{

content:"" !important;

}

04. Cari kod ini.

</head>

05. Tambahkan kod ini di atasnya.

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

</script>

Untuk tukar warna font sila guna RGB color.

06. Cari kod ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

07. Gantikan kod ini dengan kod di atas.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>

</b:widget>

08. Pilih Save.

Memasang BS Greet Box

2009-06-21T21:32:00.011+08:00

Dulu aku tengok plugin ni kebanyakkan pengguna Wordpress yang guna, namanya pun aku tak tahu. Tapi sekarang baru aku tahu nama plugin itu adalah WP Greet Box. Sekarang ni plak ianya sudah boleh digunakan untuk pengguna Blogspot, namanya pula semestinya BS Greet Box.

Aku nak terangkan secara terperinci pun susah tapi yang pasti BS Greet Box ini berfungsi sebagai pemberi ucapan yang berbeza bergantung dari mana pengunjung blog kamu datang.

Setakat ini hanya 4 web yang digunapakai yakni web Google, Yahoo, StumbleUpon dan Digg. Walaubagaimanapun kamu boleh rekues dari Kaushik untuk web tambahan. Aku cadangkan kamu tambah web De.licio.us, Diigo, Facebook, Flickr, Technorati.com, Negaraku, Twitter serta Youtube. Sebenarnya banyak lagi web social tapi aku takut memberatkan blog kamu nanti.

Terima kasih kepada Thaya Kareeson kerana mencipta plugin yang menarik ini.

Memasang Blogger Greet Box

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini :

03. Tambahkan kod ini di atasnya.

Tutorial ini sebaiknya digunakan bersama tutorial pemasangan Read More.

03. Pilih Save.

Wordpress tak ada ke?

Memang ada sebab ianya diinspirasikan dari Wordpress, kamu boleh install plugin WP Greet Box seperti biasa.

Memasang Navigation Bar #02

2009-06-17T23:22:00.017+08:00

Cuba check blog kamu ada Navigation Bar tak? Kalau tak ada Navigation Bar ternyata blog kamu memang menyedihkan.

Navigation bukan saja untuk buat lawa, tapi ianya turut digunakan untuk memaparkan link-link berguna. Kebiasaanya aku letak link web Twitter, Facebook, Myspace dan Redtube. Selain tu kamu boleh letak link page Site Map, About Me ataupun Contact Me jika ada.

Sebelum ni aku ada pos mengenai Navigation Bar dari layout iNove dari design blog Neoease, tapi kali ini kita pasang Navigation Bar dari layout Grid Focus dari design Derek Punsalan.

Apa yang berbeza, Navigation Bar ini ada dua bahagian dan kamu boleh pilih nak letakkan navigasi pada bahagian header atau pun bahagian footer. Letak dua-dua bahagian pun oke.

Untuk demo klik di sini.

Memasang Navigation Bar #02

01. Pilih Template > Edit Html.

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya :

ul.nav{

border-top:1px solid #ccc;
border-bottom:3px double #ccc;
background:none;
list-style:none;
margin-left: 0;
padding: 0;

}
.nav li{

border-right:1px solid #ddd;
display:block;
float:left;
width:100px;

}
.nav li a{

color:#999;
display:block;
font-size:11px;
outline:none;
padding:5px 0 8px 5px;
text-decoration:none;
text-transform:uppercase;
width:99px;

}
.nav li a span{

font-size:11px;color:#999;
text-transform:lowercase;

}
.nav li a:hover{

background:#efefef;
color:#ccc!important;
width:95px;

}
* html .nav li a:hover{

background:#fff;
width:99px;

}
.nav li.skip{

border-left:1px solid #ddd;
border-right:none;
display:block width:100px;
float:right;
padding-right:5px;

}
.nav li.skip a{

width:100px;

}
li.top{

border-left:1px solid #ddd;
border-right:none;
display:block width:100px;
float:right;
padding-right:5px;

}
li.top a{

width:100px;

}
.nav li.skip a:hover, li.top a:hover{

background: transparent;
color: #fff !important;

}
.fix:after{

clear:both;
content:".";
display:block;
height:0;
visibility:hidden;

}
.fix{

display:inline-block;

}
* html .fix{

height:1%;

}
.fix{

display:block;

}

04. Cari kod ini untuk Navigation Bar bahagian header.

05. Tambahkan kod ini di atasnya.

<li>

<a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a>

</li>
<li>

<a href='#' title='Link title'>Link1<br/><span>Short Desc</span></a>

</li>
<li>

<a href='#' title='Link title'>Link2<br/><span>Short Desc</span></a>

</li>
<li>

<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/>
<span>Syndicate</span></a>

</li>
<li class='skip'>

<a href='#main' title='Skip to content'>Main<br/>
<span>Skip to content</span></a>

</li>

</ul>

</div>

06. Cari kod ini untuk Navigation Bar bahagian footer.

07. Tambahkan kod ini di atasnya.

<li>

<a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a>

</li>
<li>

<a href='#' title='Link title'>Link<br/><span>Short Desc</span></a>

</li>
<li>

<a href='#' title='Link title'>Link<br/><span>Short Desc</span></a>

</li>
<li>

<a href='#' title='Link title'>Link<br/><span>Short Desc</span></a>

</li>
<li>

<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a>

</li>
<li class='top'>

<a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a>

</li>

</ul>

</div>

08. Pilih Save Template.

Memasang Recent Post With Thumbnail + Comment Count

2009-06-16T17:20:00.016+08:00

Sebelum ni aku dah pos mengenai Related Post berthumbnail, kali ini Recent Post plak berthumbnail. Hebat betul Kranthi memcipta widget sebegini.

Widget ini berthumbnail belah kiri, ianya nampak kemas dengan tajuk pos diboldkan dan jumlah komen di bahagian hujungnya. Selain itu ia juga dilengkapi Comment Count untuk memudahkan kamu memantau entri-entri kamu.

Dan yang terakhir pastikan setiap entri kamu mempunyai gambar, barulah tutorial ini baru berfungsi secun-cunnya.

Memasang Recent Post With Thumbnail + Comment Count

01. Pilih Layout > Page Element > Add a Gadget : Pilih HTML/JavaScript.

02. Tambahkan kod ini.

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://dilarangmelarang.blogspot.com/";

</script>
<script src="http://files.dilarangmelarang.com/javascripts/recentposts_thumbnail.js" type="text/javascript"></script>

Secara amnya, widget ini hanya untuk sidebar putih. Tukarkan nilai #ffffff pada bgTD kepada nilai lain bergantung kepada background sidebar kamu. Gunakan add-on Color Zilla untuk kemudahan kamu.

Dan satu lagi, sila upload sendiri javaskrip ke dalam hosting kamu sendiri.

03. Pilih Save.

Wordpress tak ada ke?

Memang ada sebab ianya diinspirasikan dari Wordpress, kamu boleh install plugin Recent Post With Thumbnail seperti biasa.

Terima kasih Eins sebab berkongsi plugin ini.

Memasang Stripe Ad

2009-06-02T00:38:00.035+08:00

MaxBlogPress mulanya mencipta plugin Stripe Ad untuk pengguna Wordpress tapi kini pengguna Blogspot juga boleh menggunakannya sama-sama.

Stripe Ad dicipta khusus untuk meletakkan iklan secara rotate. Untuk pengguna Blogspot pula kod ini hanya dibekalkan untuk iklan statik, tapi kamu boleh rotatenya dengan kod tambahan lain.

Bagi kemudahan pelawat anda, ianya menggunakan kod javaskrip untuk memudahkan pelawat kamu memangkahnya.

Memasang Stripe Ad

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini.

]]></b:skin>

03. Tambahkan kod ini di atasnya.

#stripe-ad{

background:#f5f8fa;
border-bottom:1px solid #4db4e8;
left:0;
margin:0 0 3px 0;
padding:4px 0;
top:0;
overflow:auto;
position:fixed;
width:100%;
z-index:100;

}
* html #stripe-ad{ /*IE6 hack*/

position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");

}
#stripe-ad .left{

color: #4db4e8;
width:80%;
float:left;
font-family:Arial;
font-size: 13px;
font-weight: bold;
font-style:normal;
text-align:center;

}
#stripe-ad .right{

float:right;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-weight:normal;
font-size:10px;
letter-spacing:0;
white-space:nowrap;

}
#stripe-ad .right a{

color: #4db4e8;
font-size:10px;
text-decoration:underline;

}
#stripe-ad .right a:hover{

color: #000;
font-size:10px;
text-decoration:none;

}
#left_bar a {

color:#4db4e8;
text-decoration: none;

}
#left_bar a:hover{

color:#ce1433;
text-decoration:underline;

}

04. Cari kod ini.

</head>

05. Tambahkan kod ini di atasnya.

//]]>
</script>

06. Cari kod ini.

<body>

07. Tambahkan kod ini di bawahnya.

<a href='http://dilarangmelarang.com/' target='_blank'>DilarangMelarang - Dapatkan tutorial Blogger dan Wordpress secara percuma sekarang!</a>

</span>

</div>

<a href='http://dilarangmelarang.com/' target='_blank'>Powered by DilarangMelarang</a> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://tinyurl.com/lmmkad' style='cursor:hand;cursor:pointer;'/>

</span>

</div>

08. Pilih Save.

Wordpress tak ada ke?

Memang ada sebab ianya diinspirasikan dari Wordpress, kamu boleh install plugin Stripe Ad seperti biasa.

Memasang Related Post : LinkWithin #01

2009-05-29T02:02:00.015+08:00

Tak tahulah kamu dah lama perasan widget ni, tapi sekali pandang ianya memang lain dari yang lain dari mana-mana related post. Mungkin ianya dipaparkan bersama foto thumbnail yang menampakkan lebih menarik pelawat untuk mengkliknya.

Ianya bukan saja untuk pengguna Blogspot, malahan pengguna Wordpress, Typepad dan lain-lain lagi boleh turut sama menggunakannya. Ianya sangat mudah dipasang dan tak perlu nak edit sebarang kod.

Bagi pengguna blog berbackground gelap seperti hitam, kamu tak perlu risau sebab ianya turut support layout sebegitu. Tutorial ini sesuai untuk mereka yang telah menggunakan tutorial Read More (tak kisah versi apa).

Memasang Related Post : LinkWithin

01. Masuk web LinkWithin dan isikan alamat email, alamat blog dan platfom blog.

02. Klik Get Widget.

03. Klik Install Widget > Add Widget.

04. Klik Edit Content dan salin semua kod.

Jangan sesekali save pada sidebar, nanti Related Post akan muncul sama pada main page.

05. Pilih Template > Edit Html (tick pada Expand Widget Template).

06. Cari kod ini.

<data:post.body/>

07. Tambahkan kod tadi di bawahnya.

08. Klik Save.

Memasang Social Bookmark Button #02 : Sexy Bookmark

2009-05-25T01:55:00.007+08:00

Dulu aku ada buat tutorial mengenai Social Bookmark versi 1 yang begitu klasik, kamu dah guna belum? Sekarang kita ada Social Bookmark yang begitu seksi pula, kali pertama aku tengok memang jatuh hati. Sebenarnya aku dah lama nak buat tutorial ni, tapi tak berkesempatan pula sebab terlalu sibuk ke hulu ke hilir pergi dating.

Bagi pengguna Blogspot untuk gunakannya ia sedikit meremehkan sebab kena restail semula kat bahagian Css jika lebar entri kamu kurang dari 400 piksel. Dan lagi satu, versi ini merupakan versi pertama Sexy Bookmark disebabkan Josh Jones, pencipta plugin ini telah banyak manambahbaikan dari semasa ke semasa. Jadi bagi pengguna Wordpress beruntunglah, cuma perlu upgrade saja pluginnya.

Memasang Social Bookmark Button

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini.

]]></b:skin>

03. Tambahkan kod ini diatasnya.

div.sexy-bookmarks {
height:54px;
background:url(http://i43.tinypic.com/2ueii3t.png) no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}
div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(http://img509.imageshack.us/img509/3131/sexysprite.png) no-repeat !important;
}
.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

04. Cari kod ini.

05. Tambahkan kod ini di bawahnya.

Tukarkan Feedburner ID dengan Feedburner kamu pada perkataan yang telah dihighlightkan.

06. Pilih Save.

Wordpress tak ada ke?

Memang ada sebab ianya diinspirasikan dari Wordpress, kamu boleh install plugin Sexy Bookmark seperti biasa.

Memasang Google Friend Connect Social Bar

2009-05-22T10:07:00.005+08:00

Googe Friend Connect merupakan pesaing tegar Facebook Connect walaupun ianya lebih social.

Nampaknya Google Friend Connect sudah stabil dengan kedudukannya sebagai widget social terutama sekali untuk pengguna Blogspot dan Wordpress. Dah berapa kali aku nak buat rebiu pasal Google Friend Connect tapi terpaksa diolah kembali.

Kalau tak tahu widget Google Friend Connect terutama sekali social gadget dan social bar sangat-sangat membantu meningkatkan pembaca blog kamu. Sebab itu blog aku memiliki 824 subscriber dari Google Feedburner yang banyak berkait rapat dengan 523 follower dari Google Friend Connect .

Apa yang aku perasan social bar lebih banyak digunakan oleh pengguna Wordpress manakala soial gadget lebih banyak digunakan oleh pengguna Blogspot. Ini mungkin kerana social bar sudah ada plugin untuk Wordpress manakala social gadget memang merupakan widget tetap Blogspot.

Memasang Google Friend Connect Social Bar

01. Masuk Google Friend Connect dan login.

02. Pada sidebar kiri ada senarai blog. Jika kamu ada lebih dari 1 blog sila pilih yang berkenaan kerana ia berbeza nombor id dan sitenya berbeza.

03. Ubah Option.

Pada bahagian social bar position, kamu boleh pilih untuk meletakkan pada kedudukan atas atau bawah. Pilih Top untuk kedudukan atas manakala bottom untuk bahagian bawah. Untick pada comment gadget jika kamu tak nak.

Pada bahagian comment apply to, kamu pilih saja Entire Site. Page dan Id hanya untuk comment gadget.

04. Create the Html > Generate code.

05. Layout > Edit Html.

06. Cari kod ini.

Untuk kedudukan social bar top, paste kod selepas kod ini.

<body>

Untuk kedudukan social bar bottom, paste kod sebelum kod ini.

</body>

08. Pilih Save.

Tak boleh nak restail ke Google Friend Connect?

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-8269805878697010573"></div>

<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['POSITION'] = 'top';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderSocialBar(
{ id: 'div-8269805878697010573',
site: '09800224907951893841',
'view-params':{"scope":"SITE","features":"video,comment","showWall":"true"}
},
skin);
</script>

Kod kuning boleh distailkan warnanya mengikut kehendak masing-masing. Kamu boleh juga menggunakan kod ini terus tapi harus digantikan dengan id dan site blog kamu. Sebaiknya copy kod dari web Google Friend Connect , kod ini hanya untuk tujuan permahaman saja.

Walaubagaimanapun hanya follower dari pengguna Blogspot saja yang boleh menikmati kemudahan ini kerana ia boleh dibaca melalui dashboard Blogspot, tetapi bagi follower dari pengguna Wordpress kamu perlu bersusah payah membuka Google Reader untuk membacanya.

Memasang & Merestail Flash Player

2009-05-20T15:53:00.021+08:00

Pilihlah lagu yang santai, bukannya rancak.

Kali ini jom kita pasang Flash Mp3 Player plak, hari itu Chokilala sudah buat tutorial mengenai Flash Mp3 Player tapi hari ini aku rasa nak buat balik. Bukan apa sebenarnya, aku sebenarnya ada sedikit tambahan terutama sekali buat blogger yang suka mengedit.

Sebenarnya aku memang tak suka Flash Mp3 Player ni, semua sudah sedia maklum yang ianya sedikit sebanyak memberatkan kadar loading blog kamu. Terpulang kepada kamu bagaimana hendak menggunakanya tapi apa yang aku ingin ajarkan di sini hanyalah cara memasang Flash Mp3 Player, ianya mungkin kepada kamu suatu hari nanti.

Bagi pengguna Wordpress kamu boleh dapatkan plugin ini dari 1 Pixel Out, tapi untuk pengguna Blogger ianya sedikit menyusahkan lebih-lebih lagi kamu tak ada hosting sendiri. Kamu mungkin tak boleh Flash Mp3 Player ini, ianya mungkin sebab kamu tak install lagi perisian Adobe Flash player.

Memasang Flash Player

01. Pilih Template > Edit Html (tick Expand Widget Templates).

02. Cari kod ini :

</head>

03. Tambahkan kod ini javaskrip di atasnya.

04. Pilih Save.

05. Pilih Posting > Create (Edit Html).

06. Tambahkan kod ini :

</object>

Lagu tu kat mana-mana boleh dapat, ianya mestilah berformat Mp3 atau Wav. Upload dan tukarkan Url Mp3 atau Wav yang telah dihighlightkan dengan warna biru.

Jika kamu nak letak lebih dari 1 Flash player dalam satu page sila buat penomboran bagi id=audioplayer1 dan playerID=1 kepada 2, 3, 4 dan seterusnya. Kalau tak tukar nanti salah satu Flash player kamu tak kan berfungsi.

07. Pilih Save.

Wordpress tak ada ke?

Memang ada sebab ianya diinspirasikan dari Wordpress, kamu boleh install plugin Flash player seperti biasa.

Merestail Flash player?

Jangan tak tahu Flash player ini boleh direstailkan mengikut kehendak masing-masing. Kalau blog kamu biru, eloklah birukan juga Flash player kamu. Jika kena dengan warnanya, blog kamu memang akan nampak cantik.

Apa yang kamu perlu buat tambahkan saja kod kuning ini pada kod sebelum ini yang telah kamu buat. Nak edit pada Flash player sebelum ini pun boleh.

Kamu boleh lihat gambar ini untuk memudahkan rujukan kamu. Sebaiknya gunakan add-on Color Zilla untuk memudahkan kerja-kerja merestail.

Dan yang terakhir, sila pilih no pada autostart. Nanti ada yang bising termasuk aku.

Memasang Feedback Button

2009-05-04T03:36:00.008+08:00

Apa-apa gambar pun boleh letak ya!

Pertama sekali aku ilhamkan Request Button ni dari Feedback Button milik GetSatisfication. Memandangkan ianya sekadar memberatkan, aku cuma menggunakan imej Feedbacknya saja dan segala javacriptnya telah aku abaikan.

Sekarang ni memang ramai web-web 2.0 menggunkan fungsi Feedback ini, tapi aku tak galakkan untuk blog khususnya blog peribadi. Kalau nak tukar perkataan Feedback itu dengan perkataan Request, About Me atau Try This memanglah digalakkan. Aku tak larang pun nak tulis apa, ikutlah kehendak kamu.

Memasang Feedback Button

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya :

#feedbackright img {

border:0px;
float:right;
position:fixed;
right:-10px;
top:160px;

}

#feedbackright img:hover {

right:-5px;

}

04. Cari kod ini :

05. Tambahkan kod ini di bawahnya :

</a>

</div>

06. Pilih Save.

Memasang Navigation Bar #01

2009-04-28T10:30:00.001+08:00

Navigation adalah sebahagian dari layout, sila pasang jika tiada.

Ramainya orang rekues navigation bar, jadi aku buat satu tutorial navigation bar yang betul-betul menarik untuk puaskan hati kamu. Aku ilhamkan navigation bar dari layout iNove dari design blog Neoease. Pendek kata ianya memang lain dari yang lain.

Navigation bar ini aku lengkapi dengan search box, jadi selepas ini tak adalah yang merungut lagi nak kan search box. Tapi kalau kamu nak letak banyak link kat navigation bar aku syorkan kamu buang search box. Navigation bar ini hanya sesuai untuk 3-4 link saja bergantung kepada outer wrapper kamu, jadi pandai-pandailah kamu edit blog kamu.

Kamu boleh tengok demo di sini.

Memasang Navigation Bar #01

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya :

#navigationbar01 {

background:#fff;
color:#555;
font-family:Verdana, "BitStream vera Sans", Helvetica, Sans-serif;
font-size:12px;
margin:1px 0;

}
#menus li {

display:inline;
list-style:none;

}
#menus li a {

background:transparent url(http://tinyurl.com/dhvp4h) no-repeat;
color:#382e1f;
display:block;
font-size:11px;
float:left;
height:31px;
line-height:31px;
padding:0 20px;
margin-left:-10px;
text-decoration:none;
z-index:1;

}
#menus li a:hover {

background-position:0 -31px;

}
#menus li.current_page_item a, #menus li.current-cat a {

background-position:0 -62px;

}
#menus li a.home {

background-position:0 -93px;
margin-left:-40px;
padding:0;
text-indent:-999em;
width:45px;

}
#menus li a.home:hover {

background-position:0 -124px;

}
#menus li.current_page_item a.home {

background-position:0 -155px;

}
#menus li a.lastmenu:hover {

background-position:0 0;

}
#searchbox {

float:right;
padding:4px 10px;
width:280px;

}
#searchbox .textfield {

float:right;
line-height:16px;
width:180px;

}
#searchbox .switcher {

background:url(http://tinyurl.com/ceouvs) no-repeat 0 0;
display:block;
float:right;
height:16px;
line-height:16px;
margin-top:3px;
padding:0 2px;
text-indent:-999em;
width:18px;

}
#menus li ul {

background:#f4f5f7;
border:1px solid #ccc;
border-top-color:#a6a6a6;
display:none;
padding:0 5px;

}
#menus li li {

display:block;
float:none;
list-style:none;
margin:0 !important ;
margin:0;
padding:0;

}
#menus li li a {

background-image:none;
border-style:solid;
border-color:#ddd;
border-width:1px 0 0;
display:block;
float:none;
font-size:12px;
height:20px;
line-height:20px;
margin:0;
padding:5px;
text-decoration:none;
width:150px;

}
#menus li li.first a {

border-top:none;

}
#menus li li a:hover {

font-weight:bolder;

}
.fixed, .clear {

clear:both;

}

04. Cari kod ini :

05. Tambahkan kod ini di atasnya :

</li>
<li class='page_item page-item-2'>

</li>
<li class='page_item page-item-3'>

<a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Subscribe to Content via RSS'>Comment RSS</a>

</li>

</ul>

<input class='textfield' name='s' size='24' type='text' value=''/>
<span class='switcher'>Switcher</span>

</div>

</form>

</div>

</div>

06. Pilih Save.

10 Layout Menarik Untuk Blogspot Juga Wordpress #02

2009-04-27T15:04:00.002+08:00

Masa untuk bertukar layout lagi.

Layout datang lagi, hehe. Sesiapa yang tak puas hati dengan layout versi lepas boleh muatturun lagi layout baru untuk bulan ni. Bulan depan aku tak janji, kalau ramai designer layout buat bolehlah aku buat entri layout lagi untuk versi ke-3.

Aku harap kamu pilih layout yang sesuai dengan blog dan citarasa kamu.

Magasin

Layout ni paling terbaru, nampak macam profesional. Asalnya dari Wordpress kemudian diconvert ke Blogspot. Kat header sudah dikhaskan satu tempat untuk ruang iklan. Nak letak iklan Nuffnang atau Adverlets pun boleh. Tapi sampai sekarang duit iklan tak dapat-dapat, haram.

Blogspot : FalconHive | Demo | Muatturun
Wordpress : PaddITSolutions | Demo | Muatturun

TypeBased

Dalam banyak-banyak layout aku gunakan inilah yang paling menepati citarasa aku, kamu lihat sendirilah blog ini. Buktinya dah berbulan-bulan aku masih gunakan layout ini dan setakat ni aku dah tak nak lagi tukar layout. Walaubagaimanapun layout ini cerewet sikit, kalau kamu betul-betul nak gunakan layout ni aku syorkan sangat-sangatlah.

Blogspot : BlogandWeb| Demo | Muatturun
Wordpress : WooThemes | Demo | Muatturun

Vistered

Ni layout yang lain dari yang lain, kalau tak percaya sendiri tengok. Kalau tak puas hati boleh cubanya pula. Ianya dilengkapi dengan suis tema, jadi kamu boleh guna kesebelah tema yang diberikan dalam blog kamu. Kamu cuma perlu main klik-klik saja. Background main dan sidebarnya pula dibuat seperti ada shadow, designernya memang bijak menggunakan teknik Photoshop ke dalam layout.

Blogspot : BloggerTemplates | Demo | Muatturun
Wordpress : WindyRoad | Muatturun

Firebug

Aku suka warna biru dan hijaunya yang lembut, sepadan dengan background hitam. Jika kamu perlukan sidebar 2 kolum inilah yang aku syorkan. Nak letak iklan 125 piksel pun senang sebab dah ada ruang untuknya. Selain itu social bookmark sudah dipasang siap kat footer, sesiapa yang malas tak perlu lagi nak godek. Layout ni tak berat, ringan saja dan kamu patut mencubanya.

Blogspot : ThemeLib | Demo | Muatturun
Wordpress : BlogOhBlog | Demo | Muatturun

Fervens

Sumpah tak tipu, ianya memang cun. Bukan calang-calang orang yang buat layout ni. Ianya terbahagi kepada 3, kamu boleh pilih nak guna yang mana satu. Tapi bagi aku layout pertama dan kedua lebih sesuai kerana ianya lebih ringan apa blog dibuka. Pandai-pandailah kamu edit balik biar sesuai dengan citarasa kamu. Walaupun layout ni dah lama tapi ianya tetap dalam senarai layout menarik bagi aku. Kamu pula macam mana?

Blogspot : BlogAndWeb | Demo | Muatturun
Wordpress : DesignDeseace | Demo | Muatturun

Birdie’s Sweet Blog

Gisele Jaquenod adalah satu-satunya blog yang menawarkan layout yang lebih feminim. Suhaila pun gunakan layout darinya. Kebanyakkan layout yang dibuat adalah bertemakan burung-burung. Dan aku rasa layout ini adalah yang paling manis, sesuai dengan nama yang diberikan. Sila hati-hati, layout ini mungkin dah lama dan ianya mungkin tak supportComment Form Embedded Below Post.

Blogspot : Gisele Jaquenod | Demo | Muatturun

UrbanArtist

Ini pun kalau sekali tengok macam cantik je, hehehe. Aku suka bahagian headernya yang besar beserta tulisannya sekali. Sidebarnya pun kemas, kalau nak guna aku cadangkan kamu pasang Read More untuk nampak lebih kemas. Nanti tak adalah orang cakap layout cantik tapi blog buruk, pandai-pandai kamu edit ya! Aku pun da buat tutorial Read More, gunakan fungsi kotak search untuk mencari.

Blogspot : BlogAndWeb | Demo | Muatturun
Wordpress : StyleShout | Demo | Muatturun

Hemingway

Ni layout nampak macam biasa je, tapi yang membuatkan ia menarik adalah entrinya dibaca secara melintang. BloggerBuster pun pernah ajar cara macam mana nak buat tapi bukan aku nak ceritakan hari ini. Ianya ala-ala layout Minima, kalau kamu sukakan gaya minimal kamu boleh gunakannya. Sidebarnya berada dibahagian footer, dibahagikan kepada 3 kolum. Tapi search boxnya macam ada masalah, boleh buang jika mahu.

Blogspot : BlogCrowds | Demo | Muatturun
Wordpress : Warpspire | Muatturun

Masinop

Aku suka layout sebegini, dibuat dengan cukup kemas sekali. Kamu tak perlu letak banyak-banyak widget, cukuplah 3-4 widget saja. Ianya cukup unik dengan backgroundnya yang berwarna-warni, kalau kamu nak mencuba bolehlah. Walaupun layout ni dah lama tapi kodnya telah diupdate dengan fungsi Blogspot terbaru. Setakat ni aku puas hati.

Blogspot : Falcon Hive | Demo | Muatturun
Wordpress : Paddsolutions| Demo | Muatturun

Dreamwork Redux

Susah nak dapat layout gelap yang betul-betul cantik bukan? Ini salah satu layout gelap yang aku jumpa, aku suka sebab kombinasi warna biru dan putih melembutkan pandangan mata yang melihatnya. Tumpuan betul-betul dicuri dengan headernya yang ala-ala bubble, cuma tunggu letak ayat yang sesuai saja. Footernya pun kamu jangan lupa tengok ya!

Blogspot : JackBook | Demo | Muatturun
Wordpress : Quickiepc | Demo | Muatturun

Apa Kata Kamu?

Aku harap kamu berpuas hati dengan sebahagian layout yang dipaparkan. Mungkin kamu ada pilihan lain, jika ya aku nak sangat kamu nyatakan mana-mana layout yang kamu suka untuk aku jadikan 10 layout yang menarik untuk Blogspot bagi versi-versi seterusnya.

Sila nyatakan apa nama layout itu dan dari mana aku boleh mendapatkannya, pilihan haruslah diutamakan kepada Blogspot.

Jangan lupa 10 layout menarik dari versi lepas ya!

Memasang Page View

2009-04-16T12:06:00.006+08:00

Refresh la banyak kali entri ni kalau nak tengok hasilnya.

Dulu Threaded Comment, sekarang Page View plak boleh pasang kat Blogger. Ingat Wordpress je ke boleh? Oh! Tidak. Page View ni sangat berguna untuk melihat sejauh mana entri kamu dapat memikat pembaca kamu, dan ianya juga sangat sesuai untuk blogger yang mempunyai Page Rank 3 ke atas.

Sebenarnya tutorial ni dah lama ada kat internet cuma tak ramai yang tahu mengenainya. Jadi aku kongsikan untuk kebaikan bersama, terima kasih kepada Amit Jain sebab berjaya mencipta skrip Page View untuk kegunaan Blogspot.

Sebagai tambahan Page View tidak berfungsi pada main page, ianya hanya akan berfungsi pada single page sama seperti Wordpress. Satu kelemahannya yang aku perasan, ianya hanya tidak ada widget pada sidebar seperti Wordpress yang digelar popular page. Tapi masih boleh diterima kan?

Memasang Page View

Blogspot

01. Pilih Template > Edit Html (tick Expand Widget Templates).

02. Cari kod ini :

<p>

<data:post.body/>

</p>

03. Tambahkan kod ini di bawahnya :

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

</div>

</b:if>

04. Pilih Save

Wordpress

Oke, ini dia untuk pengguna Wordpress. Pemasangan Page View pun mudah, kamu boleh download kat blog John ni dan masukkan ke dalam hosting kamu saja.

Empat Belas April Dua Ribu Sembilan

2009-04-14T20:36:00.011+08:00

Gambar ni paling bermakna buat aku, orang yang aku sayang sanggup menghantar bekal buat teman lelakinya yang sedang bekerja.

Gambar ni pun sama. Dia datang ke rumah mak aku sebab nak masakkan makanan tengahari buat aku masa aku bekerja. Dan aku sempat balik rehat untuk makan bersama.

Tak tahu bila aku berkapel dengan Suhaila tapi hari ni aku rasa aku nak tetapkan tanggal 14 April sebagai tarikh aku melamarnya sebagai teman wanita aku.

Dan hari ini dah 3 tahun (1095 hari) dah kami masih berkapel.

Selama kami berkapel, senyuman dan airmata sudah lali buat dia. Dan aku menyesal berkapel dengan dia kerana aku masih tak mampu tundukkan kemarahan aku terhadap dia. Cuba tanya berapa kali dia menangis kerana aku.

Untuk hari akan datang mulai besok doakan aku untuk lebih menyayangi dan mengasihi dia. Dan aku harap aku masih bernyawa untuk menyayangi dan mengasihi dia.

Tadi aku bergaduh lagi, puncanya kecil saja.

Dulu masa baru kenal setiap masa topup, siang malam tak tidur sebab nak mesej tanya khabar. Masa dating dulu tengah panas, tengah hujan, tengah subuh atau tengah malam pun boleh jumpa.

Sekarang?

Entah la. Mesej pun dah mesej, telefon pun dah telefon, dating pun dah dating tapi tak seperti dulu-dulu. Oh! Teruknya aku. Tapi aku sangat sayang dia, sampai bila-bila.

Insya'Allah aku akan cuba menjadi terbaik buat dia. Dia terlalu baik buat aku. Dan aku rasa dia adalah terbaik dari mana-mana wanita yang aku kenali.

Maaf. Maaf atas segalanya.

Selamat ulang tahun perkapelan yang ke-3, Suhaila binti Ramli dan Marzuki bin Jalil.