کد نمایش برترین مطالب در بالای وبلاگ

کد رایگان از ایمان فخار    

نمونه متن نوشته شده شما شما می توانید از کدهای استایل بندی مختلف مانند برجسته کردن فونت (BOLD) یا تغییر فونت نوشته یا استفاده از خواص _ساب و ^ساپ و دیگر کدهای کاربردی HTML و CSS در این جعبه استفاده نمائید
همچنین شما می توانید عکس یا چارت gif شده را نیز در این جعبه نمایش  دهید برای مشاهده دستورالعمل ساخت به   اسلاید بعدی  در همین باکس یا ادامه مطلب در وبلاگ CSS3 مراجعه فرمائید

در صفحه اصلی مطلب در وبلاگ CSS3 سه پنجره کد مشاهده می کنید
محتوای اولین پنجره کدهای استایل بندی هستند عینا کپی و بدون نیاز به تغییز در بخش ویرایش قالب به قسمت <style type="text/css"> کپی نمایید و یا اگر از سایت با هاست شخصی استفاده می کنید فایل style.css را یافته و محتوا را در آن کپی نمایید
بخش دوم هم کدهای جاوا اسکریپت هستند که هم می توانند در داخل صفحه اصلی قالب بعد از نوشتن <script type="javascript/text"> و </script> کدها را در بین تگ اسکریپت قرار دهید و هم در صفحه ای جدا با پسوند js ذخیره کنید
بخش سوم کدهای داخل صفحه هستند که در جای مناسب برای نمایش قرار می گیرند شما می توانید رنگ پس زمینه و نوشته ها و متون را در این کد به راحتی تغییر دهید اما مراقب باشید ID و Class ها را تغییر ندهید

این نمونه یک متن آزمایشی است بر روی سومین اسلاید شما با تکثیر کلاس class="contentdiv" می توانید به تعداد دلخواه اسلاید داشته باشید
برای تغییر عرض در کدهای CSS در خط اول (sliderwrapper) گزینه Widht:600px; را به مقدار دلخواه تغییر دهید
و در خط دوم نیز این مقدار را با اختلاف ده پیکسل از اندازه ای که داده اید تغییر داده و در خط سوم نیز مجددا همان تغییر اولیه را انجام دهید

.sliderwrapper{....width:450px}
.sliderwrapper .contentdiv {.... width:440px*/ (450-10=440)}
.pagination {....width:450px}

در صفحه اصلی مطلب در وبلاگ CSS3 چهار پنجره کد مشاهده می کنید
محتوای اولین پنجره کدهای استایل بندی هستند عینا کپی و بدون نیاز به تغییز در بخش ویرایش قالب به قسمت <style type="text/css"> کپی نمایید و یا اگر از سایت با هاست شخصی استفاده می کنید فایل style.css را یافته و محتوا را در آن کپی نمایید
بخش دوم هم کدهای جاوا اسکریپت هستند که هم می توانند در داخل صفحه اصلی قالب بعد از نوشتن <script type="javascript/text"> و </script> کدها را در بین تگ اسکریپت قرار دهید و هم در صفحه ای جدا با پسوند js ذخیره کنید  یا از پنجره سوم کد لینک به فایل را برداشته و در قالب وبلاگ یا سایت خود قرار دهید
بخش چهارم کدهای داخل صفحه هستند که در جای مناسب برای نمایش قرار می گیرند شما می توانید رنگ پس زمینه و نوشته ها و متون را در این کد به راحتی تغییر دهید اما مراقب باشید ID و Class ها را تغییر ندهید

