Widget popular post panduim blogger 2018

popular post widget new stylish 2018 sendiri untuk pemula fitur badah


Hoje vamos compartilhar esse incrivel widget panduim isso tem um perfeito estilo indicado para criar mais visibilidade as postagens que são uma fonte de impulso para seu Blogger isso é realmente fantástico, pode ser colocado quantos post desejar e modificar conforme a necessidade para adicionar no seu template siga os passos abaixo:


Adicionando o widget no template do seu Blogger:

acesse o Blogger então vá no menu tema editar HTML
com as teclas combinadas CTRL+F  procure por </style> então antes disso copie e cole o seguinte: código:

/*SIDEBAR PANDUANIM*/

.sidebar-membuatblog {
    background: url('http://panduanim.com/wp-content/uploads/2015/01/Membuat-Blog.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-membuatblog:hover {
 background-size: 120% auto;
}
.sidebar-strategiblog {
    background: url('http://panduanim.com/wp-content/uploads/2015/06/Tips-Blog.jpg') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-strategiblog:hover {
 background-size: 120% auto;
}
.sidebar-jualanonline {
    background: url('http://panduanim.com/wp-content/uploads/2015/06/Jualan-Online.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-jualanonline:hover {
 background-size: 120% auto;
}
.sidebar-kontenpenjualan {
    background: url('http://panduanim.com/wp-content/uploads/2015/08/Konten-untuk-Meningkatkan-Penjualan.png') no-repeat 50% 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-kontenpenjualan:hover {
 background-size: 120% auto;
}


Salve  isso

Va no menu layout então clique em adicionar novo gadget escolha HTML/JavaScript então copie e cole o seguinte código:



<a href="http://www.mybloggerseo.com" target="_blank"><div class="sidebar-membuatblog"></div></a>
<a href="http://www.mybloggerseo.com" target="_blank"><div class="sidebar-jualanonline"></div></a>
<a href="http://www.mybloggerseo.com" target="_blank"><div class="sidebar-kontenpenjualan"></div></a>
<a href="http://www.mybloggerseo.com" target="_blank"><div class="sidebar-strategiblog"></div></a>

salve e confira o resultado:


Obs: Não esqueça de trocar os links das fotos bem como os links para a postagem, você pode adequar o código conforme seu gosto.

Click to comment