إضافة المشاركات الشائعة مع زر اقرأ المزيد و التعليقات

إضافة المشاركات الشائعة مع زر اقرأ المزيد و التعليقات

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

معاينة

شرح التركيب

انتقل إلى المدونة >> التخطيط > اضافة اداة HTML/JavaScript

 <style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
transition:all .5s ease;
float:left;padding:0;
border:3px solid #cccccc;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
background:#fff;margin-right:10px;
height:70px;
width:80px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);
-webkit-transform:scale(1.2) rotate(-350deg);
-o-transform:scale(1.2) rotate(-350deg);
-ms-transform:scale(1.2) rotate(-350deg);
transform:scale(1.2) rotate(-350deg);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;
min-height:70px;
margin:0 10px 2px 0;
adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;
padding:8px 0;
min-height:65px;
margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;
outline:0;
text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;
text-shadow:0 1px 0 #fff;
color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);
background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);
background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);
background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);
background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
color:#888!important;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;font-size:11px;
font-weight:blod;
text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;
background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);
background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);
background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);
background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);
background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;
margin:2px}
#mdjumplink a:hover{color:#888!important;
text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;
font-size:11px;font-weight:800}
#mdcomments:hover{background:#F4A557;
text-decoration:none}
/*]]>*/
</style>
<script type='text/javascript'>
//<![CDATA[
var numposts = 10;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script type="text/javascript" src="http://makingdifferent.github.com/blogger-widgets/Recent-posts%5Bwww.makingdifferent.com%5D.js"></script>
<script type="text/javascript" src="http://mudwnp.blogspot.com/feeds/posts/default/-/الرئيسية?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

اهم الاعدادات

استبدل كلمة الرئيسية باسم القسم التي تريد ظهور مواضيعه
استبدل رابط مدونة مدون محترف mudwnp.blogspot.com برابط مدونتك
استبدل رقم 10 بالعدد التي تريده و هو خاص بعدد المواضيع التي ستظهر
لتغيير حجم الصور قم بتغيير ما هو باللون الازرق بما يناسب مدونتك
لتغيير حجم الخط قم بالبحث عن font-size و استبدل الرقم بجانبه

من يواجه مشكلة مع الاضافة اترك تعليق و سوف يتم حل المشكلة