.sliderwrapper{-moz-border-top-left-radius:12px;-moz-border-top-right-radius:12px;-webkit-border-top-left-radius:12px;-webkit-border-top-right-radius:12px;background:#333;border:10px #000 solid;border-bottom-width:6px;border-top-left-radius:12px;border-top-right-radius:12px;height:250px;overflow:hidden;position:relative;width:450px;z-index:157} .sliderwrapper .contentdiv{-moz-border-radius:12px;-moz-opacity:1;-webkit-border-radius:12px;border-radius:12px;direction:rtl;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);height:100%;left:0;opacity:1;padding:5px;position:absolute;top:0;visibility:hidden;width:440px} .pagination{background:#000 url(http://blog.css3.gozarweb.com/wp-content/uploads/2011/05/rbbg.png) no-repeat scroll left bottom;font-size:12px;padding:5px 10px;text-align:right;width:450px} .pagination a{-moz-border-radius:5px;-moz-box-shadow:0 0 4px #000;-moz-transition:all 1s ease-out;-o-transition:all 1s ease-out;-webkit-border-radius:5px;-webkit-box-shadow:0 0 4px #000;-webkit-transition:all 1s ease-out;background:#6F6C4D;border:1px #000 solid;border-radius:5px;box-shadow:0 0 4px #000;color:#330;font-size:13px;font-weight:700;padding:2px 5px;text-decoration:none;text-shadow:-1px 1px 2px #444,1px 0 1px #f8f8f8;transition:all 1s ease-out} .pagination a:hover{-moz-box-shadow:0 0 4px #ffffc6;-webkit-box-shadow:0 0 4px #ffffc6;background-color:#ffffc6;border:1px #ffffc6 solid;box-shadow:0 0 4px #ffffc6;color:#C60} .pagination a:active{-moz-box-shadow:0 0 4px #000;-webkit-box-shadow:0 0 4px #000;background:#6F6C4D;border:1px #000 solid;box-shadow:0 0 4px #000} .pagination a.selected{-moz-box-shadow:0 0 4px #c1bb86;-webkit-box-shadow:0 0 4px #c1bb86;background-color:#c1bb86;border:1px #c1bb86 solid;box-shadow:0 0 4px #c1bb86} #hint-link1{color:#000;display:inline-block;height:45px;overflow:visible;position:relative;text-align:center;text-decoration:none;width:120px;z-index:158} #hint-link1 #hint{-moz-transition:all 1.2s ease-out;-o-transition:all 1.2s ease-out;-webkit-transition:all 1.2s ease-out;background-color:#000;color:#fff;direction:rtl;display:block;font-size:12px;margin-top:-30px;overflow:hidden;padding:5px;position:relative;text-align:center;transition:all 1.2s ease-out;visibility:hidden;width:120px;z-index:156} #hint-link1:hover #hint{-moz-border-bottom-left-radius:4px;-moz-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;color:#fff;margin-top:-10px;padding:10px 5px 2px;visibility:visible} .sliderwrapper a,.sliderwrapper a:visited,.sliderwrapper a:link {color:#FFFF66;text-decoration:none;} .sliderwrapper a:hover{ text-decoration:underline;}

//** Featured Content Slider- (c) CSS3[dot]BLOGSKY Group (css3.blogsky.com) //** May 2nd, 11'- Script rewritten and updated to 2.0. //** May 11th, 11'- Script updated to v 2.3, which adds the following features: //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later. //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former). //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example. //4) setup right to left mode (persian) Language //**by I. Fakhar Free for Iranian var featuredcontentslider={ajaxloadingmsg:'<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',bustajaxcache:true,enablepersist:true,settingcaches:{},jumpTo:function(fcsid,pagenumber){this.turnpage(this.settingcaches[fcsid],pagenumber)},ajaxconnect:function(setting){var page_request=false if(window.ActiveXObject){try{page_request=new ActiveXObject("Msxml2.XMLHTTP")} catch(e){try{page_request=new ActiveXObject("Microsoft.XMLHTTP")} catch(e){}}} else if(window.XMLHttpRequest) page_request=new XMLHttpRequest() else return false var pageurl=setting.contentsource[1] page_request.onreadystatechange=function(){featuredcontentslider.ajaxpopulate(page_request,setting)} document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg var bustcache=(!this.bustajaxcache)?"":(pageurl.indexOf("?")!=-1)?"&"+new Date().getTime():"?"+new Date().getTime() page_request.open('GET',pageurl+bustcache,true) page_request.send(null)},ajaxpopulate:function(page_request,setting){if(page_request.readyState==4&&(page_request.status==200||window.location.href.indexOf("http")==-1)){document.getElementById(setting.id).innerHTML=page_request.responseText this.buildpaginate(setting)}},buildcontentdivs:function(setting){var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for(var i=0;i<alldivs.length;i++){if(this.css(alldivs[i],"contentdiv","check")){setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none"}}},buildpaginate:function(setting){this.buildcontentdivs(setting) var sliderdiv=document.getElementById(setting.id) var pdiv=document.getElementById("paginate-"+setting.id) var phtml="" var toc=setting.toc var nextprev=setting.nextprev if(typeof toc=="string"&&toc!="markup"||typeof toc=="object"){for(var i=1;i<=setting.contentdivs.length;i++){phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"?toc.replace(/#increment/,i):toc[i-1])+'</a> '} phtml=(nextprev[0]!=''?'<a href="#prev" class="prev">'+nextprev[0]+'</a> ':'')+phtml+(nextprev[1]!=''?'<a href="#next" class="next">'+nextprev[1]+'</a>':'') pdiv.innerHTML=phtml} var pdivlinks=pdiv.getElementsByTagName("a") var toclinkscount=0 for(var i=0;i<pdivlinks.length;i++){if(this.css(pdivlinks[i],"toc","check")){if(toclinkscount>setting.contentdivs.length-1){pdivlinks[i].style.display="none" continue} pdivlinks[i].setAttribute("rel",++toclinkscount) pdivlinks[i][setting.revealtype]=function(){featuredcontentslider.turnpage(setting,this.getAttribute("rel")) return false} setting.toclinks.push(pdivlinks[i])} else if(this.css(pdivlinks[i],"prev","check")||this.css(pdivlinks[i],"next","check")){pdivlinks[i].onclick=function(){featuredcontentslider.turnpage(setting,this.className) return false}}} this.turnpage(setting,setting.currentpage,true) if(setting.autorotate[0]){pdiv[setting.revealtype]=function(){featuredcontentslider.cleartimer(setting,window["fcsautorun"+setting.id])} sliderdiv["onclick"]=function(){featuredcontentslider.cleartimer(setting,window["fcsautorun"+setting.id])} setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) this.autorotate(setting)}},urlparamselect:function(fcsid){var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)","i")) return(result==null)?null:parseInt(RegExp.$1)},turnpage:function(setting,thepage,autocall){var currentpage=setting.currentpage var totalpages=setting.contentdivs.length var turntopage=(/prev/i.test(thepage))?currentpage-1:(/next/i.test(thepage))?currentpage+1:parseInt(thepage) turntopage=(turntopage<1)?totalpages:(turntopage>totalpages)?1:turntopage if(turntopage==setting.currentpage&&typeof autocall=="undefined") return setting.currentpage=turntopage setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex this.cleartimer(setting,window["fcsfade"+setting.id]) setting.cacheprevpage=setting.prevpage if(setting.enablefade[0]==true){setting.curopacity=0 this.fadeup(setting)} if(setting.enablefade[0]==false){setting.contentdivs[setting.prevpage-1].style.display="none" setting.onChange(setting.prevpage,setting.currentpage)} setting.contentdivs[turntopage-1].style.visibility="visible" setting.contentdivs[turntopage-1].style.display="block" if(setting.prevpage<=setting.toclinks.length) this.css(setting.toclinks[setting.prevpage-1],"selected","remove") if(turntopage<=setting.toclinks.length) this.css(setting.toclinks[turntopage-1],"selected","add") setting.prevpage=turntopage if(this.enablepersist) this.setCookie("fcspersist"+setting.id,turntopage)},setopacity:function(setting,value){var targetobject=setting.contentdivs[setting.currentpage-1] if(targetobject.filters&&targetobject.filters[0]){if(typeof targetobject.filters[0].opacity=="number") targetobject.filters[0].opacity=value*100 else targetobject.style.filter="alpha(opacity="+value*100+")"} else if(typeof targetobject.style.MozOpacity!="undefined") targetobject.style.MozOpacity=value else if(typeof targetobject.style.opacity!="undefined") targetobject.style.opacity=value setting.curopacity=value},fadeup:function(setting){if(setting.curopacity<1){this.setopacity(setting,setting.curopacity+setting.enablefade[1]) window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)},50)} else{if(setting.cacheprevpage!=setting.currentpage) setting.contentdivs[setting.cacheprevpage-1].style.display="none" setting.onChange(setting.cacheprevpage,setting.currentpage)}},cleartimer:function(setting,timervar){if(typeof timervar!="undefined"){clearTimeout(timervar) clearInterval(timervar) if(setting.cacheprevpage!=setting.currentpage){setting.contentdivs[setting.cacheprevpage-1].style.display="none"}}},css:function(el,targetclass,action){var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)","ig") if(action=="check") return needle.test(el.className) else if(action=="remove") el.className=el.className.replace(needle,"") else if(action=="add") el.className+=" "+targetclass},autorotate:function(setting){window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting,"next")},setting.autorotate[1])},getCookie:function(Name){var re=new RegExp(Name+"=[^;]+","i");if(document.cookie.match(re)) return document.cookie.match(re)[0].split("=")[1] return null},setCookie:function(name,value){document.cookie=name+"="+value},init:function(setting){var persistedpage=this.getCookie("fcspersist"+setting.id)||1 var urlselectedpage=this.urlparamselect(setting.id) this.settingcaches[setting.id]=setting setting.contentdivs=[] setting.toclinks=[] setting.topzindex=0 setting.currentpage=urlselectedpage||((this.enablepersist)?persistedpage:1) setting.prevpage=setting.currentpage setting.revealtype="on"+(setting.revealtype||"click") setting.curopacity=0 setting.onChange=setting.onChange||function(){} if(setting.contentsource[0]=="inline") this.buildpaginate(setting) if(setting.contentsource[0]=="ajax") this.ajaxconnect(setting)}}

همینطور می تونید از لینک http://blog.css3.gozarweb.com/wp-content/uploads/2011/05/cssGslider.js  استفاده کتید برای این منظور بجای محتویات فوق کد زیر را قرار دهید

<script type="text/javascript" src="http://blog.css3.gozarweb.com/wp-content/uploads/2011/05/cssGslider.js"><br /> /*********************************************** * Featured Content Slider- (c) CSS3[dot]BLOGSKY Group (css3.blogsky.com) * This notice MUST stay intact for legal use * Visit CSS3 blog for this script and 100s more * [c] 2011 copyright I.Fakhar, Iranian CSS3 Group * Free Version ***********************************************/ </script>

<div id="slider1" class="sliderwrapper"> <a href="http://css3.gozarweb.com" target="_blank" id="hint-link1" style="position:absolute;"><span id="hint">کد رایگان از ایمان فخار</span>&nbsp;&nbsp;&nbsp;&nbsp;</a> <div class="contentdiv" style="background:#800000;color:#ECE9D8"> <p>نمونه متن نوشته شده شما شما می توانید از کدهای استایل بندی مختلف مانند <strong>برجسته کردن فونت (BOLD) </strong>یا تغییر <span style="font-family:Tahoma;">فونت نوشته </span> یا استفاده از خواص _ساب و ^ساپ و دیگر کدهای کاربردی HTML و CSS در این جعبه استفاده نمائید <img src="rssreaderimg.jpg" style="float:left;padding:5px;background:#fff;border:2px #333 solid; height: 176px; width: 185px;" /><br />همچنین شما می توانید عکس یا چارت gif شده را نیز در این جعبه نمایش&nbsp; دهید برای مشاهده دستورالعمل ساخت به&nbsp;&nbsp; <a href="javascript:featuredcontentslider.jumpTo('slider1', 2)">اسلاید بعدی</a>&nbsp; در همین باکس یا ادامه مطلب در وبلاگ <a target="_blank" href="http://css3.blogsky.com">CSS3</a> مراجعه فرمائید</p> </div> <div class="contentdiv" style="background:#247fc3;color:#fff;"> <p dir="rtl">در صفحه اصلی مطلب در وبلاگ CSS3 سه پنجره کد مشاهده می کنید <br /> محتوای اولین پنجره کدهای استایل بندی هستند عینا کپی و بدون نیاز به تغییز در بخش ویرایش قالب به قسمت &lt;style type=&quot;text/css&quot;&gt; کپی نمایید و یا اگر از سایت با هاست شخصی استفاده می کنید فایل style.css را یافته و محتوا را در آن کپی نمایید <br /> بخش دوم هم کدهای جاوا اسکریپت هستند که هم می توانند در داخل صفحه اصلی قالب بعد از نوشتن &lt;script type=&quot;javascript/text&quot;&gt; و &lt;/script&gt; کدها را در بین تگ اسکریپت قرار دهید و هم در صفحه ای جدا با پسوند js ذخیره کنید <br/> بخش سوم کدهای داخل صفحه هستند که در جای مناسب برای نمایش قرار می گیرند شما می توانید رنگ پس زمینه و نوشته ها و متون را در این کد به راحتی تغییر دهید اما مراقب&nbsp;باشید ID و Class ها را تغییر ندهید </p> </div> <div class="contentdiv" style="background:teal;color:#00FFCC"> این نمونه یک متن آزمایشی است بر روی سومین اسلاید شما با تکثیر کلاس class="contentdiv" می توانید به تعداد دلخواه اسلاید داشته باشید <br/> برای تغییر عرض در کدهای CSS در خط اول (sliderwrapper) گزینه Widht:600px; را به مقدار دلخواه تغییر دهید <br /> و در خط دوم نیز این مقدار را با اختلاف ده پیکسل از اندازه ای که داده اید تغییر داده و در خط سوم نیز مجددا همان تغییر اولیه را انجام دهید <p dir="ltr" style="background:#fff;color:#660033;width:250px;padding:10px;border:1px #333 solid;"> .sliderwrapper{....<span style="color:red">width</span>:<span style="color:#0066CC">450px</span>}<br /> .sliderwrapper .contentdiv {....<span style="color:red"> width</span>:<span style="color:#0066CC">440px</span><span style="color:#999999">*/ (450-10=440)</span>}<br /> .pagination {....<span style="color:red">width</span>:<span style="color:#0066CC">450px</span>} </p></div></div> <div id="paginate-slider1" class="pagination" dir="rtl"> </div> <script type="text/javascript"> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["&laquo; &#1602;&#1576;&#1604;&#1740;", "&#1576;&#1593;&#1583;&#1740; &raquo;"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [true, 5000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script>