شريط أفقي أحترافي با تنسيقك الخاص

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

شريط أفقي أحترافي با تنسيقك الخاص

1. من لوحة التحكم بلوجر
2. قالب
3. ابحث عن الوسم التالي </body> وضع فوقه قبله الكود التالي 

<style>

#wcsticky-container {

  height:46px;

  width:100%;

 position:fixed;

z-index:99999;

  top: 0px;

left:0px;

 background:#1172F5;

}

#wc-stickylinks

{

color:rgb(212, 244, 17);

font: 14px droid arabic kufi;

font-weight: normal;

margin-top:12px;

margin-right:20px;

text-decoration:none;

}

#wc-stickylinks a

{

font: 14px droid arabic kufi;

font-weight: normal;

color:#ffffff;

text-decoration:none;

}

#wcstickyclose

{

float:left;

margin-top:15px;

margin-right:20px;

}

#wcstickyclose a

{

color:rgb(212, 244, 17);

text-decoration:none;

font: 14px droid arabic kufi;

font-weight: normal;

padding:4px;

padding-top:16px;

padding-right:16px;

background:#000;

}

#wcsticky-main

{float:right;

}

</style>

<script language='JavaScript'>

function closesticky() { 

document.getElementById(&quot;wcsticky-container&quot;).style.visibility = &quot;hidden&quot;; 

} 

</script>

<div id='wcsticky-container'>

<div id='wcsticky-main'>

<p id='wc-stickylinks'> كن متفائل:<a href='#'>كل جديد ومفيد في عالم بلوجر معنا سوف تصبح مدون محترف</a> | <a href='http://cnmot.blogspot.com/'>أضف هذا الشريط الي مدونتك باضغط هنا</a></p>

</div>

<div id='wcstickyclose'>

<a href='javascript:closesticky();'>X</a>

</div>

  </div>

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

إقرأ المزيد... Résuméabuiyad

حصريا طريقة عرض عناوين المواضيع فقط علي الصفحة الرئيسية

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

معاينة

طريقة عرض عناوين المشاركات فقط علي الصفحة الرئيسية

1. من لوحة التحكم بلوجر 
2. نضغط علي قالب 
3. من ثم تحرير html 
4. ومن ثم نبحث عن الكود التالي </ head> بواسطة ctrl+f
5. ونضع فوقه الكود التالي 

<style type='text/css'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

.post {

margin:.5em 0 1.5em;

border-bottom:0px dotted $bordercolor;

padding-bottom:1.0em;

height:50px;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:20px;

font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;

font-weight:normal;

line-height:1.4em;

color:#cc6600;

}

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:#cc6600;

font-weight:normal;

}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}

.post-footer {display:none;}

.comment-link {display:none;}

.post img {display:none;}

.post blockquote {display:none;}

.post blockquote p {display:none;}

h2.date-header {display:none;}

.post-labels {display:none;}

.post-rating {display:none;}

</b:if>

</b:if>

</style>

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

وفي الأخير لا يسعني الا ان أشكر زوار ومتبعي كن متفائل علي الزيارات اليومية لتي يقومون بها ولتي أفادت المدونة كثيرا في تخفيض ترتيبها عالميا في أمان الله ورعايته

إقرأ المزيد... Résuméabuiyad

قائمة أفقية أنيقة جدا وسهلة التنسيق

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

معاينة

طريقة التركيب 

بلوجر >> قالب >> تحرير html وفوق هذا الوسم ]]></b:skin> نضع الكود التالي 

.cnmot {

background: #ddfaf8;

border: 1px solid #BACAD9;

padding: 10px;

}

نظرة عامة علي الكود  

#ddfaf8 : هذا الكود المسؤول عن الخلفية 

#BACAD9 : وهذا لون خط البوردر 

10px : وهذا مسؤول عن المسافة بينهما 

الخطوة الثانية والأخيرة من طريقة تركيب القائمة

تخطيط >> اضافة آداة >> نختار >> java /html ونضع بها الكود التالي 

<div align="center" class='cnmot'>

