Cara Membuat Scroll Box Untuk Blog Archive Blogspot

Berapa kerapkah anda membuat post pada blog anda?Jika anda dalam kategori rajin ini bermakna blog archive anda akan terjuntai panjang ke bawah blog.Jika anda seorang yang suka akan kekemasan pada blog,pasti keadaan ini menjadi masalah untuk anda,kerana sedikit sebanyak mengganggu kesedapan mata memandang pada kecantikan mahupun kekemasan blog.

Contoh Scroll Box Blog Archive

Untuk mengatasi masalah ini,saya akan menunjukkan sedikit tutorial bagaimana untuk membuat Scroll Box pada Blog Archive anda bagi ia kelihatan lebih kemas dan mengelakkan blog archive kita daripada terjuntai panjang.Seperti biasa,mula-mula pergi kat Dashboard blog,pilih Template dan pilih Edit HTML dan Klik Proceed.Lepas tu klik kat Expand Widget Templates dan tekan Ctrl+F.

Kopy Kod ini <div id='ArchiveList'> dan Pastekan kat kotak Search sebelah kanan,atas blog dan tekan Enter.Lepas tu,anda akan jumpa Kod tadi seperti ini <div id='ArchiveList'> Di bahagian atas kod tadi terdapat kod seperti ini <div class='widget-content'>.Gantikan kod ini <div class='widget-content'> dengan kod kat bawah ini  <div class='widget-content' style='overflow:auto; height:300px'>.Lepas itu Preview,kalau Ok klik kat Save Template.-selamat mencuba-

Nota : Nombor 300px tu anda boleh tukar mengikut selera anda sendiri.

Membuat Garisan Tepi Dan Text Center Bonder Sidebar Blogspot

Salam semua,kalau sebelum ini saya ada menunjukkan cara macam mana nak membuat Bonder Sidebar Pada Blog,kali ini saya nak mengajak anda untuk membuat satu lagi tutorial yang paling mudah untuk Theme Blogspot,iaitu membuat garisan kat luar Bonder Sidebar kita dan membuat tajuk tulisan Sidebar kita ke berada kat tengah-tengah @ "center".

border: 1px solid red

border: 1px dotted orange

border: 2px dashed yellow

border: 3px double green

border: 5px groove blue

border: 3px inset indigo

border: 4px ridge violet

[Sebagai Rujukan]

Ok,seperti kebiasaan setiap tutorial,mula-mula pergi kat Dashboard atau Desigh dan pilih Themplate dan klik kat Edit HTML klik Proses dan klik kat Expand Widget Templates.Lepas tu tekan CTRL + F pada keybord anda dan cari Kod Ni "h2 {",nak senang kopy kod tadi dan paste je kat kotak carian sebelah atas dan penjuru kanan dan tekan enter. 

Bila dah jumpa kod ni "h2 {" Pastekan Kod kat bawah ini di sebelah Bawah Kod tadi :

background:#DCDCD;

border: 3px double gray;
line-height: 18px;
-webkit-border-radius: 0px;
text-align: center;

Bila dah Paste atau masukkan, TRY Preview Dulu,kalau OK baru SAVE THEMPLETE.Ok tutorial kali ini pun TAMAT

Nota : Mengikut Warna

• #DCDCD = Boleh Tukar Dgn Imej Url
• 3px = Boleh Tukar Ikut Cita Rasa Masing2
• double = Boleh Tukar Rujuk Pada Rujukan Dibawah Atau Gambar Atas
• gray = Boleh Tukar Ikut Warna kesukaan
• 18px = Boleh Tukar Ikut Cita Rasa Masing2
• 0px =Boleh Tukar (10 Untuk Melengkung Sebalah Tepi)
• center = Yang Ini Untuk Tek Title Dalam Sidebar (Boleh Tukar Ke right Atau Left)

Rujukan : Jenis Garisan

• None : tiada sempadan di semua
• Dotted : siri titik.
• Dashed : siri segmen garisan pendek.
• Solid : line satu-satunya segmen.
• Double : dua baris pepejal.
• Groove : 'diukir' ke dalam kanvas.
• Ridge : seperti ia keluar kanvas.
• Inset : seperti ia tersemai dalam kanvas.
• Outset :  seperti ia keluar kanvas.

KOD WARNA SINI

Iklan Nuffnang : Cara Letak Iklan Atas Header Blogspot!

Kembali lagi kita pada tutorial berkenaan macam mana nak letak iklan Nuffnang kat bahagian atas Header Blog khususnya pada para pengguna Theme Blogspot.Sejak saya mula berblogging saya tertarik dengan kedudukan Iklan Nuffnang kat celah Atas Header Blog kebanyakkan Blog yang saya lewati.Kerana ingin juga kedudukan Iklan saya berkedudukan serupa saya pun google untuk mencari tutorial yang berkenaan.Banyak yang saya jumpa tak sesuai untuk them Blogspot,kedudukan iklan memang kat atas tapi ade sesuatu yang tak kene,mungkin untuk Theme Wordpress ianya sesuai tapi bukan pada blogspot.

Sekadar Contoh

Contohnya : Kebanyakkan Tutorial banyak menyarankan kita mencari cari Kod  seperti ini <div id='header'> mahupun yang ini <div id='header-wrapper'> dan banyak lagi,sebelum Pastekan Iklan Nuffnang kat sebelah atas Kod tadi.Sebenarnya Kod-Kod seumpama ini tak ngam atau sesuai dengan Blogspot kekadang langsung tak jumpa pun,jadi nak yang betul-betul sesuai ikut tutorial kat bawah ini.

TUTORIAL BERMULA

Mula-mula, pergi kat Dashboard --> Design --> Edit Html --> Expand Widget Templates lepas tu tekan Ctrl dan F serentak cari keyword "<header>" dan tekan Enter pada keybord.

Bila Dah Jumpa "<header>" pastekan Kod Iklan Nuffnang yang nak di letakkan kat atas Kod tadi.Bila dah paste,jangan terus save Tolong Preview dulu,bila dah OK baru tekan SAVE Template.

OPP..kalau anda nak letakkan iklan Nuffnang anda kat celah bawah Header pun boleh cuma search keyword ini </header> dan pastekan Nuffnang code di bawah keyword tersebut.Ok semoga tutorial ini membantu anda Njoy.

-TUTORIAL TAMAT-

Membuat Border Sidebar Blogspot

Salam pada semua,kali ini saya ingin berkongsi sedikit totorial macam mana nak membuat Border Sidebar pada theme Blogspot  khasnya.Kenapa saya nak berkongsi totorial ni sebab asas theme blogspot tak ada yang mempunyai Bonder Sidebar seperti kebanyakkan theme wordpress.Kepada blogger-blogger baru macam saya ni yang menggunakan theme blogspot yang asli tetapi ingin kewujudan Bonder Sidebar ni dalam blog,toturial ni memang berguna.

Mungkin anda tertanya tanya?kenapa tak download je theme yang free lagi comel-comel contohnya di web Twenty Eleven.Ya memang banyak theme-theme yang free kat kebanyakkan web,tapi tak semuanya menjadi pilihan yang sesuai lagipun agak susah nak di edit bagi yang tak tahu kod-kod css ni semua,jadi pekara yang paling senang adalah menggunakan Theme Blogspot yang disediakan.Kita nak edit pun senang cuma pergi Dashbord, pilih Themplate dan pilih Customize dan pilih Advance,kat situ anda boleh edit Theme Blog yang dipilih.Kalau Theme yang kita download,Pekara yang ada kat Advance tu tak wujud,jadi nak edit agak susah.

Opp..nampaknya saya dah melalut panjang lebar pulak, hampir terlupa tujuan sebenar entry ni,ok..nak memasukkan kod Bonder Sidebar tu,terlebih dahulu pergi kat Dashboard atau Desigh dan pilih Themplate dan klik kat Edit HTML klik Proses dan klik kat Expand Widget Templates.Lepas tu tekan CTRL + F pada keybord anda dan cari Kod Ni "h2 {",nak senang kopy kod tadi dan paste je kat kotak carian sebelah atas dan penjuru kanan dan tekan enter.

1 : Cari kod ini :

 h2 {

2 : Kopy kod dibawah ini dan paste dibawah kod atas tadi

margin: 1.6em 0 .5em;

 padding: 4px 5px;

background: #E6E6E6;

font-size: 100%;

color: #000000;

}

3 : Preview

Kalau ok Save Themplete

Ok Dah Siap

-Enjoy-

Nota: Yang Berwarna Tu Anda Boleh Tukar Ikut Cita Rasa Sendiri

Warna Background Bonder Sidebar : #F8B4BF;

Font Size : 100%; font size tu aku rasa 100% 

Font Color Kat Sidebar Title : #000000; 

Margin and Padding tu rasanya tak perlu ubah.

Klik Sini Untuk Kod warna