Blogmenjerit

Memasang Bubble Comment Count

2010-01-06T05:02:00.000-08:00

Ya! Aku kembali lagi menggila. Kejap kata tak nak buat tutorial, kejap kata nak buat tutorial. Isk, maaf sebab aku sangat sibuk. Apa2 pun tak rugi kamu bookmark blog aku, nanti kamu pun boleh jadi gila macam aku.

Yang kamu tengok kat screenshot kat atas tu namanya Bubble Comment Count. Banyak blog2 sekarang yang dah menggunakkannya kerana ianya nampak lebih profesional dan lebih mudah untuk penggunjung menkliknya.

Bubble Comment Count

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

02. Cari kod ini.

]]></b:skin>

03. Tambahkan kod ini di atasnya.

.bubble-comment-count{

background:transparent url(http://tinyurl.com/yd7yycn) no-repeat;
float:right;top:0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
height:31px;
width:34px;
text-align:center;
margin-left:10px;
padding:4px 0 0 3px;

}

04. Cari kod ini.

<b:if cond='data:post.link'>

05. Tambahkan kod ini di atasnya

<b:if cond='data:post.allowComments'>

</b:if>

</span>

05. Save dan lihat hasilnya.

Mengupdate Mesej Twitter & Plurk Melalui Handphone

2009-11-25T05:55:00.000-08:00

Aku tak tahu bila kali terakhir aku update blog tapi yang pasti aku akan update juga Twitter aku walaupun sesibuk mana pun. Aku ingat lagi masa pertama kali aku pandai gunakan handphone untuk hantar mesej Twitter, setiap saat aku update. Biasalah benda baru masa tu.

Rasanya kamu mungkin dah sedia maklum tentang bagaimana nak update mesej Twitter melalui handphone bukan? Walaubagaimana pun aku nak tutorialkan jugak sebab senang kawan-kawan blogger kita nak rujuk bukan? Terima kasih sebab sudi lagi menjengah blog ini selama aku terlalu sibuk di politeknik mendalami ilmu kejuruteraan. Chewah.

Eh! Eh! Jangan tak tahu, kat Plurk pun boleh hantar mesej juga melalui telefon, tapi aku rasa siapa guna Plurk memang tak cool.

1. Masuk http://gladlycast.com/.

2. Pilih sama ada nak daftarkan kat akaun Twitter atau pun Plurk. Kamu akan diarahkan untuk mengisi email bersama kata laluan kamu untuk pengesahan.

3. Terdapat 3 buah negara yang menyupport Twitter yakni Malaysia, Singapura dan Filipina dan setiap negara mempunyai nombor handphone masing-masing. Sebagai pengguna tempatan iaitu Malaysia, nombornya adalah +6012-7959876.

4. Sekarang kamu dikehendaki menghantar mesej ke +6012-7959876 untuk pengesahan nombor telefon kamu.

5. Selepas proses pendaftaran disahkan, sekarang kamu boleh save nombor handphone +6012-7959876 ke dalam phone book kamu dan kamu sudah boleh menghantar mesej ke nombor tadi dan secara automatik ianya akan sampai ke akaun Twitter.

Nota : Jika anda pengguna tegar Maxis, sila tambahkan nombor +6012-7959876 sebagai senarai activ5 kamu. Kamu juga boleh menambah lebih dari 1 nombor handphone untuk menghantar mesej Twitter & Plurk melalui handphone. Jika kamu ingin kemaskini nombor handphone silalah pergi ke bahagian Preferences untuk membuang nombor handphone kamu.

Percuma Layout Blogger : Cubismo

2009-07-21T22:19:00.000-07: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-20T11:25:00.000-07: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-15T06:35:00.000-07: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-13T10:50:00.000-07: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-11T10:42:00.000-07: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-09T15:48:00.000-07: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-09T02:35:00.000-07: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-06T12:12:00.000-07: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-03T11:24:00.000-07: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.

Percuma Layout Blogger : Aurora Borealis Blue

2009-06-26T10:00:00.000-07: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-23T04:12:00.000-07: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-21T06:32:00.000-07: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-17T08:22:00.000-07: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-16T02:20:00.000-07: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-01T09:38:00.000-07: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-28T11:02:00.000-07: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-24T10:55:00.000-07: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-21T19:07:00.000-07: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-20T00:53:00.000-07: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-03T12:36:00.000-07: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-27T19:30:00.000-07: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-27T00:04:00.000-07: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-15T21:06:00.000-07: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.

Memasang Social Bookmark Button #01

2009-04-13T01:53:00.000-07:00

Jangan lupa bookmark entri ini untuk kesenangan bersama, paling kurang pun twit je kat Twiiter.

Masih ramai dikalangan kita tak tahu apa itu social bookmark bukan? Sebenarnya social bookmark ni berguna untuk pengguna internet untuk menyimpan, menyusun, mencari dan mengawal bookmark di internet dengan bantuan metadata. Pada masa sekarang ramai pembangun web social bookmark menggunakan alamat feed untuk mengklafikasikan bookmark, termasuk yang telah disusun dengan tag.

Antara kebaikan yang diperoleh adalah trafik blog kita boleh meningkat secara mendadak bergantung kepada kualiti entri kamu. Walaubagaimana pun masih terdapat kelemahan bagi mereka yang mempunyai blog berbahasa bukan inggeris, percaya atau tidak peluang untuk blog berbahasa inggeris lebih cerah. Alternatifnya kita terpaksa bergantung kepada web Negaraku.net dan Digg.com.my sajalah kot!

Memasang Social Bookmark Button #01

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

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya.

.social-bookmark-v1 {

padding-top: 3px;

}
.social-bookmark-v1 .label {

font-weight: bold;

}
.social-bookmark-v1 ul.links {

margin:0;
padding:0;

}
.social-bookmark-v1 ul.links li {

background: none;
display:inline;
list-style-type:none;
padding: 0;

}
.social-bookmark-v1 ul.links li img {

border: none;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
padding: 3px;

}
.social-bookmark-v1 ul.links li img:hover {

filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;

}
.social-bookmark-v1 ul.links li a {

border: none;
text-decoration: none;

}

04. Cari kod ini :

05. Tambahkan kod ini di bawahnya.

<div class='label'>Bookmark and share: </div>
<ul class='links'>

</a>

</li>
<li class='social_links_digg'>

</a>

</li>
<li class='social_links_stumbleupon'>

</a>

</li>
<li class='social_links_delicious'>

</a>

</li>
<li class='social_links_reddit'>

</li>
<li class='social_links_newsvine'>

</a>

</li>
<li class='social_links_facebook'>

</a>

</li>
<li class='social_links_google'>

</a>

</li>
<li class='social_links_yahoo'>

</a>

</li>
<li class='social_links_technorati'>

</a>

</li>
<li class='social_links_twitter'>

</a>

</li>

</ul>

</div>

06. Pilih Save.

Untuk versi 1 aku berikan social bookmark yang klasik dulu, nantikan entri aku seterusnya untuk dapatkan social bookmark yang terbaru oke. Terdapat beratus-ratus web social bookmark seluruh negara, untuk tidak terlalu serabut aku pilih 10 web social bookmark pilihan ramai dulu untuk mengelakkan pembaziran ruang. Jika ada tambahan web social bookmark lain boleh nyatakan diruang komen.

9 Transformation Pack Untuk Windows XP

2009-04-11T12:30:00.000-07:00

Bagi aku, transformation pack hanya untuk mencantikkan paparan, jadi tak usah risau sebab ianya boleh diuninstall jika tidak mahu digunakan lagi.

Semua orang nak transformasi sekarang kan? Tak nak cakap pasal blog hari ini tapi nak cakap pasal komputer. Bagi mereka yang sudah bosan ataupun terbiasa menggunakan operating system dari Window XP bolehlah gatal-gatal tangan menukarnya sekarang. Aku tahu Window XP memang susah nak dipisahkan kerana Window XP adalah antara operating system pilihan utama kita semua tak kira di pejabat ataupun di rumah.

Tapi bila nak tukar dari Window XP atau ke Window Vista, ataupun juga mana-mana operating system bukanlah sesuatu pekara yang mudah, ianya juga melibatkan wang.

Untuk jimatkan wang dan masa, mereka yang bijak pandai telah mecipta satu software yang dinamakan transformation pack dimana hanya paparan desktop saja berubah tapi masih mengekalkan operating system yang lama yakni Windows XP. Sebenarnya transformation pack ni untuk Windows XP saja, jadi jangan nak mengada-ngada kalau kamu nak tukar yang operating system yang lainnya.

Memandangkan aku tak familiar sangat dengan operating system, jadi aku syorkan kamu download sendiri dan berikan maklum balas.

9 Transformation Pack Untuk Windows XP

Windows 7 Transformation Pack

Ada 4 pack kesemuanya. Ianya masih baru lagi bagi kita, aku harap kamu pun dah tahu mengenainya. Boleh cuba sama-sama jika berkenan sebab untuk transformation pack ini aku belum pernah cuba.

Download

Windows Vista Transformation Pack

Hangat diperkatakan semenjak tahun lepas, walaupun aku tak suka Windows Vista tapi paparanya sangat cantik bukan? Aku sendiri pun tak boleh nak nafikannya.

Screenshot | Download | 26.8 MB

Leopard Transformation Pack

Kemas, menarik dan menawan kalbu. Tak ada sebab kalau kamu tak suka transformation pack ini sebab segalanya dah lengkap.

Download | 13.9 MB

Mac OS Leopard Transformation Pack

Aku tak tahu apa yang menarik mengenai transformation pack ini, tengok wallpaper pun dah meleleh air liur. Tu tak termasuk software tambahannya lagi.

Download

Flykite OSX Transformation Pack

Paling menjadi pilihan buat penggila transformation pack. Sangat kemas, sangat simple dan sangat menawan. Aku sukakan backgroundnya kerana coraknya seakan aurora. Rugi tak download transformation pack ini tau!

Download

Ultimate Linux Transformation Pack

Transformation pack yang paling aku suka dan yang paling lama aku guna. Kamu hanya perlu tukarkan wallpaper yang lebih kemas untuk tidak kelihatan kebudak-budakan.

Download

Fedora Transformation Pack

Sama seperti Ultimite Linux, dua-dua tak banyak beza pun. Eh! Kalau berbeza pun tak ketara sangat.

Download | Screenshot | 11.1 MB

Ubuntu Transformation Pack

Walaupun nampak biasa sahaja tapi kamu mesti mencubanya sebab ianya terlalu mudah digunakan. Tidak terlalu serabut dengan paparan yang lebih mesra pengguna.

Download

Blackbox Transformation Pack

Kemas, minimalis dan tidak memberatkan. Kadang-kadang macam susah je nak menyesuaikan sebab taskbar tidak dipaparkan.

Download | 1.39 MB

Sebelum kamu menggunakan transformation pack ini sila baca segala panduan dan arahan kat web-web yang diberikan. Aku tak nak kamu tersalah buat sebab sebarang gantirugi tidak akan dilayan.

Jika kamu rasa kamu dapat menyesuaikan mana-mana transformation pack ini aku harap kamu boleh menukar terus operating system yang asli dikedai-kedai yang berhampiran. Bagi yang sudah terer aku rasa mereka tak guna transformation pack sebab berlambak operating system kat internet untuk didownload secara haram bukan?

Kamu rasa ada lagi ke transformation pack yang lain selain 9 Transformation Pack Untuk Windows XP diatas?

10 Layout Menarik Untuk Blogspot Juga Wordpress #01

2009-04-08T00:35:00.000-07:00

Masa untuk bertukar layout.

Kali ini aku perkenalkan satu kategori terbaru bagi mereka yang dahaga dan laparkan layout-layout yang cantik. Kamu mungkin sudah bosan dengar cerita merepek dari aku dan aku juga tak larat nak menulis tutorial yang kamu rekues berminggu-minggu lamanya. Eh! Macam rancangan dalam tv je?

Sepanjang aku menulis blog ini beratus-ratus kali juga aku menukar layout. Kamu pun boleh jadi saksi, kalau tak percaya boleh kerat jari. Memandangkan blog ini dah aku jadikan sebahagian dari nota blog aku, pendek kata aku tak nak sedikit pun tercicir. Jadi aku kongsikan layout-layout yang aku rasakan amat menarik khas untuk kamu semua.

Jika kamu berkenan, kamu boleh menggunakannya sebab ianya merupakan pilihan terbaik aku untuk versi pertama. Ianya tidak terikat pada pengguna Blogspot saja, Wordpress pun ada tapi jika ada lah.

10 Layout Menarik Untuk Blogspot Juga Wordpress

Grid Focus

Putih dan kelabu warnanya, juga berbentuk magazin. Tak tahu macam mana nak rebiu, tapi kalau kamu betul-betul kreatif kamu boleh ubah lagi kombinasi warnanya kepada yang lebih menarik. Ruang sidebar yang besar sangat sesuai untuk mereka yang sukakanya widget tapi awas, jangan melampau. Aku tengok ramai pengguna Wordpress menggunakan layout ini, pandai-pandailah kamu bawa diri.

Blogspot : Blogger Buster | Demo | Muatturun
Wordpress : 5 Thirty One | Demo | Muatturun

ImpreZZ

Pertama kali aku lihat layout ni kat Smashing Magazine, ianya direka oleh salah seorang dari perekanya. Tapi masa tu belum ada lagi untuk versi Blogspot lalu aku menggunakan layout Typebased. Ianya bukan saja cantik tapi sangat kemas, sangat sesuai bagi blogger profesional. Widget Twitternya adalah paling kuat tarikannya aku rasa, kamu rasa apa yang aku rasa?

Blogspot : Falcon Hive | Demo | Muatturun
Wordpress : Productive Dreams | Muatturun

Whiteness

Aku rasa inilah satu-satunya layout untuk Blogspot paling minimalis dalam banyak-banyak layout. Kalau kamu rasa sudah bosan dengan layout Minima atau Minima Dark bolehlah mencuba layout ini kerana ia tidak menggunakan sebarang gambar. Ianya mengandungi 2 versi iaitu untuk read more dan non-read more, kamu boleh pilih mana-mana yang sesuai.

Blogspot : Quite Random | Demo | Muatturun

Compositio

Ianya sesuai untuk pengguna yang faham apa itu Css dan Html sebab banyak yang perlu diset secara manual menggunakan layout ini. Kalau kamu rajin kamu boleh baca langkah pemasangannya. Kebiasaan untuk layout yang cantik seperti ini memang berat untuk digunakan pada Blogspot tapi tidak untuk Wordpress. Ianya mungkin berpunca dari hosting gambar percuma yang dikongsi dengan beratus-ratus blogger, aku syorkan kamu upload semula kalau kamu betul-betul nak gunakan layout ini dengan selesa.

Blogspot : Zonacerebral | Demo | Muatturun
Wordpress : Design Deseace | Demo | Muatturun

Green Dark

Lihat pada sudut entri, seperti ada lipatan bukan? Macam 3 dimensi je. Warna hijaunya pun menarik, sedap mata memandang. Secara kasarnya aku berpuas hati dengan layout ini cuma ada masalah sikit kat bullet dan numbering. Ianya lengkap dengan tambahan navigasi, sidebar berbeza dibelah kiri dan footernya sangat menonjol jika kamu pandai mengeditnya.

Blogspot : Templates Paranovo Blogger | Demo | Muatturun

Notepad Chaos

Percaya atau tidak layout ini paling popular bagi pengguna Blogspot, dan ianya menjadi pilihan utama kat web BTemplates. Semua orang tertarik pada rekabentuknya yang lain dari yang lain, lagipun masa tu rekabentuk artwork baru lagi kot. Kamu boleh lihat sendiri jika kamu mahu, bagi aku ianya memang cukup sempurna jika kamu menulis tentang blog peribadi. Kamu tak perlu bersusah payah mengedit balik layout ini kerana ianya sudah lengkap, cuma isi saja widget kamu ditepi.

Blogspot : Gosublogger | Demo | Muatturun
Wordpress : Smashing Magazine | Muatturun

Wordpress Admin

Sekali tengok macam biasa je, dua kali tengok pun macam biasa je. Tapi bagi aku ianya nampak kemas dan profesional. Kalau kena dengan gayanya ianya akan nampak lebih sempurna kamu pandai mengeditnya, terpulang pada kamu. Bullet dan numbering pun cantik, perasan tak?

Blogspot : Theme Lib | Demo | Muatturun
Wordpress : Blog 2 Life | Demo | Muatturun

Color Paper

Untuk Wordpress mungkin layout ini lebih sempurna kerana ianya lengkap dengan theme switcher color. Sayangnya untuk Blogspot takda itu semua. Tapi tak terlalu berkecil hati kerana itu semua hanyalah sekadar widget. Lihat pada gambar backgroundnya pun sudah menonjolkan seni yang kesat itu. Kotak tarikhnya juga direka untuk menjadikan layout ini sebagai pilihan untuk kamu gunakan.

Blogspot : Falcon Hive | Demo | Muatturun
Wordpress : Free Theme Layouts | Demo | Muatturun

Lemon Twist

Ni pun satu lagi layout yang cukup cantik, sangat sesuai untuk mereka yang ingin kelihatan lebih profesional. Bagi Wordpress memang tiada masalah cuma untuk Blogspot ada sedikit kekurangan, macam biasa semua gambar adalah dari hosting percuma. Kalau kamu memang berminat untuk menggunakan layout ini sila upload kembali kedalam hosting sendiri. Ruang layout ini cukup besar, lihat saja sidebar dan footernya. Apa-apa pun kamu memang akan berpuas hati dengan layout ini.

Blogspot : Jackbook | Demo | Muatturun
Wordpress : Farfromfearless | Muatturun

Grunge

Entrinya berada diatas manakala sidebarnya dibawah. Ianya merupakan layout 1 kolum yang cukup unik, bagi mereka yang tak suka letakkan apa-apa gambar kedalam entri mungkin boleh mencuba layout ini sekarang. Walaupun latarbelakangnya gelap, tapi warna pada entri menjadikannya seakan gaya grunge ala-ala layout Color Paper. Kalau sesiapa sukakan kekemasan aku cadangkan kamu tak terlepas pandang dengan layout Grunge ini.

Blogspot : Blog and Web | Demo | Muatturun
Wordpress : Styleshout | 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.

Selamat bertukar layout, hooray!

Memasang Threaded Comment

2009-03-23T09:10:00.000-07:00

Sekarang Blogspot dah boleh guna, rujuk blog aku kalau tak percaya.

Aku kagum dengan Shams Mahmood sebab berjaya menjadikan sistem threaded comment ini untuk blogspot. Terima kasih kepada Eins sebab sudi berkongsi tutorial ini dengan aku. Ianya tidak menggunakan sebarang aplikasi sumber ketiga seperti Debate Comments, Disqus dan banyak lagi. Apa yang menarik threaded comment ini menggunakan sistem komen sedia ada dari blogspot, kamu hanya perlu menambah sedikit javaskrip untuk mengaplikasikannya.

Bagi yang tidak pernah mendengar tentang apa itu threaded comment memang sedikit menyukarkan, ditambah lagi Blogspot sudah boleh mengaplikasikan sistem ini.

Walaubagaimanapun tutorial ini hanya sesuai untuk sistem komen secara full page, ianya mungkin ada sedikit masalah untuk sistem komen secara embbedded below post atau pop-up page. Kamu boleh mencubanya dan jika ada masalah sila kemukakan diruangan komen. Buat masa sekarang ianya masih dalam peringkat percubaan.

Memasang Threaded Comment

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

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya.

.comment-segment {

margin-top: 10px;
margin-right: 10px;

}
.comment-level-0 {

margin-left: 10px;

}
.comment-level-1 {

margin-left: 25px;

}
.comment-level-2 {

margin-left: 40px;

}
.comment-level-3 {

margin-left: 55px;

}
.comment-level-gt3 {

margin-left: 70px;

}
.blog-author-comment {

background-color: #e2eef2;
border: 1px solid #7296e2;
padding: 5px;

}
.blog-nonauthor-comment {

background-color: #f8f8f8;
border: 1px solid #dddddd;
padding: 5px;

}
.deleted-comment {

color: gray;
font-style: italic;

}
.delete-comment-icon {

background: url("http://www.blogblog.com/rounders3/icon_delete13.gif")
no-repeat;

}
.comment-time {

font-size: 80%;
margin: inherit;
padding-left: 10px;
padding-bottom: 10px;

}
.reply-guide {

background-color: #ffffff;
border: #076a93 1px dotted;
display: none;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0.75em;
padding-top: 5px;
margin-right: 10px;
margin-bottom: 10px;

}
.reply-guide-header {

color: #076a93;
padding-top: 10px;

}
.reply-guide-list {

list-style: none;
padding-left: 2px;
margin-left: 2px;

}
.reply-guide-example {

font-size: 85%;
margin-right: 5px;
margin-bottom: 10px;
float: right;
border: 1px dotted #076a93;
padding: 5px;

}

04. Cari kod ini.

</head>

05. Tambahkan kod ini di atasnya.

//<![CDATA[
/*
http://shamsmi.blogspot.com
http://dilarangmelarang.com (translated)
*/
function Author(C,A,B){this.id=C;this.name=A;this.url=B;this.toString=function(F){var E="\t";if(F){for(var D=0;D<F;D++){E+="\t"}}return"Author[\n"+E+"id="+this.id+", \n"+E+"name="+this.name+", \n"+E+"url="+this.url+"\n"+E+"]"}}function Comment(E,H,G,C,B,D,F,A){this.id=E;this.sequenceNumber=H;this.postedTime=G;this.body=F;this.deleted=A;this.deleteUrl=B;this.deleteText=D;this.parentId="";this.children=new Array();this.level=0;this.author=C;this.getChildCount=function(){return this.children.length};this.addChild=function(I){this.children[this.getChildCount()]=I.id;I.parentId=this.id;I.level=this.level+1};this.toString=function(K){var J="\t";if(K){for(var I=0;I<K;I++){J+="\t"}}return"Comment[\n"+J+"id="+this.id+", \n"+J+"sequence="+this.sequenceNumber+", \n"+J+"deleted="+this.deleted+", \n"+J+"parentId="+this.parentId+", \n"+J+"children=["+this.children+"], \n"+J+"level="+this.level+", \n"+J+"author="+this.author.toString(1)+", \n"+J+"posted time="+this.postedTime+", \n"+J+"body="+this.body+"\n"+J+"]"}}function trimBrsFromString(C){var F=trimString(C);var B=["<br>","<br >","<br/>","<br />","<BR>","<BR >","<BR/>","<BR />"];if(F){var E=true;while(E){E=false;for(var D in B){var A=B[D];if(F.indexOf(A)==0){F=F.substring(A.length);F=trimString(F);E=true}var H=F.length;var G=F.lastIndexOf(A);if(G>=0&&G==H-A.length){F=F.substring(0,G);F=trimString(F);E=true}}}}return F}function trimString(A){var E="";if(A){var D=false;for(var B=0;B<A.length;B++){var F=A.charAt(B);if(!D&&F!=" "&&F!="\n"&&F!="\t"){D=true}if(D){E+=F}}D=false;var C=-1;for(var B=E.length-1;!D&&B>0;B--){var F=E.charAt(B);if(!D&&F!=" "&&F!="\n"&&F!="\t"){D=true;C=B}}if(C>0){E=E.substring(0,C+1)}}return E}function addItem(A,B){A[B.id]=B}function getAllItems(C){var D=new Array();var B=0;for(var A in C){D[B]=C[A];B++}return D}function getItemsCount(C){var B=0;for(var A in C){B++}return B}var ALL_AUTHORS=new Object();var ALL_COMMENTS=new Object();function getNewAuthorId(){var C=1;for(var A in ALL_AUTHORS){if(ALL_AUTHORS[A]&&ALL_AUTHORS[A].id){var B=ALL_AUTHORS[A].id;if(B>=C){C=B+1}}}return C}function createAuthor(C,A,B){return new Author(C,A,B)}function addAuthor(A){addItem(ALL_AUTHORS,A)}function getAllAuthors(){return getAllItems(ALL_AUTHORS)}function getAuthorsCount(){return getItemsCount(ALL_AUTHORS)}function findAuthor(C,B){for(var A in ALL_AUTHORS){if(ALL_AUTHORS[A]){if(ALL_AUTHORS[A].name==C&&ALL_AUTHORS[A].url==B){return ALL_AUTHORS[A]}}}return null}function getNewCommentSequence(){var C=1;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]&&ALL_COMMENTS[A].sequenceNumber){var B=ALL_COMMENTS[A].sequenceNumber;if(B>=C){C=B+1}}}return C}function createComment(E,H,G,C,B,D,F,A){return new Comment(E,H,G,C,B,D,F,A)}function addComment(A){addItem(ALL_COMMENTS,A)}function getAllComments(){return getAllItems(ALL_COMMENTS)}function getRootComments(){var D=new Array();var C=0;for(var A in ALL_COMMENTS){var B=ALL_COMMENTS[A];if(B&&B.level==0){D[C]=B;C++}}return D}function getCommentsCount(){return getItemsCount(ALL_COMMENTS)}function findComment(B){for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].id==B){return ALL_COMMENTS[A]}}}return null}function findLastCommentByAuthorName(C){var B=null;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].author.name==C){B=ALL_COMMENTS[A]}}}return B}function findLastCommentByPartialAuthorName(C){var B=null;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].author.name.toLowerCase().indexOf(C.toLowerCase())==0){B=ALL_COMMENTS[A]}}}return B}function addCommentHierarchy(D,C){if(D){C[C.length]=D;var A=D.children;for(var B in A){addCommentHierarchy(findComment(A[B]),C)}}}function getCommmentsInSortedOrder(){var D=new Array();var A=getRootComments();for(var B in A){var C=A[B];addCommentHierarchy(C,D)}return D}function ParsedResult(A,B){this.parentComment=A;this.body=B;this.toString=function(){return"[parentComment="+this.parentComment+", body="+this.body+", ]"}}function findParentCommentFromDescriptor(A){var B=findComment(A);if(B==null){B=findLastCommentByAuthorName(A)}if(B==null){B=findLastCommentByPartialAuthorName(A)}return B}function parseCommentBody(B,F){B=trimString(B);var A=B.indexOf("@");if(A==0){var H=B.indexOf("\n",0);var G=B.indexOf("<",0);var D=H;if(G>0&&(G<D||D<0)){D=G}if(D>2){var O=B.substring(1,D);O=trimString(O);var K=findParentCommentFromDescriptor(O);if(K==null){var J=O.indexOf(" ");if(J>0){var N=trimString(O.substring(0,J));K=findParentCommentFromDescriptor(N);if(K!=null){D=J+1}}}if(K!=null){var P=null;var Q=D;var C=B.indexOf("@",Q+1);if(C>Q){var M=trimString(B.substring(C));P=parseCommentBody(M,C)}if(P&&P.length>0&&P[0].parentComment!=null){var L=trimString(B.substring(D,C));var I=new ParsedResult(K,L);var E=[I].concat(P);return E}else{var L=trimString(B.substring(D));var I=new ParsedResult(K,L);return[I]}return E}}}var I=new ParsedResult(null,B);return[I]}function buildComment(C,K,H,L,G,I,M,A){var F=findAuthor(C,K);if(!F){F=createAuthor(getNewAuthorId(),C,K);addAuthor(F)}var D=parseCommentBody(A,0);for(var J in D){var E="";E=D[J].body;E=trimBrsFromString(E);var B=createComment(H+"."+J,getNewCommentSequence(),L,F,I,M,E,G);addComment(B);if(D[J].parentComment!=null){D[J].parentComment.addChild(B)}}}function substituteConstant(A,D,C){var B=A;while(B.indexOf(D)>=0){B=B.replace(D,C)}return B}function substituteConstantIfValueExists(D,A,I,C,H){var J=D;var F=J.indexOf(A);var E=J.indexOf(I);while(F>0&&E>F){var B=J.substring(F,E+I.length);var G=null;if(H&&H.length>0){G=substituteConstant(B,C,H);G=G.substring(A.length,G.length-I.length)}else{G=""}J=J.replace(B,G);F=J.indexOf(A);E=J.indexOf(I)}return J}function isBlogAuthor(B){var A=false;if(window.BLOG_AUTHORS){for(var C in BLOG_AUTHORS){if(BLOG_AUTHORS[C]==B){A=true;break}}}else{if(window.BLOG_AUTHOR){A=(BLOG_AUTHOR==B)}}return A}function applyCommentTemplateToComment(F,E){var A=F;A=substituteConstant(A,"${COMMENT.ID}",E.id);A=substituteConstant(A,"${COMMENT.TIMESTAMP}",E.postedTime);A=substituteConstant(A,"${COMMENT.AUTHOR.NAME}",E.author.name);var C=(E.level>3)?"gt3":E.level;A=substituteConstant(A,"${COMMENT.LEVEL}",C);A=substituteConstantIfValueExists(A,"${COMMENT.AUTHOR.URL.EXISTS.START}","${COMMENT.AUTHOR.URL.EXISTS.END}","${COMMENT.AUTHOR.URL}",E.author.url);A=substituteConstant(A,"${COMMENT.AUTHOR.URL}",E.author.url);A=substituteConstant(A,"${COMMENT.DELETE.URL}",E.deleteUrl);A=substituteConstant(A,"${COMMENT.DELETE.TEXT}",E.deleteText);A=substituteConstant(A,"${COMMENT.BODY}",E.body);var D=isBlogAuthor(E.author.url)?"blog-author-comment":"blog-nonauthor-comment";A=substituteConstant(A,"${BLOG.AUTHOR}",D);A=substituteConstant(A,"${BLOG.POST.COMMENT.LINK}",BLOG_POST_COMMENT_LINK);var B=(E.deleted)?"deleted-comment":"";A=substituteConstant(A,"${COMMENT.DELETED.STYLE}",B);document.writeln(A)}function applyCommentTemplate(C){var D=getCommmentsInSortedOrder();for(var A in D){var B=D[A];applyCommentTemplateToComment(C,B)}}function setElementDisplay(B,C){var A=document.getElementById(B);if(A){A.style.display=C}}function setElementsDisplay(B,C){for(var A in B){setElementDisplay(B[A],C)}}function showElements(A){setElementsDisplay(A,"block")}function hideElements(A){setElementsDisplay(A,"none")}function showElement(A){setElementDisplay(A,"block")}function hideElement(A){setElementDisplay(A,"none")}function toggleElementDisplays(C,B,D){if(C.innerHTML=="[hide]"){for(var A in B){if(D[A]=="both"||D[A]=="hide"){hideElement(B[A])}}C.innerHTML="[show]"}else{for(var A in B){if(D[A]=="both"||D[A]=="show"){showElement(B[A])}}C.innerHTML="[hide]"}};// ]]>