&nbsp;<a href='#'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWhDqWVhRFC2LzHLzLlp1RXJSoAxfzO8RoOKvs8pMVKzwps1V05SeWfmepbhyQK3DG1voSQhi6QQm72yS4lZShjv_FIbIC4pwXaM5PUpVe7RD_iMr9jrKfe_yT8CJV8EUCqCNFqUYzTY/s1600/home.png' title='الصفحة الرئيسية'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Quran' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1m8gsM7gBbDB3TzCxmNH9nVAxPmwCTdtHHC2W7PP0E8ZgsHl4KxwLe-qjDZsvLjLedurcm6vnmny_La1YZ10ig7Tc87NTJQ0AcK5tIibEpr7nNeXjAHrzbL2Jjlb7PrR6LSItwOU1vXg/s1600/alQuran.png' title='القرآن الكريم'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Culture' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsvWKORNSt6zJyUiQLh51jhIZGPkBJ3uDJgDRfx6D2j5Y_lSxo1qePx91p786CkpkdVpGEShaPqys92CO1OYzOlfEfDIlcKvGbt-Qkc9JPAsZ2A0VtqI2q8H4eqchh7QNTCNgdcnQkKFk/s1600/book-icon.png' title='مواقع ثقافية'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='TV' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlUeq7vgs7gK31HTYKhfFrqGjERlQQJg3qDVtvLyJ0porA9u76AYA_qHTGeH4sfNwPtdfLZnG_HuoDoozYf5B3FUMDgyXyUcQI2kpJ2B8G8RRsiN2NIVmU08KixCF0K3q2k2TgXERUU4/s1600/tv-icon.png' title='البث المباشر'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Business' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERwwmyYLaK16PKPKM544Z29yU7pNHgF3VyTxEknTynfBH35ORJJCDgwKWZu0V3Q3W0BZlO2TUpKxktsYFcFWesOL2w8BABAvXpSkbENJ6AmJ-Em-hGdi0PXwRGJgPiuN3MARRoQITtvM/s1600/finance-and-business.png' title='أخبار الاقتصاد'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Sport' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqfUAIba4KGehV33zt8EhUGQqlZ2itSyufsMLCaVSt0DQCPfJ0ffQ0w1Avb0-J6e8DTHNSzyzXA1Ku4ANLSwAFCowExTn2YX92S4SpkHM4_Tn1vgHRK-hgrSFZhLpvYqYTbAdnVdGpOk/s1600/sport.png' title='أخبار الرياضة'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='Contact us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOgrmeE6zJi9mY0ANBPVLbpG6b3qoq-pwmJUzbOyWikoFU31G7Oj35sM1G17UbyI7r6DVTo5JxP_Y99S2OFPpVJUeHjamRdTohPAIBWHR5EgzdoYuJLVzmcUIfDLg9x-tdIb0rI0XeR0o/s1600/contact-us.png' title='اتصل بنا'/></a>

<a><img alt='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqsN3m5pOhl0JhZO3TiJCILbdQU2VpGzygMMLdnYjyiL2PCAFRmfnCVp3WQkGluKf09IvYmhvSJDtf34OCgXSTT18bHriDH9EvkHR2RdPp_sUerYRht_1ldLblYSk4UAks8bmt41QfBc/s1600/2.gif' title='2'/></a>

<a href='#'><img alt='FRANÇAIS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ba1Dqz2weGKi16KuZ09HVODI2UGLyA9tgJEtBglL-U9koqI57KnnbYZari6fKofgaw2CQBldZdbx5rEDthWh10l3RXle_vxcHwxAezv0EYVw2jeDIY5i6fN5-XiichsQVLIy_LDWfNE/s1600/fr.png' title='المدونة با الفرنسية'/></a>

</div>

نظرة عامة علي الكود  

# : استبدله برابط الذي تريد 

الملون بلون الأحمر هو رابط الصور ان اردتم استبدالهم 

والي هنا ينتهي موضوعنا اليوم في أمان الله 

إقرأ المزيد... Résuméabuiyad

أنواع صفحات بلوجر وتعريفها

 هناك اربعة أنواع من الصفحات الأساسية في بلوجر التي يمكننا التمييز بينها من خلال xml الخاص بابلوجر,أسفل هذا السطر سوف توجد هذه الأنواع مع تعريفها

1- الأرشيف

صفحات الأرشيف تشير الي الصفحات التي تمت اضافتها من طرف  Widget الخاصة بأرشيف بلوجر،وهي عادة لديها “_archive.html” في أخر عنوان URL.وهدا الكود هو شرط للتحقق من أن نوع الصفحة هي الأرشيف

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

    <title>

        Posts Archive | <data:blog.title/>

    </title>

</b:if>

2- صفحات الأندكس index

صفحة الاندكس تشير الي الصفحات من الصفحة الرئيسية متلا cnmot.blogspot.com والي صفحات البحت  search.الصفحة التي بها لائحة المواضيع هي ببساطة صفحة index. وهدا الكود هو شرط للتحقق من أن نوع الصفحة هي index

<b:if cond='data:blog.pageType == &quot;index&quot;'>

</b:if>

3- صفحة الموضوع Item 

صفحة الموضوع أو item page تشير الي موضوع المدونة blogger post . وهدا الكود هو شرط للتحقق من أن نوع الصفحة هي item

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <title>

        <data:blog.pageName/> | <data:blog.title/>

    </title>

</b:if>

4- الصفحات التابتة Static Page 

الصفحات التابتة تشير الي صفحات البلوجر أي الصفحات التي يتم انشائها عن طريق زر
اضافة صفحة وهدا الكود هو شرط للتحقق من أن نوع الصفحة هي static page

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

    <title>

        <data:blog.pageName/> | <data:blog.title/>

    </title>

