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

<div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IMWZXKMOLKwrrKIkd3VWKezXr_TnC6ToSyJ03TITHP-Ol6nr71RB_fgUWSFlimV03s1MHGLg-E4uwEXEYNRGKTkLhU3gv64enaPaEJUlkGrPS_CgmjYEPtGZfsZVLaIvawGBKnsWGIgT/s1600/Ezzeldin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IMWZXKMOLKwrrKIkd3VWKezXr_TnC6ToSyJ03TITHP-Ol6nr71RB_fgUWSFlimV03s1MHGLg-E4uwEXEYNRGKTkLhU3gv64enaPaEJUlkGrPS_CgmjYEPtGZfsZVLaIvawGBKnsWGIgT/s1600-rw/Ezzeldin.png" /></a></div> <div style="text-align: center;"> <span style="font-size: large;"><br /></span></div> <div style="text-align: center;"> <span style="font-size: large;">السلام عليكم</span></div> <span style="font-size: large;"><br /></span> <span style="font-size: large;">اقدم لكم اليوم هذه الاضافة الهامة لنشر المواضيع في المواقع الاجتماعية. تعتبر هذه الاضافة جديدة حيث اصبحت تنتقل نزولا وصعودا متزامنة مع حركة صفحة الواب على عكس الاضافة القديمة التي لا تنزلق مع حركة المستخدم. سجل دخول الي لوحة تحكم مدونتك ثم اذهب الي عناصر تصميم الصفحه وقم بفتح اداه جديده من نوع جافا سكربت .. ليس مهما مكان الاداه ولا تضع لها اسما ثم قم بوضع الكود الموجود بالاسفل بداخل الاداه.</span><br /> <div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></b></span></div> <blockquote class="tr_bq" style="background-color: #fbfbd8; border: 1px dashed rgb(227, 229, 86); color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; height: 100px; line-height: 1.3em; margin: 0px; outline: 0px; overflow: auto; padding: 10px; quotes: none; vertical-align: baseline; width: 570px;"> <span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><style><br />/*-------MBT Floating Counters------------*/<br />#floatdiv {<br />    position:absolute;<br />    width:94px;<br />    height:229px;<br />    top:0;<br />    left:0;<br />        z-index:100<br />}<br /><br />#mbtsidebar {<br />        border:1px solid #ddd;<br />        padding-left:5px;<br />    position:relative;<br />    height:220px;<br />    width:55px;<br />    margin:0 0 0 5px;<br />}<br /></style><br /><br /><br /><div id="floatdiv"><br /><div id="mbtsidebar"><br />    <table cellpadding="1px" cellspacing="0"><br />    <tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"><br /><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like><br />    </td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"><br /><g:plusone size="Tall" expr:href="data:post.url"><br />    </g:plusone></td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"><br /><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="</b><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: #0080ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ezzeldin380</span>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />    </td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"><br /><p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.ta3rib.blospot.com" target="_blank">Widgets</a></p><br />    </td><br />    </tr><br />    </table><br /></div><br /></div><br /><script type="text/javascript"><br />// JavaScript Document<br /><br />   <!--<br />/* Script by: www.jtricks.com<br />* Version: 20071017<br />* Latest version:<br />* www.jtricks.com/javascript/navigation/floating.html<br />*/<br />var floatingMenuId = 'floatdiv';<br />var floatingMenu =<br />{<br />    targetX: 0,<br />    targetY: 300,<br />    hasInner: typeof(window.innerWidth) == 'number',<br />    hasElement: typeof(document.documentElement) == 'object'<br />        && typeof(document.documentElement.clientWidth) == 'number',<br />    menu:<br />        document.getElementById<br />        ? document.getElementById(floatingMenuId)<br />        : document.all<br />          ? document.all[floatingMenuId]<br />          : document.layers[floatingMenuId]<br />};<br />floatingMenu.move = function ()<br />{<br />    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';<br />    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';<br />}<br />floatingMenu.computeShifts = function ()<br />{<br />    var de = document.documentElement;<br />    floatingMenu.shiftX = <br />        floatingMenu.hasInner <br />        ? pageXOffset <br />        : floatingMenu.hasElement <br />          ? de.scrollLeft <br />          : document.body.scrollLeft; <br />    if (floatingMenu.targetX < 0)<br />    {<br />        floatingMenu.shiftX +=<br />            floatingMenu.hasElement<br />            ? de.clientWidth<br />            : document.body.clientWidth;<br />    }<br />    floatingMenu.shiftY =<br />        floatingMenu.hasInner<br />        ? pageYOffset<br />        : floatingMenu.hasElement<br />          ? de.scrollTop<br />          : document.body.scrollTop;<br />    if (floatingMenu.targetY < 0)<br />    {<br />        if (floatingMenu.hasElement && floatingMenu.hasInner)<br />        {<br />            // Handle Opera 8 problems<br />            floatingMenu.shiftY +=<br />                de.clientHeight > window.innerHeight<br />                ? window.innerHeight<br />                : de.clientHeight<br />        }<br />        else<br />        {<br />            floatingMenu.shiftY +=<br />                floatingMenu.hasElement<br />                ? de.clientHeight<br />                : document.body.clientHeight;<br />        }<br />    }<br />}<br />floatingMenu.calculateCornerX = function()<br />{<br />    if (floatingMenu.targetX != 'center')<br />        return floatingMenu.shiftX + floatingMenu.targetX;<br />    var width = parseInt(floatingMenu.menu.offsetWidth);<br />    var cornerX =<br />        floatingMenu.hasElement<br />        ? (floatingMenu.hasInner<br />           ? pageXOffset<br />           : document.documentElement.scrollLeft) +<br />          (document.documentElement.clientWidth - width)/2<br />        : document.body.scrollLeft +<br />          (document.body.clientWidth - width)/2;<br />    return cornerX;<br />};<br />floatingMenu.calculateCornerY = function()<br />{<br />    if (floatingMenu.targetY != 'center')<br />        return floatingMenu.shiftY + floatingMenu.targetY;<br />    var height = parseInt(floatingMenu.menu.offsetHeight);<br />    // Handle Opera 8 problems<br />    var clientHeight =<br />        floatingMenu.hasElement && floatingMenu.hasInner<br />        && document.documentElement.clientHeight<br />            > window.innerHeight<br />        ? window.innerHeight<br />        : document.documentElement.clientHeight<br />    var cornerY =<br />        floatingMenu.hasElement<br />        ? (floatingMenu.hasInner <br />           ? pageYOffset<br />           : document.documentElement.scrollTop) +<br />          (clientHeight - height)/2<br />        : document.body.scrollTop +<br />          (document.body.clientHeight - height)/2;<br />    return cornerY;<br />};<br />floatingMenu.doFloat = function()<br />{<br />    // Check if reference to menu was lost due<br />    // to ajax manipuations<br />    if (!floatingMenu.menu)<br />    {<br />        menu = document.getElementById<br />            ? document.getElementById(floatingMenuId)<br />            : document.all<br />              ? document.all[floatingMenuId]<br />              : document.layers[floatingMenuId];<br />        initSecondary();<br />    }<br />    var stepX, stepY;<br />    floatingMenu.computeShifts();<br />    var cornerX = floatingMenu.calculateCornerX();<br />    var stepX = (cornerX - floatingMenu.nextX) * .07;<br />    if (Math.abs(stepX) < .5)<br />    {<br />        stepX = cornerX - floatingMenu.nextX;<br />    }<br />    var cornerY = floatingMenu.calculateCornerY();<br />    var stepY = (cornerY - floatingMenu.nextY) * .07;<br />    if (Math.abs(stepY) < .5)<br />    {<br />        stepY = cornerY - floatingMenu.nextY;<br />    }<br />    if (Math.abs(stepX) > 0 ||<br />        Math.abs(stepY) > 0)<br />    {<br />        floatingMenu.nextX += stepX;<br />        floatingMenu.nextY += stepY;<br />        floatingMenu.move();<br />    }<br />    setTimeout('floatingMenu.doFloat()', 20);<br />};<br />// addEvent designed by Aaron Moore<br />floatingMenu.addEvent = function(element, listener, handler)<br />{<br />    if(typeof element[listener] != 'function' ||<br />       typeof element[listener + '_num'] == 'undefined')<br />    {<br />        element[listener + '_num'] = 0;<br />        if (typeof element[listener] == 'function')<br />        {<br />            element[listener + 0] = element[listener];<br />            element[listener + '_num']++;<br />        }<br />        element[listener] = function(e)<br />        {<br />            var r = true;<br />            e = (e) ? e : window.event;<br />            for(var i = element[listener + '_num'] -1; i >= 0; i--)<br />            {<br />                if(element[listener + i](e) == false)<br />                    r = false;<br />            }<br />            return r;<br />        }<br />    }<br />    //if handler is not already stored, assign it<br />    for(var i = 0; i < element[listener + '_num']; i++)<br />        if(element[listener + i] == handler)<br />            return;<br />    element[listener + element[listener + '_num']] = handler;<br />    element[listener + '_num']++;<br />};<br />floatingMenu.init = function()<br />{<br />    floatingMenu.initSecondary();<br />    floatingMenu.doFloat();<br />};<br />// Some browsers init scrollbars only after<br />// full document load.<br />floatingMenu.initSecondary = function()<br />{<br />    floatingMenu.computeShifts();<br />    floatingMenu.nextX = floatingMenu.calculateCornerX();<br />    floatingMenu.nextY = floatingMenu.calculateCornerY();<br />    floatingMenu.move();<br />}<br />if (document.layers)<br />    floatingMenu.addEvent(window, 'onload', floatingMenu.init);<br />else<br />{<br />    floatingMenu.init();<br />    floatingMenu.addEvent(window, 'onload',<br />        floatingMenu.initSecondary);<br />}<br />//--><br /></script></b></span></blockquote> <div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </div> <div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></b></span></div> <span style="font-size: large;">قم بتغيير </span><b style="border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 13px; line-height: 19.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; color: #0080ff; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ezzeldin380</span></b><span style="font-size: large;"> باسم صفحتك على تويتر وقم بحفظ الكود. اذا لم يشتغل زر جوجل +1 قم بالاضافة التالية:<br />الدخول الي لوحة تحكم بلوجر ثم الي تصميم ثم الي تحرير HTML<br />نبحث عن </head> ثم نضع قبله الكود التالي</span><br /><div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <br /></div> <blockquote class="tr_bq" style="background-color: #fbfbd8; border: 1px dashed rgb(227, 229, 86); color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; height: 100px; line-height: 1.3em; margin: 0px; outline: 0px; overflow: auto; padding: 10px; quotes: none; vertical-align: baseline; width: 570px;"> <span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script></b></span></blockquote> <div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: x-small; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: transparent; border: 0px; color: #741b47; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></b></span></div> <div style="background-color: white; border: 0px; color: #555555; font-family: Verdana, sans-serif; font-size: 15px; font-weight: bold; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <br /></div> </div>

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

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

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

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

<div dir="rtl" style="text-align: right;" trbidi="on"> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaDjqCIrkZxngk1THiCLYr3S490Gv89dm773EHyiN_YXNfxBLiKIrAolU1ZIqR1H5TkrgwL4XdLaSe0faMi6OwaoEqjacGpvERuTPa96E8hYK8Aqe1rTbgZjZwVyb43htjAepRL5-Z1zT/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaDjqCIrkZxngk1THiCLYr3S490Gv89dm773EHyiN_YXNfxBLiKIrAolU1ZIqR1H5TkrgwL4XdLaSe0faMi6OwaoEqjacGpvERuTPa96E8hYK8Aqe1rTbgZjZwVyb43htjAepRL5-Z1zT/s320-rw/2.jpg" width="320" /></a></div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><br /></b></span></div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">بسم الله الرحمن الرحيم</b></span></div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">كيفية اضافة أداة مواضيع ذات صلة لمدونات بلوجر</b></span></div> <div style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> </div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">من تصميم ادخل علي تحرير HTML</b></span></div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">ثم توسيع العناصر</b></span></div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /></b></span></div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">لا تنسي أن تأخد نسخة إحتياطية لمدونتك قبل البدأ </b></span></div> <div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /></b></span></div> <span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: medium; line-height: 18.516666412353516px; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">اضغط علي (CTRL+F) وابحث عن الكود التالي : </b></span><br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><blockquote style="background-color: #eeeeee; border-bottom-right-radius: 9px; border-top-left-radius: 9px; border: 1px solid rgb(184, 79, 92); font-family: Tahoma; font-size: 12px; line-height: 18.516666412353516px; margin: 10px 0px; padding: 10px;"> <div dir="ltr" style="margin: 0px; padding: 0px; text-align: left;"> </head></div> </blockquote> <br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><div style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;"> <span style="font-size: medium; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"> ثم ضع فوقه الكود التالي</b></span></div> <br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><blockquote style="background-color: #eeeeee; border-bottom-right-radius: 9px; border-top-left-radius: 9px; border: 1px solid rgb(184, 79, 92); font-family: Tahoma; font-size: 12px; line-height: 18.516666412353516px; margin: 10px 0px; padding: 10px;"> <div dir="ltr" style="margin: 0px; padding: 0px; text-align: left;"> <!--Related Posts with thumbnails Scripts and Styles Start--><br style="margin: 0px; padding: 0px;" /><!-- remove --><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;" /><!-- remove --></b:if><br style="margin: 0px; padding: 0px;" /><!--Related Posts with thumbnails Scripts and Styles End--></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;">  <!-- Related Posts with Thumbnails Code Start--><br style="margin: 0px; padding: 0px;" /><!-- remove --><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;" /><!-- remove --></b:if> <br style="margin: 0px; padding: 0px;" /><!-- Related Posts with Thumbnails Code End--></div> </blockquote> <br style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px;" /><div style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <b style="margin: 0px; padding: 0px;"> بعد ذلك قم بحفظ القالب ومبروك عليك الاضافة</b></div> <div style="background-color: white; font-family: Tahoma, Helvetica; font-size: 12px; line-height: 18.516666412353516px; margin: 0px; padding: 0px; text-align: center;"> <b style="margin: 0px; padding: 0px;">شكر خاص للأخ<a href="http://abu-iyad.blogspot.com/" style="color: #160067; margin: 0px; padding: 0px; text-decoration: initial;" target="_blank" wrc_done="true"> أبو اياد</a></b></div> </div>

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

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

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

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

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

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

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

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

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

<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;">  <!-- Related Posts  Start--></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;"> <!-- Related Posts  End--></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) الاجتماعية التي تتيح لزائرك الاعجاب بموضوعات مدونتك فهده الاضافة شبيه...

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