April 01, 2011

Cara membuat Toolbar Melayang

Pada kesempatan kali ini saya akan berbagi tentang bagaimana membuat Toolbar Melayang di blog kamu seperti yang ada di samping kanan blog ini... agar blog kamu lebih kelihatan keren dan memberi kemudahan kepada pengunjung untuk meninggalkan jejaknya di blog kamu!

langsung ke pokok pembahasan...... 

1. Login ke akun blog anda
2. pada "Dasbor" pilih rancangan-Edit HTML
3. Letakan Code berikut ini tepat diatas Code ]]></b:skin>

......................................................................................................................


#tejanavbar{font-family:Comic Sans Ms;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSK9laqfl_-hmboL1-DFdt_TQOE6aw-4e9lBip5FJoV-eFP5AOjyFUn7Vu1bcfxqxcPVzPPmbAFjBpfUTaugL4ZnbBLKjUU1uzaBEyFS3nKgI338Vx66w2koan1BbNNcRKQZSMm-CuSp_l/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
#tejanavbar .left{float:left;text-align:center;font-size:11px;font-style:normal;font-weight:bold;color:white;padding:2px 10px;}
#tejanavbar .right{float:right;padding:0px 2px;cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rM4jqtBWdvcEcb3JeHWFS50-SV-VhfcRWDQnqrZTiOPvWhWe7GfEtRIEQUT1wH5p0hesLPY94w4Rx6pa9fa3hZe22vNIlj1YhAQUwKiIlpeppSfsdSfFN5uNnnu3MnOda3Xw2av39-o/s1600/Cursord.png), default}
#tejanavbar a{color:red;text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 20px;-moz-outline-style:none;}
#tejanavbar a:hover{color:white;text-shadow: rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 20px;border:0px;-moz-outline-style:none;cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rM4jqtBWdvcEcb3JeHWFS50-SV-VhfcRWDQnqrZTiOPvWhWe7GfEtRIEQUT1wH5p0hesLPY94w4Rx6pa9fa3hZe22vNIlj1YhAQUwKiIlpeppSfsdSfFN5uNnnu3MnOda3Xw2av39-o/s1600/Cursord.png), default}


.......................................................................................................................

4. Terahir letakkan script berikut tepat di bawah <body> 


.......................................................................................................................


<div id='tejanavbar' style='position:fixed;'>
<span class='left'><IMG align='top' alt='0' height='20' onclick='window.open(&quot;http://tejahtc.blogspot.com/?sm=1&quot;);' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKWubTwEa7irkano7bcUipAKLcy4z0Q8xyIKKEKzqY-ixCYCpj387FQQnB_vblpZWVoU5Lxw3czX5-YQSA1VGdEbBO0o8_vezQHULao7zHeZhTskfqeVaprDOA8iHOZMO-sQP7SBF_G3HF/s1600/tejaicon3232.png' width='26'/>
<span style='font-family:kristen itc;'><blink>&quot;WELCOME TO MY BLOG&quot;</blink></span></span>
<span class='right' style='font-family:verdana;'>
<IMG alt='1' height='20' onclick='window.open(&quot;http://www.facebook.com/pages/Sharing-Ilmu-pengetahuan/125513924175946&quot;);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPQiZKc2I/AAAAAAAAEDU/zD_grWbBNuQ/DADnfb.png' title='Facebook Page' width='20'/>
<IMG alt='2' height='20' onclick='window.open(&quot;http://www.facebook.com/pages/Sharing-Ilmu-pengetahuan/125513924175946&quot;);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPJwm1nBI/AAAAAAAAEDM/UMIdfmgbSII/DADnbookmark.png' title='My Favorites' width='20'/>
<IMG align='top' alt='3' height='20' onclick='this.setHomePage(http://websitenokia.blogspot.com/);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPQsgWT1I/AAAAAAAAEDc/-8SnRmd2RvQ/DADnhome.png' title='Set As HomePage' width='20'/>
<IMG align='top' alt='4' height='20' onclick='window.open(&quot;http://id-id.facebook.com/msuteja&quot;);' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4pbp_0GRZTV7BWN9yQUWJ8W-Vv8FHYx36pzrEd_7enS9sqBkpk2gkMssEG3QKbxwYjgOV4cySSUYJWxkffiwRVFGWlzfq73bA0Mz8FpeN_Jn5I5X7eFeNWbbJpCeQJtJCEh6-HAI9f0l/s1600/facebook.png' title='Add Me On Facebook' width='20'/></span></div>


.......................................................................................................................
Simpan selesai... mudah kan?


Selamat Mencoba dan Semoga Berhasil.....!!!!!!
dan jangan lupa tinggalkan jejak anda di blog ini
 

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...