Tutorial Customize Sidebar Blog (2 column).

Salam & Hello.

Tutorial ni special dedicated to Syed and siapa² yang teringin nak comel²kan sidebar blog diorang. First of all, korang kena tau apa itu sidebar, tapi tak kan korang tak tau kot. Sidebar tu yang bahagian tepi sebelah entri/post kat blog korang tu. Kat bawah ni contoh sidebar.


Untuk tuto ni khas untuk blog 2 column dan XML template punya. Unutk Old Template atau Template Designer pun boleh jugak janji korang kena pandai la main HTML.

Customize, edit, and design your sidebar blog!

1. Mula² korang pergi Dashboard > Design > Edit HTML > dekat dalam kotak Edit Template, korang tekan F3 dekat keyboard comp korang then akan keluar kotak search. Dekat kotak search tu korang taip and cari code ni #sidebar-wrapper dan .sidebar.

Contoh code nya:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

dan

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em; }

.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; }

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em; }

.main .Blog {
border-bottom-width: 0; }

2. Dah jumpa code yang lebih kurang macam kat atas ni then korang boleh lah mula mengcustomizekan sidebar korang. Korang boleh tukarkan warna sidebar, title sidebar, nak jadikan rounded-border pun boleh atau nak tambah background. Caranya macam ni:


Untuk menukar warna background sidebar, letak background dekat sidebar, tukar font sidebar atau mengrounded-borderkan sidebar korang:

Tambahkan code ni kat dalam code #sidebar-wrapper korang tu.

background: #FFFFFF url('http://urlbackgroundimage.com/image.jpg') repeat fixed center;
font: normal normal 100% Arial, Georgia, Serif;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

kat atas ni cuma contoh, boleh ubah mengikut kreativiti korang okay. click sini untuk tau basic rounded-border :)

3. Untuk letak image background dekat title sidebar pulak tambahkan code ini bawah code .sidebar { tapi image kena lah bersesuaian dengan width sidebar korang tu ok. Boleh repeat atau stay je image tu.

.sidebar h2 {
margin: 0.6em 0 .5em;
padding: 30px 5px;
color: #000000;
font: normal normal 100% Arial, sans-serif;
text-align:center;
background: url("http://urlimagebackground.com/image.png"); }

Sesuaikan margin, padding. Letak je berapa² je nombor, preview dan tgk sidebar korang, janji tak nampak pelik. hee~ Yang lain² tu boleh ubah mengikut kreativiti masing².

4. Yang ni plak untuk korang kalau nak buat ada cute icon/image dekat tepi bloglist sidebar korang.


Korang delete code ni:

.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; }

dan gantikan dengan code ni:

.sidebar ul li {
background: url("http://urlimagebackground.com/image.png") no-repeat left 8px;
margin:0;
padding: 0px 0px .25em 15px;
text-indent:-15px;
line-height:1.5em;
padding: 6px 0px 6px 22px;
position: relative; }

padding, text-indent dgn padding lg satu tu aku tak sure sangat ukurannya tapi korang try je la asalkan jadi. Kalau tak jadi sangat pandai² la korang ubah nombor² kat situ ek. Tapi seelok-eloknya korang biar je lah, tak payah usik² takut lain pulak jadinya. =)

Tak habis lagi ni lepas korang preview takde error and save, korang pergi pulak ke Page Elements > Click gadget bloglist korang, tengok setting dia, Untick button Icon. Tengok contoh bawah ni:


Ok, siap. Jangan lah lupo pulaks save semua yang korang buat tadi ek. Ehh, jap² sebelum korang edit semua code atas ni disarankan korang back up dulu template korang takut tak jadi plak kang merana tak pasal². Hehe~

Aku harap tuto ni dapatlah memabntu korang untuk mengkiyutkan sidebar blog korang. Tapi kalau korang tak paham ke atau rasa tuto ni tak membantu langsung korang sebab tak paham lah tu agaknya, janganlah segan silu tanya aku kat kotak komen wokeis.

Akhir kata dari aku, good luck playing with da HTML code. All the Best! Sekian. :)

16 comments:

  1. wah! hebat! hebat..nanti sy nak cubalah... ehhehe..dah lama tercari2... hehe..mmg nk ubah icon tue..toink2...tq

    ReplyDelete
  2. @Amirull Izzat - ehehe~ tq.. alhamdulillah, ad yg phm tuto sy kli ni. tkut org x phm je.. hehe~

    ReplyDelete
  3. hazirah buat lah tutorial twitter tu T________T

    ReplyDelete
  4. @Liyana Lunia. - oh, ok sis. Nanti sy buat asap. wait yaa~ :D

    ReplyDelete
  5. @♥FyqaFara - apa yg xde? mgkin ada yg tersalah code tu mnyebabkan dia x kuar kot. huhuu~

    ReplyDelete
  6. NK TNYE MCM MANE NK ADD LIST KT BLOG LIST.SY TRY XDPT LA.

    ReplyDelete
  7. salam,,nk tnyer knpe sye x de kod yg kene cri tu,,,? sye just pkai tmplate from bs,,,knpe x de eak?

    ReplyDelete
  8. @aynadys nak add bloglist, mula2 awk pegi dkt design > click add a gadget > dan add la Blog List gadget tu. Lepastu bleh la masukkan semua link blog yg awk suka. Cuba try lg skali kalo x jd tell me ya. :)

    ReplyDelete
  9. @AZIE - oh, xde ke. padahal sy pun guna template dr blogspot. dan code tu utk template dr blogspot. kalo xde jgk, awk ltk la code tersebut yg ada perkataan sidebar. mungkin template lain², code dia pun lain² jugak. :)

    ReplyDelete
  10. dear..cmne nak buat border camtu jugak kat background outer blog

    ReplyDelete
  11. @farasakura border mcm mne? paste code tu dkt code outer blog mungkin..

    ReplyDelete
  12. hi! sy try cri xde pun. mcm mana eh? tq. :)

    ReplyDelete
  13. @ZATTY - cri sidebar wrapper tu eh. kdg2 mgkin codenya berbeza begntung pd jenis template yg kite guna. cuba cri something yg nk dkt same dgn sidebar wrapper tu okiedokie. ^^

    ReplyDelete