Menaikan Seri Blockquote

Ok, nampak x perubahan blockquote wak?? hehe..

Murid : nampak wak !! saya tau caranya wak, cara nk naikan seri blockquote nie kenelah tunggu khamis malam jumaat, kemudian sediakan perkakasan seperti bunga-bungaan.. wangian dan dicampurkan kedalam air di bath tab. Kemudian rendamkan laptop atau PC kita selama beberapa minit.. gosok2 sikit pada bahagian monitor.. dah seri blockquote..
Wak : Bukan begitu caranya, itu mau rosakan aje laptop mu dong!!
Murid : ok2 cuba wak terangkan sikit caranya..
Wak : Caranya??? ok meh wak ajarkan..

Peringatan: Save script template korang sebagai backup.

Step 1Log in blog >> Dashboard >> Layout >> Edit HTML. Tick pada Expand Widget Templates.

Step 2
Ctrl+F dan cari kod ni: .post blockquote

Step 3
Selepas kod tadi, ada kod lagi sikit kan? Buang kod-kod yang ada sebelum kod ni:

}

Dan gantikan dengan kod di bawah.

 background: url(URL Gambar)repeat;
 padding: 6px;
 margin:1em 20px;
 border: 5px solid #CCCCCC;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;

Bahagian URL Gambar, korang letaklah URL gambar yang dikehendaki sebagai background. Saranan wak, cari gambar yang repeatable, sebab code yang wak bagi sesuai untuk gambar yang repeatable sahaja. Search jer kat Google. Banyak gambar cantik2. Kemudian bahagian berwarna HIJAU, ialah ketebalan border blockquote korang. Semakin besar angka, semakin tebal border tu. Bahagian berwarna OREN pula, ialah style border. Contoh style border bawah nie.

solid = ____________
dashed = ---------------
dotted = ...................

Yang berwarna BIRU pula ialah warna border. Korang boleh pilih sendiri warna di SINI dan ambil codenya.Dan selesai mengedit code, code akan jadi seperti contoh bawah nie.

.post blockquote {
 background: url(http://i226.photobucket.com/albums/dd134/Bella_Pok/Backgrounds/BGPnkWhtStrp.gif)repeat;a
 padding: 6px;
 margin:1em 20px;
 border: 2px dashed #FF00FF;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
  }

Step 4
Klik Preview dan jika tiada mesej Error yang terpapar, klik Save

Step 5
Ok, sekarang korang boleh buat blockquote untuk menguji kebersanannya. Oh yer, blockquote yang sebelum-sebelum nie korang buat pown akan automatik berubah, jadi x perlu risau dan x payah nak edit blockquote yang lama-lama tu yer.

p/s: x tau nk buat blockquote??? KLIK SINI

Encode / Decode Code HTML

Wak jadikan tutorial nie sebagai rujukan...

Salam.Korang mesti selalu cari atau baca tutorial kan.Korang pernah terfikir mahu buat tutorial sendiri walaupon itu adalah tutorial yg sudah byk?Korang pernah tak mencuba masukkan code HTML dalam entri seperti tutorial2 tersebut?Hihi.Okeh, hari ini saya mahu tunjuk bagaimana nak masukkan code HTML dalam entri.Kalau anda menulis code HTML yg sebenar di dalam entri, blogger tidak dapat compose entri anda dan akan error. So, anda perlu menukar code HTML itu atau encode.

< » ganti dengan < > » ganti dengan >
& » ganti dengan &

Dengan meng'encode'kan code HTML ini, anda boleh la memasukkan code HTML ke dalam entri anda.Untuk memudahkan encode HTML code, anda boleh pergi ke link ini.

http://centricle.com/tools/html-entities/
http://www.allblogtools.com/html-character-encoder/

Disini, anda hanya perlu tempekkan HTML code dan tekan button encode atau decode.
Contoh :
Ini contoh bagi HTML code yg sudah di'encode'.

Ini contoh bagi HTML code yg tidak di'encode'.So,terjadi error.
Okeh, anda faham?Hihi. Nak lebih info, sila baca blog Indonesian ini.


ciplak pada blog suzuran89

Jump Link Untuk Komen

Nampak jump link Klik untuk komen, nak pasang korang ikut beberapa langkah yang wak dah susun kat bawah nie.

Peringatan: Save script template korang sebagai backup.

Step 1
Log in blog >> Dashboard >> Layout >> Edit HTML. Tick pada Expand Widget Templates.

Step 2
Pada script template, cari kod <b:if cond='data:post.commentPagingRequired'>

Step 3
Salin kod di bawah dan kemudian, paste di atas atau sebelum kod <b:if cond='data:post.commentPagingRequired'> (rujuk step 2)

<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><b>Klik untuk komen</b></a>
</div>

Contoh:

<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><b>Klik untuk komen</b></a>
</div>
<b:if cond='data:post.commentPagingRequired'>

Akhir sekali preview, kalo ok klik Save.

p/s:

1. Korang boleh menggantikan teks Klik untuk komen kepada icon, dengan menggantikan kod <b>Klik untuk komen</b> kepada <img src='masukkan URL icon disini'/>

Contoh:

<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><img src='masukkan URL icon disini'/></a>
</div>

2. Untuk mengubah kedudukan, edit pada margin: -30px 0px 0px 250px;

Tab Menu / Menu Tab

Dulu wak penah wat ikut style nescafe ais.. tapi baru2 nie wak nk adjust beberapa widget agak lebih kemas.. jd tersalah setting.. hancusss tab view nie.. jd kenelah reffer balik.. biler reffer balik kat blog nescafe.. die dah tukar cara lain plak.. mengelabah la wak.. pei search kat internet ada plak mamat nie copy nescafe punye dulu.. jadi, wak pun copyla dari die untuk wat rujukan.. tapi wah dah kasi setting ayat2 die.. korang pun bleh wat.. cubalah.. kemas sikit blo korang.. dah dekat 2 tahun gak wak guna benda nie tau.. huhu..
Nie ha tab view :

Jom wak ajar cara buat tab menu (wak pun berguru dengan orang buat benda nie)


Peringatan: Save script template korang sebagai backup.

Step 1
Log in blog >> Dashboard >> Layout >> Edit HTML. Tick pada Expand Widget Templates.
 
Step 2
Kemudian cari code ini ]]>

Step 3
Kemudian masukkan code dibawah ini sebelum code ]]> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Step 4
Perhatikan text-text yang berwarna magenta, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dan lain-lain. Untuk mengetahui code warna korang lihat DISINI


Step 5
Langkah selanjutnya iaitu pasang code dibawah ini sebelum code

"HTML/Javascript"

di tempat yg akan km letakkan Manu Tab View ini. 9. Inilah script yg harus di pasang :

350px

;"> Tab 1 Tab 2 Tab 3

350px

; height: 250px;">

Tab 1.1 Tab 1.2 Tab 1.3

Tab 2.1 Tab 2.2 Tab 2.3

Tab 3.1 Tab 3.2 Tab 3.3

-->

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Korang boleh mengisinya dengan link, gambar, banner, script dll.

Letak Code HTML Di Post / Entry

Assalamualaikum semua, tutorial kali nie wak nak bagi tutorial asas yang mudah, Iaitu cara untuk korang letak code HTM pada entry / post korang. Alah yg orang selalu buat tutorial tu, contoh leh rujuk gambar kat bawah nie.

Caranya semudah 1, 2, 3 jer... Jom wak ajarkan.


Step 1
Log in blog >> Posting >> New Post 

Step 2
Rujuk Pada gambar kat atas nie
1-Mula-mula masukan tajuk post
2-Masukan labels atau tag (x nk bubuh pown boleh)
3-Klik pada Post Options

Step 2
Rujuk Pada gambar kat atas nie
4-Tick pada Show HTML Literally di bahagian Compose Settings
5-Masukan code HTML yang korang nak post kan
6-Akhir sekali PUBLISH POST (kalo boleh preview dulu, mcm wak dah x sabo terus jer publish.. ngeee..)

Ok, kawan2 wak.. lepas nie korang boleh la buat tutorial gak yer.

Button Reply Comment

 

Gambar yang wak bulatkan dengan warna merah itu yang dinamakan reply comment button, tujuannya untuk memudahkan korang membalas komen2 pengomen blog korang. Ok, meh wak ajar caranya.

Peringatan: Save script template korang sebagai backup.

Step 1
Log in blog >> Dashboard >> Layout >> Edit HTML. Tick pada Expand Widget Templates.

Step 2
Dengan menggunakan keyboard, tekan kekunci Ctrl+F. Anda akan lihat bar Find akan terpapar. Kemudian, taip atau paste kod <data:commentpostedbymsg>atau kod <data:commentpostedbymsg/> dan tekan Enter. Jika tiada kod <data:commentpostedbymsg> sila gunakan pula kod <dd class='comment-footer'>

Step 3

Salin kod di bawah dan edit pada bahagian yang di bold dengan menggantikan ID blog korang. Untuk mengetahui ID blog korang, sila lihat URL pada page Edit HTML.(rujuk gambar di atas)

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukkan ID blog disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1, menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'>[Reply to comment]</a></span>

Step 4
Salin kod yang telah siap di edit (rujuk langkah 3) dan kemudian, paste kod tersebut di bawah atau selepas kod <data:commentpostedbymsg> atau <data:commentpostedbymsg/> kod atau kod <dd class='comment-footer'> (rujuk langkah 2)

Step 5
Klik Preview dan jika tiada mesej Error yang terpapar, klik Save

Step 6
Jika korang nak tukar reply comment ke pada button bergambar, caranya korang hanya gantikan perkataan [Reply to comment] yang ada pada kod step 3 tadi kepada <img src='URL Image Korang'/> dan akan jadi macam nie.

 <span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukkan ID blog disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'><img src='URL Image Korang'/></a></span>