إضافة المواضيع الأكثر تعليق لمدونات بلوجر

Add-topics-most-comment-Blogger
أقدم لكم اليوم إضافة حصري تقريباً وهي إضافة المواضيع الأكثر تعليق, هذه الإضافة تعمل وفق فكره جميله ومميز بحيث تجعل الزائر يتصفح المزيد من المواضيع فعندما يرى الزائر عدد التعليقات على موضوع معين سيتفاجى ومباشرتاً سيتوجه لقراءة الموضوع.
الإضافة يحتاج إليها الكثير من المدونين فهيا قبل كل شيء تتميز بعرض جميل بحيث تعمل على عرض صورة احد الموضوع الأكثر تعليق من بين مواضيع المدونة كلها, بتأكيد الموضوع الذي يحتوي على أكثر التعليقات في المدونة أكيد موضوع مميز, فعندما سيقرئه الزائر سيأخذ نضره جميله عن المدونة وربما قد يكون من متابعين المدونة.لذالك يتوجب عليك أضافتها.
ملاحظة هامه: هده السكربت يعمل على استخراج تعليقات بلوجر فقط فاذا كانت تستخدم نوع اخر من صندوق التعليقات فللأسف لن يتم احتساب تلك التعليقات وكأنها غير موجودة.

تركيب إضافة المواضيع الأكثر تعليق

تركيب الإضافة سهل جداً كل ما عليك هو التوجه إلى التخطيط ثم إنشاء أداة "شششش" في المكان الذي تريد أن تظهر فيه الإضافة وضع الكود التالي فيها
<style type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{
    margin:0;
    list-style:none;
    color:#444;
    font-family:cursive,droid arabic kufi;
    font-size:11px;
    text-align: right;
}
#most-comments ul li{
    position:relative;
    overflow:hidden;
    background:#fff;
    margin:3.5px 0;
    padding:7px 50px 7px 10px;
    white-space:nowrap;
    text-overflow:ellipsis;
    box-shadow:inset 0 0 #7343a8;
    border:1px solid #e6e6e6;
    transition:all .6s
}
#most-comments ul li:hover{
    box-shadow:inset 310px 0 #7444aa
}
#most-comments ul li a{
    color:#444;
    font-weight:700;
    text-decoration:none;
    transition:all .3s
}
#most-comments ul li a:hover,#most-comments ul li:hover a{
    color:#fff
}
.count-most{
    position:absolute;
    right:0;
    top:0;
    width:40px;
    height:100%;
    margin:0;
    padding:7px 0;
    background-color:#9f5de8;
    color:#fff!important;
    text-align:center;
    transition:all .3s
}
#most-comments ul li:hover .count-most{
    background-color:#7444aa
}
#most-comments ul div:first-of-type .mnqush-imgs{
    display: block;
order: 1px solid #e6e6e6;
    margin: 0 0 -4px 0;
}
#most-comments ul div:first-of-type a:hover{opacity: 0.8;}
#most-comments ul div:first-of-type .mnqush-imgs a{
    display: grid;
}
#most-comments ul div:first-of-type li{
    box-shadow: inset 310px 0 #59afec;
    color: #fff;
    margin: 0px 00px 0;
    border: none;
}
#most-comments ul div:first-of-type .count-most{
    background-color: #478dc1;
}
#most-comments ul div:first-of-type li a{
color: #fff;
}
.grop-abdualla .mnqush-imgs{
    display: none;
}
</style>

<div class='div-wad'>
<script type='text/javascript'>
var numPosts=8;
var homePage="";
var postTitlear=new Array();
var imgwnr=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function most43Comment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var im=h.media$thumbnail.url
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
imgwnr.push(im);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<div class="grop-abdualla"><div class="mnqush-imgs"><a href="'+postUrlar[f]+'" target ="_top"><img class="label_thumb" style="width:100%;" src="'+imgwnr[f]+'"/></a></div><li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a></div>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=imgwnr[d];
imgwnr[d]=imgwnr[f];
imgwnr[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}

document.write('</li>')
document.write('</ul>')
document.write('</div>');
</script>
</div>

<div id="most-comments">
<ul>
<script src="/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=most43Comment"></script>
</ul>

</div>

