الأحد، 27 ديسمبر 2015

حصريا الطريقة الصحيحة لإضافة سكريبت إقرأ المزيد لمدونات بلوجر

بقلم: BR MED يوم الأحد، 27 ديسمبر 2015 القسم : | 0 التعليقات
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في الصفحة الرئيسية و بحيث يتم تلخيص المواضيع في عدة كلمات أو جمل يتم التحكم فيها من خلال عدد الأحرف التي تريد الظهور، بالأضافة إلى التحكم في إرتفاع و عرض الصور المصغرة للموضيع img thumbnail ، هذا كله يجعل مظهر المدونة متناسق مع عرض عدد أكبر من التدوينات في مساحة أقل ، ليكون سهل على الزائر تصفح المواضيع بكل سهولة.
و لكن المشكلة هي أن أغلب هذه السكريبتات بها أخطاء ، مما يجعل هذه الإضافة تطبق حتى على الصفحات الثابتة بالمدونة ، أما اليوم فقد أصلحت المشكل و قمت بجلب هذا السكريبت السهل في التركيب كي لا أطيل عليكم ننتقل للشرح.

1- نذهب للوحة التحكم بلوجرثم القالب ثم تحرير html . (خد نسخة إحتياطية )
2- ننقر و سط الأكواد ثم ننقر على الزرين ctrl و f دفعة واحدة ، ينبثق مربع البحث و نبحث عن الكود التالي: <data:post.body/> 
ملاحظة : قد تجد أكثر من واحد الأخير هو المقصود.
3- نستبدل الكود الذي وجدناه بهذا الكود :
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>إقرأ المزيد »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
4- الآن نقوم بالبحث عن الوسم    </head> و نقوم بلصق هذا الكود قبله مباشرة:
<script type='text/javascript'>posts_no_thumb_sum = 490;posts_thumb_sum = 400;img_thumb_height = 160;img_thumb_width = 180;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){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);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID, pURL, pTITLE){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';summ = posts_thumb_sum;}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>.post-footer {display: none;}.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; }</style></b:if></b:if>

تعديلات على الكود:
بالنسبة لهذا الكود فهو يجعل الصورة في اليمين إذا أردت العكس قم بتغيرright ب left   و قم بتغيرleft ب right .
يمكنك أيضا تغير هذه التفاصيل:
490 عدد أحرف النص في حالة عدم وجود صورة
400 عدد أحرف النص مع وجود الصورة
160 إرتفاع الصورة
180 عرض الصورة
ثم قم بحفظ القالب
إنتهى الدرس أي إستفسار لاتتردد في ترك تعليق ، دمتم بود .
إقرأ البقية

الجمعة، 18 ديسمبر 2015

حل مشكلة نزول رسالة تعليقات بلوجر إلى أسفل صندوق التعليقات

بقلم: BR MED يوم الجمعة، 18 ديسمبر 2015 القسم : 0 التعليقات

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

و لحل هذا المشكل ما عليك سوى الذهاب للوحة تحكم بلوجر ثم القالب نأخد نسخة إحتياطية أولا ، بعدها ننقر تحرير html ثم ننقر وسط الأكواد، نضغط على الزرين ctrl و f في نفس الوقت سينبثق مستطيل البحث ثم نبحث عن هذا الكود:
<b:includable id='threaded-comment-form' var='post'>
أسفله بقليل سوف تجد هذا الوسم : <b:else/>  ضع بجواره الكود التالي :
<div id='threaded-comment-form'>
بعده بسطور قليلة سوف تجد الوسم </b:if>  ضع قبله هذا الوسم </div>  
هذه صورة توضح الطريقة

في حالة لاحظت وجود أن هذه الأكواد أضيفت من قبل ، تجاوز هذه المرحلة و إنتقل إلى المرحلة الثانية:

إبحث عن هذا الكود:
document.getElementById(domId).insertBefore(replybox, null);
ثم إستبدله بهذا الكود:
document.getElementById (domId). insertBefore (document.getElementById ('threaded-comment-form'), null);
ثم قم بحفظ القالب و عاين التعليقات لترى النتيجة، إلى هنا أكون قد أتممت لك الموضوع أي سؤال أو إستفسار لا تتردد في ترك تعليق ،
دمتم بود في أمان الله.


إقرأ البقية

الجمعة، 13 نوفمبر 2015

حصريا: تقسيم المواضيع الطويلة في المدونة على شكل تبويبات

بقلم: BR MED يوم الجمعة، 13 نوفمبر 2015 القسم : 0 التعليقات

السلام عليكم ورحمة الله تعالى و بركاته.
أحيانا أثناء تصفحنا للمواضيع في المدونات و المواقع نشعر بالتعب في أعيننا و نحن نحاول قراءة بعض النصوص الطويلة ، و كأن الكاتب أو المدون أفرط في الكتابة، و في هذه الحالة سرعان ما ننفر من الموضوع خصوصا عند غياب التنسيق و خلو الموضوع من الصور ، و درس اليوم هو كيفية إخفاء أجزاء الموضوع خلف تبويبات وذلك مستعينين بتقنية ajax ،بحيث تضهر أزرار تحت الموضوع كلما نقرت على زر تظهر لك تتمة الموضوع و ذلك دون أن يحدث أدنى تغير في رابط المشاركة، غالبا ما تعتمد هذه الإضافة في منصات أخرى متطورة و لكن اليوم قمت بجلبها لكم لتلائم منصة البلوغر فكلما كان النص صغيرا و منسقا كلما تعطش الزائر لقراءته كي لا أطيل عليكم ننتقل للمعاينة ثم لشرح كيفية العمل,
1- نذهب للوحة التحكم بلوجر ثم القالب ثم نضغط تحرير html .
2- ننقر و سط الأكواد ثم نضغط على الزرين ctrl وf في نفس الوقت ثم نبحث عن هذا الوسم <head>
3- ثم ضع هذا الكود تحته مباشرة:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
الأن ننتقل لشرح طريقة كتابة التدوينات
1- إنشاء مشاركة جديدة
2- إنقر على الزر html الموجود في أقصى يمين شريط الأدوات
3- قم بمسح كل ما في الصفحة ثم ألصق فيها الكود التالي :
<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
أضف المحتوى هنا
</div>
<div class="content_2" style="display: none;">
أضف المحتوى هنا
</div>
<div class="content_3" style="display: none;">
أضف المحتوى هنا
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
تعديلات :
قم بوضع المحتوى مكان عبارة "أضف المحتوى هنا"  ستلاحظ أنها مكررة 3 مرات هذا يعني 3 تبويبات.
بعدها إنقر على زر تأليف ستلاحظ أن الفقرة الأولى هي التي تظهر فقط ، لا عليك قم بنشر التدوينة و ستلاحظ النتيجة
أي إستفسار لا تتردد في ترك تعليق.
إقرأ البقية

السبت، 7 نوفمبر 2015

حصريا: أفضل سكريبت لعرض مواضيع بلوجر حسب التسميات

بقلم: BR MED يوم السبت، 7 نوفمبر 2015 القسم : 1 التعليقات
السلام عليكم ورحمة الله تعالى وبركاته
أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن طرح المواضيع و عدم الإجابة عن تساؤلاتكم و إستفسارتكم ، لظروف خاصة حالة دون ذلك ، أحبابي كما و عاودتكم دائما بالجديد و المفيد في كل ما يتعلق بالتدوين و تطوير البلوجر، درس اليوم عبارة عن إضافة أو سكريبت يمكنك من إظهار مواضيع مدونتك حسب التسميات أو التصنيفات، سكريبت يعتمد على تقنية json و هو طريقة إحترافية لعرض التدوينات أو المشاركات في مدونتك ، بالإضافة إلى أنه يضفي جمالية على واجهة المداونة ، ومع إمكانية تغير الألوان والأيقونات. كي لا إطيل عليكم نمر للمعاينة ثم شرح طريقة التركيب

 الآن شرح طريقة التركيب.
1- إذهب للوحة التحكم بلوجر ثم القالب (خذ نسخة إحتياطية للقالب)
2 - إنقر تحرير html  ثم إنقر وسط الأكواد 
3- إضغط على الزرين ctrl و f في نفس الوقت ،سيظهر مربع البحث ثم إبحث عن الوسم التالي: ]]></b:skin> 
وضع قبله هذا الكود :
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{
display: table;
    background: #FFFFFF;
    margin: 5px 0px 0px 0px;
    width: 650px;
    float: right;
    padding: 0px 0px 20px 0px;
}
.list-entries ul,.list-entries li{margin:0;list-style:none;padding: 0;}
#feed-list-container ul li{
    background: #FFFFFF;
    line-height: normal;
    border: 1px solid #E2E2E2;
    text-align: right;
    width: 315px;
    margin: 5px 5px 0px 0px;
    float: right;
}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{}
.list-entries .main-title{padding:0;overflow:hidden;background-size: 22px 22px !important;border-radius: 5px;}
.list-entries .main-title h4{
    position: relative;
    display: block;
    font-weight: normal;
    padding: 6px 40px;
    color: #fff;
    margin: 0!important;
    font-size: 25px;
    height: 30px;
    line-height: 28px;
}
.list-entries .title a{
font-size: 12px;
    text-decoration: none;
    color: #656565;
}
.list-entries .title a:hover{color:#4f93c5}
.summary span {}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 0 0 1em;padding:0;float:right}
.list-entries .summary{
    overflow: hidden;
    color: #BBBABA;
    line-height: 17px;
    padding-top: 2px;
    font-size: 10px;
}
.list-entries .more-link{
display:none;
    width: 316px;
    float: left;
    margin: -304px 0px 0px -13px;
    text-align: center;
}
.list-entries .more-link a{
display:none;
    line-height: 15px;
    height: 15px;
    background: #FFFEFE;
    padding: 8px 20px;
    position: relative;
    color: #656565;
    font-size: 15px;
    width: 120px;
    margin: 6px 20px;
    border-radius: 5px;
    float: left;
}
.list-entries .more-link a:hover{background-color: #5A5A5A;color: #fff;}
.title{
line-height: 16px;
padding: 4px 0px 0px 0px;
}

4- ثم قم بالبحث عن هذا الوسم: </body> ثم ضع قبله هذه الأكواد :
<script type='text/javascript'>
var multiFeed = {
    feedsUri: [
        {
            name: "بلوجر",
            url: "https://warch-mo.blogspot.com/",
            tag: "بلوجر",
   background:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6IGn590E5OaGODhewURibkA-lqQxAQsvCm0dH24bnQgG1-ujN76bx-lwJ9A1u-i1_9rwD6KKFiqKntaxl-mEsBhVrwpv1WhRKeS5iCkR-4BzZCDA0gPN0s9CWRyKFE_wCo-mzNxm588/s1600/Twitter_Logo_Silhouette_16+%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
        {
            name: "حلول",
            url: "https://warch-mo.blogspot.com/",
            tag: "حلول",
      background:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6IGn590E5OaGODhewURibkA-lqQxAQsvCm0dH24bnQgG1-ujN76bx-lwJ9A1u-i1_9rwD6KKFiqKntaxl-mEsBhVrwpv1WhRKeS5iCkR-4BzZCDA0gPN0s9CWRyKFE_wCo-mzNxm588/s1600/Twitter_Logo_Silhouette_16+%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
  {
            name: "حلول",
            url: "https://warch-mo.blogspot.com/",
            tag: "حلول",
   background:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6IGn590E5OaGODhewURibkA-lqQxAQsvCm0dH24bnQgG1-ujN76bx-lwJ9A1u-i1_9rwD6KKFiqKntaxl-mEsBhVrwpv1WhRKeS5iCkR-4BzZCDA0gPN0s9CWRyKFE_wCo-mzNxm588/s1600/Twitter_Logo_Silhouette_16+%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
    ],
    numPost: 6,
    showThumbnail: true,
    showDate: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 90,
 thumbSizeh: 80,
    containerId: "feed-list-container",
    readMore: {
        text: "مزيد من المواضيع",
        endParam: "?max-results=20"
    }
};
</script>
<script src='https://dl.dropboxusercontent.com/s/5d974tanv7zb8el/feed6%20-%20Copy.js' type='text/javascript'/>
تعديلات :
غير الروابط الحمراء برابط مدونتك.
الروابط الخضراء خاصة بالايقونات يمكنك أيضا تغيرها بأيقونات أخرى من إختيارك
الكلمات الزرقاء هي عناوين الأقسام التي تظهر في الإضافة
الكلمات الزهرية هي التسميات إحذر أن تخطئ في كتابتها يجب أن تكون كما كتبتها شاهد أداة التسميات.

في المرحلة الأخيرة تختار أي مكان يناسبك لتضع فيه الإضافة إما أعلى التدوينات أو أسفلها ،شاهد الصورة إنقر عليها لتكبيرها

بعد أن تختار المكان المناسب . ضع فيه هذا الكود:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-container'/>
</b:if>
ثم قم بحفظ القالب و عاين الإضافة 
هذا كل ماجاء في موضوع اليوم ،أثمنى أن يعجبكم 
أي أستفسار لا تتردد في ترك تعليق ، في أمان الله،

إقرأ البقية

الاثنين، 31 أغسطس 2015

3 طرق لوضع إعلانات أدسنس أو أي شركة وسط الموضوع بطريقة سهلة

بقلم: BR MED يوم الاثنين، 31 أغسطس 2015 القسم : 0 التعليقات
السلام عليكم ورحمة الله تعالى و بركاته
عدنا إليكم من جديد متابعينا الأوفياء ، نعتذر عن طول هذا الغياب الخارج عن إرادتنا ، المهم أحبابي في الله درس اليوم هو عبارة عن كيفية وضع الإعلانات في منتصف المواضيع ، و هذا بغية تحصيل الكثير من الأرباح ، نعلم جيدا أن كلما كانت الإعلانات منسقة كلما زادت فرص النقر عليها من قبل الزوار و في موضوع سابق ناقشنا أهم مناطق لوضع الإعلانات في مدونة بلوجر إنقر هنا للمشاهدة،
و كي لا أطيل عليكم نشرح طرق جعل الاعلانات في وسط المواضيع هناك عدة طرق لعمل ذلك و لكن في منصة بلوجر قليلة أو منعدمة حتى لو كانت لا تأتي بنتائج جيدة .

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

الطريقة الثانية
الذهاب للوحة تحكم بلوجر ثم القالب ثم نضغظ تحرير html.
ننقر وسط الأكواد و نضغظ على الزرين ctrl و f دفعة واحدة
نبحث عن هذا الكود :
<data:post.body>
ستجد أكثر من واحد الثالت هو المقصود
و نستبدله بهذا الكود:
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<div class='separator' style='clear: both; text-align: center; '>
ضع كود الإعلان هنا</div>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
إستبدل ما باللون الأحمر بشفرة الإعلان بعد تحويلها لتلائم أكواد html.
ثم قم بحفظ القالب و عاين أي موضوع و ستجد الإعلانات في منتصف الموضوع.
في حالة لم تعمل معك الطريقة فيمكنك تطبيق الطريقة الثالثة
الطريقة الثالثة
هي مثلها مثل الطريقة الثانية كل ما عليك هو تغير الكود الذي ألصقته في الطريقة الثانية بهذا الكود :
<div id='jobmiddlenew'>
<data:post.body/>
          </div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#addcodemiddle{display: none;}
</style>
<div id='addcodemiddle'>

ضع كود الإعلان هنا </div>
<script type='text/javascript'>
var str1=document.getElementById(&quot;jobmiddlenew&quot;).innerHTML;
var str2=str1.length;
var str3=str2/2;
var substr = str1.substring(str3, str2);
var n = substr.search(&quot;&lt;br&gt;&quot;);
if(n&lt;0)
{
n = substr.indexOf('.');
if(n&lt;0)
{
n=0;
}
var firsthalf = str1.substring(0, str3+n+1);
var secondhalf = str1.substring(str3+n+1, str2);
}
else
{
var firsthalf = str1.substring(0, str3+n+4);
var secondhalf = str1.substring(str3+n+4, str2);
}
var addcode=&quot;<center>&quot;+document.getElementById(&quot;addcodemiddle&quot;).innerHTML+&quot;</center><br/>&quot;;
var newbody=firsthalf+addcode+secondhalf;
var strnew=document.getElementsByClassName(&quot;post-body entry-content&quot;);
strnew[0].innerHTML=newbody;
document.getElementById(&quot;addcodemiddle&quot;).innerHTML=&quot;&quot;;  
</script>
  </b:if>
ولا تنسى تغير ما بالأحمر بكود الإعلان بعد تحويله,
أتمنى أن تستفيدو من الموضوع أي إستفسار أنا في الخدمة
إقرأ البقية

الأحد، 10 مايو 2015

إضافة صندوق إعجابات الفيسبوك بعد التحديث الجديد

بقلم: BR MED يوم الأحد، 10 مايو 2015 القسم : 1 التعليقات

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

طريقة التركيب:
1- تذهب إلى لوحة التحكم بلوجر ثم التخطيط
2- تنقر إضافة أداة ثم تختار أداة html javascript
3- تلصق الأكواد التالية داخل الإطار ثم تقوم بالحفظ.
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ar_AR/sdk.js#xfbml=1&version=v2.3&appId=567405696684175";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/warch.mo"
  data-width="325" data-hide-cover="false" data-show-facepile="true"
  data-show-posts="false"></div>
بعض التعديلات على الكود:
غير الرابط الأحمر برابط صفحتك على الفيس بوك.
325 هو عرض الإضافة و يمكنك تعديله حسب ما يناسبك.
false و تعني منع ظهور المنشورات المتواجدة بصفحتك ، إن أردت أن تظهر غيرها بكلمة true.
true وتعني قبول ظهور أيقونات معجبي  صفحتك على الإضافة، و كذلك إذا اردت عدم إظهارهم غيرها بكلمة false.
false و تعني منع إظهار غلاف صفحتك ، إن أردت أن لا يظهر غيرها بكلمة true.
موضوعنا اليوم أشرف على الأنتهاء، أي إستفسار أنا في الخدمة فقط إترك تعليق، دمتم بود في أمان الله
إقرأ البقية

الثلاثاء، 28 أبريل 2015

شرح لوحة الكتابة مع كتابة أول تدوينة على المدونة

بقلم: BR MED يوم الثلاثاء، 28 أبريل 2015 القسم : 0 التعليقات
السلام عليكم و رحمة الله تعالى و بركاته
بعدما رأينا في دروسنا المتسلسلة ، عن طريقة إنشاء مدونة و أهم التعديلات التي تهم مظهر المدونة وصولا إلى هذه المرحلة و التي تعتبر بذاتها نقطة الإنطلاق في التدوين ، خلال هذه التدوينة سوف نلقي نظرة على أهم الأدوات و الخاصيات التي تحتويها لوحة الكتابة و في نفس الوقت سوف نعمل على كتابة موضوع من أجي التجربة ,,, و لقد قمت بتصويرهذا الفيديو من أجل تسهيل إستيعاب الشرح ، و إن وجدتم أي مشكل ، إتركوا إستفساركم في تعليق ، و سوف أكون سعيد بالإجابة عليه.
فرجة ممتعة ^_^


أتمنى أن أكون قد توفقت في الشرح، إلى موضوع جديد إن شاء الله ، دمتم في أمان الله.
إقرأ البقية

الجمعة، 24 أبريل 2015

كيفية إنشاء الصفحات الثابتة في المدونة بلوجر للمبتدئين [نموذج صفحة سياسة الخصوصية]

بقلم: BR MED يوم الجمعة، 24 أبريل 2015 القسم : 0 التعليقات
السلام عليكم و رحمة الله تعالى و بركاته.
 من الإستحالة أن تجد موقع ويب أو مدونة لا تحتوي على صفحات تابثة أو ما يسمى بـ "static-pages" ، فالدور الذي تقوم به هذه الصفحات مهم جدا و لا يمكن لأي موقع إحترافي الإستغناء عنها، و من أهم الأغراض التي قد نحتاجها لها مثلا:
1- صفحة سياسة الخصوصية "Privacy-Policy" و من خلال هذه الصفحة تبين لزوار و متصفحي و مدونتك مدى حفاظك على بيانتهم الشخصية والأطراف التي تعتمدها في موقعك مثل شركات الإعلانات و غيرها.
2- صفحة إتصل بنا "contact-us" و التي من خلالها يمكن للزوار التواصل معك عبر البريد الإلكتروني كلما تطلب الأمر ذلك.
3- صفحة الفهرس أو خريطة الموقع "index" ou "site map" وفي هذه الأخيرة يمكن للزائر أن يجد قائمة الأقسام و المواضيع التي بالمدونة و يسهل عليه معرفة نوع المحتوى الذي يوفره موقعك أو مدونتك.

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

أما درسنا اليوم سنلقي نظرة سريعة عن كيفية إنشاء هذه الصفحات ، متخذين من صفحة سياسة الخصوصية مثال للشرح. شاهد الفيديو:

أتمنى أن تكونوا قد إستفدتم من الشرح ، أي إستفسار فقط إترك تعليق
إقرأ البقية

الخميس، 23 أبريل 2015

كيفية وضع أو تغير شعار "logo" مدونة بلوجر

بقلم: BR MED يوم الخميس، 23 أبريل 2015 القسم : 3 التعليقات
السلام عليكم  و رحمة الله تعالى و بركاته
متابعي ورشة مدون الأوفياء ، نستأنف دروسنا في هذه الدورة التي نشرح فيها كل ما يلزم المبتدئين لإكمال تدشين مدونتهم و السير على خطى المدونين الكبار على مستوى العالم الإفتراضي، و في شرح هذا اليوم سوف نتطرق واحد من أهم خصائص المدونة أو الموقع و الذي هو الشعار أو ما يسمى اللوجو logo ، فهذا الإخير يجعل مدونتك مميزة عن أي مدونة أو موقع ، و الزوار أو ما تقع عينه عليه أثناء الدخول إلى مدونتك ، و بالتالي يجب عليك أن تجعل لها شعار ملائم و متناسق بشكل جيد، لدى في هذا الفيديو قمت بشرح طريقتين لتغير الشعار أو ضع شعار جديد لأول مرة في القالب. أترككم مع الشرح وأي إستفسار إتركه في تعليق.
فرجة ممتعة ^_^

الرابط المستعمل لرفع صورة الشعار:
إقرأ البقية

الأربعاء، 22 أبريل 2015

شرح مكونات و خصائص منصة بلوجر للمبتدئين

بقلم: BR MED يوم الأربعاء، 22 أبريل 2015 القسم : 0 التعليقات
السلام عليكم ورحمة الله وبركاته
متابعي و رشة مدون الأوفياء، أتمنى أن تكون في أتم الصحة و العافية ، بعدما رأينا طريقة إنشاء مدونة على منصة بلوجر و كيفية الحصول على قالب بلوجر لنرفعه عليها شاهد الدرس من هنا.
قبل أن أبدأ في شرح طريقة التعديل على القالب و غيرها من الأمور التي تنتظرنا لاحقا من أجل إكمال نشأة المدونة ، أحببت أن أقدم لكم وصف و شرح نظري سريع على جميع أدوات المنصة و التي من خلالها سنتمكن من عمل العديد من الأمور. لهذا أحبابي في الله قمت بتصوير هذا الفيديو أتمنى لكم فرجة  ممتعة


أتمنى أن تستفيدوا من الشرح أي إستفسار أنا في الخدمة، فقط إترك تعليق و سأكون سعيدا بمساعدة الجميع دمتم بود في أمان الله،
إقرأ البقية

الجمعة، 17 أبريل 2015

كيفية إنشاء أول مدونة لنا على بلوجر مع رفع قالب عليها

بقلم: BR MED يوم الجمعة، 17 أبريل 2015 القسم : 0 التعليقات
السلام عليكم
مرحبا بك على ورشة مدون ، التي توفر لك كل ما تحتاجه لتكون مدونا ناجحا بإمتياز نستأنف دروسنا في ما يخص التدوين ، درسنا اليوم هو طريقة إنشاء أو مدونة على منصة Blogger ، و رفع قالب خاص بنا عليها ، سبق و ذكرنا أن من الضروري أن تتوفر على حساب جيمال ، إن كنت لا تتوفر عليه فأنصحك بمشاهدة هذا الدرس السابق من هنا
شاهد طريقة إنشاء مدونة بلوجر جديد بالصورة و الصورة ، أتمنى لك فرجة ممتعة  ^_^


الرابط المستعمل في الشرح: Blogger
تحميل القالب المستعمل في الشرح: من هنا
أي إستفسار إترك تعليق و سأكون سعيدا بالإجابة عليه، دمتم بود إلى دلرس قادم إنشاء الله. 
إقرأ البقية

السبت، 4 أبريل 2015

كيفية إنشاء حساب جيميل gmail للمبتدئين

بقلم: BR MED يوم السبت، 4 أبريل 2015 القسم : 0 التعليقات
السلام عليكم و رحمة الله و بركاته.
بعد أن قمنا بدراسة أهمية التدوين و أنسب منصة لمزاولة هذا الأخير، مع أهم الأسس التي يجب مراعاتها للنجاح في المجال الذي ندون ضمنه، يمكنك الإطلاع على جميع المواضيع من خلال قسم التدوين ، و في هذه المشاركة البسيطة سوف نرى أو خطوة قبل إنشاء المدونة و التي هي إنشاء حساب جيميل الذي يوفر لنا العديد من الخدمات و التي من ضمنها البلوجر، كل ما عليك هو التوجه إلى هذا الرابط : gmail  ثم ملء الإسثمارة بكل سهولة، يمكنك شاهد الفيديو لتعرف أكثر.

دمتم بود في أمان الله.
إقرأ البقية

السبت، 14 فبراير 2015

إضافة صندوق إضافات مزدوج في السيدبار بالمدونة

بقلم: BR MED يوم السبت، 14 فبراير 2015 القسم : 2 التعليقات
السلام عليكم ور حمة الله و بركاته.
مرحبا بكم مجددا، متابعين الكرام كما عودناكم دائما بالجديد والحصري والمفيد على ورشة مدون، التي تهتم بكل ما يخص المدونين على منصة بلوجر، و درس اليوم هو كيفية إضافة آداة مزدوجة في السيدبار و هي على شكل قائمة مقسمة لتحتوي ثلاث نوافذ، في كل نافدة يمكنك وضع إضافة معينة ، وهذه الإضافة جميلة جدا وإحترافية و تهم بالخصوص أصحاب المدونات التي تشكو من قلة المساحات في واجهة المواقع، بحيث عوض وضع ثلات إضافات متفرقة التي ستأخد مساحة كبيرة من المدونة ، تقوم بوضع هذه الأخيرة التي تمكنك من الإنتقال بين الإضافات بسلاسة و خفة.
يمكنك معاينتها في مدونتنا السيدبار على يسارك

الآن طريقة تركيب الإضافة.
  1. نذهب للوحة التحكم بلوجر ثم القالب نقوم بأخد نسخة إحتياطية للقالب تحسبا لأي خطأ.
  2. بعدها نقوم بتحرير HTML ثم ننقر وسط الأكواد و نبحث بالإستعانة بالزرين عن (CTRL+F) عن الوسم ]]></b:skin>
  3. بعد إيجاده ضع الكود التالي فوقه مباشرة.
 /* Tab Widget By warch-mo */
.tabbedviewsection {
background: #f8f8f8;
text-transform: uppercase;
float: left;
width: 99%;
}
.tabbed-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabbed-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: right;
border-left: 2px solid #fff;
}
.tabbed-widget li a {
color: #000;
display: block;
padding-right: 14px;
padding-left: 14px;
font-size: 13px;
padding-top: 14px;
padding-bottom: 14px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabbed-widget-content {
}
.tabbedviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
text-align: center;
}
.about_tab {
text-align: center;
}
li.laster {
border: 0px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabbed-widget li a {
padding-left: 20px;
padding-right: 20px;
}
/* .tabbed-widget {
height: 51px;
}*/
.tw-authors {
width: 570px;
}
.tabbedviewsection h2 {
display: none;
}
.tabbed-widget li a.tabbed-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #24AAE9;
font-size: 14px;
text-transform: capitalize;
}
.tabbed-widget li a {
background: #24AAE9;
}
بعد ذلك نقوم بالبحث عن أحد الأكواد التالية:
<div id='sidebar-wrapper'>
أو
<div class='sidebar-wrapper'>
أو
<div class='sidebar'>
أو
<div id='sidebar'>
 
ملاحظة : قد لا تجد أي أحد هذه الأكواد لأن تصاميم القوالب تختلف و لكن يجب عليك البحث عن معرف السيدبار بقالبك، المهم إن واجهت هذا المشكل إترك تعليق به رابط مدونتك لأساعدك.
 
بعد أن تجد المعرف الخاص بالسيدبار لديك قم بوضع هذا الكود مباشرة بعده.
<!-- Tab Widget [start]  by warch-mo--><div class='tabbedviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabbed-widget-current&quot;).show(); $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabbed-widget-current a&quot;); $(this).addClass(&quot;tabbed-widget-current&quot;); $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); var activeTab = $(this).attr(&quot;href&quot;); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabbed-widget tabbed-widget-widget-themater_tabs-1432447472-id'> <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>مواضيع شائعة</a></li> <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>تعليقات الزوار</a></li> <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>الأرشيف</a></li></ul><!-- Tab Widget 1 --><div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div> <!-- Tab Widget 2 --> <div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div>
<!-- Tab Widget 3 --><div class='-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div><!-- Tab Widget [endt] -->
يمكنك تغير الكلمات باللون الأحمر بما يناسبك
 أما طريقة إستخدام الإضافة فهي سهلة عند الذهاب لصفحة التخطيط سوف تجدها كما في الصورة
كل خانة يمكنك أن تضع بها أداة مهما كان نوعها، المهم أتمنى أن يعجبكم الدرس و أن تستفيدوا منه أي إستفسار أنا في الخدمة،
دمتم بود في أمان الله.
إقرأ البقية

الأحد، 1 فبراير 2015

إضافة أزرار التحميل و المعاينة للبلوجر

بقلم: BR MED يوم الأحد، 1 فبراير 2015 القسم : 2 التعليقات
السلام عليكم ورحمة الله وبركاته
متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، المهم كما عودتكم دائما بجديد المواضيع ، لقد ذكرت سابقا في إحدى التدوينات كيفية إنشاء أزرار التحميل والمعاينة و هذا الموضوع هو في نفس السياق إلا أن هذه الأزرار هذه المرة بها أيقونات تدل على غرضها مع أنها أكثر إحترافية و ستزيد من مدى جمالية مدونتك، و لتركيبها ما عليك إلا متابعة الشرح.
  1. أولا نذهب للوحة التحكم بلوجر ثم القالب.
  2. نقوم بأخذ نسخة إحطياطية دائما لتفادي أي غلط  بالرغم من سهولة الشرح
  3. بعد ذلك نقوم بالضغط على تحرير html و ننقر وسط الأكواد.
  4. نبحث عن هذا الوسم ]]></b:skin> مستعينا بالزراين(ctrl+f).
  5. ثم ضع فوقه هذا الكود مباشرة و قم بحفظ القالب.