</script>

07. Cari kod ini.

<b:includable id='comments' var='post'>

</b:includable>

Ini adalah sebahagian kod. Pastikan semua kod dicari hingga akhir.

08. Gantikan kod ini dengan kod di atas :

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>:
<b:else/><data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>

<b:if cond='data:post.numComments > 0'>

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>


<b:loop values='data:post.comments' var='comment'>
<div style="display: none;" expr:id='"comment-body-" + data:comment.id' >
<data:comment.body/>
</div>
</b:loop>

<script type="text/javascript">
// USE THIS if YOU Have multiple Authors adding them in a comma separated form after removing the '//' from the next line
// var BLOG_AUTHORS = ['http://www.blogger.com/profile/firstauthor', 'http://www.blogger.com/profile/secondauthor', 'http://www.blogger.com/profile/thirdauthor'];
// Use this if you have just one author like this blog :)
var BLOG_AUTHOR = 'http://www.blogger.com/profile/onlyauthor';
var BLOG_POST_COMMENT_LINK = '<data:post.addCommentUrl/>';

var eCommentDelete = false;
var eAuthorUrl = '';
<b:loop values='data:post.comments' var='comment'>
eCommentDelete = false;
eAuthorUrl = '';
<b:if cond='data:comment.authorUrl'>
eAuthorUrl = "<data:comment.authorUrl/>";
</b:if>
<b:if cond='data:comment.isDeleted'>
eCommentDelete = true;
</b:if>

