Latest News

0
A+ A-

افضل قائمه لمدونات بلوجر 2014

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




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



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


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

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


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

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

رمز Code:
<script src='http://ajax.googleapis.com/ajax/libs.../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> واضف فوقه الكود التالى

رمز Code:
<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/-NUzxkktRza...anel-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/-xlp0IDZdYO...l-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/-5XawEIl5fZ...-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/-xRg5USmC76...-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/-cdOsu2eBoa...utton-open.png) no-repeat left 0;}
.tab a.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWS...tton-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://2.bp.blogspot.com/-cdOsu2eBoa...utton-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://2.bp.blogspot.com/-x8TYckHLWS...tton-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-QzDtobH...n-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/-zAJKRnLzcm...tar-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> واضف بعده مباشرتا الكود التالى

رمز Code:
<!-- 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/-d...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='FeedBurner Email Subscription' 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/-7yw8LAxUHD...0/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='blog_title'><img title="RSS Feed" src='http://2.bp.blogspot.com/-m3RbHRx_Sr.../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/-BDo6SRqhmM...oogle-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/-DBsj0D214z...00/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 لمدونات بلوجر فقط اترك تعليق

Share to:

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

Emoticon
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

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