Ir para conteúdo
beowlf

[Resolvido]Copiar um Css de um site de noticias

Recommended Posts

Boa noite! 

estou desenvolvendo esse site http://agricolaterranova.com.br/e na parte de noticias eu estou buscando de outro site.

 

a busca das noticias está ok, mas eu não consigo estilizar o meu onde estão as noticias. eu quero que fique como do site que eu estou pegando as informacoes https://www.noticiasagricolas.com.br/noticias/.

 

eu gostaria que alguém me ajudasse para que o resultado ficasse igual o arquivo em anexo

 

Desde ja agradeço pela ajuda, meu whats caso alguem queria falar diretamente (44) 99829-3326-Fabiano

Obrigado!

 

Sem título-1.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia! Maujor

desculpa pelo comentário 

Citar

....caso alguem queria falar diretamente ...

vou retirar

 

em relação ao código que você passou ficou perfeito, porem o site em que eu pego as informações não é estático, estou usando um código php para pegar essas noticias de outro site.

 

A minha duvida é acerca do código que se mantem aparamente estático e não estiliza junto com as atualizações das noticias. na imagem abaixo é o exemplo como fica na minha pagina.

 

vou colocar o link do meu site http://agricolaterranova.com.br/

vou colocar o link de onde eu pego essas informações https://www.noticiasagricolas.com.br/noticias/

 

Obrigado por seu tempo...

Atenciosamente,

Fabiano

Sem título-2.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde!  Maujor

 

vou anexar aqui com eu insiro a noticia no site, esse é o código em php que pega as informações que eu preciso.

<?php

//url do site
$url = 'https://www.noticiasagricolas.com.br/noticias/';

//pegando todo o conteudo 
$dadosSite = file_get_contents($url);

$var1 = explode('<h3>',$dadosSite);
$var2 = explode("</ul>",$var1[1]);

print $var2[0];

?>

e esse é o frame que eu coloco no site

<iframe src="http://www.herbiterra.com.br/noticias.php" name="cotacao" width="200" height="327" frameborder="0" scrolling="yes"></iframe>

Agradeço desde ja 

 

Atenciosamente.

 

Fabiano

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

Retire o iframe e no local da inserção das notícias insira o seguinte código:

<?php
//url do site
$url = 'https://www.noticiasagricolas.com.br/noticias/';
//pegando todo o conteudo 
$dadosSite = file_get_contents($url);
$var1 = explode('<h3>',$dadosSite);
$var2 = explode("</ul>",$var1[1]);
$var2 = str_replace("<a href=\"/noticias","<a target=\"_blank\" href=\"https://www.noticiasagricolas.com.br/noticias",$var2);
?>
<style rel="stylesheet">
.tn-noticias {
  width: 100%;
  max-width: 522px;
  font: 14px arial, sans-serif;
}
.tn-noticias h3 {
  font-size: 14px;
}
.tn-noticias ul {
  margin: 0;
  padding: 0;
}
.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}
.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}
.tn-noticias li a {
  color: #444;
  text-decoration: none;
}
.tn-noticias li a div {
  margin-left: 85px;
}
.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}
</style>
<div class="tn-noticias">
<h3>
<?php
  print utf8_encode($var2[0]);
