بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
أهلاً بكم إخوانى الأعزاء قائمة مسندلة بشكل أكثر من رائع وإحترافى جداً القائمة تعمل بالجى كويرى كما تتميز انها تضم اكثر من إضافة فى مكان واحد القائمة تضم (التسجيل فى القائمة البريدية - أيقونات المتابعة - صندوق البحث - نبذة مختصرة عن الكاتب - قائمة بأهم الأقسام لديك او اهم الروابط ) كما إنها تمتاز بشكل إحترافى فى فتح وغلق القائمة والآن مع شرح التركيب.
اولاً قم بالدخول إلى الصفحة الرئيسية لبلوجر وإختار قالب - تحرير 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() {
$("#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>
الآن نبحث عن هذا الوسم بإستخدام 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh5b4SXVUYDeG23FnBRblxQ7loq38RXRwrNSWENi6WK0gh2Kny897PlbxRGkGWQ3SqJzgqW5mJ8cICEsBawxAAjka1eeAgRDkouq7-75wj7KgOiHFHm6lZyuG2c7voGByaDrMrjOoYQbbb/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: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilk_B-PYoX2KYERfMg2K5CHCOb68FDA84gwbpbONRVKM717ULz-FvbqzWC0MYA_42lTCv-3QaZAlKHtAVk3rQ9UT85aM_uZu-eYJh4zf3d7laciSiBqHL6NMsz5OwsJdEKANM2XW6myInB/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/AVvXsEhoXdoXvWhjzRygNZhC-jsjYX50VGMZI6P3OpfEQqQ9jP1FwxuCyUfPoPu0Tf8knA2OVpqSQ-3drCIpdcVRYWlXd5wCQ3JsAMl-Ag-Xy9IhyphenhyphenPi2GqMd3AiO8kjnYMJm-GZDR_pqde6SfKtN/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/AVvXsEjkGxJUh341D1O69-lpmTlQBMGgpfL3fRFVa3QOQH4fVplbo4lYriA0x_XaD40HYcor0zVNgvkiLwhCCBCSl-BffJfxXL9GzrpavAdL-igEXcAAs9XVwrN9ihSFx1-H-uAUkxoiwqF2NZpC/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/AVvXsEhkK0bPEIS3YHfI55J89TBT2a9S3MIaTvZWJeSAiSkMg-JmjMUrUp980aBxxIbfEJ7EzkxdTDs17vBh-VW_WP2eEzkApaMdArf5lFuc1E1hRegJutSGn4lfWnJ28H6jp9gezqgrs-Zq9-A_/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyHBzkQaoC7aJJp5fpWw9dJQeWYiPrQk3GvwQxOuQfKf9Mkr0e7v9aa75SUsZodOMIlKqQmuNSErlH2Ax9b7mAKKysrw_vuKhsrW-RCYvr9RN62xNOFj0akZD7FQ6Qkqy8TV5WFd0UtZpj/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkK0bPEIS3YHfI55J89TBT2a9S3MIaTvZWJeSAiSkMg-JmjMUrUp980aBxxIbfEJ7EzkxdTDs17vBh-VW_WP2eEzkApaMdArf5lFuc1E1hRegJutSGn4lfWnJ28H6jp9gezqgrs-Zq9-A_/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyHBzkQaoC7aJJp5fpWw9dJQeWYiPrQk3GvwQxOuQfKf9Mkr0e7v9aa75SUsZodOMIlKqQmuNSErlH2Ax9b7mAKKysrw_vuKhsrW-RCYvr9RN62xNOFj0akZD7FQ6Qkqy8TV5WFd0UtZpj/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: 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxicHKtP2hl0qsXIlEP5hY1UkhaF9A_SQPX0Oot-hjMNUks4DXexxqv4WxAG-261kUWZr2JiICiTnK58MhUFg1STtAKXKGgcOF03vzLZLeS4H12xI7yp-INOjaiNNLXqXpg978dPWJ38PH/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/AVvXsEikzH_5kvBUOZCDK3_TDvA8Ov5holY-3lDOigaIh9HMJO8JA0riYj94c_78vwD5BLL_i-j4ao0FJgs9tUq3cYJzOyDr4lPY5yvaavUohMLpfwSDgEvt7l6rIPwY-sTXXb21VGX9JnhWHwq1/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;
}
الخطوة الأخيرة نبحث عن هذا الوسم <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOfbqjceT37ruFzfy-TpG_gwVSHlnhM44p6PrtvGXz_SMscHuodcxbFaiy5Cg74kvcbOTTHQzeA0QAx0DhGo9nD3i1DxWUvGxhTIfwF0hizL2289rccgbIqettBEWbp42OyJUEwTYoT7zY/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFGo9MftsXN2LT92Lub9mNqd-N6rte-U59Y_pEDH0XVXX_ldaw154TqRm-EAVum4DPIjHZqq8SEKEBTUi3lqgjUK1xvOsG4cqAWfTF2s4MJAeJSf0FfyGvApLLeJA0YAvJVh4pShUOyjP3/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='هادى ستور'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6eVSCC4r2esMpDOz4SXBNBD2eYhmzZvZASQa_cmxxM5zhq306iCIgx611xqPHOHoLPhDNLSl0HObsD1gdNa_A0rROwzOnOBXocyNqsXeS9VucuGcOI43oHB9SlnqC__zU4ai4O1Mx8JFx/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a>
<a href='https://plus.google.com/هادى ستور'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjivVWdA5Or7mwZoNJVtKpETWrWWi3FG8su7GNJO86ui4nkDuhyBlzvPTKJc9189ySEIMtt8c0ZpRy9j22iCQAl1nkPhRSPAPeZklV1HxZTdcrh5_V9MrDsBfceyNI9O5MaSR2UDckrAWjk/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a>
<a href='http://twitter.com/هادى ستور'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWX6VHLNfK893H9P7R4Q-RuUvtFRz48TYwh2y_XOfByCqQ1uE5CLh5zP7zrMTSVSWQNlplc9BF6KRtS4MfgHmNjhpCtFa-308LiEb4huHM1N4DzOuERnN6jexIEEELOejB81e6822aXgY/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>
ملاحظات:
- غير اللون بما يناسبك
- لتغيير الصورة الشخصية فى القائمة إبحث عن هذا الرابط https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOfbqjceT37ruFzfy-TpG_gwVSHlnhM44p6PrtvGXz_SMscHuodcxbFaiy5Cg74kvcbOTTHQzeA0QAx0DhGo9nD3i1DxWUvGxhTIfwF0hizL2289rccgbIqettBEWbp42OyJUEwTYoT7zY/s1600/profile-pic.png
إبتساماتإبتسامات