اضافة نافذة منسدلة بلغة الجي كويري اعلى المدونة [الشكل الاول]
التعريف بالاضافة
السلام عليكم ورحمة الله ..
كثير منا يريد ان يضيف ادوات او اضافات الى مدونته ، ولكن تواجه مشكلة وهى كثرة الاضافات فى المدونة ولا يجد مكان مرئى للزوار لكى يضع به الاضافات .. ولكن يوجد الحل فى هذه الاضافة فهى اضافة سهلة جدا يمكنك ادراج 3 مهام :- الاشتراك بالبريد الالكترونى - التسميات او الاقسام - التعريف بالكاتب بشكل منسق + صورة مصغرة ، والاهم فى ذلك انها لا تاخذ مساحة كبيرة لانها منسدلة وعند الضغط على زر فتح القائمة تعرض مجموعة الاضافات التى بها كما ترى فى الصورة السابقة ويمكنك مشاهدة مثال مباشر عبر الرابط التالى :
تابع الشرح التالى ، وقبل اى شئ احتفظ بنسخة من قالبك حتى تكون فى امان :)
اولا : نتجه الى القالب ثم تحرير 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>
ابحث عن :
<style>
@font-face {
font-family: 'goth';
src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.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/AVvXsEhHDRq0IGm9IsziHrnyhVfPpnJoqUXW0xFtGM5Ea1Y3TKmzbDdIlu6B9nGWDi-hsvl720Je2S3KC5piqORpFwYUln10Xa_UYGq5sCLHOAKBB8FXfKYSTIH72XkbqpLQEdNi9AZc5IB-o38/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: left;
clear: left;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: -143px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL56bZ8L_hL0KMMWzovlndzVsUvImAZHDgG7DqmHOSOinwBMsLE7DMmS3KrUNtB9hjDMOIAvAttIw3wMMrG5wla771iNnfWwL81NWNZUEdZuJumOtEv5O2jj4D9-C5fIeQLuK0q9iuWzg/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/AVvXsEimRlVIXyCLT-HLHf-BTQcOwUK4ywwbFLGjLMhyFFN-CYRNkvP5YnzQ_47Met4Zo_XiNuRxCqdDFqz0MiAUUBggMaser_mhxdoEK6_02ymf6eYrEv5TMgOf8ZIf1tqBj3nfN9TrLMFAqT8/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/AVvXsEhTccYRyaSjNGo__D6MpEybX206Zy9iHJdnazSYYKESktnQXPsbnixeFa2g2CDCOyuIWNXQIPyMR-zLKrfSzWUdJPnQzgOtKpMc1XQ9161RLSZLm3jnzpaYnMjX9vz2__iMbsZUN17fB2Q/s1600/sliding-panel-tab.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
font-family: goth;
}
.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/AVvXsEgECgFGMw4PsXjLX1wUcPg1-3ON_ddLZOjvtAFSwnwOnkSdvZjpFK9UzZDa0mOO1qL9WLoNjeMpXgQhAefzf4CK9l5XqRFA-H4Go_uxt8szLpA3NSeCn-puCMLwLo6Ou2kAa32r9df0uOQ/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZi8i_fUrG9rcPWR79mX-wfh_g1taFK67vTNEPXNXAN_nperkAOb4qm6-IziPDMZAT_Aswf6Z6YMimOHw9gKLknEzOCqpIs77GIJI3ABiXQXyIB1feu1X9vL6joshRaWsyHtJ8pW2woA/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgECgFGMw4PsXjLX1wUcPg1-3ON_ddLZOjvtAFSwnwOnkSdvZjpFK9UzZDa0mOO1qL9WLoNjeMpXgQhAefzf4CK9l5XqRFA-H4Go_uxt8szLpA3NSeCn-puCMLwLo6Ou2kAa32r9df0uOQ/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZi8i_fUrG9rcPWR79mX-wfh_g1taFK67vTNEPXNXAN_nperkAOb4qm6-IziPDMZAT_Aswf6Z6YMimOHw9gKLknEzOCqpIs77GIJI3ABiXQXyIB1feu1X9vL6joshRaWsyHtJ8pW2woA/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;
font-family: goth;
}
#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: right;
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/AVvXsEjGSyT6uPWmSmUehJvfk6Oyu1jGiXHyypPMVhWqLxhcZLhow4Cg5B2bAiGg8LB6xJdXiDJKX8pD5wknhrQo1A9t7h6L2KBWTUZghorHHxxl978buCw8VB1lBDD4cOBewrC1L-WeM3NZ-Jk/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 144px;
float: right;
}
#sliding-panel2 {
width: 144px;
float: left;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
margin-right: -75px;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXRmrvE9DLbaq_gM8E71CwVZvy3ti_f7WK5RmXQfysFI6nHmZVf6Y9ZX0Y2AKZgl5fncMcaxaMn9gtdDrFJcX8Ry9BHKNiF1wj_5fibbOARTVBJ5qZny2CmEWGrBaQnuNVbMMcdQLRllU/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: 12px goth;
color: #FFF;
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: right;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
margin-left: 84px;
font-family: goth;
}
</style>
<body expr:class='"loading" + data:blog.mobileClass'>
<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/AVvXsEgUdnLUdrwY6o3gPf68bwEXBlGBzND_S4C04sFY42JGReYw1DFNJBZ-l-5OEPCAzWNlcZJBz-I8Ahl4oE_jn9YofSJGBW_sYayp_XxgcfUQ1IaGM81AFSPTj0zYvL3eqG6S1oflJMh9qOc/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:290px !important'>
<h4>أقسام المدونة</h4>
<div id='sliding-panel'>
<ul>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 1</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 2</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 3</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 4</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 5</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 6</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 7</a></li>
</ul>
</div>
<div id='sliding-panel2'>
<ul>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 8</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 9</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 10</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 11</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 12</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 13</a></li>
<li><a href='www.hi-tech-eg.blogspot.com'>القسم 14</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/hossam.belal.h'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibG2LXgq1-GbjVDKw81Dknj1QjQwoaY1Pq-KR9M6hwLQH96sNuFnyQhXPtKPH4bLRC99b_Y2FWwE3e_rr0rjROpmWeWxMbWV-9E1BitQPXNHWSN9Jep8TqooCt377StgeB5lVKanKTTAw/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='https://plus.google.com/HussamBilal'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9kgk-wjZ86SOk3YXGCiwLTHttRj-xZCGKYoaXj9Ggv86czJLuzGexHckiiNf5AcNxqZyVoP0ljrpbpn6v8ZTZB_6LYjjuNfhNgL5K_47CwiF2sksPtwKGrEnrLkseuUOBQSc3lQfdfM/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a>
<a href='http://twitter.com/Hussam_Bilal'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6f0NhsXJg77nmr4Nk4qYFmI0E9r7ESzf5hQiCr3O7Dda9dWF18NA5fvR83kzC-UuD2hlsQmJkJ5qGbdtJWtCp2qi12xd2APHqOO_TR4o9D9T268CwTPZqvw5UaKmTBHZHdSUoWsOHJE/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>
- استبدل ما باللون الاحمر : باسماء وروابط الاقسام الخاصة بمدونتك او يمكنك استخدامها كما تشاء
- استبدل ما باللون البرتقالى : باليوزر الخاص بالخلاصات News Feed
- استبدل ما باللون الاخضر : برابط صفحتك على الفيس بوك
- استبدل ما باللون الازرق : برابط جوجل بلس
- استبدل ما باللون البنفسجى : برابط حسابك فى تويتر
- هذا رابط صورة الكاتب غيره بما يناسبك
لا استطيع نسخ الادواد -_-
ردحذفالاكواد
حذفكل الاكواد تنسخ ماعدا اكواد الوسم :
حذف</head>
<head>
<body>
انسخهم من هنا او قم بكتابتهم :) بالتوفيق