<script type='text/javascript'>
$(document).ready(function() {
$('.label_thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's500' );});
$('.label_thumb').attr('src', function(i, src) {return src.replace( '/default.jpg', '/mqdefault.jpg' );});
});
</script>



هنا نكون قد انتهينا من الإضافة وانتظرونا في الموضوع القادم تابعناً لكي لا تفوت عليك  المواضيع الحصريا


clean قالب بلوجر احترافي معرب

clean-Template-blogger

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

من مميزات القالب:

  1. ألوان القالب
  2. خصائص في التخطيط
  3. أمكانية تغيير الألوان من مصمم النماذج
  4. قالب متجاوب
  5. علامة تثبيت للمواضيع لتميزه انهُ موضوع مهم
  6. يوفر إعدادات للقالب من التخطيط
  7. مميزات القالب كثيرة جداً لذالك اكتشفها بنفسك من خلال تصفح القالب



تركيب القالب

تركيب القالب بسيط ولا يوجد به أي تعقيدات, قم أولى باستخدام قالب التنظيف من هنا تم بعد ذالك توجه إلى المظهر وارفع القالب بعد الرفع ستجد إن القالب يعمل بكل كفاء, فقط ملاحظات:
1-عند رفع شعار مدونتك اجعله يظهر "بدلاً من العنوان والوصف"
2-لعمل قائمة منسدلة ضع"_" قبل الاسم الذي تريد أن يستدل وضع تحت ما تريد أن تنسدل منه

3- تركيب أيقونات مواقع التواصل الاجتماعي:
طريقة تركيب إيقونات مواقع التواصل الاجتماعي كل ما عليك هو الدخول الىى تخطيط المدونة وتحرير الصندوق الخاص بإيقونات هو صندوق في الأعلى وصندوق في الأسفل, التعامل معها يكون من خلال وضع اسم موقع التواصل ووضع رابط صفحتك:
اسماء مواقع التواصل::   facebook, twitter, gplus, bloglovin, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen 
clean-Template-blogger

مثال على تركيب احد الإيقونات
clean-Template-blogger


4- وضع علامة مشاركة مميزة
clean-Template-blogger

عندما تكتب احد المواضيع ضع في التسميات "featured" وستلاحظ وضع علامة مميزة على هده الموضوع,أيضا يمكنك وضع العلامة على العديد من المواضيع الذي قد نشرتها من قبل بمجرد وضع هذه التسمية.

5-تشغيل أخر المواضيع
لتشغيل أخر المواضيع توجه إلى التخطيط وأضف أداة HTML/JavaScript واضع فيها :
المشاركات الأخيرة ضع: recentposts
مشاركات عشوائية ضع: randomposts
واضع عليها عنوان مناسب وقم بحفظ الأداة

6- أعدادات التخطيط
clean-Template-blogger

Widget Recent Post No.
قم بوضع عدد المواضيع الذي تريد عرضها في المشاركات الأخيرة الذي قمت بعملها في التخطيط في الخطوة السابقة أو قم بوضع NO لإيقاف تشغيلها.

Widget Random Post No.
هده الصندوق إعداداته مثل الصندوق السابق ولكن هده يطبق على المشاركات العشوائية, أضف رقم المواضيع الذي تريد أن تظهر في المشركات العشوائية أو أضفة كلمة NO لإيقاف تشغيله


PageNavi Results No.
هنا أضف عدد مناسب لعرض المشاركات الرئيسية, فمثلا ضع 5 سيتم عرض في الصفحة الرئيسية أخر 5 مواضيع بعدها أزرار ترقيم الصفحة


Label Max-Results Results No.
هنا أضف عدد لعرض المشاركات في التصنيفات عند الدخول على قسم ما

7-أعدادات التعليقات
القالب مزود بثلاث تعليقات لتخصيصهم اذهب إلى التخطيط قم بتحرير " Comments System":
لتشغيل تعليق واحد داخل المدونة
لتشغيل تعليقات بلوجر فقط ضع: [blogger]
لتشغيل تعليقات ديكسس فقط ضع: [disqus]
لتشغيل تعليقات فيس بوك فقط ضع: [blogger]

لتشغيل أكثر من تعليق داخل المدونةلتشغيل تعليق فيس بوك وتعليق ديكسس ضع: :[facebook][disqusss]
لتشغيل تعليق فيس بوك وتعليق بلوجر ضع: [blogger][facebook]
ملاحظة: في حالت لم تعمل أعدادات التعليقات فاسبب راجع إلى أن نسخت القالب هي نسخ مجاني من مصمم القالب, لو تريد العديد من الخصائص عليك بشراء النسخة الكاملة من مصمم القالب المهم أنت في النسخة المجاني تستطيع وضع [blogger][disqus][facebook] لتشغيل ثلاث تعليقات مع بعضها البعض

8- صندوق Disqus Shortname
هنا ضع تعريفك في موقع Disqus لتوصل لك تعليقات الزوار

9- إيقاف تشغيل السدبار في احد المشاركات
يمكنك إيقاف القائمة الجانبية في احد المواضيع أو احد الصفحات من خلال وضع   [no-sidebar]أتناء كتابة الموضوع أو الصفحة
فقط كل مع عليك اثنا الكتابة الضغط html وفي أخر الأسطر ضع    [no-sidebar]
clean-Template-blogger


هنا نكون قد انتهينا من تركيب القالب شاركنا برأيك في التعليقات

قالب التنظيف وكيف يعمل لمدونات بلوجر

Cleaning-Template
جميع المدونين تقريباً يعملون على تغيير شكل مدوناتهم باستمرار بحيث يقومون باستبدال قالب مدوناتهم, ولكن في كل مره عند استبدال القالب يجدوا صعوبة في التركيب حيث توجههم بعض المشاكل الذي تتكون من القالب السابق, لذالك نقدم لك قالب التنظيف وهو عبارة عن قالب لمدونة بلوجر ولكن هده القالب فارغ لا يحتوي على شيء فعند تركيبه يعمل على حذف جميع ما في المدونة.

كيف تتكون المشاكل عند استبدال القوالب:

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

كيف لقالب فارغ يحل المشكلة:

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


طريقة تركيب قالب التنظيف:

يوجد طريقتين طريقة يدوي وطريقة عن طريق رفع قالب التنظيف إلى بلوجر
الطريقة الأولى هي تحميل قالب التنظيف تم بعد ذالك رفع القالب على المدونة, تحميل القالب من هنا.
الطريقة الثانية هي التوجه إلى المظهر / تحرير HTML ثم تحديد جميع اكواد القالب باستخدام ctrl + A ووضع بدلهم كود قالب التنظيف.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     abduallah mnqush
Designer: https://abduallah0.blogspot.com
----------------------------------------------- */





]]></b:skin>


