بحث هذه المدونة الإلكترونية

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

الخميس، 11 مايو 2017

مجموعه التسميات والمشاركات والارشيف بامر واحد بالبلوجر تطبيق مميز اربع اشكال Sidebar

Cara Memasang Multi Tab Sidebar Widget


========================================
قم بالبحث عن الكود التالي
]]></b:skin>
بالاستعانة بلوحة التحكم (CTRL+F)
بعد ان تجد الكود أضف مباشرة فوقه الكود التالي :
========================================
/ * Multi Tab Widget * /
.multitab-section {background: # fff; text-transform: uppercase; width: 100%}
.multitab-widget {list-style: none; margin: 0 0 10px; padding: 0}
.multitab-widget li {list-style: none; padding: 0; margin: 0; float: left}
.multitab-widget li a {background: # 22a1c4; color: # fff; display: block; padding: 15px; font-size: 13px; text-decoration: none}
.multitab-tab {border: 0; width: 33.3%; text-align: center}
.multitab-section h2, h3 .multitab-section, .multitab-section h4, h5 .multitab-section, .multitab-section h6 {display: none;}
.multitab-li widget solid # 22a1c4; font-size: 14px; text-transform: capitalize}

========================================
بعد ذالك قم بالبحث عن
</body>
و أضف فوقه الكود التالي
========================================
<Script type = 'text / javascript'>
// <! [CDATA [
// Multi tab widget
jQuery (document) .ready (function ($) {$ (". multitab-widget-content-widget-id"). hide (); $ ("ul.multitab-widget-content-tabs-id li: first a ") .addClass (" multitab-widget-current "). show (); $ (". multitab-widget-widget-content-id: first '). show (); $ ("ul.multitab-widget-content -tabs-id li a "). click (function () {$ (" ul.multitab-widget-content-tabs-id li a "). removeClass (" multitab-current widget-a "); $ (this) .addClass ("multitab-widget-current"); $ (". multitab-widget-content-widget-id"). hide (); var activeTab = $ (this) .attr ("href"); $ (activeTab ) .fadeIn (); return false;});});
//]]>
</ Script>

========================================
بعد ذالك قم بالبحث عن
<div id = 'sidebar-wrapper'>
و أضف تحته الكود التالي
========================================
<Div class = 'multitab-section'>
<Ul class = 'multitab multitab-widget-widget-content-tabs-id'>
<Li class = 'multitab-tab'> <a href='#multicolumn-widget-id1'>Latest</a> </ li>
<Li class = 'multitab-tab'> <a href='#multicolumn-widget-id2'>Tags</a> </ li>
<Li class = 'multitab-tab'> <a href='#multicolumn-widget-id3'>Archive</a> </ li>
</ Ul>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID1'>
<B: section class = 'sidebar' id = 'sidebartab1' preferred = 'yes' />
</ Div>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID2'>
<B: section class = 'sidebar' id = 'sidebartab2' preferred = 'yes' />
</ Div>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-id3'>
<B: section class = 'sidebar' id = 'sidebartab3' preferred = 'yes' />
</ Div>
</ Div>

========================================
واحفظ التطبيق
======================================== الدرس الثاني
2. ابحث بإستعمال CTRL+F عن
<b:skin/><[[
3. ضع الكود التالي قبله فوقه
========================================
/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

========================================
إبحث عن
<div id='sidebar-wrapper'>
5. ضع أسفله مباشرة الكود التالي :
========================================
<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();

$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>

<!-- Tab Widget 2 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>

</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<!-- Tab Widget [endt] -->

========================================
واعمل حفظ
======================================== التطبيق الثالث
ابحث عن
========================================
]]></b:skin>
========================================
فوقه حط
========================================
/*----- WMT Madam Via ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4126Oq8qHo4K9x6L3I8QiV2bX0GTNGkqf0sX7NnC1fnzN2SCcZxlssrJBmKf1EJVyah2WlkVp15vz0Qr0-T6_fTJ_Lt5aTnyP-Se0qnAuCsUb9FkZGR-7OEAJtgEvgZMrgk_5TI16aOU/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 27px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4126Oq8qHo4K9x6L3I8QiV2bX0GTNGkqf0sX7NnC1fnzN2SCcZxlssrJBmKf1EJVyah2WlkVp15vz0Qr0-T6_fTJ_Lt5aTnyP-Se0qnAuCsUb9FkZGR-7OEAJtgEvgZMrgk_5TI16aOU/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

========================================
ابحث عن
========================================
<div class='column-right-inner'>
او
<div id='sidebar-wrapper'>
========================================
تحته حط الكود
========================================
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();

$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Populer</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Label</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Arsip</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>


========================================
واحفظ التطبيق
======================================== الدرس الرابع -
البحث عن
========================================
]]></b:skin>
========================================
فوقه حط
========================================
/* Multi Tab Widget */
.multitab-section{background:transparent;text-transform:uppercase;width:100%;max-width:337px;z-index:-999}
.multitab-widget{list-style:none;margin:0 auto;background:#444;padding:10px 10px 40px;border-radius:4px 4px 0 0;border-bottom:4px solid #ff5050;width:100%}
.multitab-widget li{list-style:none;padding:0px;margin:0;float:left}
.multitab-widget li a{background:transparent;display:block;padding:10px 0;font:13px merriweather sans,sans-serif;font-weight:700;text-shadow:0 1px 1px #000;color:#999}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding:12px 0;margin:0;background:#ff5050;text-decoration:none;text-transform:uppercase;border-radius:4px 4px 0 0;text-shadow:0 1px 1px #000;color:#fff}

========================================
البحث عن
========================================
<div class='sidebar-inner'>
او
<div id='sidebar-wrapper'>
========================================
تحته حط الكود
========================================
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1' title='Popular'><i class='fa fa-star fa-fw'/>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2' title='Label'><i class='fa fa-tags fa-fw'/>Kategori</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3' title='Arsip'><i class='fa fa-tasks fa-fw'/>Arsip</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>

========================================
إقرأ المزيد

ضع أزرار المشاركة بجانب إعلانات ادسنس فوق مواضيع المدونة free social media icons

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

ضع أزرار المشاركة بجانب إعلانات ادسنس فوق مواضيع المدونة
لفعل ذالك كل ما عليك هو البحث عن وسم
======================
]]></b:skin>
======================
ثم فوقه ضع هذا الكود
======================
.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-right:solid 1px #DEDEDE; height:250px; padding-right:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(https://lh3.googleusercontent.com/-rvULyin06UY/VrrlDRGRTYI/AAAAAAAADnQ/kN1QJMGuua8/s24-Ic42/Twitter-algme3.png) no-repeat;}
.mini-facebook{background:url(
https://lh3.googleusercontent.com/-xaezKSkaCS4/VrrlDCDiNYI/AAAAAAAADnM/DAdBulsjihA/s24-Ic42/Technorati-algme3.png
) no-repeat;}
.mini-tweet{background:url(
https://lh3.googleusercontent.com/-_XUOGRDxqRY/VrrlC9s5EvI/AAAAAAAADnI/fLbzftNrElw/s24-Ic42/StumbleUpon-algme3.png) no-repeat;}
.mini-del{background:url(https://lh3.googleusercontent.com/-AR5qBGgUnnQ/VrrlCjmol0I/AAAAAAAADnA/wbYVgq79Vv0/s24-Ic42/Facebook-algme3.png) no-repeat;}
.mini-stumble{background:url(
https://lh3.googleusercontent.com/--UDb7vSqhF0/VrrlCsvuyII/AAAAAAAADm8/difMJoZj93Q/s24-Ic42/Digg-algme3.png) no-repeat;}
.mini-digg{background:url(https://lh3.googleusercontent.com/-WRha44XsynY/VrrlCjrnC9I/AAAAAAAADnE/MP7cfa-gyIA/s24-Ic42/Delicious-algme3.png) no-repeat;}
.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

======================
ثم بعد ذالك قم بالبحث عن وسم
======================
<data:post.body/>
======================
وكما العادة ستجد هذا الوسم مكرر لأكثر من مرة لدى عليك تجربة كل واحد على حدى حتى تجد الوسم الصحيح
وعند إيجاده ضع فوقه هذا الكود
======================
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'>
شاركنا بالنشر في هذي الروابط بلا تردد
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='&quot;http://www.delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'
title='Add To Del.icio.us'>ديليسيوس</a>
<a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'
title='Post this article on Twitter'>تويت ديس</a>
<a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Share On Facebook'>فايس بوك</a>
<a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Stumble This'>ستامب ديس ;)</a>
<a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>تشنوراتي</a>
<a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Digg This'>شارك على ديج</a>
</div>
</td>
</tr>
</table>
</div>
</b:if>

======================
وإن اردت وضعه أسفل المواضيع فقط ضعه أسفل الوسم
======================
تم الرفع لصور بالجميع ولكن غير مناسب لي
======================
اتمنى ان تعجيكم الأداة واي مشكلة تواجهك يمكنك وضعها في رد لتتم المساعدة على قدر المستطاع
بالتوفيق للجميع ودمتم في رعاية الله وحفظه 
إقرأ المزيد

الجمعة، 14 أبريل 2017

برمجه البسمله للبلوجر Basmala مقدمه وختاميه


ثم أضغط على ctrl+f لفتح مربع البحث
 ===============================
 ثم أبحث عن
 <data:post.body/>
 
 ===============================
 ستجد أكثر من واحدة تكون تقريبا الثالثة . دائما . والله أعلم
 ثم أضف قبله هذا الكود . لأضافة البسملة
 الكووووووووووووووووووود
 
 ===============================
 <div dir='rtl' style='text-align: center;' trbidi='on'>
 <div class='separator' style='clear: both; text-align: center;'>
 <a href="" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47vKvllrO1f7LmDxwPCY-LgN6paR2mPCgM697aSV-pXUrm2YYr6B_t-cnDTmee-XCUKM-tXYPhro5YJiCKoCsoYEPclxlMEIZsBXF2FUlkFwXXamQZQdfSGDhB8EUFyI-7Ub8g8HxddqV/s1600/%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D8%B3%D9%84%EF%BF%BD%258 1%D9%8A%D9%83%D8%A7%2B-%D8%A7%D9%84%D8%A8%D8%B3%D9%85%D9%84%D8%A9.png" alt="salafeka.blogspot.com" border="0" /></a>
 </div>
 
 ===============================
 ويمكنك تغيير الصورة فى أى وقت 
 ولأضافة خاتمة الى الموضوع
 أضف الكود التالى أسفله" بعده "
 الكووووووووووووووووووود
 
 ===============================
 <div dir='rtl' style='text-align: center;' trbidi='on'>
 <div class='separator' style='clear: both; text-align: center;'>
 <a href="" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47vKvllrO1f7LmDxwPCY-LgN6paR2mPCgM697aSV-pXUrm2YYr6B_t-cnDTmee-XCUKM-tXYPhro5YJiCKoCsoYEPclxlMEIZsBXF2FUlkFwXXamQZQdfSGDhB8EUFyI-7Ub8g8HxddqV/s1600/%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D8%B3%D9%84%EF%BF%BD%258 1%D9%8A%D9%83%D8%A7%2B-%D8%A7%D9%84%D8%A8%D8%B3%D9%85%D9%84%D8%A9.png" alt="salafeka.blogspot.com" border="0" /></a>
 </div>
 
 ===============================
 ويمكنك ان تضيف بدلا من الصورة كلمة عن طريق أضافة هذا الكود
 مثلا
 صلى على النبى
 تضيف الكود التالى بعده او أسفل منه
 ===============================
 <div style="text-align: center;">
 <span style="color: red;"><span style="font-size: large;">صلى على النبى</span></span></div>
 <div>
 
 ===============================
إقرأ المزيد

برمجه يوجد صوره لـوضع كلمه بسم الله الرحمن الرحيم او اي عباره بالمقدمه bsmlh

طريقة جعل صورة بسملة تضهر فوق كل موضوع تكتبه
وذالك دون تدخل منك وهي إضافة مميزة وجميلة وأنصح الجميع بها
أنا استعملت الصورة التي ترون فوق يمكنك تغيرها لاي صورة أردت
نبدأ على بركة الله
لتركيب هذه الإضافة إبحث في القالب عن الوسم

===============================
<data:post.body/>
===============================
ستجده مكرر أكثر من مرة وفي أغلب الاحيان الثانيه او التالثة هي المقصودة
ضع فوقها هذا الكود
===============================
<center><img alt='السلام عليكم' border='0' height='87' src='http://www.hpcnf.0fees.net/uploads/1426023251.png' width='300'/></center>
===============================
او يمكنك اخذ هذي الصوره للكويتين تصلح *_^
قم بتغيير رابط الصورة إن أردت ذالك وغير ايضا المقاسات بما يناسب
هذه الطريقة يمكن تطبيقها على صورة اخرى تضعها اسفل كل موضوع مثلا ختم خاص بمدونتك
او توقيع من تصميمك ولفعل ذالك ضع نفس الكود أسفل هذا الوسم
===============================
<center>بسم الله الرحمن الرحيم</center>
===============================
<center>بسم <font size="5">الله</font> الرحمن <font size="5">الرحيم</font></center>
===============================
ويمكن تنسخ الرابط لصوره ووضعها في كل موضوع بلا البرمجه

وهذي مجموعه لصور




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

برمجة مواضيع ذات صله مصحوبه بصور الموضوع على شكل قائمه افقيه متحركه No image available

ابحث عن

=====================
</head>
فوقه
=====================
<!--Related Posts with thumbnails Scripts and Styles Start alGme3.com-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://lh6.googleusercontent.com/-7i6csWuMUCc/VQSKzPl3WsI/AAAAAAAAAF0/RQ7A0rBQVS8/s80-no/no-img.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="روابط مشابهه";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End alGme3.com-->
=====================
ابحث عن
<div class='post-footer-line post-footer-line-1'>
تحته ضع هذا وسوف تجده مرتين
=====================
<!-- Related Posts with Thumbnails Code Start alGme3.com-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://algme3.blogspot.com'><img alt='Best Blogger Tips' src='https://lh6.googleusercontent.com/-7i6csWuMUCc/VQSKzPl3WsI/AAAAAAAAAF0/RQ7A0rBQVS8/s80-no/no-img.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End alGme3.com-->
=====================

غير مسمي المدونه
algme3
إقرأ المزيد

الخميس، 13 أبريل 2017

برمجه اضافه مشغل mp3 للمدونة بخمس الوان


البحث عن
 ==========================
 </head>
 ==========================
 فوقه ضع هذا الشكل الول البرتقالي
 ==========================
 <object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="275"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" /> <param name="FlashVars" value="playerID=audioplayer1&amp;bg=0xcccccc&amp;leftbg=0x2f2f2f&amp;lefticon=0xffffff&amp;rightbg=0xE8760D&amp;rightbghover=0xFF0000&amp;righticon=0xffffff&amp;righticonhover=0xffffff&amp;text=0xFF0000&amp;slider=0x191919&amp;track=0x333333&amp;border=0x292929&amp;loader=0xFF6666&amp;loop=no&amp;autostart=no&amp;soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3" /> <param name="quality" value="high" /> <param name="menu" value="false" /> <param name="wmode" value="transparent" /> </object>
 
 ==========================
 الشكل مميز الازرق والاخضر
 ==========================
 <object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=1&bg=0xffffff&lefticon=0xffffff&rightbg=0x0080ff&rightbghover=0x289728&righticon=0xffffff&leftbg=0x289728&righticonhover=0xffffff&text=0x0080ff&slider=0xffffff&track=0xffffff&border=0x289728&loader=0x0080ff&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>
 
 ==========================
 الوردي
 ==========================
 <object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x660033&lefticon=0xffffff&rightbg=0xC74988&rightbghover=0x660033&righticon=0xffffff&righticonhover=0xffffff&text=0x660033&slider=0xffffff&track=0x660033&border=0x660033&loader=0x660033&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>
 
 ==========================
 الاسود
 ==========================
 <object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x000000&lefticon=0xffffff&rightbg=0xcccccc&rightbghover=0x999999& righticon=0xffffff&righticonhover=0xffffff&text=0x000000&slider=0x666666&track=0x000000&border=0x000000&loader=0xffffff&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>
 
 ==========================
 <object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0xFF0000&lefticon=0xffffff&rightbg=0xFFCCCC&rightbghover=0xFF0000&righticon=0xffffff&righticonhover=0xffffff&text=0xFF0000&slider=0xffffff&track=0xFF0000&border=0xFF0000&loader=0xFF6666&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>
 
 ==========================
  
إقرأ المزيد

Add CSS Animation Share Button إضافة CSS الرسوم المتحركة

البحث عن

==================
]]></b:skin>
==================
فوقه مباشر اضع الكود التالي
==================
.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

==================
وتقوم ببحث عن
==================
<div class='post-footer'>
==================
وتضع الكود فوقه مباشر
==================
<div class='share_button'>
<ul>
<li><h1>
Share t
</h1></li>
<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQxeLukv9Y5lThvt_GrFW3UFnB4XYdDJFeKHJEcUSvWM9rGX-RMzjEO9bE2qBXWXr0KLLVEvK-EaOFPLcys5L4gew-W5mJ-ljZpKdiEHQtuko1Oypjul3gbHbfP9yEeTVHE8in-t3oNddc/s1600/Facebook.png"/></a></h2>
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnWn53z9exFcBGx4abnsLBGJLHyqfWlKs_npCWUle1hdFveaXgeBv2981L09x2wOWkcsL92ZdWjxED3wklw4EVZ65Upn5qHbGbCUK4_kxxYJUXbvbtvXOYJPUX_7Trwy8ZKVvFkL7VFH83/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>his page</h1></li>
<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrwz_r8-FdViNSVVfejz9yAlIruEUTV0Q9iuCSrBlIXY6ERScPhEJZjvQq4n2iilfBZoEC-GJdCS3gQAHxhyS_nx0GzDM6Os5qaJjgVguad-b78GdIrEgR-D682GHCk_kwVdqWJk4vsqt/s1600/Google-plus.png"/></a></h2>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjeABwxy4IykmjU-P0xktkt8Jd_U3C8Kq14Dz-YXN0QaHzbhgJviBSDXzYqFaXxhHtLFehMMtTAC-qsNgBSbhltwaAVAap-PKqlyHDgOE5E4CWO3mJKx2NbxCRGvUYhiBf_GKCyw6Aiao/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
إقرأ المزيد

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

إضافة زر الصعود لأعلى لمدونة بلوجر بسهولة وبسرعة
بشكل جميل وبطريقتين مختلفتين
السلام عليكم ورحمة الله وبركاته
إن شاء الله إخواني وأخواتي الكرام نوضح لك كيفية إضافة اداة مهمة جدا لمدونات بلوجر من أجل تصفح أسهل لزوار المدونة والتنقل داخل الموضوع خصوصا إن كان طويلا أو الصعود للقائمة الرئيسية بسرعة
وبالتالي تقلل الملل وتسهم في وجود الزوار لفترة أكبر في مدونتك
وهي أداة الصعود المباشر لأعلى المدونة
وحتى لا أطيل فتركيب الاداة سهل جدا ولا يأخذ وقتا منك
نبدأ بسم الله
(أولاً)
قم بحفظ نسخة من قالبك لتفادي أي أخطاء قد تواجهك .. مهم جدا
(ثانياً)
اذهب إلى قالب المدونة ومن ثم الى تحرير html ثم اضغط داخل القالب ومن الكيبورد اضغط ctrl+f
وابحث عن الكود التالي
</body>
ثم اضف قبله هذا الكود التالي
===========
< a href='#' id='backtotop'><img alt='back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYW0bslmzOx1Thyphenhyphennek3Dv52X9FrOpeRmCL1r3NPmxn7JnTcitwsfj6j_VeRNxGAB_1QTdf5L8mf3CQdDI-sHda2XfZ8WKAk2gKEvXEFmckM2v64yFWKIb3VtLKAhf-SBmKIsyV4syFkAGQ/s1600/9.png'/></a>

< script type='text/javascript'>

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=4;

var numshowpage=6;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

< /script>
===========
إذا أردت تغيير شكل الأيقونة غير ما باللون الأحمر برابط الصورة المراد وضعها
(ثالثاً)
ثم ابحث عن الكود التالي
]]></b:skin>
واضف قبله هذا الكود
==============
#backtotop {
padding:5px;
position:fixed;
bottom:5px;right:5px;
cursor:pointer;
}
 
==============
يمكنك عند هذا تم الرفع جرب واذا لا قم بالتالي اللى تحت
==============

هذه الأداة تكون في الجهة اليمنى فإذا أردتها بالجهة اليسرى غير left إلى right
أما الطريقة الثانية للإضافة
وهي أسهل بكثير مما سبقت
فما عليك هو أن تذهب للوجة تحكم مدونتك ثم تختار التخطيط
ثم تختار إضافة أداة ومن ثم إضافة وظيفة طرف ثالث HTML/JavaScript 
ثم تنسخ الكود التالي وتضعه في مربع أكواد الأداة
===============
< script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
< script
type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* Modified by www.helperblogger.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is
scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to
scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000,
fadeduration:[500, 100]},
controlHTML: '<img
 src="
https://lh6.googleusercontent.com/-eju6DAQA5LI/VMilpk7jfUI/AAAAAAAABW8/3wWKFn7GY2A/s57-no/curved-arrow-clipart.png"
/>', //HTML for control, which is auto wrapped in DIV w/
ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative
to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the
page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using
JavaScript
this.$control.css({opacity:0}) //hide control immediately
after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto :
parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
//check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest},
this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() -
this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() -
this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)?
true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1},
this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false &&
this.state.isvisible){
this.$control.stop().animate({opacity:0},
this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws &&
document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not
IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)?
(document.compatMode=="CSS1Compat"? $('html') : $('body')) :
$('html,body')
mainobj.$control=$('<div id="topcontrol">
'+mainobj.controlHTML+'</div>
')
.css({position:mainobj.cssfixedsupport? 'fixed' :
'absolute', bottom:mainobj.controlattrs.offsety,
right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest
&& mainobj.$control.text()!='') //loose check for IE6 and below,
plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()})
//IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword
+'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
< /script>

===============

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

وسلامتكم
إقرأ المزيد

الأربعاء، 1 مارس 2017

برمجه اضافة أزرار المعاينة والتحميل لتعطي لمواضيعك جمالية button download

طريقة تركيب أزرار المعاينة والتحميل :
ندخل على لوحة التحكم >> قالب >>تحرير html نضغط ctrl+f ونبحث عن

===========
]]></b:skin>
===========
ونضيف الكود التالي قبله :
===========
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

===========
وثم ننسخ الكود التالي ونضعه في التدوينة :
===========
<div id="wrap">
===========
<a href="3" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">معاينة</span>
<span class="title-hover">إضغط للمعاينة</span>
</a>
<a href="4" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">إضغط للتحميل</span>
</a>
</div>

===========
غير 3 برابط المعاينة
غير 4 برابط التحميل
إقرأ المزيد

تقدر باضافتها بامرين الجافا او البرمجه خمس اشكال لتشغيل الصوتيات بالفلاش بصيغه Mp3 player.swf

البحث عن

==========================
</head>
==========================
فوقه ضع هذا الشكل الول البرتقالي
==========================
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="275"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" /> <param name="FlashVars" value="playerID=audioplayer1&amp;bg=0xcccccc&amp;leftbg=0x2f2f2f&amp;lefticon=0xffffff&amp;rightbg=0xE8760D&amp;rightbghover=0xFF0000&amp;righticon=0xffffff&amp;righticonhover=0xffffff&amp;text=0xFF0000&amp;slider=0x191919&amp;track=0x333333&amp;border=0x292929&amp;loader=0xFF6666&amp;loop=no&amp;autostart=no&amp;soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3" /> <param name="quality" value="high" /> <param name="menu" value="false" /> <param name="wmode" value="transparent" /> </object>

==========================
الشكل مميز الازرق والاخضر
==========================
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=1&bg=0xffffff&lefticon=0xffffff&rightbg=0x0080ff&rightbghover=0x289728&righticon=0xffffff&leftbg=0x289728&righticonhover=0xffffff&text=0x0080ff&slider=0xffffff&track=0xffffff&border=0x289728&loader=0x0080ff&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

==========================
الوردي
==========================
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x660033&lefticon=0xffffff&rightbg=0xC74988&rightbghover=0x660033&righticon=0xffffff&righticonhover=0xffffff&text=0x660033&slider=0xffffff&track=0x660033&border=0x660033&loader=0x660033&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

==========================
الاسود
==========================
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x000000&lefticon=0xffffff&rightbg=0xcccccc&rightbghover=0x999999& righticon=0xffffff&righticonhover=0xffffff&text=0x000000&slider=0x666666&track=0x000000&border=0x000000&loader=0xffffff&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

==========================
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0xFF0000&lefticon=0xffffff&rightbg=0xFFCCCC&rightbghover=0xFF0000&righticon=0xffffff&righticonhover=0xffffff&text=0xFF0000&slider=0xffffff&track=0xFF0000&border=0xFF0000&loader=0xFF6666&loop=no&autostart=no&soundFile=https://sites.google.com/site/gamraiimohammednajd/mohammed.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

==========================
  
إقرأ المزيد

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

يمكنك تعديل الصوره الموجوده باي صوره تناسبك
البحث عن
=============
</head>
=============
وتضع الكود فوقه
=============
<script type='text/javascript'>//<![CDATA[ (function(a) { a.fn.lazyload=function(b){var c={threshold: 0,failurelimit:0,event:"scroll",effect:"show",container:window; }; if(b) { a.extend(c,b); } var d=this;if("scroll"==c.event) { a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){ } else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)) { a(this).trigger("appear"); } else { if(e++>c.failurelimit){return false; }}}); var f=a.grep(d,function(a) { return!a.loaded; }); d=a(f); })} this.each(function() { var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src")); } if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)) { if(c.placeholder){a(b).attr("src",c.placeholder); } else { a(b).removeAttr("src"); } b.loaded=false; } else { b.loaded=true; } a(b).one("appear",function() { if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true; }).attr("src",a(b).attr("original")); }}); if("scroll"!=c.event) { a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear"); }})}}); a(c.container).trigger(c.event);return this; }; a.belowthefold=function(b,c) { if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop(); } else { var d=a(c.container).offset().top+a(c.container).height(); } return d<=a(b).offset().top-c.threshold; }; a.rightoffold=function(b,c) { if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft(); } else { var d=a(c.container).offset().left+a(c.container).width(); } return d<=a(b).offset().left-c.threshold; }; a.abovethetop=function(b,c) { if(c.container===undefined||c.container===window){var d=a(window).scrollTop(); } else { var d=a(c.container).offset().top; } return d>=a(b).offset().top+c.threshold+a(b).height(); }; a.leftofbegin=function(b,c) { if(c.container===undefined||c.container===window){var d=a(window).scrollLeft(); } else { var d=a(c.container).offset().left; } return d>=a(b).offset().left+c.threshold+a(b).width(); }; a.extend(a.expr[":"], { "below-the-fold" :"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"; })})(jQuery);$(function() { $("img").lazyload({placeholder: "http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"; })})//]]></script>

=============
انتبه باخذ نسخه قبل التطبيق لتجنب من اي خطئ
التطبيق الثاني

اولا الدخول الى قالب مدونتك , ثم الى تحرير HTML ,  لاتنسى اخد نسخة احتياطية من قالبك
- اضغط عبر لوحة المفاتيح Ctrl + F ثم ابحث عن كود
======================
</head>
======================
- فوقة مباشرة قم باضافة كود سكريبت lazy load images  التالي :
======================
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]>
/* by : HaYeF al KuwaiT */
</script>

======================
إقرأ المزيد

برمجه خفيفه إضافة تعريف كاتب الموضوع بالصوره

البحث

=============================
]]></b:skin>
=============================
ضع الكود فوقه
=============================
/*الكاتب*/
.authorbio {
background-color: #F8F8F8;
margin-bottom: 20px;
margin-top: 30px;
padding: 20px 10px;
}
.authorbio img {
border: 3px solid #eee;
float: right;
height: 125px;
margin: 0 0 0 10px;
outline: 1px solid #ddd;
width: 125px;
}
.authorbio h6 {
display: inline-block;
margin: 0;
font-size: 17px;
margin-bottom: 8px;
}
.authorbio h6 strong {
color: #3cafe0;
font-size: 17px;
}
.authorbio span {
color: #666;
display: block;
font: 16px/2em tahoma;
margin: 0;
}
=============================
ابحث عن
<div class='post-footer'>
=============================
ضعه تحته هذا
=============================
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorbio'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuS3z2kTfTzklc17LPvkO7hqxWpkPiJ8Mg9F1-wRQjb8xZbKtlXY6hUzcAfxCfIDVjjODM7JlrZy6rb92vhriMKXUV4epOkUO6fFmpw0ziqWFgzw5t8tMpgPZdJHAlP8BntZjfUq7xjdc/s223-Ic42/blank_user.jpg'/>
<h6>الكاتب : <strong>اسم الكاتب هنا</strong></h6>
<span>نبذة عن كاتب الموضوع</span>
<div style='clear: both;'/>
</div>
</b:if>
=============================
إقرأ المزيد

