السلام عليكم و رحمة الله و بركاته
نعلم أن كل المواقع و المدونات إلا و نجد لها متابعين ومهتمين في المواقع الإجتماعية،هذا ما جعلني أطرح هذه التدوينة التي أوضح فيها نوع أخر من أزرار عرض المواقع الشبكات الإجتماعية ، وما يميز هذه اليوم هي تنسيقها المحكم وجماليتها في أداء الوظيفة المنشودة،
أزرار متحركة (منزلقة)مصممة بتقنية 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'/>