اكواد متحركه

 <marquee behavior="scroll" direction="up">   scrolling ... going up!</marquee>

<marquee direction="Down" scrollAmount="2"> <BR><BR><FONT size="6"><FONT COLOR="green"></FONT c></FONT s><BR><BR></marquee><BR><P><BR>

<marquee scrolldelay="200" width="300px" height="25px" direction="right" bgcolor="#3BB9FF"><font color="#000000" >                 </font></marquee>

<marquee behavior="scroll" direction="up">   scrolling ... going up!</marquee>

<marquee scrolldelay="200" width="300px" height="25px" direction="right" bgcolor="#3BB9FF"><font color="#000000" >                 </font></marquee>

<style>

@keyframes ticker {0% {margin-top: 0}25% {margin-top: -30px}50% {margin-top: -60px} 75% {margin-top: -90px}100% {margin-top: 0}}

.CnmuTick{display:block;overflow:hidden;box-sizing:border-box;height:38px;border-radius:4px;line-height:30px;color:#fff;border-width:4px;border-style:solid;}

.CnmuTick span{float:right;padding:0 8px;background-color:rgba(0,0,0,.2);width:100px;text-align:center;overflow:hidden;border-radius:4px;box-sizing:border-box;font-size:16px;margin:0 0 0 -100px}

.CnmuTick ul{margin:0 auto 20px;float:right;overflow:hidden;padding:0 110px 0 0;box-sizing:border-box;animation:ticker 12s cubic-bezier(1,0,.5,0) infinite;list-style:none}

.CnmuTick ul:hover{animation-play-state:paused}

.CnmuTick:hover ul{animation-play-state:paused}

.CnmuTick ul li{list-style:none;margin:0;padding:0;line-height:30px;clear:both;float:right;gap:0;}

.CnmuTick ul li::before, .CnmuTick ul li::after{display:none;}

.CnmuTick ul li a{color:#fff;text-decoration:none}

.CnmuTick ul li a:hover {color:#000;}

.Tick1{background-color:#0092f9;border-color:#0092f9;}

.Tick2{background-color:#3c9f83;border-color:#3c9f83;}

.Tick3{background-color:#9f3c65;border-color:#9f3c65;}

.Tick4{background-color:#db0000;border-color:#db0000;}

</style>

<div class="CnmuTick Tick1">

<span>معلومات</span>

<ul>

<li>                  </li>

<li>                    </li>

<li>                     </li>

<li>                      </li>

</ul>

</div>

<style>

@keyframes ticker {0% {margin-top: 0}25% {margin-top: -30px}50% {margin-top: -60px} 75% {margin-top: -90px}100% {margin-top: 0}}

.CnmuTick{display:block;overflow:hidden;box-sizing:border-box;height:38px;border-radius:4px;line-height:30px;color:#fff;border-width:4px;border-style:solid;}

.CnmuTick span{float:right;padding:0 8px;background-color:rgba(0,0,0,.2);width:100px;text-align:center;overflow:hidden;border-radius:4px;box-sizing:border-box;font-size:16px;margin:0 0 0 -100px}

.CnmuTick ul{margin:0 auto 20px;float:right;overflow:hidden;padding:0 110px 0 0;box-sizing:border-box;animation:ticker 12s cubic-bezier(1,0,.5,0) infinite;list-style:none}

.CnmuTick ul:hover{animation-play-state:paused}

.CnmuTick:hover ul{animation-play-state:paused}

.CnmuTick ul li{list-style:none;margin:0;padding:0;line-height:30px;clear:both;float:right;gap:0;}

.CnmuTick ul li::before, .CnmuTick ul li::after{display:none;}

.CnmuTick ul li a{color:#fff;text-decoration:none}

.CnmuTick ul li a:hover {color:#000;}

.Tick1{background-color:#0092f9;border-color:#0092f9;}

.Tick2{background-color:#3c9f83;border-color:#3c9f83;}

.Tick3{background-color:#9f3c65;border-color:#9f3c65;}

.Tick4{background-color:#db0000;border-color:#db0000;}

</style>

<div class="CnmuTick Tick1">

<span>معلومات</span>

<ul>

<li>صفحات الشعراء والادباء                  </li>

<li> ترحب بالزائرين علي صفحاتها                   </li>

<li> نتمني لكم الاعجاب بنصوصنا                    </li>

<li>                   اهلا ومرحبابكم   </li>

</ul>

</div>

<script style='text/javascript'>
function rssticker(t){for(var a=0;a<numeroposts;a++){entradas=t.feed.entry[a],titulosposts[a]=entradas.title.$t;for(var e=0;e<entradas.link.length;e++)if("alternate"==entradas.link[e].rel){enlaceposts[a]=entradas.link[e].href;break}}startrssticker()}function startrssticker(){postactual=-1,largoactual=0,enlaces=document.getElementById("enlace"),runticker()}function runticker(){var t;0==largoactual&&(postactual++,postactual%=numeroposts,titulo=titulosposts[postactual].replace(/"/g,'"'),enlace=enlaceposts[postactual],enlaces.href=enlace),enlaces.innerHTML=titulo.substring(0,largoactual),largoactual!=titulo.length?(largoactual++,t=retardocaracter):(largoactual=0,t=retardopost),setTimeout("runticker()",t)}
var numeroposts = 7;   //عدد المواضيع المرغوب ظهورها في الشريط 
var retardocaracter = 100;   //عدد الأحرف 
var retardopost = 1;   //التحكم بالسرعة 
var titulosposts = new Array();
var enlaceposts = new Array();
var entradas = "";
</script>
<div class='rssticker'>
<span class="encabezado">أحدث المواضيع</span>
<a id='enlace'></a>
<script src='/feeds/posts/default?alt=json-in-script&callback=rssticker' style='text/javascript'></script>
</div>

<style>
.rssticker{position:relative!important;width:100%;height:30px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;margin:0 auto;color:#fff;background:#fff;font-size:14px;float:right; font-family: 'Droid Arabic Kufi'line-height:40px;}
.encabezado{display:inline-block;margin:0 0 0 10px;padding:0 10px;line-height:30px;background:#2388dc;float:right;box-sizing:border-box;}
.rssticker a{color:#333;margin:0;padding:5px;float:right;text-decoration:none;}
.rssticker a:hover{text-decoration:none;color:#2388dc;}
</style>