شرح اضافة صورة الكاتب فى نتائج البحث

شرح اضافة صورة الكاتب فى نتائج البحث
شرح اضافة صورة الكاتب فى نتائج البحث
السلام عليكم
اهلا بكم اخوانى الكرام اليوم سوف نتطرق الى شرح كيفية اضافة صورة حسابك  الموجودة فى جووجل بلس فى نتائج البحث تبع مدونتك
اولا يجب علينا ان نقوم بربط حسابنا فى جوجل بلس ببلوجر باتباع هذا الرابط ربط المدونة بجوجل بلس بعد ان تقوم بالربط لا تنسى اضافة المدونة الى حسابك الشخصي فى جوجل بلس باتباع هذا الرابط اشارك في قم باضافة المدونة بالضغط على خيار contributes to 
عند الانتهاء من هذا باكمله ما علينا الان سوي بعض التعديلات فى قالب مدونتنا
اتجه نحو القالب ثم تحرير ثم ابحث عن
=========================
<head>
=========================
ثم تحته مباشرة اكتب
=========================
<link href='https://plus.google.com/15151515' rel='author'/>
=========================
استبدل هذا الرابط المشار اليه بللون الاحمر برابط حسابك فى جوجل بلس وهذه الطريقة لا انصحكم بها فى حال كنت انت المدون الوحيد فى المدونة
الطريقة الثانية والتى انصح باستخدامها
البحث عن
=========================
<div class='post-footer'>
=========================
وإضافة تحته مباشرة 
=========================
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
=========================
حيث ان الطريقة الثانية تظهر صورة كاتب المقالة وليس صورة صاحب المدونة اتمنى ان تكوونوا استفدتم واعجبكم الشرح اخوانى الكرام 
إقرأ المزيد

