Untitled Salam semua..hari ini aku ingin berkongsi dengan anda semua bagaimana cara membuat Rolling Sidebar di dalam blog anda.Jika anda ada menggunakan rocket dock didalam komputer anda dan berasa senang menggunakannya maka fungsi Rolling sidebar juga adalah lebih kurang sepertinya cuma rocket dock digunakan didalam komputer dan rolling sidebar pula anda gunakan didalam blog.

Rolling Sidebar ini digunakan sebagai jalan pintas untuk pergi ke sesuatu link yang lain contohnya seperti friendster,youtube dan sebagainya dan dibuat dalam bentuk icon.Dengan meletakkan Rolling sidebar ini didalam blog anda bukan sahaja dapat memudahkan anda dan juga visitor didalam blog anda tetapi dapat juga mengemaskan lagi penampilan blog anda itu.Anda boleh tengok disini demo Rolling Sidebar dan jika berminat boleh ikuti cara untuk membuatnya dibawah.

1.Pergi ke layout--->Edit HTML.Tidak perlu memberi tanda didalam kotak expand widget template.

2.Anda cari kode </b:skin> kemudian copy dan pastekan kode dibawah ini diatasnya.

.fixed_menu {
position: fixed;
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; }
* html .fixed_menu {position:absolute;}

3.Kemudian anda cari pula kode <body> kemudian copy dan pastekan kode dibawah ini dibawahnya.

4.Selesai.dan semoga berjaya.

P/S:Yang aku tandakan dengan warna merah diatas itu anda boleh tukarkan kepada nama dan link anda sendiri.

<a href='link url destinasi anda' title='Nama Laman link'><img src='Link icon anda'/></a>


23 comments:

  1. pertamax sbelum kehabisan premium.... mantab sob langsung praktek

    ReplyDelete
  2. menarik.. tapi taknak pakai.. hahah...:))

    ReplyDelete
  3. hehe..x nk pakai xpe mgkn ada org lain nk pakai

    ReplyDelete
  4. ariey, x nmpk la kat demo tu. tenggelam ke blakang template.

    ReplyDelete
  5. landivai ko pakai browser apa aku tgk ok jer

    ReplyDelete
  6. woo smart jgk kn ni. ko xpkai pulk?. aha

    ReplyDelete
  7. aku pakai firefox. npe aku xnmpk ek??

    ReplyDelete
  8. aah la.. tenggelam jer demo tu.. aku guna musang berapi..

    ReplyDelete
  9. landivai ko pakai version berapa cuba pakai ver3.5 sbb aku tgk xde masalah pun

    ReplyDelete
  10. ko pun x nmpk ke ezany..pelik nih sbb aku dh try dkt ie8,google chrome dan firefox semua ok tp firefox yg paling perfect

    ReplyDelete
  11. aku rasa mcm dah dpt detect nape.. rasanya sape yg pakai widescreen jer nampak ok..

    ReplyDelete
  12. tapi ikut template gak la kan.. kalau template yg ko guna ni mesti ok jer.. sbb tepi tu ade gap..

    ReplyDelete
  13. Mungkin jgkla ezany..nanti aku try tgk kode apa yg boleh diubah supaya serasi untuk semua.

    ReplyDelete
  14. salam ariey,
    mcm mane nk buat page navigations number kt bwah post?
    yang mcm ko wat kt bwah 2 ha..
    puas dah aku try,xjadik2..

    ReplyDelete
  15. Budak malu esok aku buat tutorial dia ya

    ReplyDelete
  16. Salam.. Terima kasih di atas panduan ini. :)

    ReplyDelete
  17. tak dapat buat page pun byk kali try

    ReplyDelete
  18. x boleh ke ids..pelik plk ari buat ok jer mgkn ada kesilapan kot..

    ReplyDelete

Sila tinggalkan komen ada dibawah ini dan yang berkenaan dengan post sahaja dan semua komen akan ditapis dahulu sebelum ditampilkan.