buildComment("<data:comment.author/>", eAuthorUrl,
"<data:comment.id/>", "<data:comment.timestamp/>", eCommentDelete,
"<data:comment.deleteUrl/>", "<data:top.deleteCommentMsg/>",
document.getElementById('comment-body-<data:comment.id/>').innerHTML);
</b:loop>
// <![CDATA[
var eCommentTemplate = '' +
'<div class="comment-segment comment-level-${COMMENT.LEVEL} ${BLOG.AUTHOR} ${COMMENT.DELETED.STYLE}" >' + '\n' +
' <a name="comment-${COMMENT.ID}"></a>' + '\n' +
' <span style="float: right; margin-right: 5px; " >' + '\n' +
' <a href="#" ' + '\n' +
' onclick="toggleElementDisplays(this, ' +
'[\'comment-${COMMENT.ID}-body\', \'comment-${COMMENT.ID}-footer\', \'reply-guide-${COMMENT.ID}\'], ' +
'[\'both\', \'both\', \'hide\']); return false;" >[hide]</a>' + '\n' +
' </span>' + '\n' +
' <span class="comment-author" >' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'<a href="${COMMENT.AUTHOR.URL}" rel="nofollow">' +
'${COMMENT.AUTHOR.URL.EXISTS.END}' +
'${COMMENT.AUTHOR.NAME}' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'</a>' +
'${COMMENT.AUTHOR.URL.EXISTS.END}</span>' + '\n' +
' said... ' + '\n' +
' <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + '\n' +
' <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\n' +
' <div id="reply-guide-${COMMENT.ID}" class="reply-guide comment-level-0 " >' + '\n' +
' <span style="float: right;" ><a href="#" onclick="hideElement(\'reply-guide-${COMMENT.ID}\'); return false;" >[hide]</a></span>' + '\n' +
' <h4 class="reply-guide-header">How to Reply to this comment</h4>' + '\n' +
' <span>' + '\n' +
' To reply to this comment please ensure that <b>one</b> of the following lines: ' + '\n' +
' <span class="reply-guide-example" >' + '\n' +
' <b>Example:</b><br />' + '\n' +
' @${COMMENT.ID} <br />' + '\n' +
' My <b>first line</b> is one of the values <br />' + '\n' +
' shown on the left :) ' + '\n' +
' </span>' + '\n' +
' <ul class="reply-guide-list">' + '\n' +
'<li>@${COMMENT.ID}</li>' + '\n' +
'<li>@${COMMENT.AUTHOR.NAME}</li>' + '\n' +
' </ul>' + '\n' +
' is the <b>first line</b> of your comment. ' + '\n' +
' <br />' + '\n' +
' <a href="${BLOG.POST.COMMENT.LINK}"' + '\n' +
' >Click here to enter your reply</a>' + '\n' +
' </span>' + '\n' +
' </div>' + '\n' +
' <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +
' <span><a ' +
'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" >Reply</a></span> ' + '\n' +
' <span><a href="#comment-${COMMENT.ID}">Permalink</a></span> ' + '\n' +
' <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" ><span class="delete-comment-icon"> </span></a></span>' + '\n' +
' </div>' + '\n' +
'</div>' + '\n';