</b:if>

باستعمال شرط البلوجر if ،نستطيع استخدام  كود الsnippets أعلاه لادخال عنوان خاص بكل

صفحة استمتعوا بالتدوين.

إقرأ المزيد... Résuméabuiyad

سلايدر أنيق وسهل التنسيق

سلايدر أومايسمي با سلايد شو  لذي يقوم بعرض آخر مواضيع مدونتك زائد الصور وعناوين المواضيع يمكن التحكم فيه بكل سهولة وهذا السلايدر الذي سوف أقدم لكم اليوم هو خفيف
وأنيق وسهل التنسيق ومريح جدا لزائر كما أنه يتمتع با الخفة عن باقي السلايدر شو هات ويمكنك معاينة سلايدر عبر المثال التالي

معاينة

طريقة تركيب سلايدر 

1. من لوحة التحكم بلوجر
2. قالب 
3. تحرير html
4. نبحث عن الوسم التالي </head> ونضع أسفله الكود التالي 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

//<![CDATA[

/* ------------------------------------------------------------------------

s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/

 CSS Help: Mészáros Róbert -> http://www.perspectived.com/

Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as

  long as you leave my infos at the top.

-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;

 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;

 var current     = null;

 var timeOutFn   = null;

 var faderStat   = true;

 var mOver       = false;

 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");

 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {

        mOver = true;

     });

     $(items[i]).mouseout(function() {

         mOver   = false;

         fadeElement(true);

     });

 });

 var fadeElement = function(isMouseOut) {

     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;

     thisTimeOut = (faderStat) ? 10 : thisTimeOut;

     if(items.length > 0) {

         timeOutFn = setTimeout(makeSlider, thisTimeOut);

     } else {

         console.log("Poof..");

     }

 }

 var makeSlider = function() {

     current = (current != null) ? current : items[(items.length-1)];

     var currNo      = jQuery.inArray(current, items) + 1

     currNo = (currNo == items.length) ? 0 : (currNo - 1);

     var newMargin   = $(element).width() * currNo;

     if(faderStat == true) {

         if(!mOver) {

             $(items[currNo]).fadeIn((timeOut/6), function() {

                 if($(itemsSpan[currNo]).css('bottom') == 0) {

                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {

                         faderStat = false;

                         current = items[currNo];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 } else {

                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {

                         faderStat = false;

                         current = items[currNo];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 }

             });

         }

     } else {

         if(!mOver) {

             if($(itemsSpan[currNo]).css('bottom') == 0) {

                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {

                     $(items[currNo]).fadeOut((timeOut/6), function() {

                         faderStat = true;

                         current = items[(currNo+1)];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 });

             } else {

                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {

                 $(items[currNo]).fadeOut((timeOut/6), function() {

                         faderStat = true;

                         current = items[(currNo+1)];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 });

             }

         }

     }

 }

 makeSlider();

};

})(jQuery);

//]]>

</script>

<script type='text/javascript'>

$(document).ready(function() {

$('#s3slider').s3Slider({

timeOut: 4000

});

});

</script>

<style type='text/css'>

#s3slider {

background:#000000;

border:1px solid #818e8f;

width: 550px;

height: 200px;

position: relative;

overflow: hidden;

}

#s3sliderContent {

width: 550px;

position: absolute;

top:0px;

padding: 0px;

margin: 0px;

}

.s3sliderImage {

float: left;

position: relative;

display: none;

}

.s3sliderImage span {

position: absolute;

left: 0;

font: 20px Trebuchet MS, sans-serif;

padding: 10px 0px;

width: 550px;

background-color: #000;

filter: alpha(opacity=80);

-moz-opacity: 0.8;

-khtml-opacity: 0.8;

opacity: 0.8;

color: #fff;

display: none;

bottom: 0;

text-align:center;

}

.clear {

clear: both;

}

</style>

شرح بعض خصائص الكود  

ملاحظة: لتغيير سرعة عرض الشرائح، نغيير قيمة 4000 الملون في الكود با الون الأحمر
550: عرض السلايدر 
200: طول السلايدر

وأحفظ القالب 

وبعد حفظ القالب نذهب الي تخطيط --> اضافة آداة -->

نختار html/java script ونضع بها الكود التالي

<div id="s3slider">

<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الأول" /><span>وصف الموضوع الأول</span></a></li>

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الثاني" /><span>وصف الموضوع الثاني</span></a></li>

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الثالث" /><span>وصف الموضوع الثالث</span></a></li>

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الرابع" /><span>وصف الموضوع الرابع</span></a></li>

<li class="s3sliderImage"></li>

</ul>

</div>

<div class='clear'></div>

شرح بعض خصائص الكود  

# نغيرها برابط الموضوع

550 عرض السلايدر 

200 طول السلايدر 

في أمان الله ورعايته 

إقرأ المزيد... Résuméabuiyad