Ezz Tech

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

<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA6mc7Kg_vYVkPF4SD9leaf-58j0KiIDkYX7R_vFYtD0g7UJKOg78wsF6jo2IBo6fpaS-RUeLOK_cqoyzCCXszxEug2UxGdiyBKU0-7bhgjrC_Azcll3aqyz-5ypQThrPPYu9EgKxWbX1r/s1600/Touch+Me.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA6mc7Kg_vYVkPF4SD9leaf-58j0KiIDkYX7R_vFYtD0g7UJKOg78wsF6jo2IBo6fpaS-RUeLOK_cqoyzCCXszxEug2UxGdiyBKU0-7bhgjrC_Azcll3aqyz-5ypQThrPPYu9EgKxWbX1r/s1600-rw/Touch+Me.gif" /></a></div>
<div style="text-align: justify;">
<span style="color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="font-size: 14px; line-height: 22.390625px;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="font-size: 14px; line-height: 22.390625px;">السلام عليكم ورحمة الله وبركاته :<br />كنا قد شرحنا إضافة  </span></span><a href="http://ezzeldin-ahmed.blogspot.com/2011/09/blog-post_19.html" style="color: #be5016; font-family: Oswald; font-size: 21px; line-height: 1.2em; text-align: right; text-decoration: none;">تابعني "متحركة صعودا وهبوطا مع حركة الزائر" الخاصة بمواقع التواصل الإجتماعية</a> <span style="color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="font-size: 14px; line-height: 22.390625px;"><br /></span></span><span style="color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="font-size: 14px; line-height: 22.390625px;">واليوم ان شاء الله سنشرح إضافة سهلة جدا وبسيطة لكنها مختلفة تجزب انتباه الزائر عندما يمر عليها الماوس</span></span></div>
<div style="text-align: justify;">
<span style="color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="font-size: 14px; line-height: 22.390625px;"><br /></span></span></div>
<div style="text-align: justify;">
<span style="color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="font-size: 14px; line-height: 22.390625px;">ادخل الى لوحة التحكم في مدونتك<br />اذهب الى التخطيط واختار<span style="background-color: white;"> </span></span></span><span style="background-color: white; color: #222222; font-family: 'PT Sans Narrow'; font-size: 17px; line-height: 22.09375px; text-align: right;">اضافة أداة </span><span style="background-color: white; color: blue; font-family: 'PT Sans Narrow'; font-size: 17px; line-height: 22.09375px; text-align: right;">javascript/html</span><span style="background-color: white; color: #222222; font-family: 'PT Sans Narrow'; font-size: 17px; line-height: 22.09375px; text-align: right;"> بدون عنوان ثم قم بوضع هذا الكود داخلها.</span></div>
<div style="text-align: justify;">
<br />
<br />
<span style="background-color: #ffe599; color: #666666;"><style></span><br />
<span style="background-color: #ffe599; color: #666666;">/*--------B2W Touch Me Sharing Widget ------*/</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a {</span><br />
<span style="background-color: #ffe599; color: #666666;">display:block;</span><br />
<span style="background-color: #ffe599; color: #666666;">height:50px;</span><br />
<span style="background-color: #ffe599; color: #666666;">width:50px;</span><br />
<span style="background-color: #ffe599; color: #666666;">padding:0 4px;</span><br />
<span style="background-color: #ffe599; color: #666666;">float:left;</span><br />
<span style="background-color: #ffe599; color: #666666;">background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;</span><br />
<span style="background-color: #ffe599; color: #666666;">-webkit-transition: ease-in 0.2s all;</span><br />
<span style="background-color: #ffe599; color: #666666;">-moz-transition: ease-in 0.2s all;</span><br />
<span style="background-color: #ffe599; color: #666666;">-o-transition: ease-in 0.2s all;</span><br />
<span style="background-color: #ffe599; color: #666666;">-ms-transition: ease-in 0.2s all;</span><br />
<span style="background-color: #ffe599; color: #666666;">transition: ease-in 0.2s all;</span><br />
<span style="background-color: #ffe599; color: #666666;">cursor:pointer;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.googleplus {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px -58px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.googleplus:hover {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px 0px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.twitter {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px -290px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.twitter:hover {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px -232px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.facebook {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px -406px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.facebook:hover {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px -348px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.rss {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px -174px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;">.touchme a.rss:hover {</span><br />
<span style="background-color: #ffe599; color: #666666;">background-position: 0px -116px;</span><br />
<span style="background-color: #ffe599; color: #666666;">}</span><br />
<span style="background-color: #ffe599; color: #666666;"></style></span><br />
<br />
<span style="background-color: #ffe599; color: #666666;"><div class='touchme'></span><br />
<span style="background-color: #ffe599; color: #666666;"></span><br />
<span style="background-color: #ffe599; color: #666666;"><a class='rss' href="</span><span style="background-color: #ffe599; color: red;">ضع هنا رابط الخلاصة</span><span style="background-color: #ffe599; color: #666666;">" rel='external nofollow' target='_blank'></a></span><br />
<span style="background-color: #ffe599; color: #666666;"></span><br />
<span style="background-color: #ffe599; color: #666666;"><a class='googleplus' href="</span><span style="background-color: #ffe599; color: red;">ضع هنا رابط جوجل بلس</span><span style="background-color: #ffe599; color: #666666;">" rel='nofollow' target='_blank'></a></span><br />
<span style="background-color: #ffe599; color: #666666;"></span><br />
<span style="background-color: #ffe599; color: #666666;"><a class='facebook' href="</span><span style="background-color: #ffe599; color: red;">ضع هنا رابط الفيسبوك</span><span style="background-color: #ffe599; color: #666666;">" rel='nofollow' target='_blank'></a></span><br />
<span style="background-color: #ffe599; color: #666666;"></span><br />
<span style="background-color: #ffe599; color: #666666;"><a class='twitter' href="</span><span style="background-color: #ffe599; color: red;">ضع هنا رابط تويتر</span><span style="background-color: #ffe599; color: #666666;">" rel='nofollow' target='_blank' ></a></span><br />
<span style="background-color: #ffe599; color: #666666;"></div></span><br />
<div>
<br /></div>
<br />
<br /></div>
<pre style="background-color: white; color: #191919; font-size: 14px; line-height: 22.390625px; text-align: justify;"><span style="color: #003366;">ثم قم بوضع الروابط الخاصة بك - واخيرا اضغط على حفظ </span></pre>
<pre style="background-color: white; color: #191919; font-size: 14px; line-height: 22.390625px; text-align: justify;"><span style="color: #003366;">
</span></pre>
<pre style="background-color: white; color: #191919; font-size: 14px; line-height: 22.390625px; text-align: justify;"><span style="color: #003366;">مبروك الاضافة الجديدة</span></pre>
<pre style="background-color: white; color: #191919; font-size: 14px; line-height: 22.390625px; text-align: justify;"><span style="color: #003366;">
</span></pre>
<span style="background-color: white; color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 22.390625px; text-align: justify;">أتمنى تكون الإضافة عجبتكم.  </span><img loading="lazy" src="http://statics.plurk.com/bac8c8392f7ca8f5ac74612be4d08b74.gif" style="background-color: white; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 22.390625px; padding: 0px; text-align: justify;" /><span style="background-color: white; color: #191919; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 22.390625px; text-align: justify;"> </span></div>

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

السلام عليكم ورحمة الله وبركاته : كنا قد شرحنا إضافة تابعني "متحركة صعودا وهبوطا مع حركة الزائر" الخاصة بمواقع التواصل ال...

مزيد من المعلومات »

اضافة اخر المواضيع مع خيار التنقل - التالي والسابق والرئيسية

<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
السلام عليكم ورحمة الله وبركاتة . </div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
اضافة اليوم في اخر اصدار لها مع خيار للتنقل بمعنى انه يتم عرض عدد معين من التدوينات عباره عن رابط ومختصر وصوره للموضوع واسفل الاداه خيار التنقل للامام او للخلف مع خيار اوسط بالرجوع لصفحة الاضافه الرئيسيه . </div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
الصوره المرفقه توضح شكل الاضافه </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvrzX07BwkcQENHtJfPao0hGB_m7SgBk6k31_THjNkVEQjQHgvaruDON7rRJwaUkYpXUm123saguxyxAS4qe8iHjQ5Fdn3hN_VuRmjfen-xeAroziaxAKyDWd9WTZyPo0Hzb57oEiGbaZK/s1600/new+recen+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvrzX07BwkcQENHtJfPao0hGB_m7SgBk6k31_THjNkVEQjQHgvaruDON7rRJwaUkYpXUm123saguxyxAS4qe8iHjQ5Fdn3hN_VuRmjfen-xeAroziaxAKyDWd9WTZyPo0Hzb57oEiGbaZK/s1600-rw/new+recen+posts.png" /></a></div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
 والان الى شرح طريقة التركيب على مدونات بلوجر</div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
الاصدار الاخير من اضافة اخر المواضيع مع خيار التنقل الجديد : اول شئ نقوم بتسجيل الدخول الى لوحة تحكم بلوجر ثم الذهاب الي وضع تحرير HTML ثم الضغط على علامة توسيع القالب ومن ثم البحث عن الوسم التالي <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">]]></b:skin> </strong><span style="background-color: transparent; border: 0px; color: #cc0000; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: black; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ثم نضع قبله مباشرة الكود الموجود بالاسفل</span></span></div>
<br />
<br />
<blockquote style="background-color: #f7f7f7; background-image: url(http://www.tqarob.com/wp-content/themes/tqarobmag/images/blockquote.png); background-position: 100% 3px; background-repeat: no-repeat no-repeat; border: 0px; color: #9b9b9b; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; outline: 0px; padding: 1px 35px 1px 0px; quotes: none; text-align: start; vertical-align: baseline;">
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#terbaru{margin:0px}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
.mas-elemen img{background:#999;padding:4px;float:left;height:<strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">70px</span></strong>;margin-right:8px;width:<strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">70px</span></strong>}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:300!important;margin:0;color:#111}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
.mas-elemen:hover{background-color:#c3c3c3}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvjNcsW-3aNZ0gYygysXAzJCJcHl1wr7yYjZq8VuYtLv-JNIwnA_lxGaO4yyIGWi9nICYegUl0UXELQnA-2U7A0_r-fRn3FrpsJijod5Ul1_0_41C_kSJi00zuMx0DKdIEIRZyOtIQcc4/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed:hover{background-color:#c3c3c3}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed span{padding:5px 10px}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed .next{float:right}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed .previous{float:left}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed .home{text-align:center}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}</div>
</blockquote>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
<span style="background-color: transparent; border: 0px; color: #cc0000; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: black; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">يعد ذلك نبحث مجددا عن هذا الوسم </span></span><strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></head> </strong><span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: black; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ونضع قبلة مباشرة الكود التالي</span></span></div>
<blockquote style="background-color: #f7f7f7; background-image: url(http://www.tqarob.com/wp-content/themes/tqarobmag/images/blockquote.png); background-position: 100% 3px; background-repeat: no-repeat no-repeat; border: 0px; color: #9b9b9b; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; outline: 0px; padding: 1px 35px 1px 0px; quotes: none; text-align: start; vertical-align: baseline;">
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<script type=’text/javascript’><span style="background-color: transparent; border: 0px; color: black; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br />//<![CDATA[<br />var numfeed = 5;<br />var startfeed = 0;<br />var urlblog = "http://ezzeldin-ahmed.blogspot.com/";<br />var charac = 100;<br />var urlprevious, urlnext;</span></div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
function maskolisfeed(johny,banget){<br />var showfeed = johny.split("<");<br />for(var i=0;i<showfeed.length;i++){<br />if(showfeed[i].indexOf(“>”)!=-1){<br />showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(“>”)+1,showfeed[i].length);<br />}<br />}<br />showfeed =  showfeed.join(“”);<br />showfeed = showfeed.substring(0,banget-1);<br />return showfeed;<br />}<br />function showterbaru(json) {<br />var entry, posttitle, posturl, postimg, postcontent;<br />var showblogfeed = “”;<br />urlprevious = “”;<br />urlnext = “”;<br />for (var k = 0; k < json.feed.link.length; k++) {<br />if (json.feed.link[k].rel == ‘previous’) {<br />urlprevious = json.feed.link[k].href;<br />}<br />if (json.feed.link[k].rel == ‘next’) {<br />urlnext = json.feed.link[k].href;<br />}<br />}<br />for (var i = 0; i < numfeed; i++) {<br />if (i == json.feed.entry.length) { break; }<br />entry = json.feed.entry[i];<br />posttitle = entry.title.$t;<br />for (var k = 0; k < entry.link.length; k++) {<br />if (entry.link[k].rel == ‘alternate’) {<br />posturl = entry.link[k].href;<br />break;<br />}<br />}<br />if (“content” in entry) {<br />postcontent = entry.content.$t;<br />} else if (“summary” in entry) {<br />postcontent = entry.summary.$t;<br />} else {<br />postcontent = “”;<br />}<br />if (“media$thumbnail” in entry) {<br />postimg = entry.media$thumbnail.url;<br />} else {<br />postimg = “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqq8Rp90oc0wwiGFGtlCHo_MgLAa9-q0Dif6W6YSLDfuK49JEq_xrAyTxPRjbcoxYhEceCBt6l7EUaPeAtrMojqLZsHqfRqTKEkbZUID2WS-tbhexJqw07lamcrCZCs-DcCBCbuT0h_Obo/d/noimagethumb.gif”;<br />}<br />showblogfeed += “<div class=’mas-elemen’>”;<br />showblogfeed += “<a href=’” + posturl + “‘ target=’_blank’><img src=’” + postimg + “‘ /></a>”;<br />showblogfeed += “<h6><a href=’” + posturl + “‘>” + posttitle + “</a></h6>”;<br />showblogfeed += “<p>” + maskolisfeed(postcontent,charac) + “…</p>”;<br />showblogfeed += “</div>”;<br />}<br />document.getElementById(“terbaru”).innerHTML = showblogfeed;<br />showblogfeed = “”;<br />if(urlprevious) {<br />showblogfeed += “<a href=’javascript:navigasifeed(-1);’ class=’previous’>&#9668; السابق</a>”;<br />} else {<br />showblogfeed += “<span class=’noactived previous’>&#9668; السابق</span>”;<br />}<br />if(urlnext) {<br />showblogfeed += “<a href=’javascript:navigasifeed(1);’ class=’next’>التالي&#9658;</a>”;<br />} else {<br />showblogfeed += “<span class=’noactived next’>التالي&#9658;</span>”;<br />}<br />showblogfeed += “<a href=’javascript:navigasifeed(0);’ class=’home’>الرئيسية</a>”;<br />document.getElementById(“mas-navigasifeed”).innerHTML = showblogfeed;<br />}</div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
function navigasifeed(url){<br />var p, parameter;<br />if(url==-1) {<br />p = urlprevious.indexOf(“?”);<br />parameter = urlprevious.substring(p);<br />} else if (url==1) {<br />p = urlnext.indexOf(“?”);<br />parameter = urlnext.substring(p);<br />} else {<br />parameter = “?start-index=1&max-results=” + numfeed + “&orderby=published&alt=json-in-script”<br />}<br />parameter += “&callback=showterbaru”;<br />incluirscript(parameter);<br />}<br />function incluirscript(parameter) {<br />if(startfeed==1) {removerscript();}<br />document.getElementById(“terbaru”).innerHTML = “<div id=’mas-loading’></div>”;<br />document.getElementById(“mas-navigasifeed”).innerHTML = “”;<br />var archievefeed = urlblog + “/feeds/posts/default”+ parameter;<br />var terbaru = document.createElement(‘script’);<br />terbaru.setAttribute(‘type’, ‘text/javascript’);<br />terbaru.setAttribute(‘src’, archievefeed);<br />terbaru.setAttribute(‘id’, ‘MASLABEL’);<br />document.getElementsByTagName(‘head’)[0].appendChild(terbaru);<br />startfeed = 1;<br />}<br />function removerscript() {<br />var elemen = document.getElementById(“MASLABEL”);<br />var parent = elemen.parentNode;<br />parent.removeChild(elemen);<br />}<br />onload=function() { navigasifeed(0); }<br />//]]><br /></script><span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: black; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></span></span></div>
</blockquote>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 10px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
<br /></div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
 مع مراعاة تغيير <span style="background-color: transparent; border: 0px; color: black; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: 11px; line-height: normal;">http://ezzeldin-ahmed.blogspot.com</span> داخل الكود السابق برابط مدونتك </span>ثم نقوم بحفظ القالب والذهاب بعد ذلك الى عناصر تصميم الصفحه حيث تكمن الاضافات ونقوم بفتح اداه جديد من نوع جافا سكربت ونضع فيها الكود الموجود في الاسفل مع مراعاة ان يتم وضع الكود في المكان المرغوب ظهور الاضافه فيه ويستحب ان يكون في السايدبار اى القائمه الجانبيه</div>
</div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div id=”terbaru”></div></div>
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div id=”mas-navigasifeed”></div></div>
</div>
<div style="background-color: #f7f7f7; border: 0px; color: #323232; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">
<div style="background-color: transparent; border: 0px; margin-bottom: 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
نقوم بعد ذلك بحفظ الاداه ومعاينة الصفحه الرئيسية للمدونه .. بالتوفيق للجميع .</div>
</div>
</div>

اضافة اخر المواضيع مع خيار التنقل - التالي والسابق والرئيسية

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

مزيد من المعلومات »

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

<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div dir="rtl" style="background-color: white; border: 0px; font-family: Tahoma, arial, Helvetica; line-height: 24px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFZRTNItorZOxeFAzBphgF1ytNx-S0NFli9fhCE8FJd3rZQprd8iuOo04ItktKcSFuO-GlMci6Jdck6IDn2APZOCn-4ZXChlWZi0C0w18qjIiIS-wYiM9i3iH_s_PoKlWDbV1OZu3fuRL/s1600/32412950mx5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFZRTNItorZOxeFAzBphgF1ytNx-S0NFli9fhCE8FJd3rZQprd8iuOo04ItktKcSFuO-GlMci6Jdck6IDn2APZOCn-4ZXChlWZi0C0w18qjIiIS-wYiM9i3iH_s_PoKlWDbV1OZu3fuRL/s320-rw/32412950mx5.jpg" width="320" /></a></div>
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;"><br /></span></div>
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;">باسم الله الرحمن الرحيم ,<span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;">السلام عليكم ورحمة الله  ,<span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;">ھذا شرح لطريقة <b style="border: 0px; margin: 0px; outline: none; padding: 0px;">تغيير شكل مؤشر الماوس على مدونات بلوجر</b> <span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;">فهذه الطريقة تمكننا من تغيير شكل المؤشر حسب الرغبة وجعله مناسب لمحتوى المدونة  <span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;">نبدأ باسم الله تعالى :</span></span></span></span><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;">نذھب الى احد المواقع التي تعطي كود مؤشر مجاني لإختيار شكل مؤشر مناسب لمدونتنا ,<b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; color: #9a3300; font-family: TimesNewRoman, Bold; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span lang="AR-SA" style="border: 0px; margin: 0px; outline: none; padding: 0px;">ھذا احد المواقع المجانية يوجد به الكثير من المؤشرات الجميلة</span><span style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span lang="FR" style="border: 0px; margin: 0px; outline: none; padding: 0px;">,</span></span></span><span style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span lang="FR" style="border: 0px; margin: 0px; outline: none; padding: 0px;"> <b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; margin: 0px; outline: none; padding: 0px;">الدخول للموقع من <a href="http://www.cursors-4u.com/" style="border: 0px; color: #006699; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">ھنا</a></span></span></b></span></span></span></span></span></span></b></span></span></span></span></span></span><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></div>
<div dir="rtl" style="border: medium none; margin: 0px; outline: none; padding: 0px; text-align: center;" trbidi="on">
</div>
<div align="right" dir="rtl" style="border: medium none; margin: 0px; outline: none; padding: 0px; text-align: center;" trbidi="on">
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: right;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></div>
<div class="separator" style="border: 0px; clear: both; margin: 0px; outline: none; padding: 0px;">
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">نقوم باختيار الشكل المناسب لنا ,على سبيل المثال اخترنا ھذا الشكل :</b></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px;">
<div class="separator" style="border: 0px; clear: both; margin: 0px; outline: none; padding: 0px;">
</div>
<div class="separator" style="border: 0px; clear: both; margin: 0px; outline: none; padding: 0px;">
<a href="http://www.m5zn.com/uploads/2010/10/25/photo/gif/102510181008bu1ltr70.gif" imageanchor="1" style="border: 0px; color: #006699; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none;" target="_blank"><img alt="image alt" border="0" loading="lazy" src="http://www.m5zn.com/uploads/2010/10/25/photo/gif/102510181008bu1ltr70.gif" style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></a></div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: right;">
<div class="separator" style="border: 0px; clear: both; margin: 0px; outline: none; padding: 0px; text-align: center;">
</div>
</div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<div class="separator" style="border: 0px; clear: both; margin: 0px; outline: none; padding: 0px;">
</div>
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">سوف نجد اسفل الشكل ضمن تبويب <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(Universal)</span> الكود الخاص بهذا المؤشر </b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><b style="border: 0px; margin: 0px; outline: none; padding: 0px;">نقوم نسخه</b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><div style="border: 0px; margin: 0px; outline: none; padding: 0px;">
 </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">بعد اختيار الشكل المناسب<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" />نذھب الى مدونة بلوقر ونقوم بتسجيل الدخول لحسابنا<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" />ثم بعد ذلك نذھب الى <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(لوحة التحكم الرئيسية)</span> ثم <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(تصميم)</span> ثم <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(تحر</span></b><b style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">ي</b><b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">ر Html)</span></b></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
</div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
 </div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<div class="separator" style="border: 0px; clear: both; margin: 0px; outline: none; padding: 0px;">
</div>
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">نقوم بتفعيل حقل <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(توسيع قوالب عناصر واجهة المستخدم)</span></b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;"></span></b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></div>
</div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<a href="http://www.m5zn.com/uploads/2010/10/25/photo/102510181010863809s9qo10zjp3wj.jpg" style="border: 0px; color: #006699; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank"><img alt="image alt" class="borders" height="42" loading="lazy" src="http://www.m5zn.com/uploads/2010/10/25/photo/102510181010863809s9qo10zjp3wj.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 3px 6px; -webkit-transform: rotate(2deg); -webkit-transition: -webkit-transform 0.15s linear; border: 0px; margin: 0px; outline: none; padding: 5px;" width="320" /></a> </div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">الان نضغط على <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(Ctrl+F)</span> ونبحث على ھذا الكود <body></b></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<b style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;"></b></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<a href="http://www.m5zn.com/uploads/2010/10/25/photo/102510181044ouj8aa3dpak3736urimz.jpg" style="border: 0px; color: #006699; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank"><img alt="image alt" class="borders" loading="lazy" src="http://www.m5zn.com/uploads/2010/10/25/photo/102510181044ouj8aa3dpak3736urimz.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 3px 6px; -webkit-transform: rotate(2deg); -webkit-transition: -webkit-transform 0.15s linear; border: 0px; margin: 0px; outline: none; padding: 5px;" /></a> </div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
</div>
</div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
 </div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">الان نقوم بلصق كود المؤشر الذي نسخناه من موقع <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;"><a href="http://www.cursors-4u.com/" target="_blank">cursors-4u</a></span></b></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="color: #4c4c4c;">مباشرة اسفل</span><span style="color: red;"> منه (تحته)</span></b></div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
<br /></div>
</div>
</div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">  بعد ذلك نقوم بحذف الجزء الزائد من الكود وھو ليبل<span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;"> (label)</span></b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><b style="border: 0px; margin: 0px; outline: none; padding: 0px;"> اعلاني لموقع <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(<a href="http://www.cursors-4u.com/" target="_blank">cursors-4u</a>)</span></b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><b style="border: 0px; margin: 0px; outline: none; padding: 0px;">يظهر في أعلى واجهة المدونة</b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><b style="border: 0px; margin: 0px; outline: none; padding: 0px;">ھذا ھو</b></div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
</div>
</div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><a href="http://www.m5zn.com/uploads/2010/10/25/photo/102510181048xu1flr9ycszmr8xq8vlq.jpg" style="border: 0px; color: #006699; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank"><img alt="image alt" class="borders" loading="lazy" src="http://www.m5zn.com/uploads/2010/10/25/photo/102510181048xu1flr9ycszmr8xq8vlq.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 3px 6px; -webkit-transform: rotate(2deg); -webkit-transition: -webkit-transform 0.15s linear; border: 0px; margin: 0px; outline: none; padding: 5px;" /></a></div>
</div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><b style="border: 0px; margin: 0px; outline: none; padding: 0px;">ملاحظة : الجزء الزائد عادتاً يبدأ مباشرة بعد</b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><blockquote style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcXh6YneeDIwXMhIea-7tl9-BBoAw_f2wyPhCeDHmF9AqHGQDLkjZF0ogX1NrYEi7GN1bdF4M70qLsRZB0UXr-CokWZeaboeeme-h3r8AsUP7swwwfMCHbbOMzdTSPqe3zaMv4sdsss1w/); background-position: 50% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(207, 207, 207); margin: 10px; outline: none; padding: 10px;">
<div dir="ltr" style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;"><style/></span></b></div>
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;"></b></blockquote>
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;"><span style="border: 0px; color: black; margin: 0px; outline: none; padding: 0px;">فنقوم بتحديد كود الليبل الاعلاني و</span></span><span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">نحذفه</span></b></div>
</div>
</div>
<div style="border: 0px; color: #4c4c4c; margin: 0px; outline: none; padding: 0px; text-align: center;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><b style="border: 0px; margin: 0px; outline: none; padding: 0px;">بعد ما نقوم <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">بحذف</span> الكود المحدد سابقا <br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></b></div>
</div>
</div>
<div style="background-color: white; border: 0px; color: #4c4c4c; font-family: Tahoma, arial, Helvetica; line-height: 24px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;">الان نضغط على <span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">(حفظ القالب)</span> ليتم حفظ التغييرات.</b></div>
<div>
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><br /></b></div>
</div>

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

باسم الله الرحمن الرحيم , السلام عليكم ورحمة الله , ھذا شرح لطريقة تغيير شكل مؤشر الماوس على مدونات بلوجر فهذه...

مزيد من المعلومات »

اضافة ازرار النشر جوجل ، الفيسبوك، تويتر منزلقة وعائمة نزولا وصعودا

<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IMWZXKMOLKwrrKIkd3VWKezXr_TnC6ToSyJ03TITHP-Ol6nr71RB_fgUWSFlimV03s1MHGLg-E4uwEXEYNRGKTkLhU3gv64enaPaEJUlkGrPS_CgmjYEPtGZfsZVLaIvawGBKnsWGIgT/s1600/Ezzeldin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IMWZXKMOLKwrrKIkd3VWKezXr_TnC6ToSyJ03TITHP-Ol6nr71RB_fgUWSFlimV03s1MHGLg-E4uwEXEYNRGKTkLhU3gv64enaPaEJUlkGrPS_CgmjYEPtGZfsZVLaIvawGBKnsWGIgT/s1600-rw/Ezzeldin.png" /></a></div>
<div style="text-align: center;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: center;">
<span style="font-size: large;">السلام عليكم</span></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">اقدم لكم اليوم هذه الاضافة الهامة لنشر المواضيع في المواقع الاجتماعية. تعتبر هذه الاضافة جديدة حيث اصبحت تنتقل نزولا وصعودا متزامنة مع حركة صفحة الواب على عكس الاضافة القديمة التي لا تنزلق مع حركة المستخدم. سجل دخول الي لوحة تحكم مدونتك ثم اذهب الي عناصر تصميم الصفحه وقم بفتح اداه جديده من نوع جافا سكربت .. ليس مهما مكان الاداه ولا تضع لها اسما ثم قم بوضع الكود الموجود بالاسفل بداخل الاداه.</span><br />
<div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></b></span></div>
<blockquote class="tr_bq" style="background-color: #fbfbd8; border: 1px dashed rgb(227, 229, 86); color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; height: 100px; line-height: 1.3em; margin: 0px; outline: 0px; overflow: auto; padding: 10px; quotes: none; vertical-align: baseline; width: 570px;">
<span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><style><br />/*-------MBT Floating Counters------------*/<br />#floatdiv {<br />    position:absolute;<br />    width:94px;<br />    height:229px;<br />    top:0;<br />    left:0;<br />        z-index:100<br />}<br /><br />#mbtsidebar {<br />        border:1px solid #ddd;<br />        padding-left:5px;<br />    position:relative;<br />    height:220px;<br />    width:55px;<br />    margin:0 0 0 5px;<br />}<br /></style><br /><br /><br /><div id="floatdiv"><br /><div id="mbtsidebar"><br />    <table cellpadding="1px" cellspacing="0"><br />    <tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"><br /><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like><br />    </td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"><br /><g:plusone size="Tall" expr:href="data:post.url"><br />    </g:plusone></td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"><br /><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="</b><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: #0080ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ezzeldin380</span>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />    </td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"><br /><p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.ta3rib.blospot.com" target="_blank">Widgets</a></p><br />    </td><br />    </tr><br />    </table><br /></div><br /></div><br /><script type="text/javascript"><br />// JavaScript Document<br /><br />   <br /></script></b></span></blockquote>
<div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></b></span></div>
<span style="font-size: large;">قم بتغيير </span><b style="border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 13px; line-height: 19.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; color: #0080ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ezzeldin380</span></b><span style="font-size: large;"> باسم صفحتك على تويتر وقم بحفظ الكود. اذا لم يشتغل زر جوجل +1 قم بالاضافة التالية:<br />الدخول الي لوحة تحكم بلوجر ثم الي تصميم ثم الي تحرير HTML<br />نبحث عن </head> ثم نضع قبله الكود التالي</span><br /><div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<blockquote class="tr_bq" style="background-color: #fbfbd8; border: 1px dashed rgb(227, 229, 86); color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; height: 100px; line-height: 1.3em; margin: 0px; outline: 0px; overflow: auto; padding: 10px; quotes: none; vertical-align: baseline; width: 570px;">
<span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script></b></span></blockquote>
<div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: #741b47; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></b></span></div>
<div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
</div>

اضافة ازرار النشر جوجل ، الفيسبوك، تويتر منزلقة وعائمة نزولا وصعودا

السلام عليكم اقدم لكم اليوم هذه الاضافة الهامة لنشر المواضيع في المواقع الاجتماعية. تعتبر هذه الاضافة جديدة حيث اصبحت تنتقل نزولا وص...

مزيد من المعلومات »

كيفية اضافة أداة مواضيع ذات صلة أو إقرأ أيضا لمدونات بلوجر

<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaDjqCIrkZxngk1THiCLYr3S490Gv89dm773EHyiN_YXNfxBLiKIrAolU1ZIqR1H5TkrgwL4XdLaSe0faMi6OwaoEqjacGpvERuTPa96E8hYK8Aqe1rTbgZjZwVyb43htjAepRL5-Z1zT/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaDjqCIrkZxngk1THiCLYr3S490Gv89dm773EHyiN_YXNfxBLiKIrAolU1ZIqR1H5TkrgwL4XdLaSe0faMi6OwaoEqjacGpvERuTPa96E8hYK8Aqe1rTbgZjZwVyb43htjAepRL5-Z1zT/s320-rw/2.jpg" width="320" /></a></div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><br /></b></span></div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">بسم الله الرحمن الرحيم</b></span></div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">كيفية اضافة أداة مواضيع ذات صلة لمدونات بلوجر</b></span></div>
<div style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
</div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">من تصميم ادخل علي تحرير HTML</b></span></div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">ثم توسيع العناصر</b></span></div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /></b></span></div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">لا تنسي أن تأخد نسخة إحتياطية لمدونتك قبل البدأ </b></span></div>
<div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /></b></span></div>
<span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: medium; line-height: 18.516666412353516px; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">اضغط علي (CTRL+F) وابحث عن الكود التالي : </b></span><br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><blockquote style="background-color: #eeeeee; border-bottom-right-radius: 9px; border-top-left-radius: 9px; border: 1px solid rgb(184, 79, 92); font-family: Tahoma; font-size: 12px; line-height: 18.516666412353516px; margin: 10px 0px; padding: 10px;">
<div dir="ltr" style="margin: 0px; padding: 0px; text-align: left;">
</head></div>
</blockquote>
<br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"> ثم ضع فوقه الكود التالي</b></span></div>
<br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><blockquote style="background-color: #eeeeee; border-bottom-right-radius: 9px; border-top-left-radius: 9px; border: 1px solid rgb(184, 79, 92); font-family: Tahoma; font-size: 12px; line-height: 18.516666412353516px; margin: 10px 0px; padding: 10px;">
<div dir="ltr" style="margin: 0px; padding: 0px; text-align: left;">
<br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;item&quot;'><br style="margin: 0px; padding: 0px;" /><style type="text/css"><br style="margin: 0px; padding: 0px;" />#related-posts {<br style="margin: 0px; padding: 0px;" />float:center;<br style="margin: 0px; padding: 0px;" />text-transform:none;<br style="margin: 0px; padding: 0px;" />height:100%;<br style="margin: 0px; padding: 0px;" />min-height:100%;<br style="margin: 0px; padding: 0px;" />padding-top:5px;<br style="margin: 0px; padding: 0px;" />padding-left:5px;<br style="margin: 0px; padding: 0px;" />}<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />#related-posts h2{<br style="margin: 0px; padding: 0px;" />font-size: 1.6em;<br style="margin: 0px; padding: 0px;" />font-weight: bold;<br style="margin: 0px; padding: 0px;" />color: black;<br style="margin: 0px; padding: 0px;" />font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br style="margin: 0px; padding: 0px;" />margin-bottom: 0.75em;<br style="margin: 0px; padding: 0px;" />margin-top: 0em;<br style="margin: 0px; padding: 0px;" />padding-top: 0em;<br style="margin: 0px; padding: 0px;" />}<br style="margin: 0px; padding: 0px;" />#related-posts a{<br style="margin: 0px; padding: 0px;" />color:black;<br style="margin: 0px; padding: 0px;" />}<br style="margin: 0px; padding: 0px;" />#related-posts a:hover{<br style="margin: 0px; padding: 0px;" />color:black;<br style="margin: 0px; padding: 0px;" />}<br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />#related-posts a:hover {<br style="margin: 0px; padding: 0px;" />background-color:#d4eaf2;<br style="margin: 0px; padding: 0px;" />}<br style="margin: 0px; padding: 0px;" /></style><br style="margin: 0px; padding: 0px;" /><script type='text/javascript'><br style="margin: 0px; padding: 0px;" />var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHvqCzWi0_eLGZlBk2_-Vqd0xSk6g6i8CHUZ-fDCQnj4-sADerRGqI93YwDGm8lMIhMB33nnRmKGeWS7g5QV3nOjYemKUxShmHXx9IgdsdFC46_MuhaHgPqh9xXtfiWF7e8rF_f5VBGg/s400/noimage.png";<br style="margin: 0px; padding: 0px;" />var maxresults=5;<br style="margin: 0px; padding: 0px;" />var splittercolor="#d4eaf2";<br style="margin: 0px; padding: 0px;" />var relatedpoststitle="<span style="color: red; margin: 0px; padding: 0px;">مواضيع ذات صلة</span> ";<br style="margin: 0px; padding: 0px;" /></script><br style="margin: 0px; padding: 0px;" /><script src='http://egymodern.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></div>
</blockquote>
<br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;">
<span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">بعد ذلك قم  بالبحث عن الكود التالي :</b></span></div>
<br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><blockquote style="background-color: #eeeeee; border-bottom-right-radius: 9px; border-top-left-radius: 9px; border: 1px solid rgb(184, 79, 92); font-family: Tahoma; font-size: 12px; line-height: 18.516666412353516px; margin: 10px 0px; padding: 10px;">
<div dir="ltr" style="margin: 0px; padding: 0px; text-align: left;">
 <div class='post-footer-line post-footer-line-1'></div>
</blockquote>
<br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><span style="background-color: white; font-family: Tahoma, Helvetica; font-size: medium; line-height: 18.516666412353516px; margin: 0px; padding: 0px;"><b style="font-family: 'Trebuchet MS', sans-serif; margin: 0px; padding: 0px;">ثم قم بوضع الكود التالي تحت الكود السابق</b></span><br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><blockquote style="background-color: #eeeeee; border-bottom-right-radius: 9px; border-top-left-radius: 9px; border: 1px solid rgb(184, 79, 92); font-family: Tahoma; font-size: 12px; line-height: 18.516666412353516px; margin: 10px 0px; padding: 10px;">
<div dir="ltr" style="margin: 0px; padding: 0px; text-align: left;">
 <br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;item&quot;'><br style="margin: 0px; padding: 0px;" /><div id='related-posts'><br style="margin: 0px; padding: 0px;" /><b:loop values='data:post.labels' var='label'><br style="margin: 0px; padding: 0px;" /><b:if cond='data:label.isLast != &quot;true&quot;'><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /><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=6&quot;' type='text/javascript'/></b:loop><br style="margin: 0px; padding: 0px;" /><script type='text/javascript'><br style="margin: 0px; padding: 0px;" />removeRelatedDuplicates_thumbs();<br style="margin: 0px; padding: 0px;" />printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br style="margin: 0px; padding: 0px;" /></script><br style="margin: 0px; padding: 0px;" /></div><div style='clear:both'/><br style="margin: 0px; padding: 0px;" /></b:if> <br style="margin: 0px; padding: 0px;" /></div>
</blockquote>
<br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><div style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<b style="margin: 0px; padding: 0px;"> بعد ذلك قم بحفظ القالب ومبروك عليك الاضافة</b></div>
<div style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;">
<b style="margin: 0px; padding: 0px;">شكر خاص للأخ<a href="http://abu-iyad.blogspot.com/" style="color: #160067; margin: 0px; padding: 0px; text-decoration: initial;" target="_blank" wrc_done="true"> أبو اياد</a></b></div>
</div>

كيفية اضافة أداة مواضيع ذات صلة أو إقرأ أيضا لمدونات بلوجر

بسم الله الرحمن الرحيم كيفية اضافة أداة مواضيع ذات صلة لمدونات بلوجر من تصميم ادخل علي تحرير HTML ثم توسيع العناصر لا تنس...

مزيد من المعلومات »

طريقة عمل خلفية للمدونة صور متحركة متغيرة على شكل Slidshow

<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="page-title" style="border: 0px; color: #4c4c4c; font-family: tahoma, arial, Helvetica; margin: 0px; outline: none; padding: 0px; text-align: start;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyB0yPgy1MUyyMyPG3cD48qB6T0A0JUlkOru2fBEGNZAYokMgNWyFxZ-6CODW-Xd36-KF0XoMU4MaT2BpY-VUvDtrtvs43-306p6qx-K-frXr2nPom1oTV2uBjtcjaavoOW7QG2rFMlV1/s1600/screenshot-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyB0yPgy1MUyyMyPG3cD48qB6T0A0JUlkOru2fBEGNZAYokMgNWyFxZ-6CODW-Xd36-KF0XoMU4MaT2BpY-VUvDtrtvs43-306p6qx-K-frXr2nPom1oTV2uBjtcjaavoOW7QG2rFMlV1/s320-rw/screenshot-1.png" width="320" /></a></div>
<h2 style="border: 0px; color: #006699; font-family: DroidNaskh-Bold, Arial; font-size: 24px; letter-spacing: 0px; margin: 0px 0px 0.45em; outline: none; padding: 0px;">
<br /></h2>
</div>
<div class="post-body" style="border: 0px; color: #4c4c4c; font-family: tahoma, arial, Helvetica; line-height: 1.5em; margin: 0px; outline: none; padding: 100px 0px 0px; text-align: start;">
<div id="summary6967497317070535937" style="border: 0px; margin: 0px; outline: none; padding: 0px;">
<div dir="ltr" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="ltr" style="border: 0px; margin: 0px; outline: none; padding: 0px;" trbidi="on">
<div dir="rtl" style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: right;" trbidi="on">
<span style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">مرحبا سوف أقدم  لكم شئ جديد اليوم وهو طريقة وضع سلايد شو في خلفية المدونة و إلكم الشرح بالفيديو :</span><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="466" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/83KBEW2EDig?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="466"></iframe></div>
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><div class="separator" style="border: 0px; clear: both; margin: 0px; outline: none; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdfhcn1NXc1uvHEbmv9fdbvcbhJmA8Rdn4re8aXo6qcY_rmtu3rRXfvx3mXF0YSW99gwP6eU0bTDL0WlGzmhMxDs905YgKjgL_zxLWDSL_DTVf5a95mZK8xVAM6DrAmdCj10H0cigpxw/s1600/screenshot-1.png" imageanchor="1" style="border: 0px; color: #009adb; margin: 0px 1em; outline: none; padding: 0px; text-decoration: initial;" target="_blank"><img border="0" height="276" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdfhcn1NXc1uvHEbmv9fdbvcbhJmA8Rdn4re8aXo6qcY_rmtu3rRXfvx3mXF0YSW99gwP6eU0bTDL0WlGzmhMxDs905YgKjgL_zxLWDSL_DTVf5a95mZK8xVAM6DrAmdCj10H0cigpxw/s400-rw/screenshot-1.png" style="border: 0px; margin: 0px; outline: none; padding: 0px; vertical-align: middle;" width="400" /></a></div>
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" />وهنا أقدم لكم شرح مكتوب :<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" />أولا ندخل على تحرير html توسيع القالب ثم نبحث عن :   <b style="border: 0px; margin: 0px; outline: none; padding: 0px; text-decoration: underline;">Outer-Wrapper</b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" />ونضيف بعده هذه العبارة : <u style="border: 0px; font-weight: bold; margin: 0px; outline: none; padding: 0px;">opacity:0.9;</u><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" />ثانيا نبحث عن :<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><blockquote style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcXh6YneeDIwXMhIea-7tl9-BBoAw_f2wyPhCeDHmF9AqHGQDLkjZF0ogX1NrYEi7GN1bdF4M70qLsRZB0UXr-CokWZeaboeeme-h3r8AsUP7swwwfMCHbbOMzdTSPqe3zaMv4sdsss1w/); background-position: 50% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(207, 207, 207); margin: 10px; outline: none; overflow: auto; padding: 10px;">
<div dir="ltr" style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
<span style="border: 0px; font-weight: bold; margin: 0px; outline: none; padding: 0px;">]]></b:skin></span></div>
</blockquote>
<b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><u style="border: 0px; margin: 0px; outline: none; padding: 0px;"><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></u></b>ونضيف فوقه كود الcss التالي :<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcXh6YneeDIwXMhIea-7tl9-BBoAw_f2wyPhCeDHmF9AqHGQDLkjZF0ogX1NrYEi7GN1bdF4M70qLsRZB0UXr-CokWZeaboeeme-h3r8AsUP7swwwfMCHbbOMzdTSPqe3zaMv4sdsss1w/); background-position: 50% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(207, 207, 207); margin: 10px; outline: none; overflow: auto; padding: 10px;">
<div dir="ltr" style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
/* CBSlide-BY-Ayoub.Etmaiti</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
----------------------------------------------- */</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti,</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti:after {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
position: fixed;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
width: 100%;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
height: 100%;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
top: 0px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
left: 0px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
z-index: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti:after {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
content: '';</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJpdKQxkLIbKF8xOM_z7Q7Qz7ZsUlj0-F3kunMvIwDp2wXA9w4x4CZ_P9CC2Xq6Qtwm8548XSRinkbMbmT9r5HOfjYyRk_o4Xvua8jwYemak26PM50dhPkZ2CEacqaoxWmcFvSi7puQpa/s1600/pattern.png) repeat top left;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li span {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
width: 100%;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
height: 100%;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
position: absolute;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
top: 0px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
left: 0px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
color: transparent;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-size: cover;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-position: 50% 50%;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-repeat: none;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
z-index: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-backface-visibility: hidden;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation: imageAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation: imageAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation: imageAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation: imageAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation: imageAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li div {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
z-index: 1000;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
position: absolute;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
bottom: 10px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
left: 0px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
width: 100%;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
text-align: right;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation: titleAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation: titleAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation: titleAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation: titleAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation: titleAnimation 36s linear infinite 0s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li div h3 {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
font-size: 160px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
padding: 0 30px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
line-height: 120px;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
color: rgba(169,3,41, 0.8);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(1) span { background-image: url(<span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">https://lh5.googleusercontent.com/-umn39TSVmKs/TpNVbgZ7MkI/AAAAAAAAAjs/4xH5GaiBMDs/s903/SANY0048.JPG</span>) }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(2) span {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-image: url(<span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">https://lh3.googleusercontent.com/-pg71qoEK8L4/TpNVxNFXG6I/AAAAAAAAAjw/8iu8IK6Uc3g/s903/SANY0050.JPG</span>);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(3) span {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-image: url(<span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">https://lh5.googleusercontent.com/-AaZ8gHb6azQ/TpNXOBMRJII/AAAAAAAAAkI/wzm9Mve5BDY/s903/SANY0059.JPG</span>);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(4) span {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-image: url(<span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">https://lh5.googleusercontent.com/-SgrYJrjxal8/TpNXqx3i5WI/AAAAAAAAAkQ/HjmiV0CB0xQ/s903/SANY0061.JPG</span>);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(5) span {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-image: url(<span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">https://lh5.googleusercontent.com/-aagk-eWQIUE/TpNX_xJmGXI/AAAAAAAAAkU/PE3wickISzk/s903/SANY0063.JPG</span>);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(6) span {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
background-image: url(<span style="border: 0px; color: red; margin: 0px; outline: none; padding: 0px;">https://lh4.googleusercontent.com/-KCFmHUUD1K4/TpNZDRJTP_I/AAAAAAAAAko/sjyOU0ahBfA/s903/SANY0069.JPG</span>);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(2) div {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 6s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(3) div {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 12s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(4) div {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 18s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(5) div {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 24s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li:nth-child(6) div {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-webkit-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-moz-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-o-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
-ms-animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
animation-delay: 30s;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-webkit-keyframes imageAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-animation-timing-function: ease-in;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-transform: scale(1.05);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-animation-timing-function: ease-out;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-moz-keyframes imageAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-animation-timing-function: ease-in;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-transform: scale(1.05);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-animation-timing-function: ease-out;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-o-keyframes imageAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-animation-timing-function: ease-in;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-transform: scale(1.05);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-animation-timing-function: ease-out;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-ms-keyframes imageAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-animation-timing-function: ease-in;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-transform: scale(1.05);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-animation-timing-function: ease-out;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@keyframes imageAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   animation-timing-function: ease-in;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   transform: scale(1.05);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   animation-timing-function: ease-out;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   transform: scale(1.1) rotate(3deg);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-webkit-keyframes titleAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-transform: translateX(200px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
19% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -webkit-transform: translateX(-400px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-moz-keyframes titleAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-transform: translateX(200px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
19% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -moz-transform: translateX(-400px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-o-keyframes titleAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-transform: translateX(200px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
19% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -o-transform: translateX(-400px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@-ms-keyframes titleAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-transform: translateX(200px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
19% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   -ms-transform: translateX(-400px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@keyframes titleAnimation {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
0% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   transform: translateX(200px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
8% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
17% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   transform: translateX(0px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
19% {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   opacity: 0;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
   transform: translateX(-400px);</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
25% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
100% { opacity: 0 }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
/* Show at least something when animations not supported */</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.no-cssanimations .CBS-Ayoub-Etmaiti li span{</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
opacity: 1;</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@media screen and (max-width: 1140px) {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li div h3 { font-size: 100px }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
@media screen and (max-width: 600px) {</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
.CBS-Ayoub-Etmaiti li div h3 { font-size: 50px }</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
}</div>
</blockquote>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></div>
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" />وثالثا وأخيرا نضيف الكود التالي بعد <b style="border: 0px; margin: 0px; outline: none; padding: 0px;"><u style="border: 0px; margin: 0px; outline: none; padding: 0px;"><body></u></b><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /><blockquote style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcXh6YneeDIwXMhIea-7tl9-BBoAw_f2wyPhCeDHmF9AqHGQDLkjZF0ogX1NrYEi7GN1bdF4M70qLsRZB0UXr-CokWZeaboeeme-h3r8AsUP7swwwfMCHbbOMzdTSPqe3zaMv4sdsss1w/); background-position: 50% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(207, 207, 207); margin: 10px; outline: none; overflow: auto; padding: 10px;">
<div dir="ltr" style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
<ul class='cb-slideshow'></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
          <li><span>Image 01</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
          <li><span>Image 02</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
          <li><span>Image 03</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
          <li><span>Image 04</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
          <li><span>Image 05</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
          <li><span>Image 06</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li></div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: left;">
      </ul></div>
<br style="border: 0px; margin: 0px; outline: none; padding: 0px;" /></blockquote>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px;">
</div>
</div>
<div style="border: 0px; margin: 0px; outline: none; padding: 0px; text-align: right;">
وهذا هو كل شئ ولتنسوا المعاينة قبل حفظ القالب ;)</div>
</div>
</div>
</div>
</div>

طريقة عمل خلفية للمدونة صور متحركة متغيرة على شكل Slidshow

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

مزيد من المعلومات »