راسلنا من خلال النمودج التالي :

الاسم

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

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

إضافة شاهد أيضا اضافة غاية في الروعة

إضافة مميزة لقوالب البلوجر

شاهد أيضا




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

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




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



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








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



بإستعمال الزر 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= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/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>






و شكرا







hala teck
الكاتب : MAHER

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

شارك الموضوع
تعليقات
إعلان