Tutorial: Bikin Bookmark

Dah lama tak bikin tutorial :P Tapi yg ni biasa² saja.. takde yg extravaganza..

Contoh penggunaan boleh dilihat menerusi entry ini dan ini..

Kalau anda berminat nak buat benda yg sama, ada 2 step.. Quite simple..

Tulis je posting berbagai.. then bila sampai ke link yg nak dibikin tu, tulis macam ni

<a href="#kesana">letak la ayat apa yg nak ditulis</a>


2nd important step, ke mana link tu nak pergi.. haa.. so di bahagian atas paragraph atau gambar atau apa² je la yg anda letakkan, letak benda ni

<a name="kesana"></a>



Sila maklum ye, "kesana" tu bley tukar sesuka hati la nak tulis apa.. TAPI yg penting, kat part name= tu nanti, kena la sama.. kalau dah tulis "kesini" di bahagian href, kat name pun kena la letak "kesini".. kalau tidak, ke laut la kaedahnya :P

Meh CY3.5 bagi contoh. Silalah klik kat sini untuk terus ke bawah posting..

Ha, kan dah sampai.. tak payah scroll :D

Nota kaki: Satu benda la.. sometimes kalau preview, besar kemungkinan href tu akan ditambah URL lengkap oleh blogger.. so, b4 publish, check balik area href.. tinggalkan #nama_refer sahaja.. karang takut tak jadik plak bila entry dipublish..

HowTo: Create Menu in Your Blog

Tajuk, omputeh saja tapi content dalam BM :P anyways, tutorial ini direquest oleh cik yangyuyu menerusi ruangan komen di tutorial strike through tempoh hari.

To be frank, saya follow tutorial dari page ni.. tapi saya tak ikut sume sbb blog saya nampak tak hensem apabila menggunakan tutorial tersebut sepenuhnya.. cakap macam la blog ni dah hensem sangat kannn..

Cukup² la merapu.. OK, here goes..

1. Masuk ke Dashboard > Layout > Edit HTML.. Cari word /* Header */


2. Paste code kat bawah ni

#menu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#menu li a{
color:#5588aa;
font-weight:bold;
text-decoration:underline;
}

#menu li a:visited {
color: #5588aa;
font-weight:bold;
text-decoration:underline;
}

#menu li a:hover {
color: #F88017;
background: #ffffff;
font-weight:bold;
text-decoration:underline;
}


3. Pi kat Page Element. Add Gadget. Amik HTML/Javascript. Paste code ni
   
   
   <div id='menu'>
   <ul>
   <li><a href="Your URL">Home</a></li>
   <li><a href="Your URL">Advertise</a></li>
   <li><a href="Your URL">About Me</a></li>
   <li><a href="mailto:YOUR EMAIL ADDRESS">Contact</a></li>
   </ul></div>
   
   


4. Yang kaler merah² dalam Step #2 tu boleh adjust ikut kesesuaian kaler yg anda inginkan. Kat Step #3 tu, harus la tukar URL based on link kat blog anda.

Anyway, cik yangyuyu, saya notice, template blog anda mmg dah ada menu header ni.. so, kena la cari dalam CSS code template anda utk menukar link tersebut. Tak payah dah follow step 1-4 ni dah.. hehehe..

Selamat bermenu-menu :D

HowTo: StrikeThrough (Kensel Perkataan/Ayat)

Atas permintaan cik Diana seperti yg tertera dalam ruangan komen entri 4 Ramadhan.

Bagaimanakah untuk membuatkan ayat ini dikerat-kerat sebegini seperti di bawah

ayat ini dikerat-kerat sebegini

Mudah saja ya murid²..

cuma letakkan <s> di depan ayat/perkataan, dan diakhiri dengan </s> pada penghujungnya..

Sebagai contoh,

<s>ayat ini dikerat-kerat sebegini</s>

Tapi dalam ruangan komen ni tak boleh try test ye.. diorang accept <a>, <b> dan <i> je kalau tak silap..

Sekian dahulu :)

Tutorial: Drop Down Menu for Labels

Requested by cik Arnie

Ada 4 step saja sebenarnya.. actually 3.. step 1 bley je skip kalau confident :D