?>
</div>

 

  • Obrigado! 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por hostbasico
      Segue o link para verificação de como é a imagem: https://magz.vallesites.com.br/
      Fiz a montagem dela por partes, mas acabou não dando certo, pois um link enta entrando dentro da outra imagem, ficando assim errado.
       
      Gostaria de saber a melhor forma, pois ao passar o mouse, preciso que a parte da imagem do respectivo serviço fique de outra cor.
      E ao clicar essa cor diferente fique fixa e a descrição abaixo dela mude, conforme eu clicar em uma dessas imagens.
       
      Desde já agradeço.
    • Por Venaxmyth
      Boa tarde caros amigos, como estão?
      Estou bem, apenas com um probleminha em uma página minha.
      E sou iniciante em tudo.
       
      Vou compartilhar da formar mais clara aqui para vocês entenderem.
      Atualmente meu site tem apenas um botão flutuante na página como mostrar as setas na imagem abaixo:


       
       
      Só que estou tentando adicionar outro botão conforme mostrarei em imagem abaixo também.
      O efeito do outro botão em cor laranja, é quando passar o mouse ele abre umas informações.
      Ele só funciona se eu remover o css principal do site, acredito que teja algo em conflito com ele.
       
      Vou postar o site em anexo, realmente precisaria de uma ajuda.
      Ficaria grato quem conseguisse me desvendar esse problema.
       
      A imagem do segundo botão é como está aqui abaixo:
       

       
       
      Em anexo deixarei o código do meu site.
      https://www.mediafire.com/file/k66gp06p460ff3c/Tema_site.zip/file
    • Por Claudia França
      Prezados preciso terminar um projeto do Visa checkout e, estou com dificuldades no fim dele. Peguei no meio do caminho e como programo a pouco tempo gostaria que me ajudassem. 
      Ao escolher um valor para um transação, eu preciso enviar para o email da empresa e do cliente, as inconformações com dados da transação como valor etc.  Fiz o codico abaixo para empresa receber o valor, mas não funcionou. 
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Documento sem título</title>
      </head>
      <body>
          <pre>
              
          <?php
      function pegaValor($valor) {
          return isset($_POST[$valor]) ? $_POST[$valor] : '';
      }
      function validaEmail($email) {
          return filter_var($email, FILTER_VALIDATE_EMAIL);
      }
      function enviaEmail($de, $assunto, $mensagem, $para, $email_servidor) {
          $headers = "From: $email_servidor\r\n" .
                     "Reply-To: $de\r\n" .
                     "X-Mailer: PHP/" . phpversion() . "\r\n";
          $headers .= "MIME-Version: 1.0\r\n";
          $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
       
        mail($para, $assunto, nl2br($mensagem), $headers);
      }
      $email_servidor = "cjfranca2004@gmail.com";
      $para = "cjfranca2004@gmail.com";
      $de = pegaValor("valor");
      $mensagem = pegaValor("real");
      $mensagem=pegaValor("dolar");
      $name="valor";
      print_r($mensagem);
      print_r($para);
      print_r($valor);
      print_r($mensagem);
      ?>
      </pre>
      </body>
          
      </html>
       
      Não deu certo.  E por fim ainda mostra essa mensagem de erro, ao finalizar a transação.
       
       
      Desde já agradeço todo esforço em me ajudarem.
       
       
       
       

    • Por clickanapolis
      Bom dia, pessoal eu estou com uma duvida.   Eu crio colunas com   <div class="col-md-4">   no meu site e crio dentro de cada coluna uma div para mostrar informações.   O problema que quando entro pelo celular essa div fica uma colada na outra, pelo computador fica perfeita separadas, mais no responsivo fica estranho uma div colada na outra sem espaçamento, como eu daria um espaçamento entre as col quando tiver no responsivo alguém já passou por isso?
    • Por Fernando Martinelli
      Olá,
       
      Estou desenvolvendo um site de notícias em ASPX, JavaScript e banco de dados. Percebi que quando procuro um assunto tipo: "Pesquisa IBOPE" os sites que aparecem em no topo da lista de busca do Google são os que a própria página tem esse tema no nome, ex: "https://www.opovo.com.br/noticias/politica/2018/10/pesquisa-presidente-2-turno-haddad-bolsonaro-quarta-25-outubro-25-10.html".
          Mas nesse caso a página HTML foi editada manualmente e postada no site. Eu gostaria que meu site gerasse a página da notícia dinamicamente pegando as informações sobre a notícia no banco de dado. Para isso eu só poderia ter a manchete como parâmetro na url, no título da página e nos metas.
      Com isso eu perco eficiência no SEO?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.