أهلا بك فى مدونة أبو إياد

عن المدونة

متخصصة بكل جديد فى عالم بلوجر والتدوين من إضافات وقوالب ونصائح لتدوين أفضل

هل تبحث عن شئ؟

اشترك فى مدونة أبو إياد

باشتراكك فى مدونتنا سيصلك كل جديد من الموضوعات الخاصة بعالم بلوجر

تواصلو معي

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


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

أولا: ادخل على لوحة تحكم مدونتك ثم قالب ثم تحرير HTML
ثانيا: ابحث (Ctrl+F) عن الكود التالي 
</head>
ثالثا: ضع قبله أو فوقه الكود التالي
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jQuery.jGlideMenu.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();
$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

رابعا: ابحث عن الكود التالي
]]></b:skin>
خامسا: ضع قبله أو فوقه الكود التالي 
 .jGM_box {
position: absolute; /* Change absolute with fixed if you want it to float */
top: 50px; /* Distance from above */
right: 860px; /* Distance from right */
width: 227px;
height: 317px;
background: #fff; /* Background color */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Border */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Background color for the up bar */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Font size of the description */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Description color */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Bar color on mouseover */
}
.jGM_more {
background-image: url(http://3.bp.blogspot.com/-n6XI5wLg8og/UjiLQ10dQpI/AAAAAAAAD3Q/cOVY1gTiruc/s1600/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Back" link */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color of the "Back" link on mouseover */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Home" link */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color of the "Home" link on mouseover */
background: #4D4E67;
سادسا: قم بحفظ القالب :)
سابعا: الذهاب الى تخطيط Layout وإضافة أداة HTML ولا تقم بتسميتها. ستضع بها الكود التالى بعد التعديل عليه كما سنشرح لك. وهذه النقطة الأكثر دقة فى العمل.
<div class="jGM_box" id="jGlide_001">
<!-- Here all the links of the first level -->
<ul id="tile_001" class="jGlide_001_tiles" title="عنوان القائمة الرئيسية" alt="وصف القائمة الرئيسية">
<li rel="tile_002">Link 1</li>
<li rel="tile_003">Link 2</li>
<li rel="tile_004">Link 3</li>
<li rel="tile_006">Link 4</li>
<li rel="tile_007">Link 5</li>
<li><a href="URL address">Link 6</a></li>
<li><a href="URL address">Link 7</a></li>
<li><a href="URL address">Link 8</a></li>
<li><a href="URL address">Link 9</a></li>
<li><a href="URL address">Link 10</a></li>
<li><a href="URL address">Link 11</a></li>
</ul>
<!-- Here all the links of the second level -->
<ul id="tile_002" class="jGlide_001_tiles" title="عنوان أول قائمة" alt="وصف أول قائمة">
<li rel="tile_005">Link 1.1</li>
<li><a href="URL address">Link 1.2</a></li>
<li><a href="URL address">Link 1.3</a></li>
<li><a href="URL address">Link 1.4</a></li>
</ul>
<ul id="tile_003" class="jGlide_001_tiles" title="عنوان ثانى قائمة" alt="وصف ثانى قائمة">
<li><a href="URL address">Link 2.1</a></li>
<li rel="tile_008">Link 2.2</li>
<li><a href="URL address">Link 2.3</a></li>
</ul>
<ul id="tile_004" class="jGlide_001_tiles" title="عنوان ثالث قائمة" alt="وصف ثالث قائمة">
<li><a href="URL address">Link 3.1</a></li>
<li><a href="URL address">Link 3.2</a></li>
<li><a href="URL address">Link 3.3</a></li>
</ul>

<ul id="tile_006" class="jGlide_001_tiles" title="عنوان رابع قائمة" alt="وصف رابع قائمة">
<li><a href="URL address">Link 4.1</a></li>
<li><a href="URL address">Link 4.2</a></li>
<li><a href="URL address">Link 4.3</a></li>
</ul>
<ul id="tile_007" class="jGlide_001_tiles" title="عنوان خامس قائمة" alt="وصف خامس قائمة">
<li><a href="URL address">Link 5.1</a></li>
<li><a href="URL address">Link 5.2</a></li>
</ul>

<!-- Here all the links of the third level -->
<ul id="tile_005" class="jGlide_001_tiles" title="عنوان قائمة فرعية" alt="وصف قائمة جانبية">
<li><a href="URL address">Link 1.1.1</a></li>
<li><a href="URL address">Link 1.1.2</a></li>
</ul>

<ul id="tile_008" class="jGlide_001_tiles" title="عنوان قائمة فرعية" alt="وصف قائمة فرعية">
<li><a href="URL address">Link 1.2.1</a></li>
<li><a href="URL address">Link 1.2.2</a></li>
</ul>
</div> 

الأن يمكنك الاستيعاب باستخدام الألوان. كل لون فى هذا الكود خاص ببعضه البعض حيث يوجد قسم رئيسي وأقسام متشعبة منه. احرص على اتباع الألوان المتشابهه حتى تضع فيها الروابط الرئيسية والمتشعبة بطريقة مرتبة كما ينبغى. وأى سؤال لا تتردد. 

www.monte-escalier-prix.org www.monte-escalier-prix.org

طريقتين لتعطيل الروابط المزعجة فى تعليقات مدونات بلوجر

يواجه العديد من مدوني بلوجر تعليقات غير مرغوب فيها من شخصيات غير حقيقية والحل هو الإشراف على التعليقات أو استخدام طريقة التحقق بالأرقام. ولكن هناك بعض الأشخاص الحقيقيين يستخدمون فى أخر تعليقاتهم "قم بزيارة مدونتي" أو غيرها من الجمل التى تتضمن روابط خارجية لمدوناتهم مما جعل البعض غير راضي عن هذه التعليقات لأن يمكنها الحاق الضرر بسمعة المدونة التى تعبت لتصل لهذا القدر من الصيت أو الاستفادة على حسابك من زوار مدونتك وارتباطها بها.
 الصورة السابقة مثال لتلك الأنواع من التعليقات وسأضع فى هذه التدوينة طريقتين لتفادي تلك المشكلة التى تؤرق العديد. أحد تلك الطرق عبارة عن كود CSS والآخرىjQuery ولكل طريقة ميزتها. كلاهما يتعاملان مع الروابط الماضية والمستقبلية فلا تقلق حيال التعليقات السابقة سيتم تفعيل الطريقة عليها.

أولا: تعطيل الروابط المزعجة فى تعليقات مدونات بلوجر باستخدام كود CSS والتى تتميز بحذف الرابط ووصف الرابط معا
صورة لتوضيح كيفية اضافة الكود
  • الدخول الى لوحة التحكم ثم القالب\Template ثم تخصيص\Customise 
  • اضغط على متقدم\Advance ثم Add CSS وقم باضافة الكود التالي واضغط على Apply to Blog
.comment-content a {display: none;}
 نتيجة إضافة الكود فى حذف الرابط والوصف
ثانيا: تعطيل الروابط المزعجة فى تعليقات مدونات بلوجر باستخدام كود jQuery والتى تتميز بحذف الرابط وعدم حذف وصف الرابط
صورة توضح كيفية وضع الكود
  • الدخول الى لوحة التحكم ثم القالب\Template ثم التعديل على القالب\Edit HTML
  • ابحث (CTRL+F) عن الكود التالي
</body>
  • ضع فوقه أو قبله الكود التالي ثم احفظ القالب\Save Template
<!--Stop Blog Comments http://www.abu-iyad.com --><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script> $('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());}); </script> <!--Stop Blog Comments http://www.abu-iyad.com -->
نتيجة إضافة الكود هو حذف الرابط والبقاء على الوصف



ننصح بالطريقة الثانية والتى سنقوم باستخدامها على مدونة أبو إياد ماذا عنك؟

www.monte-escalier-prix.org www.monte-escalier-prix.org

ارسال تعليقات ورسائل صوتيه على منشورات الفيسبوك

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

طريقة تثبيت Talk & Comment :-


بعد تثبيت الإضافة علي متصفحك كروم. و التي ستجد الرابط الخاص بها أسفل المقالة. ستجد نافذة مثل المتواجدة في الصورة أعلاه. قم بالضغط علي زر Allow حتي تقوم بتشغيل المايكروفون الخاص بك. أو يمكنك تشغيل المايكروفون الخاص بك بالطريقة التالية

بعد تثبيت الإضافة ستجد نافذة جديدة خاصة بها. قم بمتابعة الخطوات المتواجدة بالصورة أعلاة. و سيتم تشغيل المايكروفون الخاص بك.

طريقة التعامل مع Talk & Comment :-


بعد إتمام الخطوات السابقة. قم بالدخول علي حسابك الخاص في الفيسبوك. و ستجد أيقونة التسجيل الخاصة بأداة Talk & Comment كما متواجد بالصورة أعلاه. قم بالضغط عليها بسهم الفأرة و لا تتركها حتي تنتهي من التسجيل.

 بعد إنتهائك من التسجيل. ستجد ظهور الرابط الخاص بتسجيلك الصوتي. فقط عليك بالضغط علي زر Enter لإرسال رسالتك أو تعليقك الصوتى.

يمكنك أيضا القاء نظرة على الفيديو التعريفى للإضافة قبل تثبيتها :)
و أخيراً .. هذه الإضافة من أفضل الإضافات الخاصة بالفيسبوك .. ستعجبكم كثيراً .. فقط عليكم بالتجربة .. ^__^ ..

يمكنكم تثبيت الإضافة بالضغط هنا TalkAndComment.com !, ملحوظة .. الصور المتواجدة بالموضوع من الموقع الرسمي للإضافة ! .. اذا استفدت من الموضوع ؟ شاركة مع أصدقائك .. 

www.monte-escalier-prix.org www.monte-escalier-prix.org

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


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

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 الى اسم حسابك على تويتر.


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

www.monte-escalier-prix.org www.monte-escalier-prix.org
 

تطوير وتعريب مدونة أبواياد حقوق القالب محمية بواسطة copySWEUP©

قالب مدونة أبو إياد

قالب مدونة أبو إياد 2014

يتم التشغيل بواسطة Blogger.


[أهلا بكم لا تنسوا متابعة المدونة]

تابعنا على الفيسبوك

تابعنا على تويتر

تابعنا على جوجل بلس

ادعمنا بالضغط على زر +1

سجل بريدك وسيصلك جديد مواضيعنا