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

- أدخل لوحة تحكم البلوجر ثم اضغط على تعديل القالب كما في الصور أدناه .
- ستظهر لك صفحة قم بما ورد في الصورة أدناه
- بعدها ستظهر لك صفحة تحمل كود HTML ، اضغط على CTRL+F لتوليد اضافة البحث يمكن استعملها للبحث عن الأكواد أنظر الصورة أدناه .2- تركيب أكواد HTML السلايدر لقالب البلوجر :
- ابحث عن الكود ]]></b:skin> وضع فوقه مباشرة الكود التالي :
/* Slide Content ----------------------------------------------- */ .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;} .slide {color: #666666;line-height: 1.3em;} .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} .slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} .slide .widget {margin:0px 0px 6px 0px;}
- ابحث عن الكود ]]></b:skin> وضع فوقه مباشرة الكود التالي :
- الآن عليك بالبحث عن هذا الكود <div id='main-wrapper'> و ضع تحته الكود التالي :
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slide-wrapper'> <b:section class='slide' id='slide' preferred='yes'/> </div> </b:if>
- نبحث عن كود ]]></b:skin> نلصق الكود التالي فوقه :
/* Lofslidernews */
#slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}
.slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}
ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png);padding:10px}
ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}
ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}
ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;float:left;margin:0;padding:0}
.slider-opacity li{position:absolute;top:0;left:0;float:inherit}
ul.slider-main-wapper li img{list-style:none;width:405px;height:auto;padding:0}
ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}
ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
.slider-navigator-outer{position:absolute;right:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
.slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
.slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
.slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
.slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
.slider-navigator li.active img{border:#eee solid 1px}
.slider-navigator li.active h5{color:#0178d3}- مرة أخرى نبحث عن كود </head> و نلصق فوقه الكود التالي : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[(function($) {var types = ['DOMMouseScroll', 'mousewheel'];$.event.special.mousewheel = {setup: function() {if ( this.addEventListener )for ( var i=types.length; i; )this.addEventListener( types[--i], handler, false );elsethis.onmousewheel = handler;},teardown: function() {if ( this.removeEventListener )for ( var i=types.length; i; )this.removeEventListener( types[--i], handler, false );elsethis.onmousewheel = null;}};$.fn.extend({mousewheel: function(fn) {return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");},unmousewheel: function(fn) {return this.unbind("mousewheel", fn);}});function handler(event) {var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;event = $.event.fix(event || window.event);event.type = "mousewheel";if ( event.wheelDelta ) delta = event.wheelDelta/120;if ( event.detail ) delta = -event.detail/3;// Add events and delta to the front of the argumentsargs.unshift(event, delta);return $.event.handle.apply(this, args);}})(jQuery);/*** @version $Id: $Revision* @package jquery* @subpackage lofslidernews* @copyright Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.* @website http://landofcoder.com* @license This plugin is dual-licensed under the GNU General Public License and the MIT License*/// JavaScript Document(function($) {$.fn.lofJSidernews = function( settings ) {return this.each(function() {// get instance of the lofSiderNew.new $.lofSidernews( this, settings );});}$.lofSidernews = function( obj, settings ){this.settings = {direction : '',mainItemSelector : 'li',navInnerSelector : 'ul',navSelector : 'li' ,navigatorEvent : 'click',wapperSelector: '.slider-main-wapper',interval : 4000,auto : true, // whether to automatic play the slideshowmaxItemDisplay : 5,startItem : 0,navPosition : 'vertical',navigatorHeight : 60,navigatorWidth : 210,duration : 600,navItemsSelector : '.slider-navigator li',navOuterSelector : '.slider-navigator-outer' ,isPreloaded : true,easing : 'easeInOutQuad'}$.extend( this.settings, settings ||{} );this.nextNo = null;this.previousNo = null;this.maxWidth = this.settings.mainWidth || 600;this.wrapper = $( obj ).find( this.settings.wapperSelector );this.slides = this.wrapper.find( this.settings.mainItemSelector );if( !this.wrapper.length || !this.slides.length ) return ;// set width of wapperif( this.settings.maxItemDisplay > this.slides.length ){this.settings.maxItemDisplay = this.slides.length;}this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );if( this.settings.navPosition == 'horizontal' ){this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );this.navigatorOuter.height( this.settings.navigatorHeight );} else {this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );this.navigatorOuter.width( this.settings.navigatorWidth );}this.navigratorStep = this.__getPositionMode( this.settings.navPosition );this.directionMode = this.__getDirectionMode();if( this.settings.direction == 'opacity') {this.wrapper.addClass( 'slider-opacity' );$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);} else {this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );}if( this.settings.isPreloaded ) {this.preLoadImage( this.onComplete );} else {this.onComplete();}}$.lofSidernews.fn = $.lofSidernews.prototype;$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;$.lofSidernews.fn.extend({startUp:function( obj, wrapper ) {seft = this;this.navigatorItems.each( function(index, item ){$(item).click( function(){seft.jumping( index, true );seft.setNavActive( index, item );} );$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );})this.registerWheelHandler( this.navigatorOuter, this );this.setNavActive(this.currentNo );if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){this.registerButtonsControl( 'click', this.settings.buttons, this );}if( this.settings.auto )this.play( this.settings.interval,'next', true );return this;},onComplete:function(){setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );},preLoadImage:function( callback ){var self = this;var images = this.wrapper.find( 'img' );var count = 0;images.each( function(index,image){if( !image.complete ){image.onload =function(){count++;if( count >= images.length ){self.onComplete();}}image.onerror =function(){count++;if( count >= images.length ){self.onComplete();}}}else {count++;if( count >= images.length ){self.onComplete();}}} );},navivationAnimate:function( currentIndex ) {if (currentIndex <= this.settings.startItem|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;if (this.settings.startItem < 0) this.settings.startItem = 0;if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;}}this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),{duration:500, easing:'easeInOutQuad'} );},setNavActive:function( index, item ){if( (this.navigatorItems) ){this.navigatorItems.removeClass( 'active' );$(this.navigatorItems.get(index)).addClass( 'active' );this.navivationAnimate( this.currentNo );}},__getPositionMode:function( position ){if( position == 'horizontal' ){return ['left', this.settings.navigatorWidth];}return ['top', this.settings.navigatorHeight];},__getDirectionMode:function(){switch( this.settings.direction ){case 'opacity': this.maxSize=0; return ['opacity','opacity'];default: this.maxSize=this.maxWidth; return ['left','width'];}},registerWheelHandler:function( element, obj ){element.bind('mousewheel', function(event, delta ) {var dir = delta > 0 ? 'Up' : 'Down',vel = Math.abs(delta);if( delta > 0 ){obj.previous( true );} else {obj.next( true );}return false;});},registerButtonsControl:function( eventHandler, objects, self ){for( var action in objects ){switch (action.toString() ){case 'next':objects[action].click( function() { self.next( true) } );break;case 'previous':objects[action].click( function() { self.previous( true) } );break;}}return this;},onProcessing:function( manual, start, end ){this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);return this;},finishFx:function( manual ){if( manual ) this.stop();if( manual && this.settings.auto ){this.play( this.settings.interval,'next', true );}this.setNavActive( this.currentNo );},getObjectDirection:function( start, end ){return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");},fxStart:function( index, obj, currentObj ){if( this.settings.direction == 'opacity' ) {$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );}else {this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );}return this;},jumping:function( no, manual ){this.stop();if( this.currentNo == no ) return;var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");this.onProcessing( null, manual, 0, this.maxSize ).fxStart( no, obj, this ).finishFx( manual );this.currentNo = no;},next:function( manual , item){this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);this.onProcessing( item, manual, 0, this.maxSize ).fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ).finishFx( manual );},previous:function( manual, item ){this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;this.onProcessing( item, manual ).fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ).finishFx( manual );},play:function( delay, direction, wait ){this.stop();if(!wait){ this[direction](false); }var self = this;this.isRun = setTimeout(function() { self[direction](true); }, delay);},stop:function(){if (this.isRun == null) return;clearTimeout(this.isRun);this.isRun = null;}})})(jQuery)//]]></script><script type='text/javascript'>//<![CDATA[imgr = new Array();imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost = 70;summaryTitle = 20;numposts = 10;function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s = s.join("");s = s.substring(0,chop-1);return s;}function showrecentposts(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;img = new Array();for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var pcm;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0];break;}}if ("content" in entry) {var postcontent = entry.content.$t;}elseif ("summary" in entry) {var postcontent = entry.summary.$t;}else var postcontent = "";postdate = entry.published.$t;if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';var month = [1,2,3,4,5,6,7,8,9,10,11,12];var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day = postdate.split("-")[2].substring(0,2);var m = postdate.split("-")[1];var y = postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]) {m = month2[u2] ; break;}}var daystr = day+ ' ' + m + ' ' + y ;var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>';document.write(trtd);j++;}}function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;img = new Array();for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var pcm;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0];break;}}if ("content" in entry) {var postcontent = entry.content.$t;}elseif ("summary" in entry) {var postcontent = entry.summary.$t;}else var postcontent = "";postdate = entry.published.$t;if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';var month = [1,2,3,4,5,6,7,8,9,10,11,12];var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day = postdate.split("-")[2].substring(0,2);var m = postdate.split("-")[1];var y = postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]) {m = month2[u2] ; break;}}var daystr = day+ ' ' + m + ' ' + y ;var trtd = '<li><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';document.write(trtd);j++;}}//]]></script>
- نضغط حفظ القالب .
- أدخل لوحة التحكم واضغط على تعديل الصفحة كما في الصورة أدناه ،
- نضغط حفظ القالب .
- اضافة صندوق HTML جديد كما في الصور أدناه ،
- ألصق الكود التالي كما في الصورة أدناه .
<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){
$('#slider').lofJSidernews({
interval:6000,
duration:800,
mainWidth: 405,
navigatorWidth: 200,
maxItemDisplay:5,
easing:'easeInOutQuad',
auto:true,
isPreloaded: false
});
});
</script>
أنظر للكود باللون الأحمر غيره بنوع التصنيف التدوينات التي تريد تظهر بالسلايدر .
4- شارك التدوينة مع أصدقائك ان أعجبتك .
- ألصق الكود التالي كما في الصورة أدناه .
- مرة أخرى نبحث عن كود </head> و نلصق فوقه الكود التالي :
تعليقات
إرسال تعليق