رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 
قديم 01-29-2015, 11:54 AM   #1
Hady store
مدون جديد
 
الصورة الرمزية Hady store
 
تاريخ التسجيل: Nov 2014
المشاركات: 32
افتراضي إضافة قائمة منسدلة علوية بشكل إحترافى

أنا : Hady store





بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
أهلاً بكم إخوانى الأعزاء قائمة مسندلة بشكل أكثر من رائع وإحترافى جداً القائمة تعمل بالجى كويرى كما تتميز انها تضم اكثر من إضافة فى مكان واحد القائمة تضم (التسجيل فى القائمة البريدية - أيقونات المتابعة - صندوق البحث - نبذة مختصرة عن الكاتب - قائمة بأهم الأقسام لديك او اهم الروابط ) كما إنها تمتاز بشكل إحترافى فى فتح وغلق القائمة والآن مع شرح التركيب.
اولاً قم بالدخول إلى الصفحة الرئيسية لبلوجر وإختار قالب - تحرير Html
قم قم بالبحث عن هذة الكلمة بإستخدام ctrl + f وإبحث عن <head> وضع الكود التالى أسفلة مباشرة
اقتباس:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>
الآن نبحث عن هذا الوسم بإستخدام ctrl + f نبحث عن الوسم ]]></b:skin> ونضع الكود التالى قبلة مباشرة
.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() 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: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url() no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url() 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() 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() no-repeat left 0;}
.tab a.close {background: url() no-repeat left 0;}
.tab a:hover.open {background: url() no-repeat left -19px;}
.tab a:hover.close {background: url() 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: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#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() 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() 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;
}
الخطوة الأخيرة نبحث عن هذا الوسم <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='http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png'/>
<h3 class='boxtitle'>هادى ستور</h3>
<p>اهلا بك فى مدونة هادى ستور </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>
</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=Feed-Name' 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/هادى ستور'><img src='http://4.bp.blogspot.com/-7yw8LAxUHDs/Uv_yeMsPAzI/AAAAAAAAGMk/FmmQs1-0onE/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='هادى ستور'><img src='http://2.bp.blogspot.com/-m3RbHRx_SrU/Uv_yefCLr6I/AAAAAAAAGMo/UkejpiUz5gk/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a>
<a href='https://plus.google.com/هادى ستور'><img src='http://4.bp.blogspot.com/-BDo6SRqhmMk/Uv_yefar_mI/AAAAAAAAGM4/lBmHhNcUceY/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a>
<a href='http://twitter.com/هادى ستور'><img src='http://4.bp.blogspot.com/-DBsj0D214z8/Uv_yeiKl49I/AAAAAAAAGMw/xG8n2ZSVR98/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>
ملاحظات:
  • غير اللون بما يناسبك
  • لتغيير الصورة الشخصية فى القائمة إبحث عن هذا الرابط

الدعم العربي

Hady store غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
منسدلة, إضافة, قائمة


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
إضافة قائمة أفقية منسدلة 3d إحترافية 2015 Fareed إضافات وأدوات بلوجر 0 12-19-2014 07:19 AM
شباب كيف احول قائمة ثابتة الى قائمة منسدلة Didjihad طلبات الدعم الفني 1 02-25-2014 10:55 PM
إضافة اداة التبديل بين طريقة العرض "الهاتف وعرض سطح المكتب" باستخدام قائمة منسدلة mohssine ait إضافات وأدوات بلوجر 6 07-22-2013 12:54 PM
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة) admin إضافات وأدوات بلوجر 8 06-12-2013 03:37 PM
حصري على خبراء بلوجر إضافة قائمة روابط جانبية منسدلة خالد الاحمري إضافات وأدوات بلوجر 5 02-13-2013 01:00 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 06:54 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)