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

---