Tutorial : Letak Box Section Bawah Header

Tengok Starbuck ni terhingin pula nak minum Starbuck. Macam sedap je, macam enak je.

Assalamualaikum. Hai you all...

Okey, hari ni entah kenapa nak share cara nak buat section box dekat atas. Tujuan benda tu

sebenarnya adalah supaya readers korang senang nak cari post-post yang berkaitan . Pakai blog

archieve pun boleh, but kalau yang jenis suka post satu hari 3 post, kalau setahun mesti dah

berlambak kan. Lagipun, nanti korang punya sidebar nampak serabut . So, this is it :

1. Tekan dashboard > template

2. Tekan ctrl+f  atau F3 . Cari perkataan blockquote { .

3.Copy code di bawah :

a.box{
-webkit-transition: one by one 0.5s ease-in-out;
-moz-transition: one by one 0.3s ease-in-out;
-o-transition: one by one 0.3s ease-in-out;
-ms-transition: one by one 0.3s ease-in-out;
transition: one by one 0.3s ease-in-out;
cursor:pointer;
background:transparent;
width:200px;
 font:20px tt;
 padding:3px;
text-decoration:none;
color:#555;
display:inline-block; text-align:center;
}
a.box:hover{
padding-left: 20px;
-webkit-transition:0.2s;
}

4.Pastekan atas perkataan blockquote {

5. Tekan ctrl+f atau f3 sekali lagi. Search perkataan </head> 

6. Copy code di bawah :

<center> <a class="box" onclick="document.getElementById('page').innerHTML=document.getElementById('diary') .innerHTML" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ59MUpF-udXJ-2azlILkLh1gvcyf2sKVwLEG1reKN10lR-TBmwi5o7oVBy6M0JPHVuh1lLAPDwZMstbwMz-Wp1JL4eHCRFmV01kQCRj_KSCbDiAUe-L1VMUC9wZ5nZD9P8nirwJze5Is/s1600/home.png"/></a> <a class="box" onclick="document.getElementById('page').innerHTML=document.getElementById('profile') .innerHTML" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Hkp1yD51kP92iXHPTI_BWXVdS6DiZbT7Rn0LOGQenacsqF9523FtRccFqREGRSLjUZiEIqdz_EGU1qJratw9lIxbIJaiTsw-68lyad7XpIh5dZGKKlnwFYz8Ez49FRwCaXW6KHweyRA/s1600/sharing.png"/></a> <a class="box" onclick="document.getElementById('page').innerHTML=document.getElementById('links') .innerHTML" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIQJW4COOz9_wK6MDgriKqw71FMqBH-i2DVpIeWAvQOk8n5W4gdXVhcb9Fi6VFOAYKZJKM-AQqkV1kcY3oqooYuOu2vqHySLvYxVGr5cPiw8vzZZo5Lq9i2F76WwpzKGVmRl6Tb02CX1w/s1600/Friends.png"/></a> <a class="box" onclick="document.getElementById('page').innerHTML=document.getElementById('stuff') .innerHTML" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nhe55d4LNyMVEpIhroI23iT8laLLDygEFxa5w61xL6ZcLMFdn1Y9wKc-2tweuFwrpGxOy0x8wwgcX9zNERSobzlBWY7sRFYAiIrPJHdkqw1bTZnnabj5AHkhEOhFiVZC8CEuutRAE-0/s1600/KARYA.png"/></a> </div></center><br>

7. Paste dekat atas perkataan </head> .

8. Preview and kalau dah okey save. Selamat mencuba !