إضافة قائمة أفقية منسدلة 3D أحترافية لمدونات بلوجر 2015

زوار ومتابعي المدونة 

السلام عليكم ورحمة الله وبركاته

اليوم سوف أتطرق إلى إضافة مهمة لكل مدونة والإضافة في قمة الإحترافية

" قائمة أفقية منسدلة 3D "

للمشاهدة

- طريقة التركيب :

1- إدخل إلى مدونتك | أختر تخطيط | ثم إضافة أداة " HTML/JavaScript " :

2- اللصق الكود التالي في صندوق الأداة :

 <style type="text/css">
.menuhomeblog7 {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuhomeblog7 ul.nav li {display:inline-block; display:inline;}
.menuhomeblog7 ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuhomeblog7 ul.nav li {float:right; display:block; padding:0 4px;}
.menuhomeblog7 ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuhomeblog7 ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:right; height:36px;}
.menuhomeblog7 ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuhomeblog7 ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div {position:absolute; top:40px; right:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuhomeblog7 ul.nav div.right {right:auto; left:4px;}
.menuhomeblog7 ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:right; display:inline; text-align:right; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuhomeblog7 ul.nav div ul.colright {margin-right:10px;}
.menuhomeblog7 ul.nav div ul.colleft {margin-left:10px;}
.menuhomeblog7 ul.nav div ul.colSingle {margin-right:10px; margin-left:10px;}
.menuhomeblog7 ul.nav div ul li {float:right; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuhomeblog7 ul.nav div ul li:last-child {border:0;}
.menuhomeblog7 ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 15px 4px 0; background:transparent url(droplistcolumns/arrow.gif) no-repeat right center;}
.menuhomeblog7 ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuhomeblog7 ul.nav div.col1 {width:160px;}
.menuhomeblog7 ul.nav div.col2 {width:310px;}
.menuhomeblog7 ul.nav div.col3 {width:460px;}
.menuhomeblog7 ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuhomeblog7">
<ul class="nav">
<li><a class="top-a" href="#url"><b>الرئيسية</b></a></li>
<li><a class="top-a" href="#url"><b>بلوجر</b></a>
<div class="col3">
<ul class="colright">
<li><a href="#url">إضافات بلوجر</a></li>
<li><a href="#url">أعمالي</a></li>
<li><a href="#url">دروس بلوجر</a></li>
<li><a href="#url">سيو</a></li>
<li><a href="#url">قوالب بلوجر</a></li>
</ul>
<ul class="col">
<li><a href="#url">تدوينات مهمة</a></li>
<li><a href="#url">آخر المشاركات</a></li>
<li><a href="#url">مشاركات شائعة</a></li>
<li><a href="#url">شات المدونة</a></li>
</ul>
<ul class="colleft">
<li><a href="#url">قائمة التصفح</a></li>
<li><a href="#url">القائمة الجانبية</a></li>
<li><a href="#url">القائمة الأفقية</a></li>
<li><a href="#url">القائمة العمودية</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>موقع SEO </b></a>
<div class="col2">
<ul class="colright">
<li><a href="#url">هيدر</a></li>
<li><a href="#url">فوتر</a></li>
<li><a href="#url">المشاركات</a></li>
<li><a href="#url">تعديل</a></li>
<li><a href="#url">القائمة</a></li>
</ul>
<ul class="colleft">
<li><a href="#url">موبايل </a></li>
<li><a href="#url">عروض الموبايلات</a></li>
<li><a href="#url">موبايل seo</a></li>
<li><a href="#url">الشاشة الصغيرة</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>راسلنا</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">إيميل ID</a></li>
<li><a href="#url">موبايل نمبر.</a></li>
<li><a href="#url">نموذج الاتصال</a></li>
<li><a href="#url">بريدي الإلكتروني</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>خصوصية</b></a></li>
<li><a class="top-a" href="#url"><b>نصائح</b></a>
<div class="col2 right">
<ul class="colright">
<li><a href="#url">عروضات جوجل</a></li>
<li><a href="#url">روابط دائمة</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">ترتيب الصفحات بيج رنك</a></li>
</ul>
<ul class="colleft">
<li><a href="#url">تعديل</a></li>
<li><a href="#url">تعديل</a></li>
<li><a href="#url">تعديل</a></li>
<li><a href="#url">تعديل</a> <a href='http://homeblog7.blogspot.com' title='صممت من قبل هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->
 

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .