Home» / Panduan membuat Rolling Sidebar di blogspot.

Panduan membuat Rolling Sidebar di blogspot.

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.

<div class='fixed_menu'>
<a href='http://feedburner.google.com/fb/a/myfeeds' title='feedburner'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3UKi6Gh1cuovuM5okYpi3t-7A7tcsgWKFTcyPxdL62u0lmjshOFMsy-SF7TbvSefMR3qL8ChtIRI1aFnzSggP1BEUSLdzv8jxrB6KnXNQLhubsQwHXp3ycqHY7J_IOdUVN7_rYrvOaq5/'/></a>
<a href='#' title='friendster'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9TAI4bICMQMvc8WBW5KvTX2Nv9ExK_N13R99ZOM82_3kozPGCEHzZWX11ChV6yBHPeXDYTWn5YAbMgvMPXlZACYFb1jMjTMCKxfAm3kq_Z9jz-XZuyL4_QLp5y7eRRmtTZ7q3J64W-K7l/'/></a>
<a href='#' title='twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHY4wfB8mtSf9v0KLf4oEPHRHImJ6Mp7apJgZ8B-Pop3bM7DsRprfheJyIyJFianr6m1a-6ata7rGGB_z-V6cbM7FmXKx9-x8s-NaTbu9w3hhmOT41Jq9p3dIxoI84H68l-nwmFCzaceop/'/></a>
<a href='#' title='youtube'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBb5TIPX3HZSA7Zie1S3XfoZ8yizkNLxIZG4lWpHo1GHcjn1XwEhFhU6Hq04ZneWRnNRacOELEMkLviXoi6eldkLa_iAjYGr3c4ZLm7LDfBf_V44RpX5kU71b9tmZCQYSjM1-iuYtdI3ca/'/></a>
<a href='#' title='Rss'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrAQKapsVwing2NrXbrTrAxL6AbBPu-bau0_CejtU4nEXsTZoIJPvWaud5ZP-yIR5nb3WnX8i67ywaHm6VREaAOt3h5cEN2P1FTYRH-aDm30CGIj0Q1nX-aM8YvPeU9iXAIUoz65J8lXoW/'/></a>
</div>

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. RizkyzoneTuesday, October 27, 2009

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

    ReplyDelete
  2. UnknownTuesday, October 27, 2009

    ya semoga berjaya

    ReplyDelete
  3. PiratzTuesday, October 27, 2009

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

    ReplyDelete
  4. UnknownTuesday, October 27, 2009

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

    ReplyDelete
  5. landivaiWednesday, October 28, 2009

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

    ReplyDelete
  6. UnknownWednesday, October 28, 2009

    landivai ko pakai browser apa aku tgk ok jer

    ReplyDelete
  7. cybernetic88Wednesday, October 28, 2009

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

    ReplyDelete
  8. landivaiWednesday, October 28, 2009

    aku pakai firefox. npe aku xnmpk ek??

    ReplyDelete
  9. ezanykunWednesday, October 28, 2009

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

    ReplyDelete
  10. UnknownWednesday, October 28, 2009

    ko nampak ke acap?

    ReplyDelete
  11. UnknownWednesday, October 28, 2009

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

    ReplyDelete
  12. UnknownWednesday, October 28, 2009

    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
  13. ezanykunThursday, October 29, 2009

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

    ReplyDelete
  14. ezanykunThursday, October 29, 2009

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

    ReplyDelete
  15. UnknownThursday, October 29, 2009

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

    ReplyDelete
  16. Budak Malu818Tuesday, November 03, 2009

    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
  17. UnknownTuesday, November 03, 2009

    Budak malu esok aku buat tutorial dia ya

    ReplyDelete
  18. NazSunday, December 13, 2009

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

    ReplyDelete
  19. UnknownMonday, December 14, 2009

    Sama-sama Naz

    ReplyDelete
  20. annaz.hamirzulMonday, December 28, 2009

    wow..thanx..bgus la..

    ReplyDelete
  21. E-mail : ids_malaysia@yahoo.com/ idsservices@yahoo.comTuesday, February 09, 2010

    tak dapat buat page pun byk kali try

    ReplyDelete
  22. UnknownTuesday, February 09, 2010

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

    ReplyDelete
  23. Tips Trik KomputerMonday, February 15, 2010

    ;) Trima kasih baanyak

    ReplyDelete

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

Subscribe to: Post Comments (Atom)