Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Rabu, 02 Maret 2011

[Tutorial Blogspot] : Memasang Jquery Sweet Menu Pada Blog

Updated [6 Sept 2011] : Ada sedikit masalah bila view pakai Chrome :(

Hey hey hey!


Hari ini aku akan tulis satu tutorial blogspot. Khas untuk template daripada blogspot. Side menu di belah kiri blog ni sebenarnya nama dia Sweet Menu. Bukan aku yang memandai kasi nama tu tau. Pencipta dia yang bagi nama itu. Kredit kepada Adam Becker for the jqeury sweet menu :D ! Aku galakkan template minima dipercubakan dalam tutorial ini.

Kalau nak tengok original demo daripada Adam Becker ni kau boleh view kat sini tau !

Mula mula kerja pertama mesti lah login Dashboard. Lepas tu masuk Design. Lepas tu Edit HTML dah akhir sekali tick pada Expand Widget Templates.

Lepas tu copy paste coding bawah ni selepas <head> ye.
<script src='http://cikamoitutor.bravehost.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://cikamoitutor.bravehost.com/jquery.easing.js' type='text/javascript'/>
<script src='http://cikamoitutor.bravehost.com/jquery.sweet-menu-1.0.js' type='text/javascript'/>
Lepas tu copy paste coding bawah ni plak selepas ]]></b:skin>

Yang aku kalerkan dengan kaler hijau tu ialah direct link gambar icon kecik kecik tu nanti. Kalau kau ada icon lain nak letak kau gantikan je dengan link kaler hijau okey.

<script type='text/javascript'>
$(document).ready(function(){

$(&#39;#backMenu&#39;).sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: &#39;easeOutBounce&#39;,
duration: 500,
icons: [
&#39;images/back.png&#39;
]
});

$(&#39;#exampleMenu&#39;).sweetMenu({
top: 100,
padding: 8,
iconSize:40,
easing: &#39;easeOutBounce&#39;,
duration: 500,
icons: [
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkf6VKeqqUjeQxzi2jvm4TOTfpwJeOMF8yIhsUF5zBX5-At5RWqUTGDvygFPzCfhmK0zmjZtTgkE-2nlalxeIBX_sdfrzxCSBi9jM2qgufJMSy6Q_Z4r8XvIdkCTUpBPD_99p57BdnYUT/s1600/2011-02-28_003024.png&#39;,

&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdXFSLIwboeIQ_KEbt35ABHYmJ-E8nxx3oRcEXG93bb28p9gAeY9Z7UKSu_aVFVnr2s4n-LXHh-bfvRVLI3W6sbYKndVi3hlgl4qVToBw8D-QUYBXFXMKURMygRFcJjW8Te3qdNYmB17T/s1600/Lockbox.png&#39;,

&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSP-I-IkEoeEC_1omxlrmjHQ3mbomq-QADNLCaiQt56TUa2IFr2NWW13e64K_r9I1EQo5HNgpjSa8X-XnpfQYjcKdVjqffbr0hiRCOQbGoQn3ovriISsFashtGNt0txqBic2gYD7kWyZ0_/s1600/Text.png&#39;,

&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYanuSpfwXmyG7xsgOXr88YxRvqSPqM2N43C16dWSoQ5QalKhyphenhyphenJFh88QCxHwpCFSJxwdPJMMu96iljNweO8f8945mTii8V4j3q2DdGGfUUc5OMQCQkCko2aOTR60Y6d74VF1xOD6RlnbhJ/s1600/Customize.png&#39;,

&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjab6HGlzTmfQbQJNzvhZDhvM4WVaFBcwWcO0-UVw4eSzLohTLXy7w1fW7wit8VgC8fmblt1mtsfv66nAGK2VSw6hGmMHq2I3kYqkMOzG4uUbljTijgVEP3TrrWnV9F2lq98jSzVbOdrEfF/s1600/Sketches.png&#39;,

&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEC2D7BI5HY156pPbS7vHp8xZSn2gVk4tF0kmqG4AGi4vNitopiCzaTImCFHwGdZYeh7KUucrKdzBt8mC5JBNo_G2vxnVIqA5ncmR3KVLZK-MzqvbEMd4QI2UjCHTAWVsE0z_lEuFjsxy/s1600/Kate.png&#39;
]
});
});
</script>
Lepas tu copy paste coding bawah ni sebelum ]]></b:skin>

