قائمة منسدلة بتاثيرات جيكوري لمدونات بلوجر

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

ملحوظه هامه :

قبل اى تعديل على القالب يرجى اخذ نسخه احتياطيه

ناتى الان الى شرح تركيب افضل قائمة منسدلة بتاثيرات jquery لمدونات بلوجر

من لوحة تحكم المدونه اختر قالب

اختر تحرير HTML

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

واضف بعده مباشرة الكود التالى:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='https://th3maestro.googlecode.com/svn/trunk/js/menu.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
 
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
 
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
 
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
 
});</script>
 
<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

الان ابحث عن

واضف فوقه الكود التالى

<style>
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}
 
.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqfTGqrG8iYsnfhOh6oDMQVIvQNdKc4O1BlaBNn3KesbRxnD-Hrc6mH5wciH4MPJPBjjnd4amZyN3riynoOyODklSTCUriCe_vZZzboAbVgBcQM_HM3j4vsZLh8hSzap26dt5JJ2wg6SLx/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 100%;
text-align: center;
font-family: GESSTwoMediumRegular;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc08osZ-1js47KqInUc7pfhidbK2Sm3pmHyjrx7s4QfoHUbi6N7PQrc7aI79k8Rq8zYLGmnOSAJtj4vXpa08eKbJPw1UtPfY996K234CyJ3aTw559_ZE2PowtR_0TPtLp-IOQPOdyyHM_p/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEzf1-AvKXV2TS4unJNtoq_VlEWwjjrGrSWoI3HiGUfpYL-5cqIbuuUtzuCNCNhx7Zpi4YuUXTJOPUQfR2GJpLENbKGqB4boTv8TbgDxcTYphMpFCrh51MEnrkshIqrNCalV-cwRP6ipQ1/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLVHo_TaQ3gO9IdTw8yC00WYFe5Y_xvWJ7omcWjHHk49aKDnIn0GOZcKWJRI7jcpcdbWDV3RD7WP7yh4lpBbbCqzHun23mD0UuqiK5FzZumHncCMmUnv7K1Zkaljh0FrjUhCmbu4hoMjvb/s1600/sliding-panel-tab.png) repeat-x 0 0;
}
 
.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}
 
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
 
.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnXwEjXSAQILqiN-RP6W-B-bjwwUDfIlQbLi69deu3-r5vWrcj2Z3gcb2tBgbbYyvH45d0n_gd0j0S79RZZQSJ0ubY5Ukr1AKmbFF3u3qzSGUoGg0qymNS6d3hy5XNDrIu0y3rDylfIlo/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKz3UY4Tsc5atmO5ss1ucWuxXZ8ryzfUzefVTfrqTURLDhGn8ERzKcoDCo9EfrhiDXbdUydEsgdSfVWcXTS6LLDSEyRoSdUrgA5QWd7R9F0NDCQZlNtn5gacZ6CWL_8iWdLXQbPbNamEZ/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnXwEjXSAQILqiN-RP6W-B-bjwwUDfIlQbLi69deu3-r5vWrcj2Z3gcb2tBgbbYyvH45d0n_gd0j0S79RZZQSJ0ubY5Ukr1AKmbFF3u3qzSGUoGg0qymNS6d3hy5XNDrIu0y3rDylfIlo/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKz3UY4Tsc5atmO5ss1ucWuxXZ8ryzfUzefVTfrqTURLDhGn8ERzKcoDCo9EfrhiDXbdUydEsgdSfVWcXTS6LLDSEyRoSdUrgA5QWd7R9F0NDCQZlNtn5gacZ6CWL_8iWdLXQbPbNamEZ/s1600/button-close.png) no-repeat left -19px;}
 
#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 16px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
font-family: GESSTwoMediumRegular;
}
#panel p {
margin: 5px 15px;
padding: 0px;
font-family: GESSTwoMediumRegular;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkKk8cgt8sWPpUkHBpbma6bmCXxloHFuDv_9Fq_X4bIaWy_aNOpG5uNrQ7_l4SiXe48ne0AQGaKOvaRNQXuDZNyGR46iRMItPlqmP4eeGK4MdvY58Ow2UUG79HtzfbcEhgW6AolYI-LiXD/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXLAldn2tCb7KZ9s2PvT-bfGrYPPVV_t8YqanZox0zIIX0ml3dhuBj1gygkj3lwsIQENgARH-9cY9LwcVeYIugFhuFMxU2Un4UOJVC66v19d9BHR2Mw1A5elCNCUsfrX10DCSIHp7afEe/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}
 
