Criar Widget da forma exemplo

Detalhes da questão

Descrição

AquilesD. escreveu:Olá,

Você quer os widget de forma editável, ou deseja eles como os últimos assuntos, só com o design igual a imagem disponibilizada?

Até mais!

Código:

<div class="imgref">
   <img class="imgref1" alt="Trem" src="http://www.vale.com/brasil/PT/aboutvale/news/PublishingImages/1foto_trem_Efvm.jpg" />
</div>
<div class="titulo">
   Aqui será adicionado o título
</div><br><br>
<div class="desctop">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><br><br>
<a href="/forum" target="_self"><button class="bottom" name="button">LER MAIS!</button></a>
<style>
img.imgref1 {
    width: 300px;
    height: 251px;
    float: left;
    padding: 5px;
}
.titulo {
    padding: 10px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.desctop {
    float: right;
    max-width: 451px;
    margin-top: -40px;
}
button.bottom {
    padding: 4px;
    border: 3px solid #1f6bd8;
    border-radius: 14px;
    width: 104px;
    height: 41px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1f6bd8;
    font-weight: bold;
    margin-top: 12px;
}
button.bottom:hover {
    border: 3px solid #2e61ab;
    text-decoration: underline;
}
</style>

Código:

<br />
<div class="imgref">
     <img src="https://i.servimg.com/u/f71/20/00/24/55/spider10.jpg" alt="Trem" class="imgref1" />
</div>
<div class="titulo">
     O Rei Leão
</div><br /><br />
<div class="desctop">
     Simba (Donald Glover) é um jovem leão cujo destino é se tornar o rei da selva. Entretanto, uma armadilha elaborada por seu tio Scar (Chiwetel Ejiofor) faz com que Mufasa (James Earl Jones), o atual rei, morra ao tentar salvar o filhote. Consumindo pela culpa, Simba deixa o reino rumo a um local distante, onde encontra amigos que o ensinam a mais uma vez ter prazer pela vida.
</div><br /><br /><a target="_self" href="https://www.canalinterativoonline.com/t281-o-rei-leao-4#289"></a>
<button style="" name="button" class="bottom">
   LER MAIS!
</button><a target="_self" href="https://www.canalinterativoonline.com/t281-o-rei-leao-4#289"></a><style>
img.imgref1 {
    width: 300px;
    height: 251px;
    float: left;
    padding: 5px;
}
.titulo {
    padding: 10px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.desctop {
    float: right;
    max-width: 451px;
    margin-top: -40px;
}
button.bottom {
    padding: 4px;
    border: 3px solid #1f6bd8;
    border-radius: 14px;
    width: 104px;
    height: 41px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1f6bd8;
    font-weight: bold;
    margin-top: 12px;
}
button.bottom:hover {
    border: 3px solid #2e61ab;
    text-decoration: underline;
}
</style>

Código:

<div class="newmodule"><br />
<div class="imgref">
    <img src="https://i.servimg.com/u/f71/20/00/24/55/spider10.jpg" alt="Trem" class="imgref1" />
</div>
<div class="titulo">
    O Rei Leão
</div><br /><br />
<div class="desctop">
    Simba (Donald Glover) é um jovem leão cujo destino é se tornar o rei da selva. Entretanto, uma armadilha elaborada por seu tio Scar (Chiwetel Ejiofor) faz com que Mufasa (James Earl Jones), o atual rei, morra ao tentar salvar o filhote. Consumindo pela culpa, Simba deixa o reino rumo a um local distante, onde encontra amigos que o ensinam a mais uma vez ter prazer pela vida.
</div><br /><br /><form method="get" action="https://www.canalinterativoonline.com/t281-o-rei-leao-4#28"><button type="submit" class="bottom">LER MAIS!</button></form>
</div><style>
img.imgref1 {
    width: 350px!important;
    height: 251px!important;
    float: left;
    padding: 5px;
}
.titulo {
    padding: 10px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.desctop {
    float: right;
    max-width: 451px;
    margin-top: -40px;
}
button.bottom {
    padding: 4px;
    border: 3px solid #1f6bd8;
    border-radius: 14px;
    width: 104px;
    height: 41px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1f6bd8;
    font-weight: bold;
    margin-top: 12px;
}
button.bottom:hover {
    border: 3px solid #2e61ab;
    text-decoration: underline;
}
</style>

Código:

<div class="newmodule">
    <br>
   <div class="imgref">
          <img src="https://i.servimg.com/u/f71/20/00/24/55/dengue11.jpg" alt="Trem" class="imgref1">
   </div>
   
   <div class="titulo">
          Dengue 
   </div><br><br>
   <div class="desctop">
          Com o início do inverno – que ocorreu oficialmente nesta sexta-feira (21) –, a tendência é que haja uma queda nos casos de dengue, uma vez que o clima frio ajuda a diminuir a proliferação do Aedes aegypti, mosquito transmissor da doença.
   </div><br><br>
   <form method="get" action="https://www.canalinterativoonline.com/t285-aguai-vargem-e-casa-branca-tem-maiores-indices-de-dengue">
      
      <button type="submit" class="bottom" style="float: right;">
          LER MAIS!
      </button>
      
   </form>
</div>