1. Backup template. Weee.. bunyi macam serius je kan.. ha ha ha..
   
   
2. Make sure dah add gadget Labels dalam Page Elements.
   
   
3. Pi kat Layout > Edit HTML. Cari
   
   
   <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
   
   Padam line tu dan paste dengan yang ada kat bawah ni.. (part ni yg orang seriau.. pasal ada padam² la plak kannn..)
   
   <b:widget id='Label1' locked='false' title='Labels' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   
   <br />
   <select onchange='location=this.options[this.selectedIndex].value;'>
   <option>Select a label</option>
   <b:loop values='data:labels' var='label'>
   <option expr:value='data:label.url'><data:label.name/>
   (<data:label.count/>)
   </option>
   </b:loop>
   </select>
   
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
   
   
4. Save dan silalah tengok blog anda :)

Siap!

Nota kaki: Kalau taknak ada nombor² kat tepi label macam ApaApaJe™, sila buangkan part ni >> (<data:label.count/>)

HowTo: Sticky Post Yang Betul-Betul Sticky

Tempoh hari, apabila membaca komen dari cik zailamohamad, saya terus gedik² mencari cara lain utk membuat sticky post seperti yg beliau maksudkan.. tp malangnya tak jumpa..

Anyway, sejujurnya, tutorial yg saya postkan itu adalah seswai untuk sticky post yg berstatus sementara.. means, untuk certain period of time sahaja.. Kalau dah tiba masa/tarikh yg kita setkan, sticky post itu akan tenggelam seperti posting² yg lain.

Mahukah anda membuat sticky post yg betul² melekat di atas? Contohnya seperti INFORMATION TENTANG H1N1 yg ada di bahagian atas posting blog saya ini.. Heeee.. Anda mau?

Inilah tutorialnya..

Ada 2 fasa ye.. First phase ni yg sedikit leceh.. tapi sikittt sangat..

Untuk fasa 1, caranya begini.

1. Pergi ke Layout >> Edit HTML
   
   
2. Cari benda² yg tertulis main-wrapper
   
   <div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section></div>
   
   Nampak tak showaddelement='no' tu? Haa.. tukarkan kepada 'yes' seperti di bawah.
   
   <div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section></div>
   
   
3. Save Template.

Kita ke fasa 2 pula :) yg mana yg ni lebih senang la sbb masing² mmg dah expert bab ni..

1. Pergi ke Layout >> Page Elements
   
   
2. Nampak tak dah ada Add a Gadget kat atas area Blog Posts tu? Haa.. tu la hasil dari fasa 1 ye kawan²..
   
   
   Macam biasa, kalau tak clear, boleh click to enlarge..
   Jangan malu² :)
   
   
   
3. Klik Add a Gadget, pilih Text. Tulis la apa² yg patut. Then Save :) Kalau nak add Adsense, pilihlah Adsense..
   
   
4. Kalau dah rasa menyampah dengan sticky post tu, simply Remove.

Siap!

Nota kaki: Sticky post yg ni takley bagi readers comment².. keras kejung je gitu.. ngeee.. apa² pun, anda telah mempunyai 2 cara sekarang, aye?

HowTo: Scheduled Post

Dah ada tutorial sticky post, saya gedik plak nak tambah tutorial untuk scheduled post.. sebab apa? sbb bley recycle je gamba yg ada.. ahAHaHahAHaha..

Cara-caranya adalah seperti berikut.

1. Compose new post
   
   
2. 
   
   Klik pada link Post Options. Then akan terpampang Post date and time di sebelah kanan.. Dalam konteks saya, formatnya adalah 8/6/09. 3:14 PM.
   
   
3. Untuk menjadikan post ini sebagai scheduled post, simply ubah masa untuk dipublish dan/atau date (jika perlu).
   
   Contoh, saya nak posting ini dipaparkan pada 7/8/2009 pada 12.34 tengah hari, maka saya tukarkan 8/6/09 kepada 8/7/09 DAN 3.14 PM kepada 12.34 PM.
   
   Ini bermakna, posting tersebut di akan auto-publish oleh pihak blogger pada tarikh & masa yg telah kita tetapkan.
   
   
4. Tekan butang Publish Post

Siap!

Scheduled post adalah sangat berguna kepada anda yang mempunyai terlampau banyak idea untuk ditulis pada satu² masa.. Nampak sangatlah ia kurang berguna untuk saya yg selalu kering ni.. :P

Sedikit makluman tambahan, JIKA ANDA TERTEKAN button Publish Post sebelum waktunya, edit balik post berkenaan dan save as Draft.. lepas tu, buat step 2 hingga 3.. orait?

HowTo: Sticky Post

ApaApaJe™ telah mendapat request dari Umi Sufira menerusi SMS yang telah menyampaikan hasrat dari seseorang bernama Intan Sarafina.. vadevas tak? Ha ha ha ha.. nak bagi link kat Intan Sarafina ke idak? ke nak bagi dia kekal sebagai misteri? Hihihihi..

Anyways, request adalah seperti di atas, ye?

Caranya begini..

1. Compose new post
   
   
2. Publish post tersebut, immediately.
   
   
3. Edit balik post tersebut.
   
   
4. 
   
   Klik pada link Post Options. Then akan terpampang Post date and time di sebelah kanan.. Dalam konteks saya, formatnya adalah 8/6/09.
   
   
5. Untuk menjadikan post ini sebagai sticky post, simply ubah date tu ke hadapan. Contoh, 8/30/09. Ini bermakna, posting tersebut akan kekal di atas, sehingga tarikh 30 Ogos 2009.
   
   
6. Tekan butang Publish Post sekali lagi.

Siap!

Nota kaki: Penulis adalah seorang pemberi tutorial yg mmg paling malas tahap dewa menyediakan gambar. Ha ha ha ha..

Tutorial : More About Link

Ramai antara kita dah tau macam mana nak buat link kan? Tapi perasan tak, kalau kita includekan URL tu, bila visitor klik, isi kandungan URL tersebut akan terus replace blog kita? Then, kalau org nak baca balik blog kita, kena taip URL blog ataupun hit Back button kat browser.. pastu nak tunggu blog kita load balik..

Soalan, macam mana nak buat link macam Blog List (alaa.. yg ada kat blog korang jugak tu..), bila kita klik, dia pi bukak window / tab yang baru?

Its simple. Cuma kena ada extra keje.. heee..

Caranya, once dah tambah link tu, pi kat button Edit HTML, pi kat link tersebut, dan tambahkan target="_blank" macam yg ada kat bawah ni..

<a href="http://apapaje.blogspot.com" target="_blank">

Dengan cara ini, window/tab baru akan dibuka dan tak akan mereplace blog kita dengan URL yg kita share dengan kawan² tadi..

http://apapaje.blogspot.com -- without target _blank

will replace this page with my blog, again :)

http://apapaje.blogspot.com -- with target _blank

will open a new window / tab

However, benda ni dah deprecated since 1999 (based on my reading..), means tak janji la dia bley jalan lagi in the future.. but as of now, it still works.. plus, its not a good practice as well for professional websites and what nots.. Good practice adalah dengan menggunakan javascript.. thats another story.. Saya taknak menjadi terlampau teknikal di sini.. heee..

Hope this helps :)

How to Change Your Blogger Favicon

Saya menggunakan step-by-step tutorial yg dibuat oleh Darwyn4 menerusi laman ini.

Berikut adalah tutorial yg ditulis oleh Darwyn4..

1. Design the icon and save it as png (ico is preferred, but it's harder to upload). The preferred resolution is 16x16, but i saved mine at 22x22 for greater quality, and it seems it works :) (i think 36x36 is the limit)
   
   Saya buat 36 x 36.. menggunakan GIMP 2.. guna Paint pun boleh.. otherwise, you can use any picture that you like and resize the image to 36x36.. cumanya, dah kecik sangat karang, tak nampak apa la plak.. thats why saya decide tulis CY saja :)
   
   
   keras kejung saja, you all..
   Kalau nak cantek², please hire the pro.. hihi..
   mama emma ada.. mama oja ada.. (sekadar menyebut beberapa nama)
   
   
   Then, saya save as *.png.. what is PNG? it stands for portable network graphics. Anyways, based on comments for the said tutorial, ada yg kata save as *.gif pun lepas..
   
   
   
2. Upload the icon somewhere (photobucket, pages.google.com), and copy the link
   
   Saya gunakan photobucket.. mmg setia dengan photobucket eversince saya start berblogging :) The rest boleh follow step 3-5 kat bawah ni..
   
   
   
3. Go to Edit HTML under the Template tab in your blog's dashboard
   
   
   
4. Find the following line (Ctrl+f) :
   <title><data:blog.pagetitle/></title>
   
   
   
5. Insert this code below it:
   <link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
   (replace "URL of your icon file" with the link you've copied at step 2)
   
   
   
6. Save the template.
   In order to see the change, close your page, delete the temporary internet files from your browser and reopen your page.
   
   Oh, saya tak buat pun.. just refresh je, tau² logo CY dah muncul :)
   Tu saja ye kawan².. selamat mencuba :)

Blog with YAN ®

Tengah hari ini, kita belajar satu lagi penanda yg tidak kurang glamer, iaitu registered mark.. Apakah itu registered mark? Ini ye kawan-kawan.. ® ← nampak tu?

Baiklah, caranya sama jugak, tekan alt, tapi kod atau angka-angka yg perlu ditaip ialah 0174.

