القائمة الرئيسية

الصفحات

أفضل قائمة منسدلة على بلوجر بتقنية CSS3

مرحبا أصدقاء...اليوم اعرضه رهيبة جديدة تبحث عن مدونات بلوجر "نوع الاضافة CSS3 نمط القائمة المنسدلة".هذه مهنية يبحث سلسه القائمة منسدلة التي تم إنشاؤها مع CSS3.وسوف تجعل مدونتك أكثر جمالا وجاذبية.وهذا هو الحال قائمة كبيرة التي يجب أن يكون لديك على مدونتك والحصول على اكثر الاضافات فى الصفحة الرائيسية 

شرح الاضافة فى مدونتك




ازهب الى لوحه التحكم

ثم  القالب
 توسيع قوالب عناصر واجهة المستخدم

اعمل نسخه احطياطى

الآن اضغط على

 والبحث عن الكود أدناه

]]></b:skin>
الآن قم بلصق أدناه الكود البرمجية أعلاه فقط/قبل ذلك

.preload1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELrrMf4oZQWQe1h42Qq1MxzB-IC8Qb3e9IjRUcn2rxOmU8jQ1f3VU2gDe7X45exqIVAplsHHFufkID8HXnqtU2mtxvnJJ1d3HXtpcL0BBCzhBCGgSoq11njdolOMSgKxeA3Dzw79dxTc/s1600/blank_over.gif);}
.preload2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPZGNdV2dYfqUyvzR-gvrXUZPjq0_rQNvzRZ4AktDBM5B34eGS4XEBH3Pwaj0GZm2vh6_UDnlMZR0_9SHO_NOQ2oWEcfDkkZXoKaebRBVpg5m2PmgtPXdTtYZ-2JRpBEfNSavRBXuKw8/s1600/blank_overa.gif);}
#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8bzmQ3k1MvujaAcbpS1GoGFyALrYj_96HezUCt2a-tk6hFCSgmtCjPjxFSEdQKK9UrbfsyWa47OwuRyc0jCp-TdyBuuuFR647K5V_jFrZ1JC_HfPNd680xz5phQNMhb4-UmYAlp_GNw8/s1600/blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8bzmQ3k1MvujaAcbpS1GoGFyALrYj_96HezUCt2a-tk6hFCSgmtCjPjxFSEdQKK9UrbfsyWa47OwuRyc0jCp-TdyBuuuFR647K5V_jFrZ1JC_HfPNd680xz5phQNMhb4-UmYAlp_GNw8/s1600/blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj59JiaUBJsS2vhhHyrJbtZpSFQp3wGYp337UlmU_9GATfril1iG-F7gUVGo916nRbnrFvmtBmT3VkFA8pLE8qO6SzdiS6eC2R4l96eEt2MyMZlp2B3yRrI2JJVZTXDs5MfAVXgLiBLfb8/s1600/blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELrrMf4oZQWQe1h42Qq1MxzB-IC8Qb3e9IjRUcn2rxOmU8jQ1f3VU2gDe7X45exqIVAplsHHFufkID8HXnqtU2mtxvnJJ1d3HXtpcL0BBCzhBCGgSoq11njdolOMSgKxeA3Dzw79dxTc/s1600/blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELrrMf4oZQWQe1h42Qq1MxzB-IC8Qb3e9IjRUcn2rxOmU8jQ1f3VU2gDe7X45exqIVAplsHHFufkID8HXnqtU2mtxvnJJ1d3HXtpcL0BBCzhBCGgSoq11njdolOMSgKxeA3Dzw79dxTc/s1600/blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPZGNdV2dYfqUyvzR-gvrXUZPjq0_rQNvzRZ4AktDBM5B34eGS4XEBH3Pwaj0GZm2vh6_UDnlMZR0_9SHO_NOQ2oWEcfDkkZXoKaebRBVpg5m2PmgtPXdTtYZ-2JRpBEfNSavRBXuKw8/s1600/blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELrrMf4oZQWQe1h42Qq1MxzB-IC8Qb3e9IjRUcn2rxOmU8jQ1f3VU2gDe7X45exqIVAplsHHFufkID8HXnqtU2mtxvnJJ1d3HXtpcL0BBCzhBCGgSoq11njdolOMSgKxeA3Dzw79dxTc/s1600/blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELrrMf4oZQWQe1h42Qq1MxzB-IC8Qb3e9IjRUcn2rxOmU8jQ1f3VU2gDe7X45exqIVAplsHHFufkID8HXnqtU2mtxvnJJ1d3HXtpcL0BBCzhBCGgSoq11njdolOMSgKxeA3Dzw79dxTc/s1600/blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPZGNdV2dYfqUyvzR-gvrXUZPjq0_rQNvzRZ4AktDBM5B34eGS4XEBH3Pwaj0GZm2vh6_UDnlMZR0_9SHO_NOQ2oWEcfDkkZXoKaebRBVpg5m2PmgtPXdTtYZ-2JRpBEfNSavRBXuKw8/s1600/blank_overa.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbX3SUaIqfBRDQ9CWBsnjODJ4ux74oK5kg7K5U_37txOsquAEt_2LcjmN5fOuNQQKD2mA-J24S8II-hwbFWfBags4pzI2hft2TBGbWIrWn6yLJm1O781GEp50dmScmj3uSlwX3WnvINY/s1600/arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3SHBFQNO3AqeQzk6w3iiDFadAm0SrqWS1luhlSS4AFK3CtexvnWimNKPCcauQ5gEIv2xz2rJp71Ng1udumZ6ofjlmGUqYYFW0IaiLrUdGx5WPLtmK75LWErivtpL2DnjS78gn35XnEck/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3SHBFQNO3AqeQzk6w3iiDFadAm0SrqWS1luhlSS4AFK3CtexvnWimNKPCcauQ5gEIv2xz2rJp71Ng1udumZ6ofjlmGUqYYFW0IaiLrUdGx5WPLtmK75LWErivtpL2DnjS78gn35XnEck/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}

