Tutorial : Scroll Box di Post Entry

Assalamualaikum!
Hai korang.

Aku nak share sikit cara aku letak scroll box dalam post. Kalau korang tak dapat bayang lagi macam mana boleh ziarah sini dulu.

Tutorial ni bagi aku complicated sikit lah. Kalau tak biasa memang akan rasa payah.

Apa-apa pun, apa salahnya korang cuba dulu. Mana tahu aku sorang je dalam alam ni yg rasa susah. Hahaha.

1. Dashboard - New Post - HTML

2. Copy code ni :

<center>
<div style="background:  #FFFFFF ; border: 2px solid #FFFFFF; height: 150px; overflow: auto; width: 400px;">
TEKS KORANG
</div></center>

3. Paste dalam ruangan HTML bukan Compose ya.

4. Ubah :

MERAH : warna background scroll box
BIRU : ketebalan garisan border scroll box
UNGU : warna border
PINK 1 & 2 : tinggi dan lebar scroll box

5. Klik Compose, dan korang sepatutnya akan nampaklah macam mana scroll box korang. Dan dalam tu ada tertulis "TEKS KORANG" kan? So, korang buang ayat aku tu dan ganti dengan ayat korang sendiri.

6. Dah siap, PUBLISH !!

Alhamdulillah.

Mudah ke senang? Ehh?
Hehehe.

Tutorial : Popular Posts yg Comel

Assalamualaikum!
Hai korang.

Hari ni aku nak share cara buat  Popular Post korang nampak gempak!
Siapa yg tak tahu lagi cara dia macam mana teruskan membaca ya.

Tapi first of all, korang kena ada gadget Popular Post dulu tau.
Dah ada? Ok proceed.

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search code ni :

]]></b:skin>

3. Dah jumpa, korang copy pulak codes kat bawah ni :

#PopularPosts1 h2{

width:100%;

font-size:1.3em;

text-indent:-12px;

font-size:14px;

text-align:center;

color: #000000;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:8px 0px 1px;

left:-7px;

width:290px;

}

#PopularPosts1 li{

position:relative;

margin:0 0 10px 0;

padding: 3px 2px 0 17px;

left:-5px;

width:285px;

}

#PopularPosts1 ul li{

background: #000000;

position: relative;

display: block;

padding: .4em .2em .4em 2em;

*padding: .2em;

margin: .5em 0;

background: #000000;

border:2px solid #000000;

width: 180px;

text-decoration: none;

border-radius: .3em;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:before{

content: counter(li);

counter-increment: li;

position: absolute;

top: 50%;

margin: -1.3em;

height: 2em;

width: 2em;

line-height: 2em;

font-size: 15px;

color: #000000;

background: #000000;

border:2px solid #000000;

-webkit-box-shadow: 0 8px 5px -7px #888;

-moz-box-shadow: 0 8px 5px -7px #888;

box-shadow: 0 8px 5px -7px #888;

text-align: center;

font-weight: bold;

border-radius: 2em;

position: absolute;

left: 0;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:hover{

background: #000000;

}

#PopularPosts1 ul li:hover:before{

transform: rotate(360deg);

}

#PopularPosts1 ul li a{

font: 12px Arial, serif;

text-shadow: 0 -1px 2px #fff;

color: #444;

display:block;

min-height:25px;

text-decoration:none;

text-transform: uppercase;

}

#PopularPosts1 ul li a:hover{

color: #444;

}

4. Then, aku suggest korang paste dulu dalam Microsoft Word dengan mengekalkan warna codes tu, supaya senang korang nampak apa yang perlu tukar : MERAH 1 : warna tajuk Popular Posts
MERAH 2 & 3 : warna background Popular Posts
BIRU 1 : warna border Popular Post
BIRU 2 : warna nombor

BOLD : kelebaran Popular Posts

UNGU 1 : warna background nombor
UNGU 2 : warna border nombor

PINK 1 : warna hover Popular Posts
PINK 2 & 3 : saiz dan jenis font di Popular Posts

***Nak HTML colour codes tekan sini !!

5. Dah settle tukar apa yg perlu tukar, copy codes tersebut dan paste di atas code dalam Step 2.

6. PREVIEW.
Kalau dah puas hati, then SAVE cepat-cepat !!

Alhamdulillah.

Pheww...!
Panjang betul tutorial kali ni.