Ini sebenarnya bahagian CSS lah. Kalau kau pandai CSS boleh lah edit sini.

.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #000000;
font-size: 20px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: Arial Narrow;
text-decoration: none;
background-color: #ACF3FD;
opacity: 1.0;
}

.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}
Ini last step. Copy paste coding bawah ni betul betul atas </body>

Yang aku kaler kan pakai merah kau ubah je link dia kepada link yang kau mahukan dan kaler purple tu ialah tajuk untuk display link kau.

<div id='exampleMenu'>

<li><a expr:href='data:blog.homepageUrl' title='homepage'>Home</a></li>
<li><a href='http://www.blogger.com/home' target='_blank' >Login</a></li>

<li><a href='http://linky-linko.blogspot.com/' target='_blank' >Links</a></li>

<li><a href='http://rojakstory.blogspot.com/2009/08/banner.html' target='_blank' >Comel</a></li>

<li><a href='http://rojakstory.blogspot.com/2007/05/disclaimer.html' target='_blank' >Disclaimer</a></li>

<li><a href='http://rojakstory.blogspot.com/2007/12/about.html' target='_blank' >About</a></li>

</div>
Lepas template kau dah ada semua coding ni semua kau preview dulu tau. Dah preview dah tengok hasilnya. Puas hati? Save Template sekarang jugak! Sangat cantik dilihat pada browser Firefox 2+ , Chrome dan Opera. Browser lain aku tak pasti macam mana hasilnya.

Sebenarnya kalau kau search jquery menu bar pun memang banyak lagi menu bar yang lagi cantik dihasilkan menggunakan jquery. Tak susah nak letak coding dia dalam blog selagi programmer tu ada sediakan coding jquery , css dan juga HTML dia. :D!

Untuk icon dia aku guna Android Icon kot. Tak ingat sangat.

Senin, 21 Februari 2011

cara bermain game flash secara offline. Doodle flash game seronok!

Exam dah habis. Sekarang masa untuk duduk bersenang lenang dengan bergoyang kaki di hadapan PC sambil online sampai lebam. Aktiviti aku selepas exam hanyalah bermain permainan PC. Sepertinya permainan Sally's Spa. Lagi 5 level aku akan habis bermain Sally's Spa itu. Lagi. Aku juga bermain game flash seperti daripada website MiniClip.com. Tetapi aku bermain game flash secara offline bermakna tanpa internet connection langsung. Bagaimana itu?

Hey. Hey. Ada caranya. Dah lama aku pratikan cara ini pada game flash.
Mula mula kau kena download dulu aplikasi dia. Download sini -> Flash Offliner 8.91MB

Lepas tu extract semua folder dia pakai WinRaR. Tak ada WinRar? Boleh download sini -> Winrar 3.93 1.66MB

Dah download dah extract Flash Offliner kan? Masuk folder Install FlashOffliner lepas tu install lah dulu. Lepas tu lepas tu..

Langkah 1
Masuk File2Hd.com tau. Contohnya kau nak install game Doodle dari Miniclip. Copy paste dulu link dari Miniclip tu. Tick kau agree Term and Condition dia. Lepas tu pilih option Objects. Lepas tu GET FILES.

Pastikan setiap URL/Link bermula dengan http://------------.com ye. Kalau bermula dengan www.----------.com nanti tak jadi langsung.

Dah tekan Get Files nanti website tu akan tunjuk hasilnya. Contohnya untuk game Doodle ada dua hasil. Aku try link pertama. Right click dan select Save Link As. Kalau aku, aku boleh save pakai IDM :D !



Langkah 2
Lepas tu. Kau right click pada Flash Offliner kau yang sedang aktif kat system tray kau tu. Dan pilih Create New FlashOffliner Package.



Dah pilih. Dia akan keluar lagi satu window kan.


Kau isi dulu nama kau. Nama manja pun boleh. Lepas tu isi nama packer kau. Nama apa apa pun boleh. Kalau mahu masukkan url blog kau pun boleh. Tak nak isi pun boleh. Up2U.com lah. hehe.