applyCommentTemplate(eCommentTemplate);
// ]]>
</script>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>

</b:includable>

Tukarkan onlyauthor dengan id profile kamu jika kamu mempunyai 1 author. Tapi jika kamu lebih dari seorang author kamu boleh gantikan firstauthor, secondauthor dan thirdauthor dengan id profile masing-masing. Ianya untuk membezakan komen anda dengan komen penkomen lain.

09. Pilih Save. Lihat contohnya di sini.

Memasang Dropcaps

2009-03-22T19:11:00.000-07:00

Dropcaps pernah aku gunakan dulu, ia memang cantik jika kamu benar-benar kreatif.

Ini adalah sebahagian tutorial yang pernah aku buat pada blog aku yang sebelum ini. Insya'Allah kesemua tutorial lain akan siap dipindahkan ke sini selepas aku memperbaiki cara tulisan aku.

Sebenarnya Dropcaps adalah huruf yang dibesarkan pada awalan perkataan. Nama dropcaps diambil setelah ia diperkenalkan dalam Microsoft Word. Dan ia banyak digunakan dalam surat khabar satu ketika dahulu. Buat masa sekarang ia telah digunakan dalam beberapa majalah dan terus menular ke dalam blog.

Tapi itupun kalau kamu rajin nak buat.

Memasang Dropcaps

01. Pilih Template > Edit Html.

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini diatasnya :

.dropcaps {

color:#445566;
float:left;
font-family: Times, serif, Georgia;
font-size:100px;
line-height:70px;
padding-top:2px;

}

04. Pilih Save.

05. Pilih Setting > Formatting > Post Template.

06. Tambahkan kod ini :

<span class="dropcaps">P</span>enulisan bermula disini

Kod ini akan tertera setiap kali kamu membuat Dropcaps, masukkan saja bahagian huruf yang kamu ingin besarkan kedalam kod tersebut.

07. Pilih Save.

Memasang Retweet Button : Tweetmeme

2009-03-11T15:16:00.000-07:00

Jangan lupa retweet setiap entri diblog aku ek!

Tweetmeme tak ada kena mengena dengan Memey mahupun Norman Hakim, apatah lagi Abby Abadi.

Tweetmeme adalah sejenis butang retweet yang sangat sesuai digunakan pada web mahupun blog untuk meningkat jumlah pembacanya.

Aku perkenalkan butang yang sangat menarik ini, menggunakan sedikit javaskrip agar dapat memudahkan kamu mengetahui jumlah retweet dari masa ke semasa. Selain itu link yang telah diretweet akan terpapar di web Tweetmeme pada setiap 5 minit. Bagi pecinta Twitter pasti mereka menunggu kehadiran fungsi ini.

Sangat menarik bukan?

Memasang Retweet Button : Tweetmeme

01. Pilih Template > Edit Html.

02. Cari kod ini :

<p>

<data:post.body/>

</p>

03. Tambahkan kod ini dibawahnya :

Versi normal

Versi compact (alternatif)

tweetmeme_style = 'compact';

</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"/>

03. Pilih Save.

Wordpress tak ada ke?

Sebenarnya tak ada beza antara Blogspot dan Wordpress, lagipun kod ini tak gunakan kod Php. Tapi kalau kamu nak plugin kamu boleh ambil di web Tweetmeme.

Notakaki

Aku tahu kamu dah follow aku (@marzukijalil), sekarang follow awek aku (@suhaila1109) plak!

Apalagi, jom kita hebahkan tutorial di entri ini dengan menekan butang retweet dibawah. Dan rajin-rajinkanlah meretweet entri-entri lain jika kamu rasakan bermanfaat.

Mudah saja permintaan aku bukan?

Memasang Code Box

2009-03-10T13:18:00.000-07:00

Kod akan lebih menarik jika diletakkan dalam code box.

Dulu aku ada ajar tentang bagaimana nak membuat alert message box, hari ini aku akan ajar tentang bagaimana nak memasang code box pula. Code Box kebiasaannya sesuai hanya untuk mereka yang ingin menampilkan kod diblog mereka, ianya amat berguna untuk mereka yang menulis tentang tentang Css, Html, Php dan sebagainya.

Hanya blog yang menulis tentang kod saja dikhususkan.

Bagi mereka yang berjinak-jinak nak tulis tentang blog Css, Html, Php dan sebagainya bolehlah menggunakan kod ini. Tapi ingat tolong jangan ambil bulat-bulat tutorial yang ada dari blog ini. Yang itu olah sendiri ikut kretiviti kamu.

Dan aku tahu semenjak dua menjak ni orang lebih banyak guna Syntax Highlighter, tapi aku rasa kurang berkenan sebab ia mungkin memberatkan blog kamu kerana terlalu banyak javaskrip digunakan. Kalau Wordpress aku tak kisah sangat tapi kalu Blogspot ia mungkin nampak pelik.

Memasang Code Box

01. Pilih Template > Edit Html.

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya (pilih salah satu) :

Posisi Kiri