Macam biasa, pastikan NumLock anda diaktifkan.. kalau tak, tak dapek den nak nolong yo..

Blog with YAN ®

Sekian dahulu sesi tutorial bersama CY3.5. Sehingga ketemu lagi di lain masa & hari :P

♥

Nota kaki: There are lots of characters yg cantik² yg boleh terhasil menerusi gabungan alt dan nombor².. Try la.. you'll be amazed.. silap² bley jumpa ♥ macam Ms L ☺

HowTo: Trademark ™ dan Copyright ©

Sejujurnya, tuan rumah takde idea apa benda nak tulis kat blog.. thus, keluarlah tutorial² ni..

Makanya, di tengah hari ini, kita cuba untuk membuat lambang trademark seperti ini ---> ™ dan copyright seperti ini ---> ©

Sebagai contoh,

Blog with YAN ™.. cewah..

ataupun, ataupun, © Copyright Reserved

Cukup² la contoh.. ok, begini caranya..

Untuk bikin trademark ™, sila tekan alt+0153.. coba, coba kau cobaaa..

Manakal untuk bikin copyright ©, sila tekan alt+0169..

Selamat mencuba ye?

Untuk mencuba, sila pastikan Num Lock anda dihidupkan/diaktifkan :D

Dari Apa2 ke Apa²

Nampak beza tak? Ngeee..

Macam2 jadik macam²

Tak perasan? Tak dapek la den nak nolong..



Anyways, untuk membuat nombor 2 pada macam2 menjadi superscript seperti macam² <--- ini, sila tekan alt+253..

Tu je nak share pagi² ni.. :)

Tutorial : Disable Picture to be Enlarged

Nasib la kalau tajuk tutorial ni ke laut :P This one was requested by Sya, ibu kecik molek anak 2..

Cara-cara:

1. Load gambar ke dalam er, posting korang..
   
   
2. Dah load?
   
   Ni saya punya..
   
   
   Masih bley diklik utk enlarge..
   
   
3. Now, pi klik kat tab Edit HTML..
   
   
4. Untuk gambar yang saya load kat #2, rupanya begini
   
   
   
   <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbbsgWRXQCH29l4V8Aj4lQ1CJM6NST7fdsKSMGlZKv3uZ6qhzQgD1sRdBpgB1d9Ib3ZjpOQEu4__LklFL6WTWCiTaUGMD5XMb1Un_klbnrhe4WiWLtdgpPYiy-wVCl9edzYLDqA/s1600-h/25102007_edit.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbbsgWRXQCH29l4V8Aj4lQ1CJM6NST7fdsKSMGlZKv3uZ6qhzQgD1sRdBpgB1d9Ib3ZjpOQEu4__LklFL6WTWCiTaUGMD5XMb1Un_klbnrhe4WiWLtdgpPYiy-wVCl9edzYLDqA/s400/25102007_edit.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5351564021087988578" /></a>
   
   
   
5. Untuk taknak bagi enlarge, buang bab2 yg start dengan <a sampai la dekat2 nak jumpa <img.. the one yg saya highlight kaler kuning tu la kaedahnya..
   
   
   
   <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbbsgWRXQCH29l4V8Aj4lQ1CJM6NST7fdsKSMGlZKv3uZ6qhzQgD1sRdBpgB1d9Ib3ZjpOQEu4__LklFL6WTWCiTaUGMD5XMb1Un_klbnrhe4WiWLtdgpPYiy-wVCl9edzYLDqA/s1600-h/25102007_edit.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbbsgWRXQCH29l4V8Aj4lQ1CJM6NST7fdsKSMGlZKv3uZ6qhzQgD1sRdBpgB1d9Ib3ZjpOQEu4__LklFL6WTWCiTaUGMD5XMb1Un_klbnrhe4WiWLtdgpPYiy-wVCl9edzYLDqA/s400/25102007_edit.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5351564021087988578" /></a>
   
   
   
   
   
6. Hasilnya.. haaa.. tak bley click dah kan? heee..
   
   
   

Tutorial : No Right Click

A request from Rina-san.

Bahan-bahan:

1. Connection internet :P

Cara-cara:

1. Login ke Blogger.com
2. Klik kat Layout
3. Klik Add A Gadget, pilih HTML/Javascript
4. Paste code kat bawah ni.. Highlight dan tekan Ctrl+C :)
   
   
   
   <script language="JavaScript">
   <!--
   
   //Disable right click script III- By Renigade (renigade@mediaone.net)
   //For full source code, visit http://www.dynamicdrive.com
   
   var message="";
   ///////////////////////////////////
   function clickIE() {if (document.all) {(message);return false;}}
   function clickNS(e) {if
   (document.layers||(document.getElementById&&!document.all)) {
   if (e.which==2||e.which==3) {(message);return false;}}}
   if (document.layers)
   {document.captureEvents(Event.MOUSEDOWN);
   document.onmousedown=clickNS;}
   else{document.onmouseup=clickNS;
   document.oncontextmenu=clickIE;}
   
   document.oncontextmenu=new Function("return false")
   // -->
   </script>
   
   
   
   
   
5. Save, dan View Blog anda..

Tutorial Widget Baru Nuffnang

Berikut adalah cara-cara utk menambah widget terbaru dari Nuffnang.

1. Login ke Nanang
   
   
2. Klik kat er, menu XCHANGE (bar dia kaler biru muda)
   
   
3. Pilih theme, tekan button Change Theme
   
   
4. Copy code yg dalam kotak kedua.. (yg 1st saya dah try.. takley save :P)
   
   
5. Pi kat blogger dashboard..
   
   
6. Pi kat Layout >> Edit HTML
   
   
7. Scroll sampai bawah
   Jumpa je baris ni
   < / body>
   < / html>
   Paste code tadi SEBELUM tag tu.
   
   
   Nampak tak? bley click to enlarge ye..
   
   
8. Save template.. Wallah!
   

Maaf ye, tutorial gue tiada gamba.. saya mmg seorang yg penuh dengan teks sahaja.. ha ha ha..

Updated @ 1558hrs : Madam Za, tu ada gamba sebijik.. 

Kepada Pengguna Widget Top Commenters

Tapi, tak kuar isinya :)

OK, cara-caranya mudah saja ya.. Sila semak sama ada anda dah open feed utk komen ataupun tidak.

1. Pi kat Dashboard
   
   
2. Pi kat Settings
   
   
3. Pi kat Site Feed
   
   
4. Bab2 yg tulis Comment Feed tu, letakkan kepada Full.. rasanya tak kesah kot benda2 lain asalkan jangan None.. bab ni saya kurang pasti.. pasal saya set Full.. koser nak experiment kalau letak short, dia jadik apa..

Apa lagi, refresh le blog kome :)

Sekian,
khidmat masyarakat dari CY3.

Untuk yang dah terjebak dengan Nuffnang

Cara untuk letak code Nuffnang dalam content..

1. Pi kat Dashboard
   
   
2. Klik Layout
   
   
3. Klik Edit HTML
   
   
4. Klik Expand Widget Templates

Then, dekat-dekat area ni..

<div class="post-body entry-content">

<data:post.body>

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

</div>

<!-- nuffnang -->

tempek kod nuffnang kat sini

<!-- nuffnang-->

<div class="post-footer">

<div class="post-footer-line post-footer-line-1"><span class="post-author vcard">

Actually placement dia tak kesah je kat mana2.. whether b4 comment link or after.. tp yg ni utk yg b4 comment link.. just like mine..

Hope this helps :)

5 comments

Tutorial : Image

Acapkali juga saya menerima soalan

eh, kalau taknak upload gamba kat blogger, bley amik terus tak dari web?

Letih la nak load2 gambar dulu.. ada shortcut tak?

Jawapannya, yep.. ada.

Step nya

1. copy URL gambar yg anda inginkan.. biasanya ada dalam properties right click..
   
   
2. pergi ke laman compose blog anda.. gunakan tab Edit HTML dan taipkan ini
   

<img src="http://URL_GAMBAR_YG_DAH_DICOPY" />

senang kan?

berikut adalah contoh yg saya gunapakai..

gambar di atas saya amik straight fwd je.. aci dak pi kat google image, taip gambar contoh, kuar gambar ni? kekeke..

pasti ada yg akan bertanya

kenapa gambar tu besar sangat? tak cun la pulak!

mmg dalam contoh ni besar kan? kekeke.. memanglah.. sebab dah amik straight dari source.. mana taknya, size asalnya ialah 452px (tinggi) manakala lebarnya ialah 602px..

TAPI, kita boleh adjust size utk kita display dengan menambahkan ini..

<img src="http://URL_GAMBAR_YG_DAH_DICOPY" width="80" height="100" />



untuk gambar ini saya gunakan lebar 320, manakala tingginya ialah 240..

see the difference?

Nota kaki: Tutorial ini hanya boleh digunapakai utk gambar2 yg sedia ada di internet. i.e Google Images, photobuckets & such.. kalau ada dalam PC korang, tak dapek la den nak nolong aih!

15 comments