</head>
<body>

  <b:section id='all'/>



</body>
</html>


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

Follow-us-on-Blogger-social-networking-sites
المتابعين من أهم الأمور الذي يجب الاهتمام بها بحيث تلبي طلباتهم وتحل مشاكلهم, وجميعنا نحب أن يكون لنا العديد من المتابعين ولجلب متابعين يجب علينا الاهتمام في تسهيل لهم الطرق بحيث نعمل لمدونتنا صفحات في مواقع التواصل الاجتماعي ومحاولة ترويجها إلى زوار مدوناتنا ,لذالك نقدم لكم كواد لمدونة بلوجر.
هده الاضافة نقدمها لكم بلونين مختلفين حتى تناسب أدوقكم وتناسب مدوناتكم

تركيب الإضافة 

الاضافة تتكون من جزئيين الجزاء الأول هو ملف CSS هو ملف تنسيق الاضافة بحيث يحتوي على تنسيق الألوان وترتيب الشكل, وهو يتكون من جزئيين كل جزئ يختلف في الشكل والألوان. نبدى أولى في تركيب CSS
لتركيب CSS نتوجه الى لوحة تحكم المدونة ثم المظهر ثم تحرير HTML ثم نبحث ]]></b:skin> عن ونضع كواد احد الإشكال
1-الشكل الأول
Follow-us-on-Blogger-social-networking-sites

.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
    text-align: center;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
    letter-spacing: 0px;
text-decoration: none;
display: block;
padding: 10px 1px 10px 10px;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align:center ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-instagram {
background: #405de6;
color:#fff;
}
.kt-social-buttons-widget li a:hover {
color: #0a0a0a !important;
background:#f8f8f8 !important;
}

2-الشكل التأني
Follow-us-on-Blogger-social-networking-sites
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
    text-align: center;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
    letter-spacing: 0px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
background:#f8f8f8;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align:center ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #405de6;
color:#fff;
}


ألان نأتي الى تركيب وسوم الاضافة نذهب الى التخطيط تم نختار المكان المناسب ثم نضغط "إضافة أداة" تم أضف HTML/JavaScrip واكتب عنوان مناسب في صندوق العنوان وضع الكود التالي في صندوق النص. وضغط حفظ
<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix">
<li><a href="#!" class="social-btn-twitter">تابعنا عبر تويتر<i class="fa fa-twitter"></i> </a></li>
<li><a href="#!" class="social-btn-facebook">تابعنا عبر الفيس بوك <i class="fa fa-facebook"></i> </a></li>
<li><a href="#!" class="social-btn-youtube">تابعنا في اليوتيوب <i class="fa fa-youtube"></i> </a></li>
<li><a href="#!" class="social-btn-instagram">تابعنا في انستجرام <i class="fa fa-instagram"></i> </a></li>
</ul></div>
ومبروك عليك الاضافة 

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *