ديسمبر 2012

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

<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 ثم توسيع العناصر لا تنسي أن تأخد نسخة إحتياطية لمدونتك قبل البدأ اضغط علي (CTRL+F) وابحث عن الكود ال…

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

طريقة عمل خلفية للمدونة صور متحركة متغيرة على شكل 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

مرحبا سوف أقدم لكم شئ جديد اليوم وهو طريقة وضع سلايد شو في خلفية المدونة و إلكم الشرح بالفيديو : وهنا أقدم لكم شرح مكتوب :أولا ندخل على تحرير html توسيع القالب ثم نبحث عن : Outer-Wrapperونضيف بعده…

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

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

<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/AVvXsEgMvLY9c26dtYWKNQ85wAQ_UvVc7G26Q1l8vnFUuhH2dNSM7hDvc46FIYENVVWpJIzorBIi65vEji9rZrSM4xyp8TqqHJ_9LhI2oWCbHJILGopbneojf5IxZmh9dRjIt2VH_iuPEhJTLwYx/s1600/NOW.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvLY9c26dtYWKNQ85wAQ_UvVc7G26Q1l8vnFUuhH2dNSM7hDvc46FIYENVVWpJIzorBIi65vEji9rZrSM4xyp8TqqHJ_9LhI2oWCbHJILGopbneojf5IxZmh9dRjIt2VH_iuPEhJTLwYx/s320-rw/NOW.jpg" width="320" /></a></div>
<span style="font-size: large;"></span><br />
<div>
<span style="font-size: large;"><span style="font-size: large;"><br /></span></span></div>
<span style="font-size: large;">
كنت قد تطرقت في أحد المواضيع  عن <a href="http://ezzeldin-ahmed.blogspot.com/2012/12/blog-post_513.html" target="_blank">طريقة اضافة مواضيع ذات صلة</a> لدورها الكبر في زيادة مشاهدا الصفحات في مدونتك  وهدا يعني زيادة في بقاء الزائر مدة أطول في مدونتك لكن هده الأدات لهدا نفس الخصائص الا أنا هدا متحركة يعني تتحرك من اليمين الى اليسار من يتير انتباه الزائر الى مواضيعك الاخرى وهي  أداة جميلة</span><br />
<br />
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<br style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;" />
<br style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;" />
<br style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;" />
<b style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;"><u>طريقة التركيب </u></b><br />
<br style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;" />
<table border="0" cellpadding="0" cellspacing="0" style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: right; width: 315px;"></table>
<br style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;" />
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; line-height: 20px;">
<b><span style="color: red;">ابحث عن الكود التالي :بالضغط على     </span> <span style="color: red;">alt+f  </span></b></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
  <span style="background-color: #cfe2f3;"></head></span></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
 ثم ضع فوقه مباشرة الكود التالي</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: #cfe2f3; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
  <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; width:100% min-height:100%; padding-top:5px; padding-right:5px; } #related-posts h2{ background: #FFF!important; font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://balitraveltips.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
</b:if> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en&#39;} </script></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/></div>
<div class="separator" style="background-color: #cfe2f3; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
 ثم قم بالبحث عن الكود التالي (غالبا ما يكون هو التاني)</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
 <span style="background-color: #cfe2f3;"><data:post.body/></span></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
وضع  تحته مباشرة الكود التالي </div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: #cfe2f3; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
 </div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br/><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;<b style="color: red;">max-results=7</b>&quot;' type='text/javascript'/></b:if></b:loop> <h3 style='border-bottom: 3px #5D7D91 solid;padding-bottom:10px!important'><b><b style="color: red;">المزيد من المواضيع المهمة</b>  :</b></h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=6; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div> </b:if></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
</div>
<div class="separator" style="background-color: #cfe2f3; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<u><b> ملاحضة يمكنك تغير  الاتي :</b></u></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b style="color: red;">المزيد من المواضيع المهمة : <span style="color: black;">غيرها بأي جملة تريد </span></b></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b style="color: red;"><br /></b></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b style="color: red;"> max-results=7 :  <span style="color: black;">هي عدد المواضيع المراد عرضها في الأدلة غير 7 الى أي رقم تريد </span></b></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b style="color: red;"><br /></b></div>
<div class="separator" style="background-color: white; clear: both; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b>ثم قم بحفض القالب </b></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b style="color: red;"><br /></b></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b style="color: red;"><span style="color: black;">ومبروك الاضافة</span></b></div>
</div>

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

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

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

أداة التوصية بهدا (Recommendations Bar) من الفيسبوك لمدونات بلوجر

<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/AVvXsEgGfCHO6lYaunUXbj-rz5RIu8ZX6BKIuMAFTQJJBLKZGKNW_bP3ylW-oZEo5Ora8axOKlL6yMgyp-mdLIlfkRLXvFngP9emy0jn2-VnNxxFtjNOi_xYeVB8mjuMIqTvHzDipocTP-MXssf8/s1600/1+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGfCHO6lYaunUXbj-rz5RIu8ZX6BKIuMAFTQJJBLKZGKNW_bP3ylW-oZEo5Ora8axOKlL6yMgyp-mdLIlfkRLXvFngP9emy0jn2-VnNxxFtjNOi_xYeVB8mjuMIqTvHzDipocTP-MXssf8/s400-rw/1+(1).jpg" width="400" /></a></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
قام الفيسبوك مؤخرا بطرح أداة التوصية بهدا (Recommendations Bar) الاجتماعية التي تتيح لزائرك الاعجاب بموضوعات مدونتك فهده الاضافة شبيهة أو أحسن من( اداة اقترحنا لك) ,فالاداة تحتوي على زر like  وعند تصفحك ونزول الى أسفل أي موضوع تنبتق لك الاضافة من جانب المدونة وبها بعض مواضيع مدونتك ورز الاعجاب مايساهم في زيادة نسبة مشاهدات الصفحات زائد الايكات</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b>الاضافة لا تضهر في الصفحة الرئيسية فقط في المواضيع</b></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<h3>
<b><span style="background-color: yellow;">1</span><span style="background-color: yellow;">-الحصول على الكود الخاص بالاداة من facebook</span></b></h3>
</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
قم بالتوجه الى  <b style="color: blue;"><a href="https://developers.facebook.com/docs/reference/plugins/recommendationsbar/" style="color: #1e62b6; outline: none; text-decoration: initial;" target="_blank">Facebook Recommendations Bar</a></b></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
ثم تابع الصور</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
ثم  هنا يمكنك التعديل  موضع الاداة يمين أويسار أو استبدال like ب كلمة أخرى ستجدها هناك</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
<img alt=" شامل كول Recommendations Bar" border="0" height="200" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPoD3M067duP78ptTT_t9BQHwPsE-loq2gklTQRyryRwkSmiURAuAEhlzrey5sVU1EHPHit0JIgoO58X3S3xEcbkxAD3S_1An8BGZ8YxBbBqAieVfFcSXl4RhkH-sYxr8V7Y0_f1vGWXYM/s200-rw/5.bmp" style="background-color: transparent; border: none; max-width: 510px; padding: 0px;" title=" شامل كول Recommendations Bar" width="110" /> </div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
ثم قم بقص الكود الدي في المستطيل الاحمر واحتفض به </div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir6NgdDVxrmCU7zRa3yzCObIYbaTmvoPz3-N6sP7j-08PqEqVMm1sUmJIRhjouw5fDXvCSLoUhEjtVjTG_pupwMGOjlhMOrl0YWIFcycW1uC9-qTRcjHEyx1DmczgFsPY7Mf11qmSBjxIG/s1600/6.bmp" style="color: #1e62b6; margin-left: 1em; margin-right: 1em; outline: none; text-decoration: initial;" target="_blank"><img alt=" شامل كول Recommendations Bar" border="0" height="208" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir6NgdDVxrmCU7zRa3yzCObIYbaTmvoPz3-N6sP7j-08PqEqVMm1sUmJIRhjouw5fDXvCSLoUhEjtVjTG_pupwMGOjlhMOrl0YWIFcycW1uC9-qTRcjHEyx1DmczgFsPY7Mf11qmSBjxIG/s320-rw/6.bmp" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: none; max-width: 510px; padding: 0px;" title=" شامل كول Recommendations Bar" width="320" /></a></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
ثم  انتهنا الان من انشاء التطبيق لنمر لوضع الأكواد</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b><span style="background-color: yellow;">2-وضع الاكواد</span></b></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
طريقة التركيب</div>
<div class="separator" style="background-color: white; clear: both; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px; text-align: center;">
</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: red; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
</div>
<ul style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;"></ul>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
 قم بتحويل الكود الدي <b><span style="background-color: yellow;">قلت لك بأن تنسخه</span></b> ,أدخل <a href="http://www.elliotswan.com/postable/" style="color: #1e62b6; outline: none; text-decoration: initial;" target="_blank">هدا الموقع</a> وضع الكود في المربع الأعلى ثم اضغط <b style="background-color: yellow;">ترميز</b> وقص الكود المحصل عليه</div>
<div style="background-color: white; color: red; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: red; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<u>ثم قم بالبحث عن الكود التالي  </u><u> بالضغط على     ctrl + f   </u></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<body></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
وضع الكود المحصل عليه مباشرة تحته</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<ul style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<li>ثم قم بالبحث عن هدا الكو د  التالي</li>
</ul>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<head></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
وضع تحته مباشرة الكود التالي</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
 <meta content='article' property='og:type'/><br />
 <meta expr:content='data:blog.title' property='og:site_name'/><br />
 <meta expr:content='data:blog.pageName' property='og:title'/><br />
 <b:if cond='data:blog.postImageThumbnailUrl'><br />
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br />
 </b:if><br />
<b:else/><br />
 <meta expr:content='data:blog.title' property='og:title'/><br />
 <meta content='website' property='og:type'/><br />
</b:if><br />
<br />
<meta expr:content='&quot;ar_AR&quot;' property='og:locale'/><br />
<meta expr:content='data:blog.canonicalUrl' property='og:url'/></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<ul style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<li>ثم الخطوة الاخيرة قم بالبحث على  الكود التالي </li>
</ul>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<data:post.body/></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
وضع تحته مباشرة الكود التالي</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: #cfe2f3; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
ثم احفض القالب</div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
<br /></div>
<div style="background-color: white; color: #5b6b7e; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; line-height: 20px;">
وهدا كل شيء ومبروك عليك ,نلتقي في موضوع جديد انشاء الله والسلام عليكم</div>
<div>
<br /></div>
</div>

أداة التوصية بهدا (Recommendations Bar) من الفيسبوك لمدونات بلوجر

قام الفيسبوك مؤخرا بطرح أداة التوصية بهدا (Recommendations Bar) الاجتماعية التي تتيح لزائرك الاعجاب بموضوعات مدونتك فهده الاضافة شبيهة أو أحسن من( اداة اقترحنا لك) ,فالاداة تحتوي على زر like وعند تص…

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

طريقة وضع إعلانين جوجل أدسنس في بداية التدوينة وتحت العنوان

<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div dir="rtl" style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRY7ptGTLhnqzTxOTWAJiZkk4cEINLaKcHHD7XJBlF_9yFXTjM2Ws_D5DybUrF1EGK67KFBoG-MfpRhSqLSKlmQq_pa2RIIXtcb8UkUtS74pwm1Gnd6XC7XLLtPhv7NApQxmrPFI1H2Gw_/s1600/Untitled20121204105754.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRY7ptGTLhnqzTxOTWAJiZkk4cEINLaKcHHD7XJBlF_9yFXTjM2Ws_D5DybUrF1EGK67KFBoG-MfpRhSqLSKlmQq_pa2RIIXtcb8UkUtS74pwm1Gnd6XC7XLLtPhv7NApQxmrPFI1H2Gw_/s400-rw/Untitled20121204105754.png" width="400" /></a></div>
<div class="" style="clear: both; font-family: tahoma, Helvetica, sans-serif; text-align: justify;">
<b><br /></b></div>
<div class="" style="clear: both; font-family: tahoma, Helvetica, sans-serif; text-align: justify;">
<b>نتوجه إلى تحرير HTML ثم وضع علامة على المربع الصغير لتوسيع القالب.</b></div>
<div class="" style="clear: both; font-family: tahoma, Helvetica, sans-serif; text-align: justify;">
<b>ثم نبحث عن الكود التالي<a href="http://www.blogger.com/blogger.g?blogID=6215868777497485584" name="more" style="color: #4495ff; text-decoration: initial;"></a></b></div>
<blockquote class="tr_bq">
<div style="text-align: left;">
<data:post.body/></div>
</blockquote>
<div style="text-align: justify;">
<b><span style="font-family: tahoma, Helvetica, sans-serif;">ثم قم بوضع الكود التالي قبله إذا أردت ظهور الاعلانين  تحت العنوان ... وبعده إذا أردت ظهور الاعلانين تحت التدوينة </span></b><br /><b><span style="font-family: tahoma, Helvetica, sans-serif;">مع إدراج كود الإعلانين في المكان المناسب كما هو مكتوب باللون الأحمر ،لكن لا تنسى أن تقوم بتحويل كود الإعلان عند حصولك عليه من حسابك أدسنس وذلك بإستعمال هذا الموقع ،من <a href="http://www.elliotswan.com/postable/" style="color: #4495ff; text-decoration: initial;" target="_blank">هنا</a></span></b><br /><blockquote class="tr_bq">
<div dir="ltr" style="text-align: left;">
<b:if cond='data:blog.pageType <span class="Apple-style-span" style="color: red;"><b>!</b></span>= &quot;index&quot;'></div>
<div style="text-align: left;">
<b:if cond='data:post.isFirstPost'></div>
<div style="text-align: left;">
<span class='FL'></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="color: red;"><b>ضع هنا كود الإعلان الأول بعد تحويله</b></span></div>
<div style="text-align: left;">
</span></div>
<div style="text-align: left;">
<span class='FR'></div>
<div style="text-align: left;">
<b><span class="Apple-style-span" style="color: red;">ضع هنا كود الإعلان الثاني بعد تحويله</span></b></div>
<div style="text-align: left;">
</span></div>
<div style="text-align: left;">
<div class='spacer'/></div>
<div style="text-align: left;">
</b:if></b:if></div>
</blockquote>
</div>
</div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<b><span style="font-family: tahoma, Helvetica, sans-serif;">وأخيرا قم بحفظ القالب</span></b></div>
</div>

طريقة وضع إعلانين جوجل أدسنس في بداية التدوينة وتحت العنوان

نتوجه إلى تحرير HTML ثم وضع علامة على المربع الصغير لتوسيع القالب. ثم نبحث عن الكود التالي ثم قم بوضع الكود التالي قبله إذا أردت ظهور الاعلانين تحت العنوان ... وبعده إذا أردت ظهور الاعلانين تحت التد…

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