Lepas tu tekan butang Select Game File. Cari semula game Doodle yang baru download tu. Lepas tu tekan butang Select Output Folder. Yang ni fungsinya untuk kau simpan kat mana file packer kau nanti. Contohnya aku simpan dalam folder FlashOffliner juga. Senang nak cari nanti. Last sekali tekan butang Start Packing.

Nanti ada lah pop up message kata game kau tu dah completed package.

Langkah 3
Lepas tu right lagi FlashOffliner kau tu. Kali ini pilih Install FlashOffliner Package.



Lepas tu dia akan keluar window suruh kau pilih file jenis .fop kan. Pilih file yang baru kau buat package tadi kat langkah 2 tadi. Dah pilih kau tunggu dia habis extract sendiri.



Dah habis extract cuba right click kat FlashOffliner tu lagi sekali. Ha. tengok. Kan dah ada nama game Doodle kat situ. Lepas tu click lah kat game tu. Ta daaaaa.. Kau dah boleh main game tu tanpa internet connection :D !


Nota Tambahan: Kalau kau right click kat FlashOffliner tu lepas tu cari Windows Size. Kau boleh pilih windows size berapa yang kau nak. Game Doodle tu aku taruk Full Screen :D !

Recommended Flash Games Site: MiniClip.com , GirlGamesNow.com

p/s: tengah sibuk main game Virtual Families, Sally's Spa dengan Runescape. :D !

Sabtu, 05 Juni 2010

Sorokkan Komen (blogspot)

Ada reader tanya aku kat Fan Page Rojakstory, macam mana nak sorokkan kotak komen. Ha! Itu gunanya ada Fan Page tu. Untuk senang aku baca soalan korang instead of Formspring atau by e-mail. Sebab aku MALAS nak buka e-mail atau Formspring ok. Entah apa lah fungsinya Contact Me tu kan. Mesti ada yang cakap macam tu. Maaf aku tak ada jawapan untuk itu.haha.

Baiklah. Tutorial ini hanya untuk blogspot yang memakai embedded comments. Kalau pop up pun boleh tapi kotak komen akan hilang. ;). Btw, trick ni tak jalan kat blog yang pakai comment form dari third party contohnya Disqus Comment yang slow nak loading tu!

Tutorial ni aku dapat dari Teratak Muncet. Template blog ni pun aku cekau dari dia dan dengan SUKA SUKInya aku edit jadi theme lollipop.haha.

01. Dashboard > Layout > Edit HTML > TICK EXPAND WIDGET

02. Cari code ini: ]]></b:skin> dan copy paste code berikut kat bawah ]]></b:skin> tadi tu.

#HideComments {
width: 230px;
font-size: 13px;
background: #F0F0F0;
border: 1px solid #cccccc;
font-weight: bold;
padding: 5px;
}
p/s: code atas ni boleh edit. Suka hati lah nak tukar kaler background ke. Tukar font size ke. Up to u :)

03. Letakkan code berikut kat sebelum </head>

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click Here To See Comments";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Back";
}
}
</script>
p/s: yang di-boldkan dengan kaler merah tu kau boleh tukar ke ayat lain :D

*Apabila komen disorokkan

*Apabila komen di-expand

04. Ni langkah terakhir. Rujuk code kat bawah ni. Yang berwarna merah kau kena tambah. Yang berwarna hitam tu code yang memang dah ada dalam blog kau tu. Tambah code merah tu ikut code kat bawah ni tahu. p/s: coding kat bawah hanya ada pada coding minima template. sorry.

<div id='HideComments'>
<a href='javascript:toggle();' id='displayText'>Click Here To See Comments</a>
</div>
<div id="toggleText" style="display: none;">

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</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'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

</div>

05. Save template.

So, menjadi tak? Leave me a feedback ok :DD

post signature

Selasa, 25 Mei 2010

Memasang Blog Kalender Sebagai Blog Archive (blogspot)

*hierarchy blog archive

Ada pembaca request tutorial kalender kat aku. Ini bukan sebarang kalender tahu. Tapi ni kalender khas untuk Blog Archive kita. Sepertimana yang kita tahu, Blogger hanya menyediakn 3 pilihan untuk Blog Archive iaitu dalam bentuk hierarchy,flat list atau dropdown menu.

