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

التعليقات تابعنا

› ›

Written By 29‏/7‏/2014 2 تعليقات
افضل قائمة منسدلة بتاثيرات jquery لمدونات بلوجر

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


ملحوظه هامه :
قبل اى تعديل على القالب يرجى اخذ نسخه احتياطيه لعدم حدوث اى مشكلات لا قدر الله

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


1- من لوحة تحكم المدونه اختر قالب
2- اختر تحرير HTML

ابحث عن هذا الكود <head> واضف بعده مباشرتا الكود التالى 

<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() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>


الان ابحث عن </head> واضف فوقه الكود التالى 

<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(http://1.bp.blogspot.com/-NUzxkktRzaU/Uv_kp1jV21I/AAAAAAAAGLo/KtKg7i17Ecc/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(http://4.bp.blogspot.com/-xlp0IDZdYO0/Uv_kY314jPI/AAAAAAAAGLQ/rViPl1Lb6AA/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(http://2.bp.blogspot.com/-5XawEIl5fZ4/Uv_kY6E8W2I/AAAAAAAAGLc/3gC41-rCLcE/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(http://3.bp.blogspot.com/-xRg5USmC76w/Uv_kY2BfO2I/AAAAAAAAGLU/ssNd4LjkegQ/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(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/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(http://3.bp.blogspot.com/-dT-QzDtobHo/Uv_j8KyMIWI/AAAAAAAAGLE/dhWa0RKCLpI/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(http://4.bp.blogspot.com/-zAJKRnLzcmc/Uv_yHsaS9FI/AAAAAAAAGMc/1fbDDXwrbbY/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>


يمكنك التعديل على طول القائمه من خلال تغيير height: 230px; فى الكود السابق

واخيرا ابحث عن هذا الكود <body> واضف بعده مباشرتا الكود التالى 

<!-- 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>اهلا بك فى مدونة المايسترو</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='https://lh3.googleusercontent.com/-dEMjSFboNLg/U9MRjjB1wRI/AAAAAAAAAVA/W9T4W14c8lg/w140-h140-p/111.png'/>
<h3 class='boxtitle'>الكاتب</h3>
<p>مرحبا بكم المايسترو هى مدونه لخدمه اصحاب المدونات</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">البحث فى المدونه</p>
<form method="get" action="/search" id="search-box22">
  <input name="q" type="text" size="40" placeholder="ابحث...." />
</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 class='left right' align="center">

<h4>اشترك ليصلك كل جديد</h4>
<p style="padding:0px 30px;">احصل على كل جديد فى عالم التدوين لحظه بلحظه اشترك الان </p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=th3maestro' 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 title="Follow on Facebook" src='http://4.bp.blogspot.com/-7yw8LAxUHDs/Uv_yeMsPAzI/AAAAAAAAGMk/FmmQs1-0onE/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='http://2.bp.blogspot.com/-m3RbHRx_SrU/Uv_yefCLr6I/AAAAAAAAGMo/UkejpiUz5gk/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/username'><img title="Follow on Google" src='http://4.bp.blogspot.com/-BDo6SRqhmMk/Uv_yefar_mI/AAAAAAAAGM4/lBmHhNcUceY/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='http://4.bp.blogspot.com/-DBsj0D214z8/Uv_yeiKl49I/AAAAAAAAGMw/xG8n2ZSVR98/s1600/Twitter.png' style='padding:5px;' 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 لمدونات بلوجر فقط اترك تعليق

هاشتاج التقنيه قوالب واضافات بلوجر وجديد الاخبار التقنيه
  • Facebook
  • Twitter
  • Instagram

    • 2 التعليقات على "افضل قائمة منسدلة بتاثيرات جيكوري لمدونات بلوجر"

    1. google5 فبراير 2015 في 9:28 م

      مشكووووووووور ياغالي

      ردحذف
    2. google5 فبراير 2015 في 9:40 م

      لكن عندما ابحث عن ""<.b.o.d.y>"" لااجده ...ما الحل

      ردحذف

    الاشتراك في: تعليقات الرسالة (Atom)

    انترنت

    انترنت

    السلام عليكم

    السلام عليكم

    انترنت

    انترنت

    أخبار

    أخبار