pre {

background:transparent url(http://tinyurl.com/d8q3fh) no-repeat scroll 0 0;
padding-left:12px;
margin:10px 0;

}
pre code {

background-color:#F9F9F9;
border:1px solid silver;
color:#333;
display:block;
min-height:63px;
word-wrap:break-word;
overflow:auto;
padding:5px;
text-align:left;
white-space:pre;

}

Posisi Atas (alternatif)

pre {

background:transparent url(http://tinyurl.com/crfps7) no-repeat scroll 0 0;
padding-top:12px;
margin:10px 0;

}
pre code {

background-color:#F9F9F9;
border:1px solid silver;
color:#333;
display:block;
min-height:63px;
word-wrap:break-word;
overflow:auto;
padding:5px;
text-align:left;
white-space:pre;

}

04. Pilih Save.

05. Pilih Setting > Formatting > Post Template.

06. Tambahkan kod ini :

<pre>

<code>

Kod-kod yang ingin dimasukkan ke dalam Code Box.

</code>

</pre>

Kod ini akan tertera setiap kali kamu membuka New Post.

07. Pilih Save.

Oh ya, sebelum nak letak kod dalam code box sila encode dulu di web Centricle, kalau tidak sampai esok pun tak akan jadi.

Menghilangkan Logo Advertlets Dan Nuffnang Pada Iklan

2009-03-04T03:51:00.000-08:00

Menghilangkan Logo Advertlets Dan Nuffnang Pada Iklan

Aku tak tahu tutorial ini menyalahi terma atau peraturan Advertlets atau Nuffnang, tapi tutorial ini akan membuatkan iklan kamu lebih kemas. Sama ada duit iklan kamu bertambah atau berkurang aku rasa ia bergantung kepada kualiti blog kamu.

Sebenarnya logo pada footer ini bertujuan untuk memudahkan pengiklan untuk memasang iklan mereka diblog kamu, itupun jika mereka berkenan. Kalau kamu mempunyai blog yang betul-betul ramai pelawat, baik jangan buatlah.

Kalau kamu tanya aku, menghilangkan logo Advertlets dan Nuffnang ni memang lebih nampak profesional. Tapi aku tak buat kerja-kerja ni, aku kan jujur. Kalau berani dan yakin, bolehlah ikut tutorial ni. Hikhik.

Menghilangkan Logo Advertlets Dan Nuffnang Pada Iklan

01. Pilih Template > Edit Html.

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya :

.ads img{display:none;}

04. Pilih Save.

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

06. Tambahkan kod ini :

Kod Advertlets atau Nuffnang disini.

</div>

07. Pilih Save.

Tutorial ini diilhamkan oleh Flisterz, harap maklum. Aku tidak akan bertanggungjawab jika ada sebarang masalah dengan pemilik Advertlets dan Nuffnang.

Percuma Layout Blogger : Minima 3 Column

2009-03-01T12:47:00.000-08:00

Ini hanya default layout oke! Aku buat semua ni untuk memudahkan kamu mendesignkan sendiri layout mengikut citarasa kamu menggunakan format layout yang aku buat. Kesemua format-format ini banyak digunakan oleh pereka-pereka layout dalam mendesign layout mereka secara lebih baik.

Semua layout ini sesetengahnya masih belum ada orang buat, jadi aku rajinkan diri aku untuk membuatnya lebih-lebih lagi yang ada widebar. Sebelum ini aku hanya jumpa cara untuk membuatnya, alternatifnya kamu boleh ambil terus tanpa buat satu persatu tutorialnya. Kalau tak puas hati, kamu boleh edit sesuka hati kamu.

Ianya memang lengkap dari 3 kolum, kemudian 3 kolum kiri, 3 kolum kanan, akhirnya 3 kolum berserta widebar kiri dan kanan. Warna hitam, biru dan kuning juga boleh dipilih selain warna putih, mudah bukan?

Jika layout ini mendapat sambutan, mungkin default layout yang lain seperti Denim, Tic Tac dan lain-lain lagi sebagai layout 3 column. Itupun kalau aku rajin, jika kamu berminat kamu boleh donate ke akaun Maybank aku sebagai tanda keikhlasan.

Maaf tak ada demo, nak buat layout ni pun bukan main remeh.

Percuma Layout Blogger : My Yellow Face

2009-02-15T00:06:00.000-08:00

My Yellow Face

Satu lagi layout dari aku yakni layout My Yellow Face, sebenarnya tajuk ni aku pakat bedal je. Ianya lebih kemas dan terang dari layout aku sebelum ini. Nak kat lawa tu tak adalah tapi aku memang berpuas hati sebab banyak bug yang telah aku perbaiki lebih-lebih lagi dibahagian navigation.

Aku berikan kamu percuma saja tapi janganlah buang kredit tu. Kasihan aku berpeluh ketiak aku nak buat.

Kelebihan layout ini :-

Dua navigasi ditambah pada header.
Layout 2 kolum, sidebar di sebelah kiri.
Tulisan dan warna berfungsi dalam Dashboard kamu.
Blockquote yang cantik.
Sistem komen yang cantik dengan border dan background.
Navbar disembunyikan.

Maklumat Lesen dan Hakcipta

Semua kod di dalam layout dimodifikasi sendiri oleh aku berdasarkan layout asal Minima Black.

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 Alert Message Box

2009-02-13T01:05:00.000-08:00

Kali ini kita buat Alert Message pula. Caranya mudah saja dan amat sesuai digunakan untuk bubuh nota kaki, petua, pesanan, atau apa saja yang kamu mahu. Terpulang, lagipun Alert Message bukan saja nampak kemas tapi pelawat blog kamu pun boleh perasan apa yang kamu luahkan dengan lebih cepat.

Kalau tak silap ini rekues kepunyaan Sweet HoneY (#45), lagipun aku tak faham ayat dia. Kepada yang lain, aku minta tulis secara lengkap dan lebih profesional, aku pun tak adalah nak pening-pening kepala.

Tutorial ini diilhamkan oleh Bruce McKenzie, jika kamu nak tukar gambar alert itu kamu boleh upload sendiri di web Famfamfam.

Memasang Alert Message

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

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya** :

.alert-red {

background: #fff6bf url(http://tinyurl.com/aowr5a) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;

}

.alert-blue {

background: #f8fafc url(http://tinyurl.com/chq5lr) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #b5d4fe;
border-bottom: 2px solid #b5d4fe;

}

04. Pilih Save.

05. Pilih Setting > Formatting > Post Template.

06. Tambahkan kod ini :

<p class="alert-red">Kata-kata yang ingin dimasukkan ke dalam Alert Message.</p>

<p class="alert-blue">Kata-kata yang ingin dimasukkan ke dalam Alert Message.</p>

Kod ini akan tertera setiap kali kamu membuka New Post.

07. Pilih Save.

7 Web Untuk Optimalkan Penggunaan Twitter

2009-02-08T15:15:00.000-08:00

Jangan lupa follow aku, aku ada dimana-mana.

Aku tak tahu dah berapa orang dah bercakap mengenai Twitter, aku pun pengguna Twitter dan aku juga rasa teruja untuk merebiunya. Aku bukan nak rebiu web Twitter hari ini, semua orang pun dah tahu rasanya. Cuma aku rasa aku patut kongsikan beberapa web-web lain yang menggunakan Twitter sebagai perkhidmatannya.

Dibawah ini sebahagian web-web yang bagus untuk mereka yang aktif bertwitter. Mungkin ada banyak lagi, kalau ada masa aku rebiu lagi.

7 Web Untuk Optimalkan Penggunaan Twitter

TwitterFeed
Twitterfeed adalah web yang paling bermanfaat dan paling dekat dengan Twitter rasanya. Pernah tak kamu tengok akaun Twitter kawan kamu yang tertulis "Jom masuk blog aku, aku dah update.", "Blog aku dah update, sila komen" dan macam-macam lagilah mesej yang menyeru kenalannya masuk ke blog mereka. Kadang-kadang aku rasa semua itu buang masa.

Tak tahu lagi ke?

Dengan Twitterfeed, kamu tak perlu lagi buang masa. Web ini akan mengupdate secara automatik Twitter kamu jika kamu mengupdate blog kamu.

TweetSnap
TweetSnap membolehkan kamu snap mesej update dari mana-mana akaun. Kamu boleh gunakan add-ons Screen-grab tapi dengan TweetSnap, gambarnya lebih menarik dengan warna biru dan berlatar gambar burung.

Ianya akan berubah setiap kali kamu update mesej Twitter kamu, juga sangat sesuai bagi mereka yang aktif di web portal.

TwitterFriends
TwitterFriends lebih kepada memberi info kepada blog anda, sekurang-kurangnya kamu boleh tahu siapa yang paling kerap hantar mesej kat kenalan dan berapa kerap kamu hantar mesej kat kenalan kamu.

Lain-lain kamu boleh tengok graf akaun Twitter kamu macam mana dan kamu boleh banding dengan mana-mana akaun Twitter kawan kamu.

Twitter Search
Twitter Seach membolehkan kamu mencari keyword-keyword yang kamu mahu. Walaupun tak ada apa yang menarik untuk dicari tapi sekurang-kurangnya kamu boleh cuba mencari itupun kalau masing-masing menggunakan Twitter secara lebih profesional.

Ianya lebih bermanfaat jika kamu menghantar mesej dengan tajuk yang sesuai, tapi jangan lucah sudah. lain-lain kamu boleh mengetahui trend keyword-keyword yang popular, apakata sekarang kita jadikan keyword melayu, marzuki dan dilarang melarang sebagai trend keyword popular? Itupun jika kamu sanggup.

BubbleTweet
BubbleTweet ni membolehkan kamu memasang video pada akaun Twitter kamu. Ya, kamu boleh letakkan video pada akaun Twitter kamu, bukan pada mesej tapi pada muka depan akaun Twitter kamu.

Aku dah cuba, boleh tengok sini. sini atau sini. Mana-mana pun sama je. Kualiti video tidak memuaskan, harap maklum.

Tweenky
Tweenky masih diperingkat Beta dan menggunakan konsep Gmail sebagai muka depannya. Jika kamu dah baca kesemua mesej, kamu boleh tandakan sebagai All Read. Eh! Sumpah macam Gmail. Manakala jika ada mesej baru masuk, mesej akan berwarna oren.

Ianya juga mengandungi Twitter Search.

Qwitter
Qwitter membolehkan kamu mengetahui siapa kenalan kamu yang berhenti follow akaun Twitter kamu melalui email. Apa yang kamu perlu buat cuma isikan username kamu dan alamat email kamu.

Pesanan aku janganlah update dengan mesej-mesej yang membosankan. Asyik-asyik mesej "aku penat", "aku bosan" dan "aku lapar" je aku jumpa. Kenapalah hidup kamu sangat membosankan? Kalau bosan sangat berhentilah menulis, buang masa je.

Kamu dah follow aku belum? Insya'Allah aku akan follow kamu balik nanti. Dulu aku ada buat pelekat untuk pengguna Twitter, ingat lagi tak?

Memasang Banner Copy Paste

2009-02-06T01:41:00.000-08:00

Jangan lupa letak banner aku dalam blog kamu.

Aku perasan Banner Copy Paste ni dah lama orang guna pakai untuk mempromosikan blog mereka. Secara tak langsung banner yang cantik memudahkan pelawat dari blog lain melawat juga blog mereka. Tapi apa yang hodohnya banner yang mereka gunakan terlalu banyak saiz, sampaikan ada yang besar gedabak dan mencacatkan blog kawan mereka.

Aku pesan kalau nak buat banner sila pilih 2 saiz saja, sama ada kamu guna saiz 88 x 31 piksel (mengikut saiz web portal) dan 175 x 80 piksel (mengikut saiz pelekat). Saiz yang seragam memudahkan orang lain menerima banner kamu, itu saja.

Dalam banyak-banyak tutorial Banner Copy Paste aku rasa ini yang paling baik. Lagipun ia kecil dan automatik menghighlightkan kod Html banner kamu. Betul tak?

Rekues ini datang dari M. Haziqhanif, Cuties Lovers dan Razif, aku tunaikan sebab majoritinya mahukannya. Lagipun ini tutorial mudah, bagi yang merekues tutorial yang terlalu susah aku tangguhkannya dulu.

Memasang Banner Copy Paste

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

02. Tambahkan kod ini.

</a>

<br/>

<input style="width: 150px;" value="<a href="http://dilarangmelarang.com/" target="_blank"><img border="0" alt="Dilarang Melarang - Deskripsi" src="http://tinyurl.com/dzravh"/></a>" onclick="this.focus();this.select()" readonly="readonly" type="text"/>

</div>

Kamu hanya perlu tukarkan dengan alamat blog dan alamat banner kamu, itu saja.

03. Pilih Save.

Tambahan : Sebelum ini aku dah ajar cara-cara nak buat banner sendiri, tapi itu untuk header. Tapi aku rasa sama je, cuma saiz je berbeza.

Mengatasi bX-apyyso Error Message

2009-02-03T21:50:00.000-08:00

Beberapa hari ini aku ada mengalami masalah untuk save kod semasa mengedit kod. Teruma sekali ketika berada dalam mod Expand Widget. bX-apyyso Error Message memang berlaku ketika kamu mengedit kod, aku fikir pihak Blogger sedang membaikpulih sistemnya tetapi aku silap setelah aku mengogglenya tadi aku menjumpai cara mengatasinya.

Kalau kamu pun ada masalah yang sama mari kita cuba selesaikan.

01. Firefox > Tools > Clear Private Data (Ctrl + Shift + Delete).

02. Tick pada Cache dan Cookie.

03. Tekan butang Clear Private Data Now.

04. Restart Firefox.

Notakaki : Kalau tak menjadi kamu tick pada semua senarai yang ada.

Memasang Read More #01

2009-02-02T21:37:00.000-08:00

Sebenarnya ini tutorial dah bertahun-tahun lama dah, tapi kamu malas nak cari kat Google jadi aku permudahkan. Lagipun ianya untuk memudahkan aku juga yang kerap bertukar layout. Untuk tutorial pemasangan Read More ni sebenarnya dah diwujudkan banyak versi ada cuma aku rasa yang ini paling terbaik. Kalau ada masa lebih aku senaraikan segala tutorial yang ada.

Banyak betul orang rekues tutorial, tak terlayan aku dibuatnya. Aku jawab rekues dari Azizul Hakim dulu, katanya dia nak tutorial memasang Read More. Kamu pun boleh ikut, ianya sangat sesuai untuk entri-entri kamu yang tersangat panjang.

Cuma 1 kelemahan pada kod ini adalah ianya perlu dimasukkan pada setiap pos, pendek kata kalau kamu dah berblogging sudah bertahun-tahun kamu perlu edit balik pada setiap entri kamu.

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

02. Cari kod ini :

03. Gantikan kod di atas dengan kod ini :

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

<b:else/>
<style>.fullpost{display:none;}</style>

<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>
</b:if>

</b:if>

03. Pilih Save.

04. Pilih Setting > Formatting > Post Template.

05. Tambahkan kod ini :

Kata-kata yang ingin dimasukkan ke dalam Read More.

</span>

Kod ini akan tertera setiap kali kamu membuat Read More, masukkan saja bahagian ayat yang kamu ingin sembunyikan kedalam kod tersebut.

06. Pilih Save.

Siapa Nak Kalendar 2009?

2009-01-30T06:48:00.000-08:00

Tadi aku terjumpa satu set kalendar yang amat cantik dan kreatif, maka aku kongsikan kepada kamu. Kalau kamu rasa cantik dan kreatif bolehlah kamu print dan digantungkan kat dinding. Untuk memudahkan kamu aku kumpulkan sekali dalam 1 folder, kalau nak kamu muatturun saja.

Sebahagian kalendar mengandungi unsur lucah dan terdedah sedikit, maaf. Kalau tak muatturun kamu memang rugilah, haha. Selamat tahun baru walaupun sebelum ini aku dah ucap.

Muatturun | 7.16 MB | 800 x 1352 PX

Membuat Banner Menggunakan Perisian PhotoScape

2009-01-28T08:47:00.000-08:00

Aku nak kata pandai tak pandai juga, cuma nak ajar kepada yang belum tahu macam mana nak buat banner untuk blog. Aku tahu kamu kurang pandai menggunakan perisian Adobe Photoshop, mungkin juga kamu tak pandai langsung menggunakan perisian Adobe Photoshop. Sebagai alternatifnya kamu boleh gunakan PhotoScape.

PhotoScape memang banyak gunanya, kamu boleh gunakannya juga sebagai pengurus gambar, menggunakannya untuk menganimasikan gambar ataupun untuk mencetak gambar. Pendek kata macam-macam boleh buat tapi untuk entri ini aku ajar macam mana nak buat banner ringkas. Kalau kamu kreatif, banner yang ringkas pun boleh nampak cantik.

Untuk apa banner ni?

Kalau kamu perasan, banner pun salah satu cara nak tarik perhatian pengujung. Blog aku dulu mudah-mudah je orang kata hodoh, aku pun terpikir gak nak buat banner tapi memang tak pandai. Nak suruh orang buat banner percuma pun jangan haraplah, tak ada benda percuma dalam hidup ni. Bila kamu dah ada banner mati hidup balik pun pelawat akan ingat blog kamu sampai bila-bila.

Bila ada banner, guna layout Minima pun cantik. Tak percaya singgah je kat blog kawan aku contohnya Deedlebag dan Eman.

Malas nak meleret-leret, aku ajarkan kamu terus ya!

1. Dapatkan perisian PhotoScape 3.3 melalui web PhotoScape. Takkan nak instaall pun aku kena ajar, maka aku anggap kamu dah mahir dalam bab ni.

2. Pilih PhotoScape > Editor.

3. Kamu boleh jadikan mana-mana gambar wallpaper untuk dijadikan banner, jika terlalu besar kamu boleh merisizekan gambar bergantung kepada lebar header kamu. Untuk tutorial ini aku menggunakan gambar berukuran lebar 1024 piksel.

4. Kamu boleh guna banner ini untuk percubaan jika mahu.

5. Pilih Editor > Object > Text.

6. Selain Text, kamu juga boleh memilih Photo, Balloon dan Symbol didalam mod Object. Kamu juga boleh menggunakan efek didalam mod home jika kamu mahu. Aku syorkan kamu selalu godek PhotoScape selalu jika mahu cepat pandai.

7. Selesai.

Notakaki : Kamu boleh muatturun font di web FontSquirrel sebagai font tambahan. Manakala untuk mendapatkan gambar wallpaper yang menarik kamu boleh lawati di web Dezignus. Menarik bukan?

Memasang Font Resizer

2009-01-27T06:13:00.000-08:00

Kebanyakkan blogger jarang menggunakan font resizer tapi aku rasa widget ini memang sesuai untuk mereka yang menulis entri dengan tulisan yang terlalu kecil atau terlalu besar. Mungkin juga mereka juga tak tahu widget ini juga berfungsi pada blog.

Atas permintaan JRY aku tunaikan tutorial ini. Sebenarnya dia sudah menggunakan font resizer dari web Dynamic Drive, mungkin dia saja nak membandingkan kod aku dengan kod dia. Tapi aku rasa kod dia dari Dynamic Drive itu lebih sempurna dari apa yang aku tengah gunakan sekarang, aku hanya guna 2 saiz tulisan untuk 2 butang tulisan tapi dia guna 10 saiz tulisan untuk 2 butang tulisan. Tapi aku masih boleh bergaya dengan JRY kerana tutorial ini ada fungsi butang reset.

Sebenarnya nak guna keyboard pun boleh besarkan tulisan, tak percaya cuba tekan tab Ctrl + 0, Ctrl + + dan Ctrl + -. Cuma tak ramai yang tahu tentang trik itu, maka kamu boleh gunakan tutorial ini untuk memudahkan pembaca blog kamu membaca dengan lebih selesa. Sekali lagi aku boleh bergaya dengan JRY kerana tutorial ini hanya membesarkan tulisan dibahagian entri sahaja tanpa mengganggu tulisan yang berada dibahagian sidebar.

01. Layout > Edit Html.

02. Cari kod ini.

</head>

03. Tambahkan kod ini di atasnya.

</script>

~~Kamu mungkin ada masalah untuk save kod ini, sila encode dahulu kod < dan > di web centricle~~ Telah diselesaikan.

04. Cari kod ini.

<data:post.body/>

Pemenggalan kod ini membolehkan tutorial ini berfungsi di dalam entri. Kamu juga boleh memenggal kod ini dimana-mana bahagian mengikut kehendak kamu.

05. Tambahkan kod menjadi sebegini.

<data:post.body/>

</span>

06. Pilih Save.

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

08. Tambahkan kod ini.

</a>
<a href="javascript:doZoom(13)">

</a>
<a href="javascript:doZoom(11)">

</a>

</div>

Tukarkan perkataan yang telah diboldkan mengikut kehendak kamu. Jika kamu menggunakan saiz tulisan 13px diblog kamu, setkan juga saiz font origin kepada 13 untuk dijadikan butang tulisan reset.

09. Pilih Save.

Memasang Total Post Count & Total Comment Count

2009-01-20T22:18:00.000-08:00

Ini adalah widget mudah untuk pengguna Blogspot, walaubagaimana pun ianya juga membantu pengunjung blog merujuk berapa jumlah entri dan jumlah komen yang kamu miliki.

Ketika entri ini ditulis, aku telah mengumpul 75 entri dan 1475 komen. Kamu macam mana pula? Mungkin lagi banyak bukan? Jika kamu telah lama menulis blog, disarankan kamu menggunakan widget ini.

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

02. Tambahkan kod ini.

Jumlah Entri

Jumlah Komen

03. Pilih Save.

Pelekat Hari Ini : Twitter

2009-01-13T11:36:00.000-08:00

Pelekat ini memang sesuai untuk Sidebar kamu.

Aku tak tahu nak tulis apa maka aku aku pun buka perisian Photoscape untuk mengedit gambar. Aku ada Adobe Photoshop tapi lupa pula ilmu-ilmu mengedit, mungkin sebab beberapa kali terkena renjatan elektrik. Header yang aku gunakan sekarang sumpah tak lawa, ada orang kata macam header Myspace. Sudah jatuh ditimpa tangga, pasukan Chelsea pula kalah dengan pasukan Manchester United dengan 3 gol bolos tanpa balas.

Maaf sebab aku suka tukar-tukar layout, aku memang benci layout aku. Apa nak buat? Harap-harap layout Denim yang aku gunakan sekarang ni dapat bertahan selama beberapa tahun, doakan aku ya! Back up untuk layout aku dulu lupa nak letak kat mana, kalau jumpa aku kongsi untuk semua. Kalau kamu perasan layout yang aku gunakan sekarang sudah kosong dengan gambar dimuka hadapan dan aku gantikan dengan iklan dimuka dalaman blog aku. Untuk memendekkan cerita, bantulah aku menyokong iklan tersebut.

Setibanya aku di web Blog Bumper Sticker, aku tiba-tiba tergerak nak buat pelekat sendiri. Aku buat ringkas je, kalau berkenan bolehlah curi. Tema untuk pelekat kali ni aku pilih Twitter dulu sebab aku suka gunakan Twitter.

Pelekat Twitter

Versi 1

Versi 2

Versi 3

Maklumat Lesen dan Hakcipta

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

Pendapat Kamu?

Kalau kamu rajin kamu boleh edit semula pelekat tersebut dengan menambah link blog kamu. Sebarang pertanyaan atau cadangan bolehlah diemelkan kepada aku dengan kadar segera. Jangan lupa follow aku.

Notakaki : Doa aku telah termakbul, Abang Zul beli juga rounter untuk aku akhirnya. Twit twit...

Memasang Pelekat Pada Header

2009-01-11T05:49:00.000-08:00

Pelekat membuatkan sesuatu blog itu cantik dan unik.

Aku sebenarnya dah lama nak ajar tutorial ini tapi terlupa pula, sebelum aku terlupa lagi lebih baik aku ajarkan kamu sekarang. Pelekat ini memang cantik lebih-lebih lagi bila blog kamu sudah sedia ada cantik. Dan aku selalu guna pelekat ini bila aku baru sedang tukar layout, konon-kononnya nak bagitahu kamu bahawa aku sedang mengedit layout.

Pelekat tu kamu boleh nak tukar dengan apa-apa gambar pun, syaratnya gambar yang kamu pilih tu mestilah transparent backgroundnya. Jangan letak gambar berpetak, sumpah tak lawa nanti macam blog budak tadika. Aku bukan nak kutuk tapi aku taknak orang kutuk, sebelum orang kutuk blog kamu lebih baik aku kutuk dulu.

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

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini diatasnya :

#pelekat img {

position:relative;
top:-28px;
right:-28px;
opacity:0.90;
float:right;

}

Tak semua layout sesuai dengan Css ini, maka kamu perlu mengedit nilai top dan right mengikut kesesuaian layout kamu.

04. Cari kod ini :

05. Tambahkan kod ini dibawahnya :

</a>

</div>

06. Pilih Save.

Memasang Caption Pada Gambar

2009-01-06T08:21:00.000-08:00

Aku nak berkongsi sedikit ilmu tentang Blogspot, sesiapa yang teringin nak belajar sebaik-baiknya haruslah tahu apa itu Css dan Html serba sedikit. Kalau tak, susah sikit nak belajar atau mengalami sedikit kesulitan ketika belajar.

Caption sebenarnya banyak digunakan pada platfom Wordpress, bagi pengguna Blogspot ianya mungkin ganjil. Untuk menggunakannya pun kenalah lakukan secara manual yakni menambah sedikit kod semasa mengupload gambar. Caption bukan sahaja mencantikkan sesuatu blog malah memudahkan pembaca faham apa gambar yang ditunjukkan kepada mereka.

Setakat ini tak ramai yang menggunakan caption, jadilah orang kedua yang menggunakannya hari ini.

Sebelum :

Selepas :

Pantai Teluk Lipat

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

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini diatasnya :

.imgcontainer {

position:relative;
float:left;

}
.caption {

font: normal 1em/1.3em arial;
background:#fff;
color:#000;
position:absolute;
bottom:0;
left:0;
margin-bottom:20px;
text-align:center;
width:100%;
opacity:.75;
filter:alpha(opacity=85);

}

04. Pilih Save.

05. Pilih Posting > Create > Edit Html.

06. Upload apa-apa gambar.

07. Jadikan seperti kod ini :

<img src="http://tinyurl.com/98hwpd"/>
<div class="caption">Pantai Teluk Lipat</div>

</div>

08. Pilih Publish.

Untuk tambahan, elakkan memilih float left atau right, sebaiknya pilihlah float none. Apa-apa pun selamat mencuba.