#search-box22{
margin-top: 20px;
}
 
#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
 
#search-box22 input[type="text"]:focus {
width: 190px;
}
 
.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
font-family: GESSTwoMediumRegular;
}
</style>

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

واضف بعده مباشرة الكود التالى

<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>
 
<!-- first section -->
<div class='left' style='width:240px !important'>
 
<h4>
اهلا بك فى مدونة Tounsi Cool</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='https://lh5.googleusercontent.com/-l6VuuikeH24/AAAAAAAAAAI/AAAAAAAAACE/_3d2m_TqhhU/s120-c/photo.jpg'/>
<h3 class='boxtitle'>
الكاتب</h3>
<p>
مرحبا بكم  في Tounsi Cool  مدونه لخدمه اصحاب المدونات</p>
</div>
</div>
</div>
<p align='right' style='margin-top: 10px;'>
البحث فى المدونه</p>
<form action='/search' id='search-box22' method='get'>
  <input name='q' placeholder='ابحث....' size='40' type='text'/>
</form>
</div>
<!-- second section -->
<div class='left' style='width:320px !important'>
<h4>
اقسام المدونه</h4>
<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>قسم واحد</a></li>
<li><a href='Link URL'>قسم اتنين</a></li>
<li><a href='Link URL'>قسم تلاثه</a></li>
<li><a href='Link URL'>قسم اربعه</a></li>
<li><a href='Link URL'>قسم خمسه</a></li>
<li><a href='Link URL'>قسم سته</a></li>
<li><a href='Link URL'>قسم سبعه</a></li>
</ul>
</div>
<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>قسم واحد</a></li>
<li><a href='Link URL'>قسم اتنين</a></li>
<li><a href='Link URL'>قسم تلاثه</a></li>
<li><a href='Link URL'>قسم اربعه</a></li>
<li><a href='Link URL'>قسم خمسه</a></li>
<li><a href='Link URL'>قسم سته</a></li>
<li><a href='Link URL'>قسم سبعه</a></li>
</ul>
</div>
</div>
<!-- third section -->
<div align='center' class='left right'>
 
<h4>
اشترك ليصلك كل جديد</h4>
<p style='padding:0px 30px;'>
احصل على كل جديد فى عالم التدوين لحظه بلحظه اشترك الان </p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=tounsicool' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='اشترك'/></form>
<div align='center' style='clear: both;'>
<a href='http://www.facebook.com/username'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUjWmgnF9a3OLc76Vn0h1hgXD_SfZnmOWaRzAq5vvl2jnaJWQo4saxH0iVg1JQTivY0QdESpb-RVf0mudQyKYk8fkdA8IzsltZ4HKeOnJzw2f9WvyqIoGh83Tj8zQjsicIDu5t2CosVVZ/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjd7olS1hClTmzIsClXb5vQtZ_RsBc6mOJEI25wREZxncifcHKPHfTrHCfaqt2yBJwSJxgxmb-atasXt9sJq5OjqS7GsmkxPiky89VXYxG9QfaV9Z0DkY1gWq3Xa3an2PtQTnLGkgY9zNv/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a>
<a href='https://plus.google.com/username'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ZCOrval2obDRDq4GEFnQhv_XUJuWVmI5A6JFWOMPs9Nve-AMD93K5pNEAvICVnfLa38chGu-2BLaPpzK5-Pymk1Fp4bin3mWefiakjXm1UT55o9kTwluw8SUteZOFyiuUW3EiwDLY9VG/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a>
<a href='http://twitter.com/username'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh08qLtChbOI1lpd9oaKhQ47gE904Sx_jPNgmjnmMsCzVQ5pi3JQittAovhS3LXYRmcLPm8NnP4VdRwXDzn6-rta3L6T2rH2K7PMbbe97QI3HtYZx0U0It_zvVts_WR6E96bH3PcsgdqTft/s1600/Twitter.png' style='padding:5px;' title='Follow on Twitter' width='32'/></a>
</div>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>مرحيا بالزائر</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>افتح القائمه</a>
<a class='close' href='#' id='close' style='display: none;'>اغلق القائمه</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

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

عن الكاتب محترف البلوجر

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