Easy News

Ylo siento en el alma, Brainiac, pero te tiento con query ;) :
---------------------------------

Es una forma de consignar noticias en el blog, con efectos de slide, fade y alguno más... incluídos controles para autostart, parada, previo y siguiente.

El "problemilla" que tenía con el hack es que la página original desplegaba la demo en un iframe que contenía el HTML de la misma... y el HTML se veía pegadito a la esquina superior izquierda de la susodicha página. Y yo me preguntaba a santo de qué una "postura" tan extraña... Y, claro... en cuanto intenté colocarlo yo en la posición que se me antojó, se me fueron los botones de control a donde les pareció bien, separados del resto de la noticia.
La causa: cuando abrí el CSS ví que el div de los controles estaba en posición "absolute"... con la de problemas que trae eso. Probé a cambiarlo a "relative" y no hubo mucha solución.

Ahora mismo he probado a, sencillamente, dejar en blanco la posición y ¡Voilá!: se acabó el problema. Ahora se pueden poner las Easy News donde a uno le de la gana, no en la cima del blog por narices o chiflando para cambiar tops, paddings, etc...

Así que he colocado la demo al pie de las entradas de Mi Blog de Pruebas. Podéis encontrar el hack original en EASYNEWS

Explicación:

.- CSS: así lo he dejado yo... podéis cambiar el color de fondo, tamaños, etc...

<style>

html

{ background-color: #323319;

font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;

color:black;

}

a { text-decoration: none; font-weight: bold; }



.news_style{

display:none;

}

.news_show

{

background-color: white;

color:black;

width:350px;

height:150px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

overflow: auto;



}

.news_border

{

background-color: white;

width:350px;

height:150px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 1px solid gray;

padding: 5px 5px 5px 5px;

overflow: auto;



}

.news_mark{

background-color:white ;

font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

width:361px;

height:35px;

color:black;

text-align:center;

}

.news_title{

font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

padding: 5px 0px 9px 5px;

color:black;

}

.news_show img{



margin-left: 5px;

margin-right: 5px;



}

.buttondiv

{

position: ;

/*float: left;*/

/*top: 169px;*/

padding: 5px 5px 5px 5px;

background-color:white ;

border: 1px solid gray;

/*border-top-color: white;*/

border-top:none;

height:20px;

}

.news_border2

{

background-color: black;

width:300px;

height:400px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 1px solid gray;

padding: 5px 5px 5px 5px;

/*overflow: auto;*/

}

.news_mark2{

background-color:#666666 ;

font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

width:312px;

height:35px;

color:white;

text-align:center;

}



.buttondiv2

{

position: absolute;

/*float: left;*/

/*top: 169px;*/

padding: 3px 3px 5px 3px;

background-color:black ;

border: 1px solid gray;

/*border-top-color: white;*/

border-top:none;

height:20px;

}

.news_show2

{

background-color:black;

color:white;

width:300px;

height:400px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

overflow: auto;



}

.news_show2 img{



margin-left: 5px;

margin-right: 5px;



}

.news_title2{

font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

padding: 5px 0px 9px 5px;

width:300px;

color:white;

}

</style>

.- SCRIPTS:

<script src='http://.../jquery-1.2.3.pack.js' type='text/javascript'/>

<script src='http://.../jquery.easynews.js' type='text/javascript'/>

<script>

$(document).ready(function(){

var newsoption4 = {

firstname: &quot;mynews&quot;,

secondname: &quot;showhere2&quot;,

thirdname:&quot;news_display2&quot;,

fourthname:&quot;news_button2&quot;,

newsspeed:&#39;10000&#39;,

effectis:&#39;2&#39;

}

$.init_news(newsoption4);//right side 1st





//var myoffset2=$(&#39;#news_button2&#39;).offset();





//var mytop2=myoffset2.top+161;





$(&#39;#news_button2&#39;).css({top:161});

});



</script>

.- HTML:

<div align='left' id='mynewsdis'><div class='news_border'>

<div class='news_show' id='showhere2'/>

</div>

<div class='buttondiv' id='news_button2'>

<img align='absmiddle' id='news_prev' src='http://www.ezjquery.com/slideimg/prev.gif'/><img align='absmiddle' id='news_pause' src='http://www.ezjquery.com/slideimg/pause.gif'/><img align='absmiddle' id='news_next' src='http://www.ezjquery.com/slideimg/next.gif'/>



</div>

<div class='news_mark'><div class='news_title' id='news_display2'/>

</div></div>

<div id='mynews'>



<div class='news_style' id='news1' rel='Lou"s newest book'>



<table><tr><td><img align='left' height='60' src='http://www.ezjquery.com/slideimg/news1.jpg' width='38'/>

Lou&#39;s newest book -- Independents Day: Awakening the American Spirit -- hit shelves on November 6!<font color='#CC3300'><b>INDEPENDENTS DAY! </b></font></td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news1-1.jpg' width='80'/><font color='#FF9900'><b>The weak dollar</b></font> is threatening the survival of European planemaker Airbus, chief executive Tom Enders told workers in Hamburg on Thursday.</td></tr></table>

</div>

<div class='news_style' id='news2' rel='Lou Dobbs Tonight'>

<table><tr><td><img align='left' height='49' src='http://www.ezjquery.com/slideimg/news2.jpg' width='65'/><font color='#CC3300'><b>&quot;Lou Dobbs Tonight&quot;</b></font> is moving to prime-time! Starting Monday, November 5th.</td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news2-1.jpg' width='80'/><font color='#FF9900'><b>India</b></font> were held up by a rearguard action from Pakistan&#39;s Misbah-ul-Haq after taking control on the opening afternoon of the first Test in Delhi.</td></tr></table>



</div>

<div class='news_style' id='news3' rel='On this Veterans Day'><table><tr><td>

<img align='left' height='70' src='http://www.ezjquery.com/slideimg/news3.jpg' width='125'/><i><b><font color='#000080'>On this Veterans Day,</font></b></i> we honor the men and women serving our country in uniform. please watch here.</td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news3-1.jpg' width='80'/>An annual report on<font color='#FF9900'><b> drug use</b></font> says around 4.5 million Europeans are likely to have used cocaine in the past year - a million more than in 2006.</td></tr></table>

</div>

<div class='news_style' id='news4' rel='War on the Middle Class'><table><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news4.gif' width='37'/><font color='#FF3300'><b>&quot;War on the Middle Class&quot;</b></font>



&quot;The government, big business, and special interest groups are enriching themselves at our expense.</td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news4-1.jpg' width='80'/><font color='#009933'><b>&quot;In diplomacy, as you know, we don&#39;t get instant replies,&quot;</b></font> said John Negroponte carefully, as he addressed the media before leaving Islamabad.</td></tr></table>

</div>



</div>

Cambiad alineación, colores y demás que estiméis oportuno, y listos...