كيفية عرض المشاركات الشائعه مع الصور المصغره للصور المعروضه فى بلوجر

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

كيفية عرض المشاركات الشائعه مع الصور المصغره للصور المعروضه فى بلوجر

وهذه الاضافه هتعجبك جدا

وهذه صوره توضيحية للاضافة وعندك شكلها هيبقا اجمل

←←←←←←←←↙↙↙↙↙↙

المشاركات الشائعة

طبعا انت هتقولى ليه عندى هتبقا شكلها اجمل

اقولك ليه

لان عندى مدونتى الصور والاستايل بتاعها غير عندك طبعا

والصور الموجوده فى مدونتى صور شرح انا اللى مصورها التقاط بالكمبيوتر

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

مميزات الاضافة👽👽👽

1- يوجد تحت المشاركات كما ترى بالصورة التوضيحية اسم المدون ويوجد ايضا التسميات والتاريخ والوقت

2- الميزه المهمه جدا انك بتقدر تعمل تحرير للموضوع من كلمة ( Edited )

3- يوجد ايضا بها عدد التعليقات الموجوده على الموضوع

4- يوجد ايضا خاصية اقرا المزيد لقراة كمالة الموضوع

كيفية التركيب💏💏💏

1- الذهاب الى الصفحة الرئيسية للمدونة

2- اضغط قالب + تحرير html

3- اضغط ctrl+f

ابحث عن هذا الوسم ( </head> )

واضف فوقه الكود التالى

ثم ابحث عن الوسم ( ]]></b:skin> )

واضف فوقه الكود التالى