#warch {
    margin: 20px auto;
    text-align: center;
}

#warch br {
    display: none;
}

.mo-slide, .mo-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.mo-slide2 {
    border: 2px solid #efa666;
}

.mo-slide:hover {
    background-color: #0099cc;
}

.mo-slide2:hover {
    background-color: #efa666;
}

.mo-slide:hover span.circle, .mo-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.mo-slide2:hover span.circle2 {
    color: #efa666;
}

.mo-slide:hover span.title, .mo-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.mo-slide:hover span.title-hover, .mo-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.mo-slide span.circle, .mo-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.mo-slide2 span.circle2 {
    background-color: #efa666;
}

.mo-slide span.title,
  .mo-slide span.title-hover, .mo-slide2 span.title2,
  .mo-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.mo-slide2 span.title2,
  .mo-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
    color: #fff;
}
ثم إبحث عن هذا الوسم <head> وضع الكود التالي بعده مباشرة و قم بحفظ القالب.
<link href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css' rel='stylesheet' type='text/css'/>
الآن طريقة التعامل مع الأزرار في المواضيع.
عند قيامك بكتابة موضوع قم بالنقر على زر "خيارات" و قم بتعديلها كما تلاحظ في الصورة.

أما بالنسبة للأزرار فسوف تضع هذا الكود في المكان الذي يعجبك وذلك في واجهة html الخاصة بالمواضيع.

<div id="warch">
<a href="#" class="mo-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">إنقر هنا</span>
</a>
<a href="#" class="mo-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">إنقر هنا</span>
</a>
</div>
قم بتغير علامة # برابط المعاينة و العلامة # برابط التحميل.
ملاحظة : هذا الكود يحتوي على نموذج التحميل و المعاينة أي زرين في نفس الوقت يمكنكم إستعملهما كما تريد.
هذا كل ما في موضوع اليوم أتمنى لكم التوفيق في عملكم ، دمتم بود في أمان الله.


إقرأ البقية
الاشتراك في: الرسائل (Atom)