terça-feira, 17 de novembro de 2015

Recent Post Sidebar Widget com Thumbnails

                                                     

Recent-post-sidebar-widget-com-thumbnails

Recent post widget sidebar é um elegante widget que ajuda seu blogger a ser melhor a real função disso é promover o que esta recente no seu blogger esse widget tem um layout limpo com thumbnails e também com uma barra a aparecer para separar um abaixo de outro para adicionar no seu blogger siga os passos abaixo

Adicionando recent post sidebar no blogger

Adicionando widget no blogger para isso faça login no blogger 
apos isso  procure o menu modelo então >>> editar/HTML 
com as teclas combinadas CTRL+F  busque por ]]></b:skin> e logo acima disso copie o código e cole



#sidebar{
  width: 250px;
  margin-left:50%;
}

/*
Style Sidebar Recent Blog Posts with 75x75px Thumbnails
*/
ul#side-rcnt-thumb-post-list {
list-style: none;
margin: 0;
padding: 0;
}

#side-rcnt-thumb-post-list li {
margin-top: 15px;
overflow: hidden;
border-top: 1px solid #CCC;
padding-top: 15px;
position: relative;
min-height: 76px;
}


.srtpl-l {
float: left;
margin-right: 15px;
}

.srtpl-a {
display: block;
outline: 0!important;
font-weight: 400;
}

#side-rcnt-thumb-post-list img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

.srtpl-r {
margin-left: 90px;
}


.srtpl-n {
display: block;
color: #343534;
line-height: 1.2;
font-weight: 600;
font-size: 13px;
  outline: 0!important;
text-decoration: none;
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

clique em salvar. 

Para adicionar html no blogger 

No menu layout procure por adicionar um gadget clique procure por Javascript/HTML então copie o seguinte código e cole 

<div id="sidebar">


<ul id="side-rcnt-thumb-post-list">
  <li>
    <div class="srtpl-l">
        <a href="#" class="srtpl-a">
            <img class="srtpl-thumb" src="https://dujk9xa5fr1wz.cloudfront.net/course/75x75/86454_2066_10.jpg" alt="">
        </a>
    </div>
    <div class="srtpl-r">
        <a href="#" class="srtpl-n">Photo Gallery with PHP, MySQL, ImageMagick and jQuery</a>
    </div>
  </li>
  <li class="srtpl-li">
    <div class="srtpl-l">
        <a href="#" class="srtpl-a">
            <img class="srtpl-thumb" src="https://dujk9xa5fr1wz.cloudfront.net/course/75x75/84900_2c11_11.jpg" alt="">
        </a>
    </div>
    <div class="srtpl-r">
        <a href="#" class="srtpl-n">Advanced search form with PHP and MySQL</a>
    </div>
  </li>
  <li class="srtpl-li">
    <div class="srtpl-l">
        <a href="#" class="srtpl-a">
            <img class="srtpl-thumb" src="https://dujk9xa5fr1wz.cloudfront.net/course/75x75/23433_c1b1_7.jpg" alt="">
        </a>
    </div>
    <div class="srtpl-r">
        <a href="#" class="srtpl-n">Secure Online Contact Form with Attachment</a>
    </div>
  </li>
  <li class="srtpl-li">
    <div class="srtpl-l">
        <a href="#" class="srtpl-a">
            <img class="srtpl-thumb" src="https://dujk9xa5fr1wz.cloudfront.net/course/75x75/86642_289a_9.jpg" alt="">
        </a>
    </div>
    <div class="srtpl-r">
        <a href="#" class="srtpl-n">Photo Gallery with Image Tagging</a>
    </div>
  </li>
  <li class="srtpl-li">
    <div class="srtpl-l">
        <a href="#" class="srtpl-a">
            <img class="srtpl-thumb" src="https://dujk9xa5fr1wz.cloudfront.net/course/75x75/91436_5875_2.jpg" alt="">
        </a>
    </div>
    <div class="srtpl-r">
        <a href="#" class="srtpl-n">Shopping List with AngularJS, PHP and SQLite</a>
    </div>
  </li>
  <li class="srtpl-li">
    <div class="srtpl-l">
        <a href="#" class="srtpl-a">
            <img class="srtpl-thumb" src="https://dujk9xa5fr1wz.cloudfront.net/course/75x75/91434_1449_15.jpg" alt="">
        </a>
    </div>
    <div class="srtpl-r">
        <a href="#" class="srtpl-n">Easy CSS with Sass</a>
    </div>
  </li>
</ul>
  
  </div>

Nota troque todos os # acompanhado de  ahref="coloque o link do seu post".

depois veja o resultado

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner