First sekali korang kena tukarkan template korang kepada "picture Window" Klik Design pastu pergi ke template design....
Korang dah tukar template korang kepada "picture Window? Okey dah.....Kalau dah korang klik apply pastu klik view blog...Sebelum tue korang buang background tukar kepada transparent.Dah settle....Pasni kita start nak edit blog....
Sebenarnya edit blog nie senang jer...kalau kita tahu bermain dengan coding....Aku nak ajar korang sidebar terlebih dahulu
- Klik Design pastu Edit HTML...Bila dah klik Edit HTML kat bawah tue ada coding2 untuk edit blog...
- Korang carik kod nie /* Widgets
----------------------------------------------- */ dah jumpa? kalau dah jumpa buang semua coding yang berada di bawah kod tersebut sebelum kod /* Footer
----------------------------------------------- */ Kod nie dah lain codingnya....hati2 okey.... - Dah buang coding tersebut?Kalau dah buang Copy dan paste kod di bawah di tempat yang korang buang coding tadi....Sebelum save preview dulu jadik ke tidak okey...
margin: 10px;
padding: 6px;
font-size: 14px;
text-align: left;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHInG01VFPeDOOogSUExl2YXqso-haIDxfwSN96tsh-7vw2dp62iyljElku4FEr0d1RD49lNZzZER4uYpq9OSOwFdK1INDrioq1xqyTPmT3HAJT6C7asTOGOLmMzRyGidMG5TY_5mGRs03/s1600/background.png);
border-top: 4px groove #ff0099;
border-bottom: 4px groove #ff0099;
border-right: 6px solid #ff00ff;
border-left: 6px solid #ff00ff;
text-shadow: 2px 1px 2px #FFFFFF;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0BhvhsZtqc79Eg9c8INrSznsj6imUXC42XIF2lC6-1PCOWi_xyjqAWLsQ2f7_q2o6L6rIILoJjbhEVdrDBuKYaGULxFsuqR5yZFkNK8qBsb6Znsz8m3Ai8vxGEYcPhzlIRUBFg-bxNlg/s1600/list.png) no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}
.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}
.widget .post-body ul {
list-style: disc;
}
.widget .post-body ul li {
border: none;
}
.sidebar .widget {
text-align:center;
background:#;
border: 4px groove #ff0099;
padding-bottom: 0.9em;
line-height:1.9em;
-moz-box-shadow: 0 0 10px #FA58AC ;-webkit-box-shadow: 0 0 10px #FA58AC;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMLDnmBoUob_pyjYZDYcDoDn1niRTxQnHG2L_aBhUAPcangRhXNHUs-ApW67MoDrYkxQuBYE3dzvXl4eccTZI4TxIkKk9c4CL6PT2ZzTUwJJGRumzWfqZisN8KySxFPcMe9q2XiKJIXQVV/s1600/widget.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}
Okey Dah settle bahagian sidebar....Jadik tak? hihihi...Kalau jadik bagus!!!
Yang atas tue untuk tuto sidebar menjadi cantik....Sekarang tuto untuk border sekeliling blog pulak....
- Korang Ctrl F carik kod .main-inner { dah jumpa? korang buang coding di bawah dan pastekan kod nie...
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border:11px groove #ff0099;
-moz-box-shadow: 0 0 20px #000000 ;-webkit-box-shadow: 0 0 20px #000000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMLDnmBoUob_pyjYZDYcDoDn1niRTxQnHG2L_aBhUAPcangRhXNHUs-ApW67MoDrYkxQuBYE3dzvXl4eccTZI4TxIkKk9c4CL6PT2ZzTUwJJGRumzWfqZisN8KySxFPcMe9q2XiKJIXQVV/s1600/widget.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}
Okey settle...Preview dulu baru save....Dah siap!!!! nie belum habis lagi...nanti kita sambung okey...
9 comments:
maksih tutonya bu...
http://insanicita.blogspot.com/
kak yg ni berapa colum punya? :)
trimas sangat!!!! tersembul biji mata cari coding untuk template nie haaa ^_^
wah terbaekkklh Cik Rose...
dtg lg jgn lupa smbng tuto nie yer,suka sgt dgn tuto kt sn...:)
best.....akak ambik tutorial ni ye....tapi nak tanya le mana nak dapat border cantik2
Cik Ros ku sayang.... tang warna purple tu kalau akak nak tukar jadi macam blos che ros tu letak ribbon ke macam mana ek....Muah
nasib baik la cik rose buat tuto nie..tq
mekasih kongsi tutor ni ye..da try
Post a Comment