Tapi aku tak berapa suka nak pasang blog archive sebab interface dia yang kurang menarik perhatian aku. Paling tidak pun aku hanya suka pasang dropdown menu. Bukan apa, kalau dah makin banyak updated nanti hierarchy aku tu panjang berjela-jela kat sidebar tu.haha.

Maka aku dah jumpa solution untuk perkara ini. Aku jumpa tutorial untuk mencantikkan lagi blog archive kepada blog calender tu kat blog Eldy.

*blog archive yang lebih kemas dan cun
Baiklah. Jom start tutorial ni.

01. Login ke dashboard.
02. Layout > Add a Gadget > HTML/Javascript
03. Copy paste code kat bawah ni ke dalam kotak HTML/Javascript
<div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="http://rojakstory.blogspot.com";
Calendar.timeZone="+08:00";
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>
<style>
#blogCalendar {text-align:center;border:0px;background: url(http://jessieshu1984.googlepages.com/blog01-7.jpg) no-repeat top;margin:0;font-family:arial;height:180px;line-height:14px;}
#CalendarCaption a{color:#777;text-decoration:none;margin:auto;font-size:80%;}
#CalendarCaption{width:80%;margin:auto;}
#CalendarTable{height:123px;margin-top:2x;}
#CalendarTable a{font-weight:bold;color: purple;}
#CalendarTable table {width:auto;margin:auto;border: 0px;text-align:center;font-size:80%;padding-top:5px;}
#CalendarTable table th{font-size:85%;}
#CalendarTable table td{border:0px;}
#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{font-weight:bold;Text-decoration:underline;}
#CalendarTable a:hover {text-decoration:none;}
#CalendarMonth{font-size:90%;}
.Today{text-decoration:none;color: darkred;}
.Today a:visited, .Today a:link, .Today a:active, .Today a:hover {text-decoration:none;color: #ddd;}
#CalendarFooter{color:Green;font-size:80%;padding-top:10px;}
#monthTable{background:#eee;}
.yearInput{background:#eee;}
</style>

Merah: Tukarkan URL BLOG aku tu kepada URL BLOG korang k.

04. Save.

Kalau terlebih advanced, boleh edit code tu. Contohnya tukar kepada warna yang korang suka. Boleh tambah background dan sebagainya.

Masuk blog ini atau backup sitenya kat SINI untuk pilih design lain. Sila klik pada ENGLISH untuk lebih paham. Masukkan URL BLOG korang kat kotak yang disediakan. Set-kan time ke GMT+08:00. Lepas tu pilih design yang korang nak kat Present Style tu dan kemudian tekan SHOW CALENDER. Kalau dah berkenan dengan blog calender yang korang pilih tu, tekan INSTALL TO BLOG. Siap!

Senang je kan? Selamat mencuba :D

post signature

Kamis, 29 April 2010

Memasang Butang LIKE (Facebook) Pada Setiap Entri | Blogspot & Wordpress


Kelmarin saja stalk blog Liyanaa dan terjumpa sesuatu yang menarik kat blog minah ni. Ha! Seperti tajuk di atas, kakak Liyanaa(comel pula panggil dia kakak) ada buat satu tutorial butang Facebook LIKE ni. Rentetan dari peristiwa tersebut, aku ingin berkongsi cara memasang butang Facebook LIKE tu kat setiap entri korang.

Baiklahh. Sila login ke Dashboard dahulu.

1. layout > Edit HTML > tick pada Expand Widget Templates.
2. cari keyword ini data:post.body.
3. copy paste code di berikut SELEPAS data:post.body
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Lihat contoh:
4. Save template.

Nota: Kalau lepas save template korang tengok butang LIKE tu tak ada, mungkin template korang ada lebih daripada satu data:post.body. Apa yang perlu dilakukan try and error setiap satu data:post.body tu sampai butang Facebook LIKE tu muncul kat entri korang okay.

Template aku ada sampai 4 data:post.body ;pp

Untuk penggun Wordpress pula, korang boleh dapatkan plugin-nya di SINI: Facebook Like Button Plugin.. Thanks to !acr13! untuk info plugin ni :D

Lepas korang dah picit butang LIKE profile Facebook korang akan ada activities seperti contoh di bawah :D

Jangan lupa yea picit butang LIKE aku juga :D
-Selamat Mencuba-

post signature

Jumat, 23 April 2010

Memasang Cute Profile Pada Blog

[Link Updated For Cute Profile Tutorial - 13 August 2010]

Ramai betul tanya aku cara pasang Cute Profile tu. Sampai terjah aku kat inbox. Aku memang nak tolong..tapi takut ada yang tak paham cara aku pasang menantang tu. Sebab aku pasang cara manual. Lebih complicated dari cara asal dia.wuuuuuuu.

Tapi jangan risau, aku dah jumpa link blog yang dah buat tutorial ni. Caranya lebih mudah. Jauh beza dengan cara aku yang sangat lahh complicated tapi tak complicated untuk orang yang dah biasa dengan HTML/CSS.wuwuwuwuwu.

Baiklahh, untuk pengguna blogspot sila terjah blog Piratz untuk tutorial ni okay.

Untuk pengguna Wordpress bolehlahh download plugin-nya dari Plugin Directory tu.

~Saranghae~ *mode Final Exam.

post signature

Senin, 15 Maret 2010

Sparkling Cursor (Blogspot)

Ramai sangat dah request tutorial ni. So, aku dah tak ingat siapa yang request. Memandangkan dah ramai sangat request, aku dengan bermurah hati buat tutorial ni. Tutorial ni aku amik dari Nine. Thanks dude (:. Apa itu sparkling cursor? Ala tengok je blog aku neh, sila gerakkan mouse korang tu ye. Nampak tak?

Klik pada warna yang korang berkenan. Korang copy-paste dulu kaler yang korang nak then pastekan kat dalam Notepad. Cara nak bukak Notepad; Start>All Programs>Accessories>Notepad.

Putih
Kuning
Merah
Biru
Hijau
Merah Jambu
Hitam

Lepas dah pastekan code yang korang nak dalam Notepad,then SAVE. Pastikan diakhiri dengan .js cthnya; pink.js
Then dah save korang upload dalam web hosting korang. Kalau tak de web hosting boleh upload kat Ripway atau Stormpage.

*Link File korang (dipetakkan dalam kotak merah)

Lepas tu copy link file js korang tu ehh. Gantikan Link File kat bawah neh dengan Link File korang sendiri okey.
<script src='http://carnine9.fileave.com/CursorRed.js' type='text/javascript'/>

Then, sila login ke Blogger > Layout > Edit HTML dan cari code <head>. Lepas tu pastekan code tersebut kat bawah <head> tu. Save template.

Tujuan aku tak bagi link untuk setiap file cursor tu sebab aku tak nak kehabisan bandwidth dan pape hal jadi kat file korang tu aku tak tanggung. Ditanggung sendiri. hahahahaha. Selamat mencuba ;pp

post signature


Selasa, 09 Februari 2010

Customize Embedded Comments Background

Dah lama kan aku tak tulis tutorial untuk Blogger. Bukan tak nak tulis, just malas nak tulis boleh?haha. Okey. Kali ni tutorial di-request oleh Mieya. Dia nak tahu cara kasi cantikan lagi comment embedded box ni. Aku jumpa tutorial ni dari BlogBulk. Banyak yang aku belajar dari sana. (:



Mula-mula cari code ni dulu:


#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


Lepas dah jumpa code kat atas ni, DELETE code atas ni dan GANTIKAN dengan code kat bawah ni:

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(http://i38.tinypic.com/27yu1xl.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}


URL yang dah dimerahkan tu, korang nak simpan or delete pun boleh. Boleh adjust color code (yang telah dibirukan) dia tawww. Just DIY, Try and Error. Color code boleh amik kat sini; Color Code. Yang macam margin dengan padding kalau tak reti jangan usik.

Selamat Mencuba!

post signature


Kamis, 21 Januari 2010

Blogger New Post Editor (Fungsi Baru)


Mungkin ramai yang tak tahu langsung Blogger dah perkenalkan Blogger New Post Editor. Aku tahu pasal ni melalui Kakak Lala.wuakakaka. Ok. Jom intai kelebihana New Post Editor yang baru ni.



Bagus. Blogger dah ada Jump Break function. Apa jadahnya tu? Fungsi dia macam Read More. Tak payah lagi pakai code Read More yang memeningkan kepala hotak tu. Just klik button yang aku dah bulatkan tu. Secara auto jadi la Read More korang (:. Aku terperasan, upload video dah tak ada. Ke aku terlepas pandang? Susah la cam ni nak upload video 3gp(video blue)wuakakaka.


Kacak betul tempat Preview Post tu. Jeles nyahhh tawww. Aku lebih prefer preview jenis lama.haha.


Kotak New Post Editor dah boleh diperbesarkan. Just tarik je ke bawah at the corner. Nanti jadi la besar macam dalam gambar tu. Lagi satu function baru yang diperkenalkan oleh Blogger.

Ok. Berkenan dengan fungsi baru New Editor? Senang je nak install. Tak payah pakai code. Hanya dua tiga click.haha.

01. Masuk Setting. Basic Setting.
02. Scroll bawah.
03. Pilih Updated Editor.
04. Save Settings.



Mudah bukan? Lepas tu cuba masuk New Post untuk merasai pembaharuaan yang Blogger lakukan (:

Kelemahan New Editor:
01. Tak support Greasemonkey. So, emoticon tak kan keluar kat New Editor.
02. Upload video tak ada kat Compose Mode.
03. Upload picture tak ada kat Edit HTML Mode.

Tepuk dada tanya selera. korang nak pakai yang mana satu. Aku prefer Old Editor.:001:

post signature


Minggu, 03 Januari 2010

Customize Sweet Tooltips (Blogspot)


Sekarang ni dah boleh dah tawww tukar warna background Sweet Tooltip yang asalnya berwarna biru kepada warna kesukaan anda. Soalan warna background tooltip boleh ditukar atau tak, pernah ditanya oleh Liyanaa. Kalau silap orang maafkan patik ye. Sebab patik ada short-term memory.haha.

Kena edit sikit je kat bahagian CSS untuk tukar warna background dia. Lai-lai baca entri ni.hihi.


Copy code ini dan paste-kan dalam aplikasi Notepad.
Sila rujuk codenya di SINI.

Lepas tu kan,



Kat bahagian code pertama yang telah di-highlighted tu (seperti dalam gambar rajah) korang letak je la code warna yang korang nak. Code warna boleh rujuk di HTML CHART CODE.

Lepas tu, save kan as sweet.css. Tak kisah la korang nak taruk nama apa janji mesti berakhir dengan .css

Then save dalam web hosting korang. Kalau tak de hosting, sila gunakan hosting free seperti: Stormpages ataupun Ripway. Lepas dah save tu copy link file tooltip korang tu.


<!-- SweetTitlesTooltips Plugin -->
<link href='http://cikamoitutor.bravehost.com/sweet_2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://cikamoitutor.bravehost.com/tooltips.js' type='text/javascript'/>
<script src='http://cikamoitutor.bravehost.com/sweettiles.js' type='text/javascript'/>


Link file yang telah di-copy tadi tu gantikan dengan link file yang telah aku merahkan kat code atas ni.

And langkah terakhir, copy code kat atas ni setelah selesai pastekan link file baru korang. Dan pastekan sebelum code <body>

Save dan lihat hasilnya!!



*kalau tak paham gak cara aku, sila kemukakan soalan korang kat bahagian komen. Pastikan korang memang tak paham. Jangan try sekali tak dapat tak nak try dah. Usaha tangga kejayaan. *aku try banyak kali baru tahu kat situ boleh edit warna background dia.

post signature


Jumat, 02 Oktober 2009

Toolbar Wibiya

Para pembaca sekalian, sila BERI KOMEN yang BERMANFAAT selepas membaca entri ini.





Sesiapa yang mahu install toolbar yang macam aku ada ni boleh la masuk ke website Wibiya. Toolbar tersebut dipanggil Wibiya (macam nama orang Siam).haha. Pengguna selain Blogger pun boleh install toolbar ni.




Kemudian request token dari admin website tersebut. Biasannya amik 3 hingga 4 hari token tu dihantar ke dalam inbox e-mail anda.

#Sorry tak de mood lately 31nak tulis blog. Sibuk dengan Final#
#Ini je la tutorial paling simple pernah aku tulis#
#Hope you all enjoy it!#:001:

post signature


Jumat, 25 September 2009

updated blog via sms part 1 (cubaan)

kalau anda dapat baca entri ini bermakna saya sudah berjaya updated blog melalui sms.sila tinggalkan komen anda lepas bc msg ni..

Rujuk link di bawah untuk Updated Blog Via SMS:
Tutorial Updated Blog Via SMS

Selasa, 04 Agustus 2009

Hide or Expand Post Comments

Para pembaca sekalian, sila BERI KOMEN yang BERMANFAAT selepas membaca entri ini.





Macam dah lama je kan aku tak tulis tutorial sejak aku sambung belajar kat MMU.hehe. Bukan apa. Aku sibuk gila dengan main Facebook.haha. and of course dengan tutorial and project yang menimbun atas meja aku ni. Ntah bila nak siap kan blogger-emoticon.blogspot.com..Then now aku curi la sikit masa tulis tutorial ni.

Tutorial yang aku maksudkan ialah mengembang dan mengempiskan komen :018::018:. Kalau tak paham apa aku tulis ni sila la lihat contoh di setiap entri komen aku. Fungsi Hide and Expand Post Comments ni untuk tak nak bagi komen korang tu berjela-jela panjang kat bawah dan melambatkan loading blog ko tu.hehe. Tutorial kali ini diinspirasikan oleh iEn.

01. Login ke Dashboard.
02. Klik Layout > Edit HTML
03. Tick pada Expand Widget Templates
04. Cari code ini ]]></b:skin> dan copy=paste code berikut di atas ]]></b:skin> tadi.


#HideComments {
width: 230px;
font-size: 13px;
background: #F0F0F0;
border: 1px solid #cccccc;
font-weight: bold;
padding: 5px;
}


05. Cari code ini lak </head> dan copy-paste code berikut di bawah </head> tadi.


<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click Here To See Comments";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Back";
}
}
</script>


