Assalamualaikum W.B.T
kepada semua pengunjung blog Whitey Mommy.
dah cukup lama saya tak buat tutorial kan...
heheh ada yang kata saya kedekut ilmu la. macam2 lagi.
sebenarnya yang paling utama adalah saya sibuk menyiapkan order2 daripada customer.
dan juga sibuk dengan melayan Kerenah Khalis.
yang keduanya.
mood saya untuk buat tutorial padam dan lesap terus lepas ada beberapa blogger seakan2 tidak tahu dengan adab sopan.
ada yang siap hantar email kepada saya senaraikan tutorial yang dikehendaki dan ada juga yang menyertakan dengan kata2 sinis. ada juga yang siap mengarah2 untuk buat tutorial itu tutorial ini...satu je jawapan saya...[google dik...google... ilmu itu luas diluar sana...]
pergh!!! pedas dowh... hahaha.. apa lagi... sentap la seposen...
jadi saya buat keputusan TAK NAK lagi buat tutorial..
jadi adik2 pakai ajelah tutorial yang mana ada tu ya...:)
lagi pulak dah ramai dah...yang buat tutorial yang sama. dan tutorial mereka lagi mantap daripada teknik saya. hehehe tambah pulak kebanyakan dalam blog design saya sekarang ni .
saya banyak menggunakan teknik try and error. jadi kalau nak buat tutorial.
4 hari 4 malam pun saya tak tahu nak explain macam mana.
lagi pun saya bukan pandai sangat mengajar..
hehehe...
Ramai customer yang request nak suruh saya design blog cepat loading...
ok macam ni..
saya akan kemukakan semua tips2 yang saya tahu untuk cepatkan loading blog.
terutamanya untuk blog perniagaan kan...mesti tak nak customer dan juga bakal-bakal customer tunggu lama untuk loading blog kan.
ada caranya.
ianya tidak bergantung kepada blog design semata2.
kita sebagai blogger juga harus ada ilmu untuk membuat blog kita loading dengan cepat. dan saya panggil cara manual [kerana ianya tidak begantung kepada coding template ataupun penambahan sebarang script tapi bergantung kepada kreativiti kita untuk menyusun atur blog kita..:)]...
Satu lagi. untuk template yang menarik, cantik , tertarik [kau memang da boom] penggunaan image amat diperlukan. kalau nak harapkan 100% coding memang tak dapat la den nak nolong. hehehe itu namanya design blog. kalau pakai coding aje. itu namanya coding blog. :D
Tak pe..soon saya akan reveal teknik untuk blog cepat loading.
teknik ini sebenarnya berdasarkan saya punya pendapat dan saya praktikkan untuk blog saya... dan setakat ni berjaya.
merangkumi yang saya baca di blog-blog tutorial dan juga yang saya konon2 pandai untuk reka sendiri...:P
saya akan cuba taip entry dengan selengkapnya... untuk membantu pemahaman semua orang...tapi ambil masa...sebab diselang2 selikan dengan nak buat kerja saya lagi...:) nak menyenaraikan bukan senangnya...
sebab biasanya... saya tak senaraikan pun...bila saya tengok..otak saya on the spot tahu apa solutionnya... kira secara spontan...jadi kalau nak senaraikan memang ambil masa. sebab nak recall tips tu bukan senang ya..
dan yang paling penting taip sendiri. bukan copy paste..:D
Semoga tips itu nanti akan memberi manfaat...:D
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!
Showing posts with label My Tutorial. Show all posts
Showing posts with label My Tutorial. Show all posts
Tutorial: Cara Meletakkan Background pada Comment Form
Ramai yang tanya pasal macam mana nak buat background pada comment form kan... actually saya punya tu pakai coding... macam susah je nak ajar... jadi ni saya cari yang mudah sikit nak faham...
sebab ada coding sikit lepas tu... semuanya diubah pada CSS code... jadi saya harap senang sikit nak faham kan...
Maaf sesangat... memang ada tutorial yang saya tak leh nak buat... masa limit... tengah duk belajar untuk wat artwork... design blog klien... blog design sendiri pun tak siap2 lagi...
Jadi saya tengok... rata2 duk tanya pasal macam mana nak buat background kan... amik kat sini...
Kazumiro@budak nakal....
Hope dapat membantu...:) background tu anda design dan ubah la ikut kreativiti ya...
Selamat Mencuba...:)
sebab ada coding sikit lepas tu... semuanya diubah pada CSS code... jadi saya harap senang sikit nak faham kan...
Maaf sesangat... memang ada tutorial yang saya tak leh nak buat... masa limit... tengah duk belajar untuk wat artwork... design blog klien... blog design sendiri pun tak siap2 lagi...
Jadi saya tengok... rata2 duk tanya pasal macam mana nak buat background kan... amik kat sini...
Kazumiro@budak nakal....
Hope dapat membantu...:) background tu anda design dan ubah la ikut kreativiti ya...
Selamat Mencuba...:)
Tutorial: Cara Masukkan Widget Twitter [Pilihan Whitey Mommy]
Tangan ni asyik nak menaip walau tahu diri ini busy dengan Khalis dan design... Kalau Khalis tak tidur... memang tak leh nak sentuh langsungla bab design2 ni... Saya nak share widget twitter pilihan saya... saya rasa semua orang pun tahu mana nak ambil widget ni kan... tapi pilihan saya lain... saya nak yang berkaitan dengan ID twitter saya nampak kat widget tu...
Kalau sesiapa berminat... follow aje step mudah dibawah ya...
1. Mula-mula login ke Twitter bagi yang tiada twitter boleh la sign up ya... [actually saya pun masih baru dalam bertweet tweet ni... sampai saat ni saya tak jumpa lagi any specialty untuk laman sosial ini..] tapi tengok orang lain ada... saya pun nak juga...;p
2. Klik pada Resources... seperti yang saya petakkan dalam gambar diatas...
3. Kemudian Klik pada Widgets...
4. Selepas itu, Klik pada My Website
5. Skrin akan dipaparkan seperti gambarajah diatas... anda perlu memilih Search Widget [ini lah widget yang saya guna]
6. Kemudian anda perlu mengedit bahagian2 ini... yang penting, pada kotak Search Query : anda perlu menaip ID yang anda guna untuk twitter... dan dikuti dengan Title dan Caption yang boleh disukahatikan oleh anda..:)
Bahagian Preference, Appearance dan Dimension pula terpulanglah pada anda untuk di adjust macam mana...:)
7. Setiap kali anda setting untuk Preference dan Appearance, anda boleh tekan Test Settings untuk melihat rupa bentuk widget anda... dan Last sekali... klik Finish & Grab Code dan copy semua code yang ada dalam kotak yang tertera.
Kemudian buka blogspot Klik Layout > Add a Gadget Javascript / HTML dan pastekan code yang anda copy kedalam kotak ... dan save...
Siap... Selamat Mencuba ya...:)
Kalau sesiapa berminat... follow aje step mudah dibawah ya...
1. Mula-mula login ke Twitter bagi yang tiada twitter boleh la sign up ya... [actually saya pun masih baru dalam bertweet tweet ni... sampai saat ni saya tak jumpa lagi any specialty untuk laman sosial ini..] tapi tengok orang lain ada... saya pun nak juga...;p
5. Skrin akan dipaparkan seperti gambarajah diatas... anda perlu memilih Search Widget [ini lah widget yang saya guna]
Bahagian Preference, Appearance dan Dimension pula terpulanglah pada anda untuk di adjust macam mana...:)
Kemudian buka blogspot Klik Layout > Add a Gadget Javascript / HTML dan pastekan code yang anda copy kedalam kotak ... dan save...
Siap... Selamat Mencuba ya...:)
Tutorial : Kotak Maklumat Penulis
Sebenarnya dah lama nak buat tutorial ini... Ini lah tutorial yang saya pernah cakap pemiliknya mengajar saya melalui chatting di Facebook... Saya ni terkadang ada masa nak buat tutorial... kekadang tak de masa... kalau saya rasa nak taip tutorial, maka saya akan taip... kalau ada sesiapa yang request saya mohon maaf... memang tak sempat nak tunaikan...
Tujuan utama saya buat tutorial ni... saya nak simpan dan sematkan dalam blog saya ni... dan sekaligus untuk share dengan anda... kalau ada yang copy dari blog saya tu jangan lupa ya... put kredit...:p hehehe
hehehe kalau nak lagi cepat... rajin2 google tutorial... kat situ lagi cepat informasi anda akan dapat...:)
Ok...sambung dengan tutorial... jika ada sesiapa yang berminat boleh la follow step di bawah ya... follow betul2 untuk mendapat hasil yang terbaik...
1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi sekurang-kurangnya template anda dah ada backup... ]
2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]
3. Copy dan paste code dibawah, diatas atau sebelum code ]]></b:skin.
** Bahagian ini anda perlu olah mengikut kreativiti sendiri ya... dari segi warna dan bentuk serta segala2nya... kreatif sikit ya...:) kalau tak nak ubah pun.. guna kod diatas ni pun dan cantik dah...:)
4. Seterusnya cari pula kod <div class='post-footer-line post-footer-line-3'> dan tampal kod ini dibawahnya.
* Bahagian [link profil], anda perlu masukkan link tentang maklumat diri anda@biodata anda
** Bahagian [gambar profil], anda perlu masukkan link gambar anda yang anda ingin kelihatan pada kotak itu...
*** Bahagian yang saya highlightkan dengan warna BIRU. anda boleh olah mengikut ayat yang anda suka.
****Akhir sekali bahagian yang saya highligtkan dengan warna KUNING, anda perlu masukkan link anda sendiri...
5. Anda Boleh save [pastikan anda save dahulu kalau preview tak kan nampak sebab kotak ini hanya akan boleh lihat apabila apabila entry dibuka] dan tengok hasilnya... Selamat Mencuba.
Kredit Kepada: Eriyza Qistina
Tujuan utama saya buat tutorial ni... saya nak simpan dan sematkan dalam blog saya ni... dan sekaligus untuk share dengan anda... kalau ada yang copy dari blog saya tu jangan lupa ya... put kredit...:p hehehe
hehehe kalau nak lagi cepat... rajin2 google tutorial... kat situ lagi cepat informasi anda akan dapat...:)
 |
| Kotak maklumat yang saya maksudkan |
1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi sekurang-kurangnya template anda dah ada backup... ]
2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]
3. Copy dan paste code dibawah, diatas atau sebelum code ]]></b:skin.
/************************************************
* Author Information *
************************************************/
#authorinfo{
margin:0 0 5px;
padding: 4px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 12px;
-moz-box-shadow: #600 0 2px 7px;
width:auto;text-shadow:0 1px 0 #FFFFFF;
}
#authorinfo .informasi {
line-height: 16px;margin:0;
padding:2px;
height:120px;
}
#authorinfo .informasi a {
text-decoration:none !important;
}
#authorinfo img {
float:left;
margin: 2px 8px 2px 2px;
padding:0;
width:110px;
height:110px;
border:2px solid #999;
}
#authorinfo .informasi ul, #authorinfo .informasi ul li {
margin:0;
padding:0;
list-style-type:none;
}
* Author Information *
************************************************/
#authorinfo{
margin:0 0 5px;
padding: 4px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 12px;
-moz-box-shadow: #600 0 2px 7px;
width:auto;text-shadow:0 1px 0 #FFFFFF;
}
#authorinfo .informasi {
line-height: 16px;margin:0;
padding:2px;
height:120px;
}
#authorinfo .informasi a {
text-decoration:none !important;
}
#authorinfo img {
float:left;
margin: 2px 8px 2px 2px;
padding:0;
width:110px;
height:110px;
border:2px solid #999;
}
#authorinfo .informasi ul, #authorinfo .informasi ul li {
margin:0;
padding:0;
list-style-type:none;
}
** Bahagian ini anda perlu olah mengikut kreativiti sendiri ya... dari segi warna dan bentuk serta segala2nya... kreatif sikit ya...:) kalau tak nak ubah pun.. guna kod diatas ni pun dan cantik dah...:)
4. Seterusnya cari pula kod <div class='post-footer-line post-footer-line-3'> dan tampal kod ini dibawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div id='authorinfo'>
<div class='informasi'>
<a href='[link profil]'><img src='[gambar profil]'/></a>
<ul>
<li>Artikel ini ditulis oleh <a href='[link profil]' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
<li>Diterbitkan pada : <b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><a expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if></b:if></li>
<li>Dalam kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></li>
<li>Telah dibaca sebanyak <a expr:href='data:blog.homepageUrl'><script src='http://illusionss.110mb.com/mc/view.php' type='text/javascript'/></a> kali, <a href='#comment-form'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a> komen</li>
<li>Langgan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='http://feeds.feedburner.com/WhiteyMommy' target='_blank' title='Langgan Artikel via RSS Feed'>RSS Feed</a></li>
Tambah sebagai rakan di <a href='http://facebook.com/SitiNorKhaironisha' target='_'>Facebook</a> dan <a href='http://twitter.com/WhiteyMommy' target='_'>Twitter</a>
</ul>
</div>
</div>
</b:if><br/>
<div id='authorinfo'>
<div class='informasi'>
<a href='[link profil]'><img src='[gambar profil]'/></a>
<ul>
<li>Artikel ini ditulis oleh <a href='[link profil]' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
<li>Diterbitkan pada : <b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><a expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if></b:if></li>
<li>Dalam kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></li>
<li>Telah dibaca sebanyak <a expr:href='data:blog.homepageUrl'><script src='http://illusionss.110mb.com/mc/view.php' type='text/javascript'/></a> kali, <a href='#comment-form'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a> komen</li>
<li>Langgan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='http://feeds.feedburner.com/WhiteyMommy' target='_blank' title='Langgan Artikel via RSS Feed'>RSS Feed</a></li>
Tambah sebagai rakan di <a href='http://facebook.com/SitiNorKhaironisha' target='_'>Facebook</a> dan <a href='http://twitter.com/WhiteyMommy' target='_'>Twitter</a>
</ul>
</div>
</div>
</b:if><br/>
* Bahagian [link profil], anda perlu masukkan link tentang maklumat diri anda@biodata anda
** Bahagian [gambar profil], anda perlu masukkan link gambar anda yang anda ingin kelihatan pada kotak itu...
*** Bahagian yang saya highlightkan dengan warna BIRU. anda boleh olah mengikut ayat yang anda suka.
****Akhir sekali bahagian yang saya highligtkan dengan warna KUNING, anda perlu masukkan link anda sendiri...
5. Anda Boleh save [pastikan anda save dahulu kalau preview tak kan nampak sebab kotak ini hanya akan boleh lihat apabila apabila entry dibuka] dan tengok hasilnya... Selamat Mencuba.
Kredit Kepada: Eriyza Qistina
Tutorial: Cara Membuat Slider
Saya nak sharing cara untuk membuat slider, sebenarnya dah lama nak bagi tutorial ni... tapi sebelum wat tutorial ada a few yang saya kena study... terutama tang kod2 tu...:)
Perasan kan kat blog saya tetiba ada slide show... itu sebenarnya sementara sahaja, saya lakukan eksperimen untuk tutorial ini ... dan bakal di remove la selepas ni... hehehe... mungkin buat masa ni slide show rasanya tak diperlukan lagi kot... hehehe
1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi sekurang-kurangnya template anda dah ada backup... ]
2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]
3. Copy dan paste code dibawah diatas atau sebelum code ]]></b:skin.
*Perkataan yang saya highlightkan dengan warna purple itu adalah untuk memudahkan lagi pemahaman anda tentang function untuk setiap code... di bawah ini adalah penerangan tentang code2 tersebut... saya hanya highlightkan yang mana penting sahaja... yang lain anda harus olah mengikut kreativiti anda...
*Bahagian yang berwarna merah ini, adalah warna untuk slider anda... anda boleh menukarnya dengan image ataupun menggunakan warna [iaitu coding sedia ada yang saya berikan] untuk penukaran warna... anda boleh rujuk kod warna html dan juga rgb disini
** Bahagian width dan height serta top dan right yang saya highlightkan adalah perlu diubah berdasarkan kesesuaian dengan saiz yang anda kehendaki...:) boleh try and error...
[Pada saya part itu yang paling penting... di kod yang lain2 anda boleh ubah mengikut kreativiti anda... hehehe kalau nak lagi senang... guna aje kod yang saya beri diatas... just tukar warna aje... kalau tak nak pening2 la...:p]
2. Copy dan pastekan javascript ini dibawah atau selepas code ]]></b:skin.
*Jika tiada kod ini, slider anda tidak akan bergerak ya...;)
3. Klik Page Element > Add a Gadget Javascript / HTML
[Saya menggunakan pendekatan yang berbeza dengan saudara Almasuqie ini... saya pastekan pada widget supaya tidak mengganggu appearance pada bahagian Design...]
4. Copy kod di bawah dan Pastekan kedalamnya
*Pastikan pada tajuk anda tidak menaip2 apa perkataan dan terus save... kemudian... anda perlu drag widget HTML tersebut keatas bahagian post... seperti gambarajah dibawah...
[cara untuk drag adalah pastikan lambang anak panah 4 penjuru berada pada kotak widget dan hold mouse anda sehinggalah ke bahagian atas blog post, lepas apabila widget yang di drag betul2 lekat pada bahagian atas post]
**Terpulang kepada anda mahu letak dimana slider tersebut[ tetapi berdasarkan tutorial saya... saya prefer letak diatas blog post...
*** Dibawah ini adalah penerangan tentang kod2 ya... supaya anda lebih memahami terma2 yang diberikan...
a)Link-Artikel-Disini -link artikel/entry anda perlu paste disini.
b)Tajuk-Post-Disini - Tajuk yang anda ingin letak untuk entry tersebut
c) Posted by Author On Month - Day - Year - Taipkan nick name/nama anda disini dan juga tarikh entry berkenaan.
d) Potongan-Artikel-Disini - Keratan artikel/entry anda yang ingin anda letak pada slider untuk dijadikan sebagai intro dan menarik minat pembaca untuk membaca entry penuh...
e) Link-Gambar-Disini - Link gambar yang anda ingin letakkan pada post di slider anda...
[Harap penerangan yang saya berikan ini jelas...;)
5. Untuk menambahkan bilangan post, anda boleh menambah code dibawah sebelum atau diatas
</div>
<!-- /Mover -->
6. Semasa proses untuk membuat tutorial ini, anda boleh sentiasa preview template anda untuk melihat hasilnya... dan jika semuanya anda sudah berpuas hati... boleh save...dan enjoy your slider...:)
Kredit Kepada : Almansuqie
Berdasarkan eksperimen saya... ada a few kelemahan dan cara mengatasinya bagi penggunaan slider ini.
1. Slider ini tak boleh bertahan lama... mungkin selepas beberapa ketika ia akan berhenti untuk beroperasi, cara mengatasinya adalah anda perlu meminimumkan bilangan post pada slider [letak yang mana penting aje...;)]
2. Saya nasihatkan anda tidak menggunakan slider yang lebih besar kerana ini akan membuatkan template anda akan mengalami lambat untuk load.
3. Anda perlu upload gambar [bagi mendapatkan url ] yang anda ingin masukkan pada post di Imageshack [recomended] kerana bila saya cuba upload di blogger slider tidak dapat detect image yang saya link kan...
setakat ini itu sahaja result dari eksperimen saya...;p
Selamat mencuba...dan semoga berjaya...dan jangan lupa tinggalkan komen ya..;)
Perasan kan kat blog saya tetiba ada slide show... itu sebenarnya sementara sahaja, saya lakukan eksperimen untuk tutorial ini ... dan bakal di remove la selepas ni... hehehe... mungkin buat masa ni slide show rasanya tak diperlukan lagi kot... hehehe
Ok ... Tutorial ni panjang sikit sila baca betul2 sebelum mencuba tutorial ni...
Tutorial ini adalah saya olah daripada Tutorial Almansuqie...kalau ada yang nak follow tutorial dia pun tak de masalah... sama je... cuma cara berbeza...:) kepada sesiapa yang berminat... sila ikut step dibawah dengan betul... 
1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi sekurang-kurangnya template anda dah ada backup... ]
2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]
3. Copy dan paste code dibawah diatas atau sebelum code ]]></b:skin.
/* ----------------Slider---------- */
#slider {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 12px;
-moz-box-shadow: #600 0 2px 7px;
position: relative;
border:2px solid #eee;
margin: 0px;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width:550px /* Panjang Slider */;
float: left;
position: relative;
height:220px;/* Lebar Slider */
}
.slide h2 {/* Tajuk Post */
background:#eee;
border-bottom:3px solid #eee;
font-size: 20px;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
text-transform:none;
color: #eee;
padding:0px 0px 0px 0px;
margin:-5px 0px;
width:550px;/* Panjang Tajuk Post Slider */
text-align:center;
overflow:hidden;
line-height:1.4em;
font-weight:bold;
}
.slide h2 a:link, .slide h2 a:visited {
color:#000;
background-color: transparent;
}
.slide h2 a:hover {
color: #eee;
background-color: transparent;
}
span.slmet {/* Petikan Post */
color:#ed217c;
font-size: 14px;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
font-size:10px;
line-height: 20px;
width: 300px;
padding:5px 0px 0px 7px;
margin:0px 0px;
text-transform:uppercase;
font-weight:bold;
}
.slide p {/* Post By Disini */
text-align:justify;
color: #000;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
font-size:14px;
line-height: 20px;
width: 330px;
padding:0px 0px 0px 7px;
margin:0px 0px;
}
.slide img {/* Gambar Pada Slider */
position: absolute;
right: 63px;
background:transparent;
padding:0px;
border:0px solid #000;
}
#slider-stopper {/* Butang Stop */
background:#eee;
padding:5px;
position: absolute;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: none;
z-index: 1000;
}
#slider {
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 12px;
-moz-box-shadow: #600 0 2px 7px;
width:550px;
height: 250px;
overflow: hidden;position: relative;
border:2px solid #eee;
margin: 0px;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width:550px /* Panjang Slider */;
float: left;
position: relative;
height:220px;/* Lebar Slider */
}
.slide h2 {/* Tajuk Post */
background:#eee;
border-bottom:3px solid #eee;
font-size: 20px;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
text-transform:none;
color: #eee;
padding:0px 0px 0px 0px;
margin:-5px 0px;
width:550px;/* Panjang Tajuk Post Slider */
text-align:center;
overflow:hidden;
line-height:1.4em;
font-weight:bold;
}
.slide h2 a:link, .slide h2 a:visited {
color:#000;
background-color: transparent;
}
.slide h2 a:hover {
color: #eee;
background-color: transparent;
}
span.slmet {/* Petikan Post */
color:#ed217c;
font-size: 14px;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
font-size:10px;
line-height: 20px;
width: 300px;
padding:5px 0px 0px 7px;
margin:0px 0px;
text-transform:uppercase;
font-weight:bold;
}
.slide p {/* Post By Disini */
text-align:justify;
color: #000;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
font-size:14px;
line-height: 20px;
width: 330px;
padding:0px 0px 0px 7px;
margin:0px 0px;
}
.slide img {/* Gambar Pada Slider */
position: absolute;
width:130px;
height:170px;
top: 80px;right: 63px;
background:transparent;
padding:0px;
border:0px solid #000;
}
#slider-stopper {/* Butang Stop */
background:#eee;
padding:5px;
position: absolute;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
top: 85px;
right: 5px;
color: #000;padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: none;
z-index: 1000;
}
*Perkataan yang saya highlightkan dengan warna purple itu adalah untuk memudahkan lagi pemahaman anda tentang function untuk setiap code... di bawah ini adalah penerangan tentang code2 tersebut... saya hanya highlightkan yang mana penting sahaja... yang lain anda harus olah mengikut kreativiti anda...
*Bahagian yang berwarna merah ini, adalah warna untuk slider anda... anda boleh menukarnya dengan image ataupun menggunakan warna [iaitu coding sedia ada yang saya berikan] untuk penukaran warna... anda boleh rujuk kod warna html dan juga rgb disini
** Bahagian width dan height serta top dan right yang saya highlightkan adalah perlu diubah berdasarkan kesesuaian dengan saiz yang anda kehendaki...:) boleh try and error...
[Pada saya part itu yang paling penting... di kod yang lain2 anda boleh ubah mengikut kreativiti anda... hehehe kalau nak lagi senang... guna aje kod yang saya beri diatas... just tukar warna aje... kalau tak nak pening2 la...:p]
2. Copy dan pastekan javascript ini dibawah atau selepas code ]]></b:skin.
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
*Jika tiada kod ini, slider anda tidak akan bergerak ya...;)
3. Klik Page Element > Add a Gadget Javascript / HTML
[Saya menggunakan pendekatan yang berbeza dengan saudara Almasuqie ini... saya pastekan pada widget supaya tidak mengganggu appearance pada bahagian Design...]
4. Copy kod di bawah dan Pastekan kedalamnya
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>
*Pastikan pada tajuk anda tidak menaip2 apa perkataan dan terus save... kemudian... anda perlu drag widget HTML tersebut keatas bahagian post... seperti gambarajah dibawah...
[cara untuk drag adalah pastikan lambang anak panah 4 penjuru berada pada kotak widget dan hold mouse anda sehinggalah ke bahagian atas blog post, lepas apabila widget yang di drag betul2 lekat pada bahagian atas post]
*** Dibawah ini adalah penerangan tentang kod2 ya... supaya anda lebih memahami terma2 yang diberikan...
a)Link-Artikel-Disini -link artikel/entry anda perlu paste disini.
b)Tajuk-Post-Disini - Tajuk yang anda ingin letak untuk entry tersebut
c) Posted by Author On Month - Day - Year - Taipkan nick name/nama anda disini dan juga tarikh entry berkenaan.
d) Potongan-Artikel-Disini - Keratan artikel/entry anda yang ingin anda letak pada slider untuk dijadikan sebagai intro dan menarik minat pembaca untuk membaca entry penuh...
e) Link-Gambar-Disini - Link gambar yang anda ingin letakkan pada post di slider anda...
[Harap penerangan yang saya berikan ini jelas...;)
5. Untuk menambahkan bilangan post, anda boleh menambah code dibawah sebelum atau diatas
</div>
<!-- /Mover -->
<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>
6. Semasa proses untuk membuat tutorial ini, anda boleh sentiasa preview template anda untuk melihat hasilnya... dan jika semuanya anda sudah berpuas hati... boleh save...dan enjoy your slider...:)
Kredit Kepada : Almansuqie
Berdasarkan eksperimen saya... ada a few kelemahan dan cara mengatasinya bagi penggunaan slider ini.
1. Slider ini tak boleh bertahan lama... mungkin selepas beberapa ketika ia akan berhenti untuk beroperasi, cara mengatasinya adalah anda perlu meminimumkan bilangan post pada slider [letak yang mana penting aje...;)]
2. Saya nasihatkan anda tidak menggunakan slider yang lebih besar kerana ini akan membuatkan template anda akan mengalami lambat untuk load.
3. Anda perlu upload gambar [bagi mendapatkan url ] yang anda ingin masukkan pada post di Imageshack [recomended] kerana bila saya cuba upload di blogger slider tidak dapat detect image yang saya link kan...
setakat ini itu sahaja result dari eksperimen saya...;p
Selamat mencuba...dan semoga berjaya...dan jangan lupa tinggalkan komen ya..;)
Tutorial: Cara meletakkan Icon Berbeza pada Sidebar
Hari ni 3 tutorial saya keluarkan... hehehe bukan apa... selagi tutorial itu tak melanggar etika kerja saya... Insyaallah saya akan cuba tunaikan ya... [jangan la terus terang tanya: Mommy, ajar i cemana nak design template... hehehe tak beragak tanya kan...:p] hehehe jokes ok... tapi kalau ada yang tanya camtu saya memang tak boleh nak jawab la... 1st... it's my job [giler kedekut ar... hehehe] 2nd... saya tak tahu nak ajar macam mana... sebab bila saya design... idea akan datang dan tangan akan bergerak...[it's a gift, tapi kekadang blur juga...;p]
Ok... Continue with tutorial, actually tutorial ni... ada seorang blogger yang request... DeCrew yang request...tanyanya camner saya wat icon sebelah sidebar... ok... tanpa buang masa...pada siapa yang nak tahu follow step kat bawah...
 |
| Perhati gambar ni... icon berbezakan... ok.. dah pahamkan apa yang dimaksudkan...:) |
1. Log In @ Klik ke Dashboard > Layout > Edit HTML [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi boleh backup balik... kerana jika berlaku kesilapan, bahagian post anda akan hilang... sila ambil langkah berjaga2 ya...]
2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]
3. Copy dan paste code dibawah diatas atau sebelum code ]]></b:skin.
#Text2 h2 {
background:url("url gambar anda suka") no-repeat scroll right 2px #ffffff ;
color:#000000;
font-size:18px;
text-align:right;
padding-right:50px;
padding-top:10px;
padding-bottom:10px;
}4. Huraian bagi code diatas, rujuk kat bawah ya:
a) warna purple adalah ID bagi widget anda.. ini penting, anda perlu mengambil ID pada widget anda...cara untuk mengambil "ID widget" adalah seperti gambarajah dibawah.
 |
| cara untuk mengambil id widget : pastikan anda perhati betul2 ya... |
b) warna merah ini penting, kerana jika tiada ini maka tiada la gambar, masukkan url gambar anda suka pada bahagian ini. anda boleh cari icon yang anda suka disini atau pun anda boleh design sendiri. lebih cantik jika anda menggunakan icon yang sama saiz [kreativiti anda diperlukan untuk bahagian ini...] dan warna bagi background pula anda boleh tukar pada #ffffff dengan warna kegemaran anda.
c) warna biru ini pula adalah warna text tajuk sidebar anda... anda boleh tukar dengan warna yang anda suka.
d) warna hijau ni... anda boleh tukar kedudukan text pada tajuk sidebar anda samada left,right ataupun center.
e) warna merah pekat ini pula, kedudukan gambar anda... kat sini try and error la ya... kalau anda tahu saiz image tu... lagi bagus... follow aje saiz image anda...
5. Untuk mendapat hasil yang memuaskan, sebelum anda save anda boleh la Preview untuk melihat keadaan icon anda.. bila dah puas hati... boleh lah save.
Ambil Perhatian: Anda perlu mengulang kod diatas untuk sidebar yang berbeza... satu kod hanyalah untuk satu sidebar sahaja. jadi jika ada 10 sidebar anda perlu masukkan 10 kod dengan image yang berbeza.
P/s: Jangan lupa selepas ambil tutorial, silalah komen ya... :)
Tutorial: Cara Highlight Comment Admin
Tutorial yang saya nak share, sebenarnya tutorial ini di request oleh seorang customer saya... Kak Aqish... jadi saya wat je la tutorial ek... kalau ada next customer nak request ni... saya minta charge extra ya... ngeh2... kalau ada yang nak buat ikut tutorial kat bawah...
[Perhatian: tak semua template akan compatible dengan tutorial ni... jadi untuk hasil yang terbaik... sila perhati dan follow betul2 ya tutorial ni... kalau tak dapat... cuba2la wat ya...dan kalau tak dapat lagi... tak dapat la den nolong... hehehehe]
[Perhatian: tak semua template akan compatible dengan tutorial ni... jadi untuk hasil yang terbaik... sila perhati dan follow betul2 ya tutorial ni... kalau tak dapat... cuba2la wat ya...dan kalau tak dapat lagi... tak dapat la den nolong... hehehehe]
1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi boleh backup balik... kerana jika berlaku kesilapan, bahagian post anda akan hilang... sila ambil langkah berjaga2 ya...]
2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]
3. Copy dan paste code dibawah diatas atau sebelum code ]]></b:skin.
.comment-body-author {
background:#ffffff url("url gambar pilihan anda") no-repeat scroll left center;
color:#000000;
padding-top:7px;
padding-bottom:7px;
padding-right:7px;
padding-left:80px;
}padding-bottom:7px;
padding-right:7px;
padding-left:80px;
4. Untuk mencantikkan kotak comment anda... sila rujuk tips dibawah ya...
*Bahagian yang saya highlightkan dengan warna merah... adalah untuk background... anda boleh pilih samada inginkan background yang mempunyai warna ataupun mempunyai image.... jika inginkan image... masukkan url... jika tidak, masukkan sahaja kod warna kegemaran anda...
*Bahagian yang saya highlightkan dengan warna merah... adalah untuk background... anda boleh pilih samada inginkan background yang mempunyai warna ataupun mempunyai image.... jika inginkan image... masukkan url... jika tidak, masukkan sahaja kod warna kegemaran anda...
** Bahagian yang saya highlightkan dengan warna purple adalah kod untuk mengubah warna tulisan anda... gantikan sahaja dengan kod warna kegemaran anda...
*** Bahagian yang saya boldkan dengan warna hitam, adalah untuk kedudukan image... anda hanya perlu ubah bahagian padding-left mengikut saiz image yang anda ingin masukkan...
****Harus diingatkan pada bahagian ini, daya kreativiti anda diperlukan untuk membuat kotak comment anda lebih menarik...
5. seterusnye cari code <data:comment.author/> pada kotak find.
6. masukkan code yang saya highlightkan dengan warna merah dibawah. Anda harus letak code ini betul2 ya seperti yang saya buat... jika tersalah satu kod pun... tutorial ini tidak akan berjaya...
<data:comment.author/>
</b:if>
</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'>
</b:if>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<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>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
7. Anda boleh save dan siap... Boleh la tengok hasilnya...
Tutorial kredit kepada: Edriena Hazelina
P/s: dah ambil tutorial ni... jangan la lupa komen ya...
Tutorial: Cara Untuk Invite Admin Blog
Salam semua... nak kongsi tutorial yang tersangat penting untuk saya dan my customer also my future customer... since saya dah ada customer yang agak ramai ni.. jadi saya rasa tutorial ini akan lebih memudahkan saya dengan customer saya... iaitu semasa proses untuk install template...
Tutorial ini juga boleh digunakan untuk mereka yang ingin mengabungkan beberapa blog... tanpa perlu log in menggunakan email yang berlainan. Selain itu sesuai juga untuk mereka yang menjalankan bisnes secara share partner yang mana disamping itu mempunyai personal blog... jadi... yang share hanyalah blog bisnes... blog personal hanya pemiliknya sahaja yang boleh mengaksesnya...[hehehe betul tak ayat saya ni...]
Selain memudahkan saya untuk menginstall tanpa perlu logout dari blog saya... juga melindungi hak peribadi customer saya... mungkin customer saya mempunyai private blog yang tidak mahu dibaca oleh sesiapa...
Ok.. anda faham tak apa yang saya maksudkan? jom tengok tutorialnya... model untuk gambarajah tutorial ini adalah blog ibu Aqil... saya pinjam kejap... "terima kasih ya ibu..."
Saya gunakan situasi ini berlaku diantara saya dan customer saya... jadi saya menggunakan kata ganti nama untuk saya dan anda ya...
Pastikan anda log in Blog anda dulu sebelum invite... hehehe kalau tak macam mana nak invitekan...;p
5. Notification kepada akan dihantar kepada orang yang anda invite dan skrin seperti diatas akan terpapar... dan anda perlu menunggu orang yang anda invite menerima invitation anda...
6. Email akan diterima oleh orang yang anda invite...[seperti contoh diatas saya menerima email daripada Ibu Aqil...] dan saya perlu menerima invitation itu dengan menekan link yang diberi...
7. Skrin akan terpapar seperti gambarajah diatas... dan orang yang di invite perlu memasukkan password dan menekan butang ACCEPT INVITATION
8. Pada Dashboard orang yang anda invite akan mendapat paparan skrin seperti diatas... blog yang terlibat akan terpapar pada Dashboard orang yang di invite. tetapi masih ada kekurangan... cuba tengok apa perbezaannya pada bahagian yang saya bulatkan dengan warna hijau... yup... nampakkan... tak semua setting orang yang anda invite boleh akses...
9. Jadi apa yang anda perlu lakukan... adalah... pada blog anda, anda perlu klik semula pada bahagian permissions tadi... dan klik pada grant admin privileges .
10. Kotak ini akan terpapar... dan klik pada GRANT ADMIN PRIVILEGES sekali lagi untuk mengesahkan invitation anda... dengan itu... orang yang anda invite boleh mengakses untuk blog tersebut sahaja ... jika anda mempunyai blog2 lain di dalam akaun anda... orang yang anda invite tidak akan dapat melihatnya...
tambahan untuk my customer: selepas saya selesai menginstall template anda... anda perlu delete email saya dibahagian authors... seperti gambarajah diatas...
Ok... paham tak bahasa saya... hehehe kalau tak paham... boleh perhati betul2 pada gambar...[sila klik untuk melihat paparan yang jelas] then let's picture talking....:)
Tutorial: Cara letak Social Networking Bookmark pada Blog
Untuk kengkawan yang bertanya macam mana nak letak icon Facebook, Twitter,Blogspot dan Chat kat tepi blog. Maaf ya lambat sediakan tutorial... almaklumla... saya ni busy dengan Khalis, busy juga dengan template order... bajet busy la konon.... hehehe.... ok... pada sesiapa yang berminat... follow langkah2 kat bawah ya...
1. Login ke Blogspot .
2. Klik Layout > Add a Gadget Javascript / HTML
3. Copy di bawah dan Pastekan ke dalamnya
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'>
<a class='linkopacity' href='masukkan url facebook anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="masukkan url icon facebook anda" /></a><br />
<a class='linkopacity' href='masukkan url twitter anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="masukkan url icon twitter anda" /></a><br />
<a class='linkopacity' href='http://www.blogger.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Go to Dashboard'><img border="0" src="masukkan url icon blogspot anda" /></a><br />
</div>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'>
<a class='linkopacity' href='masukkan url facebook anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="masukkan url icon facebook anda" /></a><br />
<a class='linkopacity' href='masukkan url twitter anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="masukkan url icon twitter anda" /></a><br />
<a class='linkopacity' href='http://www.blogger.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Go to Dashboard'><img border="0" src="masukkan url icon blogspot anda" /></a><br />
</div>
*Bahagian yang saya boldkan dengan warna merah tu... anda haruslah tukar dengan url social network anda dan juga url icon yang anda suka...
**Bahagian yang saya boldkan dengan warna purple pula... anda boleh menukar kedudukan button anda sama ada di kedudukan kiri atau kanan blog dengan menukar kan, left ke right.
dan juga boleh menukar tahap ketinggian button tersebut terapung di sini top:140px.
Untuk YM sedikit perubahan pada code... Copy&paste code dibawah ya... pastikan anda paste kod dibawah sebelum kod </div> ini ya...
<a class='linkopacity' href="ymsgr:sendim?masukkan Id Yahoo Messenger anda" imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='chat with me'><img border="0" src="masukkan url icon YM anda" /></a><br />
*Bahagian yang berwarna merah anda perlu masukkan maklumat anda ya...Jika 4 code diatas tidak mencukupi, anda boleh salin kod di bawah dan paste sebelum </div> , dan masukkan link serta gambar yang anda suka...
<a class='linkopacity' href='LINK ADDRESS' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="URL IMAGE" /></a><br />
4. Setelah semua dah selesai, anda boleh save dan tengok hasilnya... mudahkan?
Sebagai tambahan...saya sediakan icon2 yang agak cantik di mata saya... berserta dengan urlnya sekali... tapi jika anda tidak berminat... sila lah cari disini dan upload sendiri icon2 tersebut untuk mendapatkan urlnya...=)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhezzEqLRk068gPsPosGfgB-yd_lfJ7H00JfSGfedsFBpKZ3aiFE_J-Xhnfhxa6yc6Qaaua74mp9gyYufAHwzcB7ZFpG9Ra3qipa2GtExRfVP33PKZ4AEKpnAoyVfB5_HdlOFu7Tecrj4/s1600/facebook.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSF68tUVvUAOFKsEw04E0Fr8hxLTRykF5_NvJIiIxkYzrf9f98P3A_GNnxWD0P5eiwIoasrvsw5mkJqM9PhnPcbYsqDWNCTip3-udhl_anddtRpxfXs6O0fffcUeafjvfgEEU-6R4HH5e/s1600/twitter.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOWS_LEUnqSa8k4leqfixOUtMlG10e3mA975UFt902eqZYNSCq6KWhnvlhPg6tmIhkC6Muvn_yqSzskbKXgDQHbiqt3Uzt9LJ4v33FRH7f0ZwPFy99IOSFbGU-KzD55cMz9GCaA3ouP6z/s1600/blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghqnSdk-3uvTYjjSh5GWBOtN7CRuh2TEEs_WXdh_kycSuFnk5HdQ2I8CUg00j8ebgYHxdWvti1Cw8ilYCqaoNn5-M6PTP7FZQD4-GKuyrn36QzjfCQEjI5Bu2Wm_myKGMFaCPsJ7OqOYPY/s1600/gtalk.png
Selamat Mencuba, Jika tidak paham... boleh bertanya...dan saya akan cuba untuk reply... terima kasih ya...=)
Tutorial kredit pada: Mommy Pinky
Tutorial: Cara Ubah Warna pada Widget Follower supaya cantik
Tak pe... tak de orang request, saya kena cari idea untuk banyakkan tutorial dalam blog ni... suka betul pulak wat tutorial ni... berjangkit dengan Mommy Pinky kot... tetiba pulak... hehehe...
Perasan tak apa perubahan widget Follower saya? bukan jumlah follower ya... tapi... designnya dah bertukar... Widget yang baru ni lebih cantik dan warnanya lebih seragam dengan my template... eceh... cantik tak? ada sesiapa nak buat juga tak? jom2... ikut step2 kat bawah ya.. [pastikan anda klik pada gambar untuk melihat dengan lebih jelas]
1. Mula2 pergi ke laman web Google Connect seperti gambarajah diatas... Then klik pada Get Started.
2. Login macam biasa... macam kita login blog tu... eceh...
3. Kemudian pilih Blog anda... kalau anda ada satu blog ok la... macam saya tu... entah berapa blog da... kena la pilih satu2... ehehe... sehingga jumpa blog yang saya nak ubah layout widget Follower...
4. bila dah pilih... paparannya akan kelihatan seperti gambarajah diatas...
5. Kemudian tekan pada bahagian [1] iaitu Gadget dan pilih Featured gadget > Members.
6. Paparannya akan kelihatan seperti diatas... pada bahagian [1] anda perlu pilih tahap kelebaran (pastikan anda tahu lebar sidebar anda untuk mendapat kedudukan yang lagi kemas... tapi jika tersalah pilih pun tak mengapa.. nanti bila dah generate kod masih boleh diubah...) . Pada bahagian [2] disinilah prosesnya... anda perlu memilih warna yang anda suka... samada dengan memilih warna yang telah diberikan atau pun anda boleh copy & paste kod warna yang anda suka didalam kotak kosong yang disediakan, font juga boleh diubah mengikut font yang anda guna pada blog... Bahagian akhir sekali adalah generate code... Selepas semua dah puas hati... anda boleh tekan generate code. Dengan Segera kod akan digenerate. Pastikan anda Copy semua kod yang dihasilkan...
7. Login ke Blogspot > Klik Layout > Add a Gadget >HTML/Javascript . dan pastekan kod yang anda copy tadi kedalamnya... Save...siap...
Mudahkan?
Selamat Mencuba...=)
Perasan tak apa perubahan widget Follower saya? bukan jumlah follower ya... tapi... designnya dah bertukar... Widget yang baru ni lebih cantik dan warnanya lebih seragam dengan my template... eceh... cantik tak? ada sesiapa nak buat juga tak? jom2... ikut step2 kat bawah ya.. [pastikan anda klik pada gambar untuk melihat dengan lebih jelas]
1. Mula2 pergi ke laman web Google Connect seperti gambarajah diatas... Then klik pada Get Started.
2. Login macam biasa... macam kita login blog tu... eceh...
3. Kemudian pilih Blog anda... kalau anda ada satu blog ok la... macam saya tu... entah berapa blog da... kena la pilih satu2... ehehe... sehingga jumpa blog yang saya nak ubah layout widget Follower...
4. bila dah pilih... paparannya akan kelihatan seperti gambarajah diatas...
5. Kemudian tekan pada bahagian [1] iaitu Gadget dan pilih Featured gadget > Members.
6. Paparannya akan kelihatan seperti diatas... pada bahagian [1] anda perlu pilih tahap kelebaran (pastikan anda tahu lebar sidebar anda untuk mendapat kedudukan yang lagi kemas... tapi jika tersalah pilih pun tak mengapa.. nanti bila dah generate kod masih boleh diubah...) . Pada bahagian [2] disinilah prosesnya... anda perlu memilih warna yang anda suka... samada dengan memilih warna yang telah diberikan atau pun anda boleh copy & paste kod warna yang anda suka didalam kotak kosong yang disediakan, font juga boleh diubah mengikut font yang anda guna pada blog... Bahagian akhir sekali adalah generate code... Selepas semua dah puas hati... anda boleh tekan generate code. Dengan Segera kod akan digenerate. Pastikan anda Copy semua kod yang dihasilkan...7. Login ke Blogspot > Klik Layout > Add a Gadget >HTML/Javascript . dan pastekan kod yang anda copy tadi kedalamnya... Save...siap...
Mudahkan?
Selamat Mencuba...=)
Tutorial: Cara Membuat Sticky Entry
Actually tutorial ni dah lama saya nak buat... ada a few rakan blogger yang pernah request sebelum ni... tapi disebabkan mood untuk blogging masa tu ke laut... maka agak kurang rajin untuk menaip... hehehe maaf ya kawan2 yang menunggu... eceh... mungkin rakan bloggger yang request dah jumpa kat blog orang lain...
tak pe lah.. saya buat juga untuk tatapan rakan2 yang lain...
Sticky entry ni biasanya digunakan apabila menganjurkan sebarang GA atau contest, untuk membuat anouncement dan macam2 lagi la...
1. Mula2 taip entry macam biasa... then publish macam biasa...
2. Kemudian, Skrin akan terpapar diatas, anda perlu klik pada Edit post.
3. Skrin akan kembali kepada compose entry, anda perlu klik pada Post Options
4. Inilah part yang paling penting, anda perlu mengubah tarikh [seperti yang saya higlightkan dalam gambarajah diatas] contoh : 6/ 11/2010 adalah tarikh anda publish post, GA anda akan tamat pada 6/12/2010. jadi apa yang anda perlu lakukan... tukar tarikh 11/6/ 10 kepada 12/6/10 .
Entry ini akan terus melekat pada permulaan blog anda sehingga lah sampai kepada tarikh yang anda tetapkan, barulah entry ini akan turun ke bahagian bawah. [paham tak ayat ni? hehehe macam tunggang langgang je...]
Selamat Mencuba...
tak pe lah.. saya buat juga untuk tatapan rakan2 yang lain...
Sticky entry ni biasanya digunakan apabila menganjurkan sebarang GA atau contest, untuk membuat anouncement dan macam2 lagi la...
1. Mula2 taip entry macam biasa... then publish macam biasa...
2. Kemudian, Skrin akan terpapar diatas, anda perlu klik pada Edit post.
3. Skrin akan kembali kepada compose entry, anda perlu klik pada Post Options
4. Inilah part yang paling penting, anda perlu mengubah tarikh [seperti yang saya higlightkan dalam gambarajah diatas] contoh : 6/ 11/2010 adalah tarikh anda publish post, GA anda akan tamat pada 6/12/2010. jadi apa yang anda perlu lakukan... tukar tarikh 11/6/ 10 kepada 12/6/10 .Entry ini akan terus melekat pada permulaan blog anda sehingga lah sampai kepada tarikh yang anda tetapkan, barulah entry ini akan turun ke bahagian bawah. [paham tak ayat ni? hehehe macam tunggang langgang je...]
Selamat Mencuba...
Cara Meletakkan Divider pada Setiap Post
Request daripada mama Gee... ha... layan cepat massage yang dia tinggal untuk saya...=)
blog saya tak de divider sebab saya letak 1 post je per page... macam blog mama Gee ni dia letak banyak post... jadi untuk nampak cantik dan kemas... kalau pakai divider memang sesuai...
ok... tutorial ni special untuk sis... dan jika ada sesiapa nak buat pun boleh... just follow this step...
1. Login ke Blogspot
2 . Klik Layout > Edit HTML
Klik Download Full Template (Untuk Back-up template) ini penting!
3. Cari kod seperti dibawah ataupun lebih kurang seperti dibawah... yang penting perkataan .post { [sebab kekadang ada template yang bahagian ni panjang sangat kodnya... dan ada juga yang hanya letak margin sahaja...jadi tengok betul2 ya...=)]
4. Kemudian, anda gantikan dengan kod dibawah ini...
*bahagian yang saya hightlightkan dengan warna merah anda harus meletakkan kod divider anda... divider anda boleh reka sendiri ataupun.... boleh didapati disini... boleh pilih sampai lebam =p . Sila pastikan cara anda mengambil url untuk gambar adalah betul. rujuk disini ya untuk cara mengambil kod...
**[updated] Jika anda tidak jumpa kod .post didalam template anda... boleh tambah kod diatas ini sebelum atau diatas kod ]]></b:skin
5. Anda boleh Preview... dan jika tiada sebarang error dan divider anda pun dah cun! bolehla save dengan jayanya....
Whitey Note: Selamat Mencuba dan jangan lupa tinggalkan komen anda selepas mengambil tutorial ini...=)
blog saya tak de divider sebab saya letak 1 post je per page... macam blog mama Gee ni dia letak banyak post... jadi untuk nampak cantik dan kemas... kalau pakai divider memang sesuai...ok... tutorial ni special untuk sis... dan jika ada sesiapa nak buat pun boleh... just follow this step...
1. Login ke Blogspot
2 . Klik Layout > Edit HTML
Klik Download Full Template (Untuk Back-up template) ini penting!
3. Cari kod seperti dibawah ataupun lebih kurang seperti dibawah... yang penting perkataan .post { [sebab kekadang ada template yang bahagian ni panjang sangat kodnya... dan ada juga yang hanya letak margin sahaja...jadi tengok betul2 ya...=)]
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
border: 2px solid #FFC0CB;
padding:7px;
-moz-border-radius: 10px;
}
margin: 0 0 1.5em;
padding-bottom: 1.5em;
border: 2px solid #FFC0CB;
padding:7px;
-moz-border-radius: 10px;
}
4. Kemudian, anda gantikan dengan kod dibawah ini...
.post {
background: url(url divider anda);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:5.5em;
}
background: url(url divider anda);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:5.5em;
}
*bahagian yang saya hightlightkan dengan warna merah anda harus meletakkan kod divider anda... divider anda boleh reka sendiri ataupun.... boleh didapati disini... boleh pilih sampai lebam =p . Sila pastikan cara anda mengambil url untuk gambar adalah betul. rujuk disini ya untuk cara mengambil kod...
**[updated] Jika anda tidak jumpa kod .post didalam template anda... boleh tambah kod diatas ini sebelum atau diatas kod ]]></b:skin
5. Anda boleh Preview... dan jika tiada sebarang error dan divider anda pun dah cun! bolehla save dengan jayanya....
Whitey Note: Selamat Mencuba dan jangan lupa tinggalkan komen anda selepas mengambil tutorial ini...=)
Cara Mencantikkan Post Footer
Tutorial ni... my best friend yang request... first time tu dia request tutorial... ekeke biasanya saya yang selalu request dengan dia... ha... ni ayatnya...
apa yang kotak dia maksudkan tu? ha... tengok gambar kat bawah ni...
ini la yang dia maksudkan kotak... ok! kalau nak buat juga... follow step kat bawah ni...
1. Login ke Blogspot
2 . Klik Layout > Edit HTML
Klik Download Full Template (Untuk Back-up template) ini penting!
3. Tekan CTRL+F untuk memudahkan anda mencari kod . Masukkan kod ]]></b:skin> kedalam kotak Find dan tekan Enter
4. Copy dan pastekan kod dibawah, sebelum atau diatas ]]></b:skin>
kita tengok satu persatu bahagian yang kritikal dalam kod diatas...
*bahagian yang sya highlightkan dengan warna merah... anda boleh ubah kod warnanya... boleh rujuk disini...
**bahagian warna hijau... anda boleh ubah font, size, dan keadaan font yang ada suka...
*** bahagian warna purple anda harus ubah paddingnya mengikut kesesuaian dengan gambar yang ada letak... anda boleh ubah dan preview...ok...
****bahagian warna biru pulak.. anda boleh ubah keadaan tulisan... uppercase bagi semua huruf besar, lowercase bagi semua huruf kecil... dan capitalize bagi permulaan huruf besar...
5. jika dan siap semua... anda boleh preview dan save dengan jayanya...
Whitey Note: Selamat mencuba... dan jangan lupa tinggalkan komen selepas mengambil tutorial ini ya...=)
apa yang kotak dia maksudkan tu? ha... tengok gambar kat bawah ni...
ini la yang dia maksudkan kotak... ok! kalau nak buat juga... follow step kat bawah ni...1. Login ke Blogspot
2 . Klik Layout > Edit HTML
Klik Download Full Template (Untuk Back-up template) ini penting!
3. Tekan CTRL+F untuk memudahkan anda mencari kod . Masukkan kod ]]></b:skin> kedalam kotak Find dan tekan Enter
4. Copy dan pastekan kod dibawah, sebelum atau diatas ]]></b:skin>
.post-footer {
background:url("url gambar kesayangan anda") no-repeat scroll left center transparent;
border:1px solid #FFC0CB;
color:#000000;
font:georgia;
font-size:14px;
font-weight:bold;
margin:0.75em 0;
padding:27px 10px 18px 100px;
text-transform:uppercase;
}
background:url("url gambar kesayangan anda") no-repeat scroll left center transparent;
border:1px solid #FFC0CB;
color:#000000;
font:georgia;
font-size:14px;
font-weight:bold;
margin:0.75em 0;
padding:27px 10px 18px 100px;
text-transform:uppercase;
}
kita tengok satu persatu bahagian yang kritikal dalam kod diatas...
*bahagian yang sya highlightkan dengan warna merah... anda boleh ubah kod warnanya... boleh rujuk disini...
**bahagian warna hijau... anda boleh ubah font, size, dan keadaan font yang ada suka...
*** bahagian warna purple anda harus ubah paddingnya mengikut kesesuaian dengan gambar yang ada letak... anda boleh ubah dan preview...ok...
****bahagian warna biru pulak.. anda boleh ubah keadaan tulisan... uppercase bagi semua huruf besar, lowercase bagi semua huruf kecil... dan capitalize bagi permulaan huruf besar...
5. jika dan siap semua... anda boleh preview dan save dengan jayanya...
Whitey Note: Selamat mencuba... dan jangan lupa tinggalkan komen selepas mengambil tutorial ini ya...=)
Cara Membuat Scroll pada Sidebar
tutorial ini request oleh wanzi... beliau nak tahu macam mana cara saya membuat scroll pada sidebar...
ok... follow step ni ya...1. Login ke Blogspot
2 . Klik Layout > Edit HTML
Klik Download Full Template (Untuk Back-up template) ini penting!
3. Tekan CTRL+F untuk memudahkan anda mencari kod . Masukkan kod ]]></b:skin>
4. Copy dan pastekan kod dibawah, sebelum atau diatas ]]></b:skin>
#HTML6 .widget-content {
height: 300px;
overflow: auto;
}
height: 300px;
overflow: auto;
}
*bahagian yang saya highlightkan dengan warna purple, anda boleh letak berapa ketinggian sidebar yang anda inginkan...
** bahagian yang warna pink tu adalah bahagian yang kritikal sikit =p dimana anda perlu dapatkan ID sidebar anda...
cara untuk mendapatkan ID itu... anda perlu klik pada design> page element>edit sidebar yang anda ingin letak scroll bar
Sila perhatikan gambarajah dibawah:
***bahagian yang saya bulatkan itu adalah ID bagi sidebar anda...anda harus Copy dan gantikan pada kod yang saya highlightkan dengan warna pink...5. Preview dan jika tiada sebarang error anda boleh save dengan jayanya...
Setakat ini saya hanya berjaya buat untuk widget text dan HTML/javascript sahaja... untuk widget lain, saya rasa tak boleh guna..=)
Whitey Note: Selamat mencuba... dan jangan lupa tinggalkan komen selepas mengambil tutorial ini....=)
Cara Meletakkan Cute Icon Pada Link List
Mesti ramai yang tertanya2 macam mana saya letak icon yang cute kat tepi Link list saya kan? ada yang nak buat tak? kalau nak... jom follow tutorial ni...
1. Login ke Blogspot
2 . Klik Layout > Edit HTML
Klik Download Full Template (Untuk Back-up template) ini penting!
3. Tekan CTRL+F untuk memudahkan anda mencari kod . Cari kod dibawah ini...
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
*kalau jumpa kod yang lebih kurang pun tak pe...tapi pastikan anda mencari dengan teliti untuk medapatkan hasil yang efektif.
4. Kemudian, gantikan kod diatas dengan kod dibawah ini...
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url(URL Gambar yang anda suka) no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url(URL Gambar yang anda suka) no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}
*bahagian yang saya highlightkan dengan warna pink...anda boleh letakkan icon yang anda suka...
anda boleh reka sendiri dan upload di photobucket ataupun mengambilnya di Glitter-Graphic..
dan jika anda tidak tahu cara mengambil Url gambar di Glitter-Graphic , anda boleh rujuk disini.
Kredit Kepada: Mommy Pinky
Whitey Note: Selamat Mencuba... Jangan lupa tinggalkan komen selepas anda mengambil tutorial ini ya...=)
