السلام عليكم و رحمة الله وبركاته
متابعي ورشة مدون الأوفياء كما عودناكم دائما بالجديد و الحصري , اليوم في هذا الموضوع سوف نرى كيفية إضافة أدآة "الموضوع السابق" و "الموضوع التالي" أو ما يسمى ب "navigation pager" و سوف نعتمد على أكواد jquery لنستطيع إظهار عناوين المواضيع , هذه الطريقة شبيهة بطريقة عمل السلايدرات. وتعتبر هذه الأضافة من الأدوات التي تساعد على بقاء الزائر في المدونة أطول مدة ممكنة.

/*################warch-mo.blogspot.com Pager ##########################*/
.warch-mo-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; overflow:hidden; padding:0px;}
.warch-mo-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.warch-mo-pager li.next a { padding-left: 24px; }
.warch-mo-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
}
.warch-mo-pager li.previous a { padding-right: 24px;  }
.warch-mo-pager li.next:hover, .warch-mo-pager li.previous:hover  {background:#646464; }
.warch-mo-pager li { width: 50%; display: inline; float: left; text-align: center; }
.warch-mo-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.warch-mo-pager li i { color: #ccc; font-size: 18px; }
.warch-mo-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.warch-mo-pager li a span { font-size: 15px; color: #666;  font-family:Droid Arabic Kufi; margin:0px;}
.warch-mo-pager li a:hover span,
.warch-mo-pager li a:hover i { color: #ffffff; }
.warch-mo-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.warch-mo-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }
.warch-mo-pager li.next i, .warch-mo-pager li.previous i ,
.warch-mo-pager li.next,  .warch-mo-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
.fa-chevron-left:before {
content: "\203A";
}
.fa-chevron-right:before {
content: "\2039";
}
.warch-mo-pager li.previous i {
color: #CCCCCC;
font: 45px tahoma;
margin-top: 25px;
}
.warch-mo-pager li.next i {
color: #CCCCCC;
font: 45px tahoma;
margin-top: 25px;
}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<ul class='warch-mo-pager'>
        <li class='next'> 
<b:if cond='data:newerPageUrl'> 
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/> 
<b:else/> 
<i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>أنت تتصفح أحدث موضوع</span></a> 
</b:if> 
</li>
    <li class='previous'> 
<b:if cond='data:olderPageUrl'> 
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/> 
<b:else/> 
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>أنت تصفح أول موضوع</span></a> 
</b:if> 
</li>
    </ul>

<script type='text/javascript'> 
//<![CDATA[ 
(function($){    
    var newerLink = $('a.newer-link'); 
    var olderLink = $('a.older-link'); 
    $.get(newerLink.attr('href'), function (data) { 
     newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h2').text()+'</span>');    
    },"html"); 
    $.get(olderLink.attr('href'), function (data2) { 
     olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h2').text()+'</span>');    
    },"html"); 
})(jQuery); 
//]]> 
</script>
      </b:if></b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
ضع الكود الذي وجدته هنا
</b:if></b:if>

السلام عليكم و رحمة الله وبركاته 
في زماننا هذا قد نلاحظ كيف إقتحمت الأجهزة الذكية عالمنا ، سواء الهواتف الذكية ، الألوح أو حتى الحواسيب المحمولة، و قد بسطت للكثيرين كل ما كان يقتصر على الحواسيب ، فالولوج للإنترنيت و تصفح المواقع أصبح في متناول الجميع في كل وقت وكل مكان فيمكن لأي شخص ركوب الحافلة للذهاب للجامعة أو للعمل مثلا ، و يستغل الوقت لتصفح موقعك إن كان من المهتمين بما تقدمه ، غالبا المواقع الإخبارية التي إحتلت مكان الجرائد ، و مع إزدياد عدد مستخدمين هذه الأجهزة أصبح مدراء المواقع يسعون وراء جعل قوالب مواقعهم و مدوناتهم متجاوبة  مع كل الألواح و الهواتف بمختلف مقاسات الشاشة و اليوم سوف نرى طريقة جعل القالب متجاوب ، أو ما يعرف ب "Responsive design" و ذلك بتقنية css3 ، والآن على بركة الله، ننتقل إلى الدرس

<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/>

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

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


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


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


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

لمزيد من الإضافات - ورشة مدون

السلام عليكم ورحمة الله وبركاته،
الكثير من المدونين على البلوجر يفضلون أن تتوفر مدونتهم على السلايدر شو، هذا لأن السلايدر شو يزيد من جمالية الموقع وجذبيته ، و تختلف أنواعها ما بين التي تعدل يدويا و الأخرى التي تعمل بشكل تلقائي، و اليوم أحضرت النوع الأخير أي السلايدر التلقائي الذي يجسده سلايدر شو مدونة المحترف الجديد ، هذا السلايدر مشهور بشهرة صاحب موقعه إلا أنه مليء بالأخطاء وغير منسق ، و لقد قمت برفع أكواده من جديد و عملت على تحسينه وقمت بتصغيره ، رأيت فيه فراغ كبير سيجعله أقل جاذبية. يمكنك معاينته بالضغط هنا
طريقة إضافة السلايدر شو
1- الذهاب للوحة التحكم ثم القالب بعد ذلك تحرير HTML نأخذ نسخة من القالب تفاديا لأي خطأ.
2- نبحث عن هذا الوسم:  </head> ثم نضيف الكود التالي قبله مباشرة.

<script>
    //<![CDATA[
    /* Script from:http://warch-mo.blogspot.com/ */
    imgr = new Array();
    imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 150;

    numposts1 = 6;
    label1 = "اضافات بلوجر";
    function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
    function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
          
    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
    }}
    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';   
    document.write(trtd);     
    j++;
    }}
    //]]>
    </script>

      <script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></script><script>
          featuredcontentslider.init({
            id: &quot;slider1&quot;, //id of main slider DIV
            contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
            toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
            nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
            enablefade: [true, 0.5], //[true/false, fadedegree]
            autorotate: [true, 6000], //[true/false, pausetime]
            onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
            //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
            //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
          }
                                     })
        </script>

4- الأن نبحث عن أحد  الأكواد التالية:

<div id='main-wrapper'>
    أو هذا
<div id='content'>
    أو هذا
<div id="content">
    أو هذا
<div class='column-center-inner'>

     /*--------------Slider-------------*/
    #alwansd{
   height: 200px;
padding: 18px;
background: #fbfbfb;
/*width: 615px;*/
margin-right: 7px;
border-bottom: 2px solid #E6E6E6;
position: relative;
margin: 0 auto;
overflow: hidden;
width: auto;
    border: 3px dotted rgba(35, 178, 216, 1);
    margin-bottom: 10px;
}
    .alwanw {
position: relative;
height: 178px;
width: 127%;
}
    .alwanw .contentdiv{
    visibility: hidden;
    opacity: 1;
    position: absolute;
    height: 240px;
    }
    .alwan-ps {
text-align: right;
float: left;
width: 216px;
height: 13px;
margin: 0 auto;
}
    .alwan-ps .toc {
    float: right;
    font-size: 0;
    width: 13px;
    height: 13px;
    background: #e74c3c;
    margin-left: 8px;
    border-radius: 60px;
    }
    .alwan-ps .selected {background: #95A5A6;}
    .alwan-ps .prev ,.alwan-ps .next{
    display:none;
    }
    .alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOTPrp2KF9e8LDVW8p4Ruh-MYylaP0d0fOba2Ifsq1YbAn4-fIjimK5O4-tRZk9V8U1ZtKFyMxLHwv7fOgjgg0LUHvWjWdn3FgkEbJyFWN0-4Gz38Wo18EQ7e2sNwW_AHrC6VHxoV5W6s/s1600/next-h.png);}
    .alwanip{
    width: 333px;
float: left !important;
margin: 0px auto;
padding: 0px 22px 0px 0px;
    }
    .alwanip a{
    color: #2c3e50;
    font: 20px ge_dinar;
    margin: 0 auto;
    line-height: 37px;
    text-decoration: none;
}
    .post-body img {
    margin: -1px 0 0 8px;
    padding: 3px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    }
    .alwanip h6{margin: 0;}
    .alwanip h6 a:hover {color:#95A5A6;}
    .alwanip .alwand{
    color:#fff;
    }
    .alwanip p{
    margin: 0 auto;
    color: #95A5A6;
    font-family: Droid Arabic Kufi;
    font-size: 12px;
}
    .alwansf {
    float: right !important;
    margin:0 auto;
    }
    .alwansf a img {
    width: 276px;
    height: 200px;}
    .alwansf a img:hover{
    }
    .alwansf a img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
    }

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

 السلام عليكم و رحمة الله و بركاته
