اضافة هيدر مميز بتقنية مدهشة لمدونات بلوجر

نبدأ اخواني مباشرة بالنتيجة النهائية

http://2.bp.blogspot.com/-0mIXTPD72Y...r+blogspot.png



اولا ندخل الى القالب template

ونبحث عن


رمز PHP:

]]>b:skin>


ونضيف فوقه

رمز PHP:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;



position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}


ثم نبحث عن


رمز PHP:

head>


ونضيف قبله او فوقه

رمز PHP:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
// var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>



بعدها نحفظ القالب template ونتوجه الى تخطيط

ونضيف التالي

رمز PHP:

<ul id="jsddm">
<li><a href="#">Homea>
<li><a href="#">Link 1a>
<ul>
<li><a href="#">Drop 1-1a>li>
<li><a href="#">Drop 1-2a>li>
<li><a href="#">Drop 1-3a>li>
ul>
li>
<li><a href="#">Link 2a>
<ul>
<li><a href="#">Drop 2-1a>li>
<li><a href="#">Drop 2-2a>li>
ul>
li>
<li><a href="#">Link 3a>
<ul>
<li><a href="#">Drop 3-1a>li>
<li><a href="#">Drop 3-2a>li>
<li><a href="#">Drop 3-3a>li>
<li><a href="#">Drop 3-4a>li>
ul>
li>
<li><a href="#">Link 4a>li>
<li><a href="#">Link 5a>li>
<li><a href="#">Link 6a>li>
li>ul>


والنتيجة النهائية تكون مبشرة

http://2.bp.blogspot.com/-0mIXTPD72Y...r+blogspot.png



ارجوا ان تستفيدوا من هذا الدرس مفصل القيم

جميع الحقوق محفوظة
للمزيد
http://www3.0zz0.com/2014/08/20/14/511341368.png

الصور المرفقة http://www.traidnt.net/vb/attachment...r-blogspot.png


https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©