اضافة القائمة الدوارة بشكل جميل

السلام عليكم

هديه لزوار المدونه ولمدوني بلوجر

قائمه في نظري من احد القوائم المميزه

مايميزها

انها الايقونات الدوَّاره والخلفيه والتي توضع

يمين اويسار الصفحه وتصدر اصوات عند دورانها.

صوره توضيحيه

للاضافه اذهب الى تصميم > تحرير القالب

ابحث عن

]]></b:skin>
اضف الكود التالي فوقه مباشره

.sc_menu a { margin-right:20px; display: block; text-decoration: none; } .sc_menu span { display: none; margin-top: 5px; text-align: center; font-size: 16px; font-weight: bold; color: #C81909; } .sc_menu a:hover span { display: block; } p#.sc_menu a:hover img { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } p#.sc_menu2 img{ -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } p#.sc_menu2 img:hover{ -moz-transform: rotate(70deg); -webkit-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); } p#.sc_menu3 img{ } .sc_menu img:hover{ -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); }

احفظ القالب

اذهب الى عناصر الصفحه اضافة اداة الجافا

انسخ والصق الكود التالي في المربع

<div style="buttom: 0px; left: 0px; right:0px;position: fixed; top: 0px;background-color: #FFFFFF;height: 700px;width: 100px;"> <p class="sc_menu"> <a href="http://megtrb.blogspot.com/"onmouseover="mouseoversound.playclip()"onclick="clicksound.playclip()"><img src="http://2.bp.blogspot.com/-VuyKDR6Zfas/TvyRv3x_I8I/AAAAAAAAM3Q/LhngADMLrX4/s1600/Home2.png" width="60" height="60" /><span>الرئيسيه</span></a> <a href="http://megtrb.blogspot.com/p/2.html"onmouseover="mouseoversound.playclip()"onclick="clicksound.playclip()"><img src="http://4.bp.blogspot.com/-EHjCTuIyxJU/TvyRAOV0-UI/AAAAAAAAM28/o0zWGQGOnw4/s1600/video.png" width="60" height="60" /> <span>فيديو</span></a> <a href="http://megtrb.blogspot.com/p/blog-page_18.html"onmouseover="mouseoversound.playclip()"onclick="clicksound.playclip()"><img src="http://2.bp.blogspot.com/-vYryVhh36SY/TvyS2ssgFTI/AAAAAAAAM3c/fiyGcA1n_QE/s1600/java.png" width="60" height="60" /> <span>جافا</span></a> <a href="http://megtrb.blogspot.com/p/blog-page_29.html"onmouseover="mouseoversound.playclip()"onclick="clicksound.playclip()"><img src="http://2.bp.blogspot.com/-o0qk_gOcwWQ/Tsk942zP3vI/AAAAAAAAMZA/nohqWPNr2kA/s1600/___20100628_1318756373.png.jpg" width="60" height="60" /><span>برامج</span></a> <a href="http://megtrb.blogspot.com/p/blog-page_7595.html"onmouseover="mouseoversound.playclip()"onclick="clicksound.playclip()"><img src="http://2.bp.blogspot.com/-N6rM0Xv86xM/Tsk-HdUx-PI/AAAAAAAAMZY/L1K3eNbvDTA/s1600/___20100628_1590913759.png.jpg" width="60" height="60" /> <span>الفهرس</span></a> <a href="http://www.arabgb.com/gb.php?id=23222&a=show"onmouseover="mouseoversound.playclip()"onclick="clicksound.playclip()"><img src="http://2.bp.blogspot.com/-Z6aSVXpEAy0/TvyS5isOP8I/AAAAAAAAM3k/t3vBxt-v1nM/s1600/note.png" width="60" height="60" /> <span>سجل الزوار</span></a> <a href="http://www.123contactform.com/contact-form-alahmed-90499.html"onmouseover="mouseoversound.playclip()"onclick="clicksound.playclip()"><img src="http://3.bp.blogspot.com/-3xF7tUck4bk/TvyRp-T8mzI/AAAAAAAAM3I/aTjByT07_-I/s1600/email.png" width="60" height="60" /><span>اتصل بنا</span></a> </p> </div> <script> // Visit http://megtrb.blogspot.com/ for this script //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) //** Call: uniquevar.playclip() to play sound var html5_audiotypes={ "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } //Initialize two sound clips with 1 fallback file each: var mouseoversound=createsoundbite("http://dl.dropbox.com/u/50688218/sound%20menu/whistle.ogg", "http://dl.dropbox.com/u/50688218/sound%20menu/whistle.mp3") var clicksound=createsoundbite("http://dl.dropbox.com/u/50688218/sound%20menu/click.ogg", "http://dl.dropbox.com/u/50688218/sound%20menu/click.mp3")</script>

الى اللقاء.....ابوهشام الحمداني