06. Tambahkan code yang berwarna merah.


<div id='HideComments'>
<a href='javascript:toggle();' id='displayText'>Click Here To See Comments</a>
</div>
<div id="toggleText" style="display: none;">

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</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'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

</div>


07. Save template.

Cam ne? Menjadi tak tutorial kali ni? Kalau tak jadi sila cuba lagi. Must be sumthing wrong sumwhere masa korang nak copy-paste code dia ni.hehe.

-Selamat Mencuba-

post signature


Rabu, 24 Juni 2009

Peek A Boo View On Label

Para pembaca sekalian, sila BERI KOMEN yang BERMANFAAT selepas membaca entri ini.





Aku dah lama plan nak tulis tutorial ni. Tapi asyik tak ada masa je. So, memandangkan aku sekarang ni free sebab tak ada kelas petang-petang gini aku pun updated blog ni dengan tulis tutorial ni. Peek A Boo View On Label kalau dalam bahasa melayu: Menu Buka Tutup Di Label. Peek A Boo View On Label lebih kurang macam Read More Versi 2. Kalau klik je mesti terpampang terus kat bawah bukannya akan masuk ke window lain.

Masih tak paham? Cuba lihat contohnya.:09:


01.Login ke Dashboard
02.Klik Layout > EditHTML > Tick Pada Expand Widget Templates
03.Cari code </head> , copy dan paste code berikut di atas </head> tadi.


<script src='http://www.stormpages.com/rojakamoi/hackosphere.js' type='text/javascript'/>


04.Cari code <b:includable id='main' var='top'> dan copy paste code berikut di atas <b:includable id='main' var='top'> tadi.

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>


05.Cari code ini pula <b:include data='post' name='post'/> , copy dan pastekan code berikut di atas <b:include data='post' name='post'/> tadi.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>


06.Kemudian copy dan pastekan code berikut </b:if> di bawah <b:include data='post' name='post'/> tadi.

#Sebagai tambahan: Jika anda masih mengalami masalah coding-nya sila rujuk code di bawah ini. Code yang berwarna merah anda perlu copy dan paste tetapi bagi yang berwarna lain daripada merah elok la jika anda tidak mengusiknya.

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>


Langkah terakhir: Save template dan lihat hasilnya dan klik pada mana-mana Label anda. Trik ini hanya berhasil pada LABEL SAHAJA!!

-Selamat Mencuba-:Onion48:

Via: Eriyza | Muncet

post signature