الأحد، 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(http://4.bp.blogspot.com/-FsauZqK6ceQ/VaFAzXwrjuI/AAAAAAAABto/Z8QAwQfz0Zg/s1600/Twitter_Logo_Silhouette_16%2B%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
        {
            name: "حلول",
            url: "https://warch-mo.blogspot.com/",
            tag: "حلول",
      background:"url(http://4.bp.blogspot.com/-FsauZqK6ceQ/VaFAzXwrjuI/AAAAAAAABto/Z8QAwQfz0Zg/s1600/Twitter_Logo_Silhouette_16%2B%25281%2529.png) no-repeat 618px 11px,#EF6B15",
        },
  {
            name: "حلول",
            url: "https://warch-mo.blogspot.com/",
            tag: "حلول",
   background:"url(http://4.bp.blogspot.com/-FsauZqK6ceQ/VaFAzXwrjuI/AAAAAAAABto/Z8QAwQfz0Zg/s1600/Twitter_Logo_Silhouette_16%2B%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 التعليقات
السلام عليكم و رحمة الله تعالى و بركاته
بعدما رأينا في دروسنا المتسلسلة ، عن طريقة إنشاء مدونة و أهم التعديلات التي تهم مظهر المدونة وصولا إلى هذه المرحلة و التي تعتبر بذاتها نقطة الإنطلاق في التدوين ، خلال هذه التدوينة سوف نلقي نظرة على أهم الأدوات و الخاصيات التي تحتويها لوحة الكتابة و في نفس الوقت سوف نعمل على كتابة موضوع من أجي التجربة ,,, و لقد قمت بتصويرهذا الفيديو من أجل تسهيل إستيعاب الشرح ، و إن وجدتم أي مشكل ، إتركوا إستفساركم في تعليق ، و سوف أكون سعيد بالإجابة عليه.
فرجة ممتعة ^_^


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