/*############Recent Posts Widget##################*/
.mbtlist {list-style-type:none;overflow:hidden; padding:10px!important;} 
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; } 
.mbtlist i{color:#999; padding-right:4px; } 
.mbtlist .iline{line-height:2em; clear:both; border:1px solid #eee; margin-top:10px; padding: 0px 4px;   font-size: 12px;} 
.mbtlist div span{margin:0 10px 0 0; display:inline-block;} 
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;} 
.mbtlist .icon {color: #999;font-family: verdana;font-size: 12px;text-align: justify;} 
.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:150px; height:100px; box-shadow:-1px -1px 4px #777; } 
.mbtlist .mbttitle {font-family:oswald; font-size:18px; color:#0080ff; font-weight:normal; text-decoration:none;    line-height: 1.4em;} 
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover  {color:#00A5FF;} 
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer} 
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:5px;} 
.mbtlist .iauthor:before {content:'\f007';} 
.mbtlist .itag:before {content:'\f02c';} 
.mbtlist .icomments:before {content:'\f086';} 
.mbtlist .idate:before {content:'\f017';} 
.mbtlist .iedit:before {content:'\f040';}.mbtlist .imore {font-size:12px; font-weight:bold; text-decoration:none; color:#999;}.mbtlist .itotal {color:#333;  padding:5px 10px; border:1px solid #eee;}.mbtlist .itotal a {font-family:oswald; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}.mbtlist .itotal span:before {content:'\f07c';}.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold}#mbtloading1{ margin: 20% auto; 
background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/ 
.tooltip1{outline:none;text-decoration:none!important;position:relative;color: orange!important; font-weight: bold;}.tooltip1:hover {border-bottom: none;}.tooltip1 strong{line-height:30px}.tooltip1 > span{max-width:300px;width:115px;padding:5px 8px;opacity:0;bottom:170%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip1 > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip1:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-90px}.tooltip1 span b{width:15px;height:15px;right:25px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip1 > span{color:#fff;background:orange;border:1px solid #ffffff}.tooltip1 span b{background:orange;border-bottom:1px solid #ffffff;border-left:1px solid #ffffff}

ثم اضغط حفظ القالب

ملاحظه⇲⇲⇲

افتح التخطيط فى علامة تبويت تانيه بدون ان تخرج من صفحة html
عشان لو الاضافه معجبتكش تحذفها تانى عن طريق الضغط على ( ctrl+z )
تمام كده انا بوضح اكتر ليك عشان مترجعش تزعل مني او تقول انا بغشك

والان مع اخر مرحله↡↡

ندخل علامة التبويت اللى فتحناها بتاع التخطيط

نضغط اضافة اداة + اداة html

ونضيف فيها الكود التالى

<div id="mbtloading1" >
</div>
<script type="text/javascript">
//#################### Defaults 
var ListBlogLink = window.location.hostname; 
var ListCount = 5; 
var ChrCount = 150; 
var TitleCount = 66; 
var ImageSize = 200; 
//################ Function Start 
function mbtlist(json) { 
document.write('<ul class="mbtlist">'); 
for (var i = 0; i < ListCount; i++) 
{ 
//################### Variables Declared 
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
//################### Category 
if (json.feed.entry[i].category != null) 
{ 
for (var k = 0; k < json.feed.entry[i].category.length; k++) { 
    ListTag += json.feed.entry[i].category[k].term; 
if(k < json.feed.entry[i].category.length-1) 
{ ListTag += ", ";} 
} 
}
//################### URL 
for (var j = 0; j < json.feed.entry[i].link.length; j++) { 
      if (json.feed.entry[i].link[j].rel == 'alternate') { 
        break; 
      } 
    } 
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info 
TotalPosts = json.feed.openSearch$totalResults.$t; 
if (json.feed.entry[i].title!= null) 
{ 
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount); 
} 
if (json.feed.entry[i].thr$total) 
{ 
ListComments= json.feed.entry[i].thr$total.$t; 
} 
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" "); 
ListAuthor=ListAuthor.slice(0, 1).join(" ");

//################### Content Check
ListConten = json.feed.entry[i].content.$t; 
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
                         Y = ListDate.substring(0, 4); 
                        m = ListDate.substring(5, 7); 
                         D = ListDate.substring(8, 10); 
                         M = ListMonth[parseInt(m - 1)];                       
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4); 
                        mm = ListUpdate.substring(5, 7); 
                         DD = ListUpdate.substring(8, 10); 
                         TT = ListUpdate.substring(11, 16); 
                         MM = ListMonth[parseInt(mm - 1)];   
//################### Thumbnail Check 
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null) 
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop(); 
    
    if (youtube_id.length == 11) { 
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'"; 
        } 
}
else if (json.feed.entry[i].media$thumbnail) 
{ 
thumbUrl = json.feed.entry[i].media$thumbnail.url; 
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/"); 
ListImage= "'" + sk.replace("?imgmax=800","") + "'"; 
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null) 
{ 
// Support For 3rd Party Images 
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]; 
} 
else 
{ 
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLMg3vIcanZl5PebERGohZqCj5wLgdxkgIS7iLRlvfNPK8n_3WwChR003gIVJhBrMJ8GJ1lvFUOTZwWX7QINpZoAhTVa0I9F3jpQlGkryarOJamN9hJzHTM0dKchPhQfgWc_IrlU84V9Ls/s962/%25D8%25A8%25D8%25AF%25D9%2588%25D9%2586-%25D8%25B9%25D9%2586%25D9%2588%25D8%25A7%25D9%2586-3.gif'"; 
} 
//################### Printing List
var listing = "
<li class='node"+[i]+"' ><a href=" 
+ ListUrl+ 
  "><img src=" 
+ListImage+ 
"/></a><a class='mbttitle' href=" 
+ ListUrl+ 
"target='_blank'>" 
+ ListTitle+ 
"</a> <span class='icon'>" 
+ListContent+ 
" ...  <a href=" 
+ListUrl+ 
" class='imore'>more »</a></span><div class='iline'>
<span class='iauthor'>" 
+ListAuthor+ 
"</span><span class='itag'>" 
+ListTag+ 
"</span><span class='icomments'>" 
+ ListComments+ 
"</span><span class='idate'>" 
+ M + 
" " 
+ D + 
", " 
+ Y +
"</span><span class='iedit'> <a class='tooltip1'>Edited<span><b></b>On ► " 
+ MM + 
" " 
+ DD + 
", " 
+ YY + 
" at ► " 
+TT+ 
" </span></a> </span></div>
</li>
"; 
document.write(listing); 
} 
document.write("<div class='itotal'>
<span> <a href='"+ListBlogLink+"/search'>View all <font>"+TotalPosts+"</font> posts</a></span></div>
</ul>
"); 
} 
</script>
<script> 
var ListBlogLink = "http://antekh.blogspot.com.eg/"; 
var ListCount = 5; 
</script>
<script> 
document.write("<script src='"+ListBlogLink+"/feeds/posts/default?alt=json-in-script&callback=mbtlist'></"+"script>"); 
</script>
<script> 
document.getElementById("mbtloading1").style.display = "none";</script>

غير الرابط بتاع مدونتى http://antekh.blogspot.com.eg / برابط مدونتك
واضغط حفظ ، كده نكون اتممنا كل الخطوات
تقدر تعمل عرض لمدونتك وتشوف الاضافه وانشاء الله هتعجبك
لو معجبتكش ترجع على علامة التبويت اللى فى html وتضغط زى ماقولتلك ctrl+z بالكيبورد واضغط حفظ هلاقى ولا كاننا ضفنا حاجه فى المدونه
لو فى اى استفسار اترك تعليق
#انتكا

اخر الاخبار اضافات بلوجر شروحات بلوجر نصائح المدون

كيفية عرض المشاركات الشائعه مع الصور المصغره للصور المعروضه فى بلوجر

كيفية عرض المشاركات الشائعه مع الصور المصغره للصور المعروضه فى بلوجر

مميزات الاضافة👽👽👽

كيفية التركيب💏💏💏

ملاحظه⇲⇲⇲

والان مع اخر مرحله↡↡

hisham mustafa

انا هشام اسمي هشام عايش هشام نايم هشام باكل هشام بشرب هشام

اترك تعليقك Hide comment