لوحة تحكم عائمة لمدونات بلوجر بإصدارها الأول [حصريا]

عدد مشاهدات الموضوع:

العديد من مدونات بلوجر يستخدم أدوات كثيرة خصوصا على جوانب المدونة. وبالتالي ستكون الصفحة الرئيسية ثقيلة فى التحميل بسبب الأكواد وطول الصفحة سيصيب الزائر بنوع من الملل. وعلاجا لتلك المشكلة سنطرح إضافة مميزة جدا بإصدارها الأول ونعنى بإصدارها الأول أن هناك نموذج جديد منها سنصدره لاحقا متطور نوعا ما ببعض الإضافات التى توفر عليك عناء التنقل داخل لوحة التحكم الرئيسية لبلوجر. والأن سنتحدث عن هذه الأداة وهى تجمع بين وصف المدونة أو صاحب المدونة, وكذلك قائمة لاشتراك الزائر فى خلاصات المدونة إضافة الى بعض المواقع الإجتماعية وأخيرا أقسام المدونة ويمكنك استبدال الأقسام بموضوعات تريد ظهورها أو مدونات صديقة كما شئت. يمكنك معاينة الأداة من هنا (مدونة تجريبية) واذا أعجبتك قم بإجراء الخطوات التالية.

1- سجل دخولك للوحة تحكم بلوجر ثم قالب ثم تعديل القالب
2 ابحث  (CTRL + F) عن 
<head>
3- ضع اسفله الكود التالي
 <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> 
 4- ابحث  (CTRL + F) عن 
 </head>
5- ضع فوقه\ قبله الكود التالي وهو عبارة عن كود CSS
 <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: 80%;
text-align: center;
}
.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: 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(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;
}
</style> 
 يمكنك التحكم فى ارتفاع لوحة التحكم من 
height: 230px; 
ويمكنك التحكم فى تغيير لون خلفية لوحة التحكم من الكود التالي
background: #272727;
 6- ابحث (CTRL + F) عن
<body>
 ملاحظة بعض المدونات لا تحتوى على <body> يمكنها البحث بدلا عنها على الكود التالي
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
 7- ضع بعدها\ تحتها الكود التالي ولكن بعد اجراء بعض التعديلات التى سنوضحها لاحقا لتتكيف مع مدونتك :)
<!-- 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://lh6.googleusercontent.com/-8GqQDSvAvqQ/UuL9ERD66jI/AAAAAAAAHoE/XKOs5jCPyMo/h120/baner+abu+iyad.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='http://www.abu-iyad.com/'>مدونة أبو إياد</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=abu-iyad/rCev' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='abu-iyad/rCev'/>
<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/abuiyad007'><img title="تابعنا على الفيسبوك" src='http://1.bp.blogspot.com/-2fO6NtvIiEQ/UwTGy3-a8rI/AAAAAAAAH04/jSx8BLTDEx4/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://feeds.feedburner.com/abu-iyad/rCev'><img title="خلاصات المدونة" src='http://1.bp.blogspot.com/-_BodOE-K18E/UwTGy74EFYI/AAAAAAAAH08/ql9Wb4fRSY4/s1600/RSS.png' style='padding:5px;' width='32'/></a>
<a href='https://plus.google.com/محمدجلال+'><img title="تابعنا على جوجل بلس" src='http://2.bp.blogspot.com/-qF7UB7SjO1I/UwTGy_RZG8I/AAAAAAAAH1A/Rh0CsPTSeuU/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
<a href='https://twitter.com/AbuiyadBlog'><img title="تابعنا على تويتر" src='http://4.bp.blogspot.com/-k7iKm0HXw6I/UwTGzWylE9I/AAAAAAAAH1Q/YxVn1QIpCOM/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>

قم باجراء التغييرات التالية:
1- قم بتغيير أهلا بك فى مدونة أبو إياد  الى مدونتك
2- قم بتغيير رابط الصورة التالي لرابط صورة شعار مدونتك
https://lh6.googleusercontent.com/-8GqQDSvAvqQ/UuL9ERD66jI/AAAAAAAAHoE/XKOs5jCPyMo/h120/baner+abu+iyad.png
3-  يمكنك تغيير عبارة عن المدونة ووصفها بأسفلها كما تشاء ان أردت كتابة معلومات عن صاحب المدونة أو المدونة ذاتها.
4- يمكنك تغيير أقسام المدونة كما تشاء الى موضوعات هامة للزوار أو صفحات أخرى.
5- يمكنك استبدال اسم القسم باسم الموضوع أو الصفحة وكذلك قم باستبدال كلمة Link URL الى رابط القسم أو الموضوع أو الصفحة.
6- قم باستبتدال اشترك فى مدونة أبو إياد الى ما يناسب مدونتك وكذلك المضمون أسفلها.
7- قم باستبدال abu-iyad/rCev الى نهاية رابط خلاصات مدونتك.
8- قم باستبدال abuiyad007 الى اسم صفحة الفيسبوك الخاصة بمدونتك أو حسابك على الفيسبوك.
9- قم باستبدال محمدجلال+ الى اسم ملفك الشخصى على جوجل بلس.
10- قم باستبدال AbuiyadBlog الى اسم حسابك على تويتر.


والأن نترك مساحة لتعليقاتكم حول الأداة التى قابلها معجبى صفحة الفيسبوك بالترحاب. لا تتردد فى طرح استفسارك ولا تنسي دعمنا :)

هناك 17 تعليقًا:

  1. مشكوووووووووور انا محمد ليث النعيمي ^_^

    ردحذف
  2. @Rayyan Layth

    اهلا وسهلا محمد .. هل قمت بتركيب الاداة بنجاح؟

    ردحذف
  3. @محمد جلال نعم أخي الحبيب انها تعمل 100% ولكنها ليست عائمة لكي تجعلها عائمة استبدل هذا الكود في اكواد السي أس أس: position: absolute;
    بهذا الكود: position: fixed;

    الاّن أصبحت عائمة وجميلة جداً بل ممتازة, رابط مدونتي للمعاينة: http://www.7ikayah.com/

    ردحذف
  4. You're awesome ♥

    I applied it here :v

    www.bitw.ml

    ردحذف
  5. تشك على المجهود
    http://manarattariq.blogspot.com/

    ردحذف
  6. @Rayyan Layth

    شكرا على اضافتك واهلا بك :)

    ردحذف
  7. @Hasan Yasen

    بالتوفيق يا طيب

    ردحذف
  8. موضوع جميل ولاكن من اين احمل الاقسام

    ردحذف
  9. غير معرف4:39 م

    للاسف يعطينى خطا عند حفظ القالب وطبقت الطريقة بالحرف

    ردحذف
  10. @hussein mahdi

    يمكنك استخدام رابط الوسم كأنه رابط قسم :)

    ردحذف
  11. @غير معرف

    راجع الخطوات مرة أخري بدقة فالأكواد كثيرة .. وياريت ترسل صورة بالخطأ :)

    ردحذف
  12. اخى الكريم هذا الموضوع من مدونة
    helpblogger.blogspot.com

    ردحذف
    الردود
    1. نعم .. قمت بترجمة الاضافة لتلائم اللغة العربية

      حذف
  13. أخي لم أجد لا body>
    ولا

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية