الجمعة، 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>
ثم قم بحفظ القالب و عاين الإضافة 
هذا كل ماجاء في موضوع اليوم ،أثمنى أن يعجبكم 
أي أستفسار لا تتردد في ترك تعليق ، في أمان الله،

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