إضافة قائمة منسدلة بتقنية css إلى مدونات بلوجر

بسم الله الرحمان الرحيم

مرحبا بكم في 

مدونة استفد

سأشرح لكم إن شاء الله طريقة سهلة لإضافة قائمة منسدلة للبلوجر وهي احترافية 

بالفعل

مثال مصور 

والآن بسم الله نبدأ شرح التركيب

سجل الدخول إلى مدونتك ثم اتقل إلى تصميم- ثم تحرير كود html

وبعد ابحث عن هذا الكود:

الكود:

]]></b:skin>

ثم اضف قبله 

هذا الكود 

كود PHP:

/*Start Css Menu*/

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxe8FIj3J0S2w0dTL67T9sLcM0NFD_2N_S7o8sTlIPd5bty7ZNa8-mJ4aYK9T3gx1NrJ_6ADGrtfAF8i6Ow0ZsWSpNu_jMZkCpPRj37nOystVtSadZlZmq3LW2bKuIKCoFQjenYMjW5Aq4/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px 8px 0px 8px;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #a80329;

border-right:2px solid #a80329;

border-bottom:2px solid #a80329;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

padding:0px;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

} 

.menu #current{

background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFjLSr1DXOh-T_GlHxjY4X9ikwKIY5csGjD68s_U6LrxTpC6EyhiBX7gXrYqXj5PeZqzVsXC8G5TLWdOpn6WfDJ5SUy518lFCKEtD5DlmhyphenhypheneaqSpVc93LxKt4EOXfVten-30ghIKQe3lQ/s1600/current-bg.gif)  top left repeat-x;

color:#ffffff;

}

/*End Css Menu from http://www.mydz.info/vb*/  

ثم احفظ

ثم انتقل إلى عناصر الصفحة كم في الصورة

ثم ضف هذا الكود 

كود PHP:

<div class="menu">




<ul>

<li><a href="#" id="current">Home</a></li>

<li><a href="#" >Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>  

الشرح:
أضفت هذا الشرح بسبب سؤال أحد المدوننين



مثلا هذا الكود:


<li><a href="#">Drop Down CSS Menus</a></li>


مكان هذه العلامة # ضع رابط الموضوع أو رابط القسم


ومكان هذا الكلام Drop Down CSS Menus ضع اسم أو عنوان الموضوع أو القسم


ليصبح مثلا:




<li><a href="http://estafid.blogspot.com/p/blog-page_15.html">تبادل إعلاني</a></li>

ثم   انتهى

ومبروك عليك الإضافة.

وأي استفسار أو أية مشكلة في عالم البلوجر لاتتردد في السؤال

شجعنا بردودكم الحلوة

في أمان الله

Tweet

Sharing Widget byestafid

يمكنك نسخ روابط هذه التدوينة
URL
HTML
BBCode

التصنيف : css