الجمعة، 13 نوفمبر 2015
السلام عليكم ورحمة الله تعالى و بركاته.
أحيانا أثناء تصفحنا للمواضيع في المدونات و المواقع نشعر بالتعب في أعيننا و نحن نحاول قراءة بعض النصوص الطويلة ، و كأن الكاتب أو المدون أفرط في الكتابة، و في هذه الحالة سرعان ما ننفر من الموضوع خصوصا عند غياب التنسيق و خلو الموضوع من الصور ، و درس اليوم هو كيفية إخفاء أجزاء الموضوع خلف تبويبات وذلك مستعينين بتقنية 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
أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن طرح المواضيع و عدم الإجابة عن تساؤلاتكم و إستفسارتكم ، لظروف خاصة حالة دون ذلك ، أحبابي كما و عاودتكم دائما بالجديد و المفيد في كل ما يتعلق بالتدوين و تطوير البلوجر، درس اليوم عبارة عن إضافة أو سكريبت يمكنك من إظهار مواضيع مدونتك حسب التسميات أو التصنيفات، سكريبت يعتمد على تقنية 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)
مميزة
-
السلام عليكم ورحمة الله تعالى وبركاته أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن ط... -
نعلم جيدا أن المواقع الإجتماعية هي من أكبر مصادر الزوار ولهذا سنتعرف اليوم على كيفية إضافة أزرار المشاركة الإجتماعية منها الفيس بوك و تو... -
السلام عليكم و رحمة الله وبركاته . هل تريد كسب مهتمين ومتابعين ؟! هل تريد نشر مواضيعك بأكبر نسبة ممكنة في مواقع التواصل الإجتماعية، اليو... -
السلام عليكم ورحمة الله وبركاته في هذه التدوينة أحبابي في الله إخترت أن أضع بين أيديكم قالب بلوجر إحترافي بكل ما تحمل الكلمة من معنى ،... -
السلام عليكم ورحمة الله وبركاته متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، الم... -
السلام عليكم ورحمة الله وبركاته. يعتبر إنشاء صفحة الفهرس من بين الأداوت التي تسهل على الزوار التنقل بين مواضيع المدونة ، خصوصا الاصناف ... -
السلام عليكم و رحمة الله و بركاته, حقوق القوالب هو موضوع تدوينتنا اليوم أحبابي في الله , إن كنت من مصممين القوالب أو تقوم بتعريبها و عان... -
السلام عليكم ورحمة الله وبركاته رمضان كريم تقبل الله منا و إياكم ,,, اليوم أحبابي في الله أتيتكم بقالب بلوجر إحترافي وجميل جدا أتمنى أن ... -
بعد أن رأينا في التدوينة السابقة أهم المناطق التي يجب أن نضع فيها الأعلانات للرفع من معدل النقرات،شاهد التدوينة من ((هنا)) سوف نشر... -
السلام عليكم ورحمة الله وبركاته، الكثير من المدونين على البلوجر يفضلون أن تتوفر مدونتهم على السلايدر شو، هذا لأن السلايدر شو يزيد من جما...
أهم المواضيع
-
السلام عليكم ورحمة الله تعالى وبركاته أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن ط...
-
نعلم جيدا أن المواقع الإجتماعية هي من أكبر مصادر الزوار ولهذا سنتعرف اليوم على كيفية إضافة أزرار المشاركة الإجتماعية منها الفيس بوك و تو...
-
السلام عليكم و رحمة الله وبركاته . هل تريد كسب مهتمين ومتابعين ؟! هل تريد نشر مواضيعك بأكبر نسبة ممكنة في مواقع التواصل الإجتماعية، اليو...
-
السلام عليكم ورحمة الله وبركاته في هذه التدوينة أحبابي في الله إخترت أن أضع بين أيديكم قالب بلوجر إحترافي بكل ما تحمل الكلمة من معنى ،...
-
السلام عليكم ورحمة الله وبركاته متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، الم...
-
السلام عليكم ورحمة الله وبركاته. يعتبر إنشاء صفحة الفهرس من بين الأداوت التي تسهل على الزوار التنقل بين مواضيع المدونة ، خصوصا الاصناف ...
-
السلام عليكم و رحمة الله و بركاته, حقوق القوالب هو موضوع تدوينتنا اليوم أحبابي في الله , إن كنت من مصممين القوالب أو تقوم بتعريبها و عان...
-
السلام عليكم ورحمة الله وبركاته رمضان كريم تقبل الله منا و إياكم ,,, اليوم أحبابي في الله أتيتكم بقالب بلوجر إحترافي وجميل جدا أتمنى أن ...
-
بعد أن رأينا في التدوينة السابقة أهم المناطق التي يجب أن نضع فيها الأعلانات للرفع من معدل النقرات،شاهد التدوينة من ((هنا)) سوف نشر...
-
السلام عليكم ورحمة الله وبركاته، الكثير من المدونين على البلوجر يفضلون أن تتوفر مدونتهم على السلايدر شو، هذا لأن السلايدر شو يزيد من جما...