إضافة كود HTML:

انتقل إلى لوحة التحكم الرئيسية مدونة > تخطيط > إضافة أداة > HTML/جافا سكريبت

الآن قم بلصق التعليمات البرمجية  HTML التالية في مجال تكنولوجيا المعلومات

<ul id="nav">
<li class="top"><a href="رابط" class="top_link"><span>عنوان</span></a></li>
<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
<ul class="sub">
<li><a href="رابط" class="fly">Cameras</a>
<ul>
<li><a href="رابط">Nikon</a></li>
<li><a href="رابط">Minolta</a></li>
<li><a href="رابط">Pentax</a></li>
</ul>
</li>
<li class="mid"><a href="رابط" class="fly">Lenses</a>
<ul>
<li><a href="رابط">Wide Angle</a></li>
<li><a href="رابط">Standard</a></li>
<li><a href="رابط">Telephoto</a></li>
<li><a href="رابط" class="fly">Zoom</a>
<ul>
<li><a href="رابط">35mm to 125mm</a></li>
<li><a href="رابط">50mm to 250mm</a></li>
<li><a href="رابط">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="رابط">Mirror</a></li>
<li><a href="رابط" class="fly">Non standard</a>
<ul>
<li><a href="رابط">Bayonet mount</a></li>
<li><a href="رابط">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="رابط">Flash Guns</a></li>
<li><a href="رابط">Tripods</a></li>
<li><a href="رابط">Filters</a></li>
</ul>
</li>
<li class="top"><a href="رابط" id="services" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="رابط">Printing</a></li>
<li><a href="رابط">Photo Framing</a></li>
<li><a href="رابط">Retouching</a></li>
<li><a href="رابط">Archiving</a></li>
</ul>
</li>
<li class="top"><a href="رابط" id="contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#nogo32">Support</a></li>
<li><a href="#nogo32" class="fly">Sales</a>
<ul>
<li><a href="#nogo320">USA</a></li>
<li><a href="#nogo32">Canadian</a></li>
<li><a href="">South American</a></li>
<li><a href="" class="fly">European</a>
رابط<ul>
<li><a href="#nogo32" class="fly">British</a>
<li><a href="#nogo32">London</a></li>
<li><a href="#nogo32">Liverpool</a></li>
<li><a href="#nogo32">Glasgow</a></li>
<li><a href="#nogo32" class="fly">Bristol</a>
<ul>
<li><a href="#nogo32">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul>
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul>
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
</ul>
</li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul>
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul>
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>


تعليقات

التنقل السريع
    -->