للبحـث بداخـل المدونــة . . .

شرح تركيب إضافة شاهد أيضا لقالب بلوجر

شرح تركيب إضافة شاهد أيضا لقالب بلوجر


اضافة غاية في الروعة تعطي لقوالب شكل مميز

 
و اظهار المواضيع بشكل متحرك




معاينة الأضافة



شرح تركيب الأضافة 








الأكواد الأكواد الخاصة بالأضافة



بإستعمال الزر C + Ctrl للنسخ و V + Ctrl للصق قم بوضع الأكواد في المكان المناسب

ابحث عن الوسم التالي  Ctrl    او    Ctrl  

و الصق الكود فوقه تماما


   
<style>
     
/*######### Recent Posts Slider Stylesheet #############*/
.mbtslides-title{ font-weight:normal;font-size:18px!important; border-bottom:2px solid #242729; color:#242729; width:300px;}.flexslider{ width:300px; margin:0px; border:0;}
.flexslider .slides {list-style-type:none; margin:0px auto 10px auto;padding:0px;} .flexslider li {color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em;} .flexslider .flex-control-nav{list-style:none outside none;position:absolute;top:-45px;right:5px;text-align:left;height:10px}
.flexslider .flex-control-nav li{display:inline-block;margin:0 2px}
.flexslider .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
.flexslider .flex-control-nav a.flex-active{background-color:#ff7f00;border:1px solid #ff7f00} .flexslider .flex-div{margin:0px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;} .flexslider li a { color:#0080ff; text-decoration:none; } .flexslider i{color:#999; padding-right:5px; } .flexslider .iline{line-height:2em; margin-top:3px;} .flexslider .icontent{line-height:1.5em; margin-top:5px;} .flexslider div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; } .flexslider .mbttitle {font-family:'neo',sans-serif; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} .flexslider .mbttitle:hover, .flexslider .itotal a:hover {color:#333; text-decoration:none;}
.flexslider .iedit a{text-decoration:none; color:#999; cursor:pointer}
.flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} .flexslider .iauthorpic{width: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.flexslider .iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;} .flexslider .iFeatured a {background: none; padding:0px; display: block;border:1px solid #eee;} .flexslider .iFeatured img{width:110px!important;height:65px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;} .flexslider .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} .flexslider .icomments a{color:#0080ff; font-family: arial;font-size:12px;} .flexslider .icomments a:hover{text-decoration:underline} .flexslider .icomments:before {content:&#39;\f086&#39;; padding:0px 3px 0px 7px; color:#ff7f00;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: #283044;color: #fff;padding: 3px 4px;font-size: 11px;border: 1px solid #ff7f00;} .flexslider .idate div{width:18px; line-height:1.6em; text-align:center;}
.flexslider .idate:after {content: &#39; &#39;;position: absolute;z-index:-9999px;width: 0;height: 0;left: 27px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparent rgb(255, 127, 0) rgb(255, 127, 0);}.flexslider .flex-div-v{margin:10px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;}
</style>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=sans-serif' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'/>



 

الأن نذهب الى التخطيط و إضافة أداة و لصق الكود التالي بداخلها





<script type="text/javascript">       
  $(window).load(function() {         
    $('.mbt-v').flexslider({         
   animation: "slide",         
        directionNav: false,         
       touch: true,  direction: "vertical",         
       slideshowSpeed: 2500,         
      pauseOnHover: true,         
     animationSpeed: 700,         
    });         
  });         
</script>
     
       
<h2 class="mbtslides-title">شاهـــد أيضـــا</h2>         
<div class="flexslider mbt-v">         
<ul class="slides">
     
<script type="text/javascript">       
//################### Defaults         
var ListBlogLink = "https://teeeeeest88.blogspot.com";         
var ListCount = 6;         
var ListLabel = "العاب";         
var TitleCount = 66;         
var ImageSize = 150;         
//################### Function Start         
function mbtslider(json) {         
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 = AuthorPic= 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 += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";         
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= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";         
}         
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");         
ListAuthor=ListAuthor.slice(0, 1).join(" ");
     
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
     
//################### 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/AVvXsEgYEb9uEjuCsjWL-xM8ADU0fQBShJ2XX4jT1vFyhDdgVCeGtTANehdCDrMgjRGddrshLpqcG-T18gySpMK0Pa2q-J1PzBPPyz2ZO2v4Ccqa4zWkDHTNd4oNqdlPzOqwUczVymujsvBVpk4/s200/Icon.png'";         
}
     
//###################  Printing List       
var listing = "<div class='flex-div-v'><div class='iFeatured'><a  href="         
+ ListUrl+         
  "><img src="         
+ListImage+         
"/></a></div><a class='mbttitle' href="         
+ListUrl+         
"target='_blank'>"         
+ListTitle+         
"</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"         
+ListAuthor+         
"</span><span class='icomments'>"         
+ListComments +         
"</span> <span class='idate'><div>"         
+ D +         
"</div><div> "         
+ M +         
"</div></span></div></div>";         
if (i == 0)         
document.write('<li>');         
if (i < ListCount/2)         
document.write(listing);         
if (i == ListCount/2)         
document.write('</li><li>');         
if (i >= ListCount/2)         
document.write(listing);         
if (i == ListCount)         
document.write('</li>');         
} }
     
<!-- #### Invoking the Callback Function #### -->
     
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtslider'></"+"script>");         
</script>         
</ul></div>






و شكرا






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

إرسال تعليق

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

أهم الموضوعات المميزة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.