اضافة قائمة علوية بتاثير ضبابي غاية في الجمال - بلوجر 2013

السلام عليكم
نعود معكم الى اضافات بلوجر الاحترافية
وفي هذا الدرس سنقوم باضافة قائمة علوية بتاثير ضبابي عند مرور الماوس فوق احدى الورابط

<<< مشاهدة حية >>>

طريقة الاضافة :

اولا ادخل الى لوحة التحكم ~ قالب ~ html
ابحث عن الكود التالى : ]]></b:skin>

وضع الكود التالي فوقه :

.blurry-menu {
  font-family: 'tahoma', helvetica, tahoma, sans-serif;
  height: 50px;
margin: 40px 0;
padding: 50px 0;
text-align: center;
}
ula { display: inline-block;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative; border: 1px solide #ddd;

background: -webkit-linear-gradient(#fafafa, #f1f1f1);
background: -moz-linear-gradient(#fafafa, #f1f1f1);
background: -ms-linear-gradient(#fafafa, #f1f1f1);
  background: -o-linear-gradient(#fafafa, #f1f1f1);  
background: linear-gradient(#fafafa, #f1f1f1);

-webkit-box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
-moz-box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
}
ula: after { content: '';
height: 46px;
left: -50px;
position: absolute;
top: -32px;
width: 120%;
z-index: 1;
background: -webkit-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
background: -moz-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
background: -ms-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
background: -o-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));  
background: linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
-webkit-transform: rotate(-2.4deg);
-moz-transform: rotate(-2.4deg);
-ms-transform: rotate(-2.4deg);
-o-transform: rotate(-2.4deg);  
 transform: rotate(-2.4deg);
}
#button {float: right;}
a {
border-left: 1px solid #fff;
border-right: 1px solid #eee;
color: #888;
display: block;
font-size: 14px;
height: 50px;
line-height: 50px;
padding: 0 35px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 0 #fff; z-index: 2;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-ms-transition: all 150ms linear;
-o-transition: all 150ms linear; transition: all 150ms linear;
}
a:focus {
outline: 0;
}
#button:first-child a {
border-left: none;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
#button:last-child a {
border-right: none;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
ula:hover a {
color: transparent;
text-shadow: 0 0 5px #ccc;
}
ula:hover a:hover {
background: #fafafa;
color: #444;
line-height: 43px;
text-shadow: 0 1px 0 #fff; }
ula:hover a:active {
border-left-color: #f0f0f0; color: #999;
line-height: 47px;
-webkit-box-shadow: inset 0 0 22px #e9e9e9;
-moz-box-shadow: inset 0 0 22px #e9e9e9;
box-shadow: inset 0 0 22px #e9e9e9;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none; transition: none;
}

الان اذا كنت تريد اضافة القائمة فوق منطقة التدوينات مباشرتا : فابحث عن الكود التالي :

<div id='content-wrapper'>

واضف تحته الكود التالي مع تغيير ما يجب تغييره
 و #  برابط الزر ....

<section class="blurry-menu">
  <ula>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="http://ar-cookies.blogspot.com" id="button">مدونة الكووكيز</a>
  </ul>
</section>

 او يمكنك اضافتها ك ' widget ' وسحبها فوق الرسائل او في اي مكان تريد ::
الطريقة : ادخل الى : تخطيط ~ اضافة اداة ~ html/javascript

وادخل الكود التالي :

<style>
  .blurry-menu {
  font-family: 'tahoma', helvetica, tahoma, sans-serif;
  height: 50px;
margin: 40px 0;
padding: 50px 0;
text-align: center;
}
ula { display: inline-block;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative; border: 1px solide #ddd;

background: -webkit-linear-gradient(#fafafa, #f1f1f1);
background: -moz-linear-gradient(#fafafa, #f1f1f1);
background: -ms-linear-gradient(#fafafa, #f1f1f1);
  background: -o-linear-gradient(#fafafa, #f1f1f1);  
background: linear-gradient(#fafafa, #f1f1f1);

-webkit-box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
-moz-box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
box-shadow: inset 0 1px 0 #fff, 0 0px 0 1px #fff;
}
ula: after { content: '';
height: 46px;
left: -50px;
position: absolute;
top: -32px;
width: 120%;
z-index: 1;
background: -webkit-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
background: -moz-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
background: -ms-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
background: -o-linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));  
background: linear-gradient(left top, rgba(255,255,255,.1), rgba(255,255,255,.7));
-webkit-transform: rotate(-2.4deg);
-moz-transform: rotate(-2.4deg);
-ms-transform: rotate(-2.4deg);
-o-transform: rotate(-2.4deg);  
 transform: rotate(-2.4deg);
}
#button {float: right;}
a {
border-left: 1px solid #fff;
border-right: 1px solid #eee;
color: #888;
display: block;
font-size: 14px;
height: 50px;
line-height: 50px;
padding: 0 35px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 0 #fff; z-index: 2;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-ms-transition: all 150ms linear;
-o-transition: all 150ms linear; transition: all 150ms linear;
}
a:focus {
outline: 0;
}
#button:first-child a {
border-left: none;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
#button:last-child a {
border-right: none;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
ula:hover a {
color: transparent;
text-shadow: 0 0 5px #ccc;
}
ula:hover a:hover {
background: #fafafa;
color: #444;
line-height: 43px;
text-shadow: 0 1px 0 #fff; }
ula:hover a:active {
border-left-color: #f0f0f0; color: #999;
line-height: 47px;
-webkit-box-shadow: inset 0 0 22px #e9e9e9;
-moz-box-shadow: inset 0 0 22px #e9e9e9;
box-shadow: inset 0 0 22px #e9e9e9;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none; transition: none;
}
</style>
<section class="blurry-menu">
  <ula>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="#" id="button">الكتابة هنا</a>
    <a href="http://ar-cookies.blogspot.com" id="button">مدونة الكووكيز</a>
  </ul>
</section>

 مع تغيير ما يجب تغييره
 و #  برابط الزر ....

بالتوفيق لكم ......