الاثنين، 27 فبراير 2017

منع النسخ في المدونه بالبوجر Prevent copying in Blogger بصوره

بس يمكنك النسخ من طريق الحاسوب

البحث عن
=======================
</body>
=======================
فوقه ضع هذا الكود : ويمكنك تغير الصوره
=======================
<script>
// Inhabilitar el bot?n derecho
var DADrccolor = "#F1F1F1";
var DADrcimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyesbTzQOzBMA18uqjbXU5HXMTcvv2LDJ0R2V-Fy-gE__yyZJNdOJyfcLDJl426KVigMskXTzmsrALNRvxJ6STvEiXUmmrgA8j2O-ZZPu4_vQJUfoqdwTDYB4OSnxJLYhsTB9AyoNwWCM/s300/superheroe.png";
</script>
<script type="text/javascript" src="http://yourjavascript.com/2122535051/antirightclick.js"></script>

=======================
إقرأ المزيد

اضافه الوان على الروابط لمدونه Rainbow قوس قوزح

البحث عن

===========================================
</body>
===========================================
وضع الكود فوقه
===========================================
<script type='text/javascript'>
//<![CDATA[
function doRainbow(e){0==act&&(act=1,objActive=e?e:event.srcElement,clrOrg=objActive.style.color,TimerID=setInterval("ChangeColor()",100))}function stopRainbow(){act&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function doRainbowAnchor(){if(0==act){for(var e=event.srcElement;"A"!=e.tagName&&"BODY"!=e.tagName&&(e=e.parentElement,"A"!=e.tagName&&"BODY"!=e.tagName););"A"==e.tagName&&""!=e.href&&(objActive=e,act=1,clrOrg=objActive.style.color,TimerID=setInterval("ChangeColor()",100))}}function stopRainbowAnchor(){act&&"A"==objActive.tagName&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function Mozilla_doRainbowAnchor(e){if(0==act){for(obj=e.target;"A"!=obj.nodeName&&"BODY"!=obj.nodeName&&(obj=obj.parentNode,"A"!=obj.nodeName&&"BODY"!=obj.nodeName););"A"==obj.nodeName&&""!=obj.href&&(objActive=obj,act=1,clrOrg=obj.style.color,TimerID=setInterval("ChangeColor()",100))}}function Mozilla_stopRainbowAnchor(){act&&"A"==objActive.nodeName&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function ChangeColor(){objActive.style.color=makeColor()}function makeColor(){return 0==elmS?(elmR=elmV,elmG=elmV,elmB=elmV):(t1=elmV,t2=(255-elmS)*elmV/255,t3=elmH%60,t3=(t1-t2)*t3/60,60>elmH?(elmR=t1,elmB=t2,elmG=t2+t3):120>elmH?(elmG=t1,elmB=t2,elmR=t1-t3):180>elmH?(elmG=t1,elmR=t2,elmB=t2+t3):240>elmH?(elmB=t1,elmR=t2,elmG=t1-t3):300>elmH?(elmB=t1,elmG=t2,elmR=t2+t3):360>elmH?(elmR=t1,elmG=t2,elmB=t1-t3):(elmR=0,elmG=0,elmB=0)),elmR=Math.floor(elmR).toString(16),elmG=Math.floor(elmG).toString(16),elmB=Math.floor(elmB).toString(16),1==elmR.length&&(elmR="0"+elmR),1==elmG.length&&(elmG="0"+elmG),1==elmB.length&&(elmB="0"+elmB),elmH+=rate,elmH>=360&&(elmH=0),"#"+elmR+elmG+elmB}var rate=20;document.getElementById&&(window.onerror=new Function("return true"));var objActive,act=0,elmH=0,elmS=128,elmV=255,clrOrg,TimerID;document.all?(document.onmouseover=doRainbowAnchor,document.onmouseout=stopRainbowAnchor):document.getElementById&&(document.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT),document.onmouseover=Mozilla_doRainbowAnchor,document.onmouseout=Mozilla_stopRainbowAnchor);
//]]>
</script>

======================
قوس قسح
====================== وهذا تطبيق اخر
البحث عن
<head>
تحته مباشر
======================
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

======================
إقرأ المزيد

برمجة اضافة Using a Calendar Icon as the Post Date Header باستخدام أيقونة التقويم باعتباره رأس التاريخ المشاركة

التاريخ الميلادي ويمكنك التعديل
[smallpreview.png]
تنزيل ما يناسبك
orangevolt calendar widget
التطبيق البحث عن
<head>
=====================
تحته ضع الكود
=====================
<!-- orangevolt calendar widget -->
<script src='http://anniebluesky.googlepages.com/fastinit.js'/>
<script src='http://anniebluesky.googlepages.com/prototype-1.5.0.js'/>
<script src='http://anniebluesky.googlepages.com/orangevolt-calendar.js'/>
<link href='http://anniebluesky.googlepages.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

=====================
وقم بالبحث عن هذا
=====================
<data:post.dateHeader/>
=====================
واستبدله بهذا
=====================
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>

=====================
واخيرا قم بالبحث عن
=====================
]]></b:skin>
=====================
واضف الكود هذا فوقه
=====================
/* Calendar
----------------------------------------------- */
span.cal {
background:transparent url('CALENDAR IMAGE. URL') no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}

span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}

span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}

=====================

وبالتوفيق
إقرأ المزيد