DASHBOARD HOME TUTORIAL TEMPAHAN MY DESIGN

Tuto Untuk Template Picture Window Part 1

Aku nak share gan korang cara2 nak buat design blog menggunakan template picture Window...Tuto nie juga khas untuk fieda.... kerana fieda ingin belajar edit blog....Apa salahnya aku share gan kawan2 yang ingin belajar hihihi...

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

  1. Klik Design pastu Edit HTML...Bila dah klik Edit HTML kat bawah tue ada coding2 untuk edit blog...
  2. 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....
  3. 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...
 .sidebar h2 {
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....

  1. Korang Ctrl F carik kod   .main-inner {   dah jumpa? korang buang coding di bawah dan pastekan kod nie...
 text-align:center;
-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...
TERIMA KASIH SUDI BACA DAN KOMEN

9 comments:

bloggerid said...

maksih tutonya bu...
http://insanicita.blogspot.com/

Cik Purple said...

kak yg ni berapa colum punya? :)

Anonymous said...

trimas sangat!!!! tersembul biji mata cari coding untuk template nie haaa ^_^

ummi_norseha said...

wah terbaekkklh Cik Rose...

ummi_norseha said...

dtg lg jgn lupa smbng tuto nie yer,suka sgt dgn tuto kt sn...:)

Unknown said...

best.....akak ambik tutorial ni ye....tapi nak tanya le mana nak dapat border cantik2

Unknown said...

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

kisah si dairy said...

nasib baik la cik rose buat tuto nie..tq

mama3heroo said...

mekasih kongsi tutor ni ye..da try