[Tutorial] Scrollbar and Blockquote

17 July 2012

[Tutorial] Scrollbar and Blockquote

Assalamualaikum, dan selamat petang. Apa khabar semua, harap sihat-sihat lah semua ye. Baiklah hari ini nak tunaikan permintaan Myra iaitu scrollbar dan blockquote macam dekat blog saya ini. Ermmm..rasanya hari itu dah buat, tapi mana entah hilang, dah buang kot. T___T .
Myra, so sorry sebab baru ada masa nak post tutorial ini. Ini untuk awak ye, kalau yang lain nak pun jomlah cuba.

Tutorial ini saya gabungkan terus untuk Scrollbar dan Blockquote.

Untuk Simple Template atau Denim Template.

1. Design > Edit HTML

2. Tekan CTRL+F dan cari /* Header

Untuk Blogskin.

1. Template > Edit HTML

2. Tekan CTRL+F dan cari kod ini atau <body> atau </style>

3. Kalau dah jumpa, copy kod ini :

::-webkit-scrollbar {
width:25px;
background:#ffffff;
}
::-webkit-scrollbar-track-piece {
background:url(URL IMAGE);
width:1px;
border: 12px #fff solid;
overflow:hidden;
-webkit-border-radius:100px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius:10px;
background:url(URL IMAGE);
width:10px;
border:7px solid #fff;
border-top-width:2px;
border-bottom-width:2px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
height:25px;
display: block;
background:url(URL IMAGE);
-webkit-border-radius:100px;
border:7px solid #fff;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:start:decrement:hover, ::-webkit-scrollbar-button:end:increment:hover {
background-color:#777;
cursor:hand;
}
::-webkit-scrollbar-button:start:decrement:active, ::-webkit-scrollbar-button:end:increment:active{
background:#fff;
}

blockquote {
border: 1px solid #FFC2D5;
color:#000;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
margin:1em 40px;
-webkit-transition: 0.5s;
}
blockquote:hover {
border: 1px solid #1f8869;
border-right: 8px solid #1f8869;
border-left: 8px solid #1f8869;
-webkit-transition: 0.5s;
}

4. Yang saya warnakan dengan warna oren itu bolehlah masukkan URL IMAGE yang anda nak untuk scrollbar, yang warna merah itu untuk color. Anda ubahlah ikut suka hati anda.

5. Paste kan kod yang anda copy itu, betul-betul di atas kod /* Header (untuk simple dan denim template) atau <body> / </style> (untuk Blogskin).

6.Sebelum save jangan lupa Preview dulu. Kalau tak ada error barulah save ye.

Sampai di sini sajalah tutorial kita, kalau dah cuba bagitahu ye, jadi atau tak. Kalau ada masalah bagitahu lah ye nanti saya tolong. Good Luck..Bye-bye. Wassalam.

p/s : Saya menang GA Ole-ole dari Sarawak. GA paling simple sebab itu cuba nasib Alhamdulillah, rezeki saya. Terima Kasih kepada Kak Dni dan maaf saya ter "private" kan profile blog. Jom kita terjah blog Kak Dni, yang cute, awesome dan the best ini. Selalu baca blog Kak Dni tapi jarang tinggalkan komen.