الزوار من بين أهم المشاكل التي تواجه الناشرين و أصحاب المواقع الجدد بحيث حتى لو تجاوز عدد مواضيعك 200 موضوع قد تلاحظ أنا الزوار قليلين لا يتجوزون بعض العشرات في اليوم ، و أنا كما تعلمون أهتم كثيرا بالسيو و أرشفة المواقع اليوم قررت أن أشارككم تجربتي في جلب الزوار المهتمين إلى موقعك من مصادر متنوعة و في نفس الوقت بناء شبكة باك لينك قوية،
أولا نقف عند مفهوم "الزوار المستهدفين" هذا المفهوم يعني الزوار المهتمين بمحتوى موقعك أو مدونتك بحث تزيد مدة تصفحه لمدونتك و إمكانية النقر على إعلاناتك بإعتبارها تعرض أشياء لها صلة بما يبحث عليه ، عكس بعض المواقع التي تجلب لك زوار غير مستهدفين لا تتجاوز مدة بقائهم في مدونتك سبع ثواني مما قد يعرض حساب أدسنس عندك للحظر،
# من أين يمكنني الحصول على زوار مستهدفين و مهتمين بمحتوى موقعي ؟
1- المواقع الإجتماعية : كلنا نعرف أن حجم مستخدمين مثل هذه المواقع لدى كل ما عليك هو الإنضمام للتجمعات التي تهتم لمثل محتوى موقعك سواء كان المحتوى بالعربية أو بلغة أجنبية أخرى التي باللغة العربية سوف تشاركها مواضيعك و تقوم بوضع روابك كتوقيع ، أما التي باللغة الأجنبية فيمكنك الأستفادة منها و إعادة صياغتها بطريقتك فإدخال المحتوى الإجنبي للويب العربي سيجعلك مميزا في مجالك ، و بمواضيعك التي تبدو حصرية في الويب العربي سيكون موقعك و جهة للعديد من الزوار حتى المنافسين منهم، بهذه الطريق سوف تضرب عصفورين بحجر واحد.
2- التعليقات في المواقع المنافسة : التعليق في مدونات و مواقع أخرى و التفاعل مع الإخرين بواضيعك أو كتعليق شكر مع ترك رابط مدونتك أو أحد المواضيع كتوقيع ولكن بعبارة قوية لا تكتب مثلا " أتمنى زيارة مدونتي" في حالة كتابة هذه العبارة بمجرد ما يقرأها أحد الزوار سيتكهن له أنك مبتدأ في مجال التدوين وتبحث عن زوار.
3- الهاشتاج (#) : ويعد تويتر من أشهر مواقع الهاشتاج وتكمن أهمية الهاشتاج في سهولة وصول المستخدمين المهتمين بنفس تخصصك لمنشوراتك بسرعة وسهولة مثلا عندما تنشر موضوع في تويتر حول السيو وتقوم بعمل هاشتاج seo# أو #سيو فإن أي شخص مهتم بالسيو سيصل لمنشورك وبالتالي لموقعك .
4- مواقع الأسئلة والأجوبة و مناقشة الأفكار: للأسف قامت جوجل بغلق خدمة الأسئلة و الأجوبة العربيّة (جوجل إجابات) و التي كانت تعاني من أعمال صبيانيّة كالإشهار و كل هاته الأمور، لكن بإمكانك الإعتماد على ياهوو إجابات (answers.yahoo.com) أو موقع مكتوب (maktoob.yahoo.com) أو حتى أرابيا (arabia.io).
5- المنتديات : و هي أهم الأساليب التي يمكنك أن تتبعها للظفر بنسبة مهمة من الزوار، و ذالك عبر المشاركة بمواضيع مهمة من مدونتك مع وضع روابط الموضوع الأصلي ، و الإجابة أيضا على التسأولات التي تطرح في التعليقات على الأقل مشاركة واحدة كل أسبوع لا تقم بنسخ تدوينة واحدة في كل المنتديات بل نوع كل مواضيعك. هذا كله سوف تقوم به في المنتديات المشهورة التي تهتم بنفس تخصصك.
6- كتابة مقالات وتدوينات مستضافة في مواقع أخرى : يعني أن تنشر مواضيع حصرية لك  في مواقع من نفس تخصصك يعني مواقع منافسة بحيث تقوم مثلا إرسال التدوينة إلي على حسابي الخاص أو بريدي الإلكتروني لأقوم بنشرها في المدونة مع إسمك و رابط مدونتك... ولكن يجب على التدوينة أن تكون خالية من الأخطاء التعبيرية و الإملائية و تليق بمستوى المدونة التي ستنشر فيها مثلا لا أحد سيغامر بمستوى موقعه لينشر محتوى منقول أو به كثرة الأخطاء...
7- جماهير الفيس بوك : إستغلال صفحات الفيسبوك في نشر بعض الروابط مرة كل 5 أو 4 ساعات ليس كل الوقت لأن معجبين الصفحة سيملون منك و يغادرو الصفحة.
8-يوتيوب : فوضع فديوهاتك في يوتيوب سيجعلك تضرب عصفورين بحجر واحد وهذا لأنك سوف تستفيد من عدد المشاهدات مما يجعلك تربع من خلال إعلاناته ، الأمر التاني هو روابط موقعك الذي تحيل له أسفل الفيديو فبدل و ضع روابط التحميل و مواقع أخرى أسفله قم بوضع جميع تلك الوصلات في التدوينة و ضع رابط التدوينة أسفل الفيديو مشيرا إلى أن جميع الروابط توجد داخل التدوينة هكذا تكون قد حصلت على زوار أخرين من ثاني محرك بحث.
هذا كل ما لدينا في موضوع اليوم، أحاول دائما إفادة إخواني العرب من كل مكان لا تبخلوا علينا بتعليقاتكم المشجعة ومشاركة الموضوع مع أصدقائكم.

 السلام عليكم ورحمة الله تعالى وبركاته
دائما ما يسعى المدونون إلى أن تظهر مواقعهم و مدوناتهم في ابهى حلة سواء في التصميم أو تناسق المحتوى و اليوم في ورشة مدون سوف نرى أسلوب من أسالب تطوير المدونات و جعلها تبدو جدابة و متناسقة للقارئ أو الزائر الذي يتصفحها . اليوم سوف نرى دور جمالية الخط . فخطوط قوالب بلوجر تلعب دور مهم في جمالية المواضيع و خصوصا لدى محرري المقالات . المهم سوف ننتقل إلى شرح كيفية تغير الخطوط في قوالب بلوجر أو إضافتها في حالة التصميم.
الأن طريقة التركيب
1- من  لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الوسم التالي <head> ثم أضف بعده الكود الذي يعجبك (كل نمودج يوجد الكود الخاص به تحته)

  <link href='https://dl.dropboxusercontent.com/s/7xs45001z6znqg6/GESSTwoLight.css' rel='stylesheet' type='text/css'/>

 <link href='https://dl.dropboxusercontent.com/s/9sfmn9gnslt17ga/warch-mo-Droid%20Arabic%20Kufi.css' rel='stylesheet' type='text/css'/>

 <link href='https://dl.dropboxusercontent.com/s/vqs4knrp9dtoove/warch-mo-ge_dinar.css' rel='stylesheet' type='text/css'/>