Tutorial Edit Simple Template


Assalamualaikum and Hye everyone.
Anis Hadi request tuto. Lagipun takda idea nak update apa. Buat lah tuto en. Ni tutorial macam mana nak edit simple template. Erm actually saya dah test edit. Dan..... saya taktahu lah okay ke tak. Nak tengok? CLICK HERE. Itu hanya blog testing je. Okay jom kita mula~

p/s : ctrl + c untuk copy.
p/s : comment kalau ada yang tak faham / tak menjadi
  • Untuk background. Design -> Template designer -> Ikut step gambar bawah ni
DESIGN -> EDIT HTML -> TICK EXPAND WIDGETS TEMPLATE
  • Untuk hilangkan navbar putih dekat atas sekali tu. 
CTRL + F dan search code /* Variable definitions. Dah jumpa? Okay good. Now paste kan code bawah ni dekat ATAS code yang korang cari tadi.
#navbar-iframe {
display: none !important;
}
  • Untuk background DATE dan TITLE SIDEBAR
CTRL + F dan search code h2 { . Dah jumpa? Lepastu paste kan code bawah ni dekat BAWAH code yang korang cari tadi.
text-align:center;
background:url(URL IMAGE);
border-left: 5px solid #A4A4A4;
border-right: 5px solid #A4A4A4;
border-top: 1px solid #A4A4A4;
border-bottom: 1px solid #A4A4A4;
padding: 4px;
  • Untuk background TITLE POST 
CTRL + F and search code h3.post-title, .comments h4 { . Kalau dah jumpa paste kan code bawah ni dekat BAWAH code yang korang cari tadi.
text-align:center;
color: #000000;
background:#D8D8D8;
line-height:25%;

  • Untuk blockquote
 CTRL + F dan cari code .post-footer {. Dah jumpa? K kalau dah jumpa paste kan code yang saya bagi ni dekat ATAS code yang korang cari tadi. *Code ni awak boleh cari yang lain. Ni contoh je. Tapi step nak letak blockquote untuk simple template sama macam ni*
.post blockquote {
-webkit-transition-duration: 2s;
background:url(URL BACKGROUND);
border:1px solid #585858;
padding: 5px;
}
  • Untuk scroll bar
CTRL + F and search code  ]]></b:skin>. Bila dah jumpa paste kan code yang saya bagi ni dekat ATAS code yang korang cari tadi.

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
height: 10px;
width: 10px;
display: block;
background: #eee;
border: 1px solid #dedede}
::-webkit-scrollbar-track-piece {
background-color: #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #eee;
border: 1px solid #dedede}

  • Tips nak tengok width blog simple template.  

Dsign -> Page elements -> Click edit bahagian header.


  • Untuk tab menu simple template.



4 comments:

  1. nak tanya macamana nak buat header dekat luar,maksudnya tak sekali dengan body.

    ReplyDelete
  2. Kene transparent kan dia punya header la. yang benda putih atas tu

    ReplyDelete
  3. Menjadiiiiiii! Thanks!! I love you!! :D

    ReplyDelete
  4. boley tolong buat tak ? xfhm nk buat macam manee

    ReplyDelete