Popular Post widget arlina blogger

popular post keren widget new stylish blogger

Hoje vamos apresentar popular post widger arlina isso tem um layout elegante popular post sempre foi util para chamar atenção no Blogger isso gera mais visualizações e também melhora a visualização para os visitantes então se deseja adicionar esse widget na sidebar siga os passos abaixo


Adicionando widget post blogger:

Faça login no blogger então va no menu modelo editar HTML com as teclas combinadas 
CTRL+F procure por </body> então cole o seguinte código antes:

 <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

Agora busque por </style> ou ]]></b:skin> e cole o seguinte código antes disso: 

.sidebar .PopularPosts ul { counter-reset:popularcount; margin:0; padding:0; }
.sidebar .PopularPosts ul li { width:100%; list-style:none !important; padding:0 !important; margin-bottom:20px; position:relative; border:0; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; height:120px; }
.sidebar .PopularPosts .item-thumbnail { width:100%; position:relative; margin-bottom:15px; }
.sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0) none repeat scroll 0 0; border-bottom:29px solid #fff; border-left:29px solid transparent; border-right:29px solid transparent; bottom:0; content:&quot; &quot; ; height:0; width:0; left:0; right:0; margin-left:auto; margin-right:auto; position:absolute; z-index:3; }
.sidebar .PopularPosts .item-thumbnail:after { color:#000; content:counter(popularcount,decimal); counter-increment:popularcount; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; list-style-type:none; position:absolute; bottom:0; text-align:center; margin:0 auto; left:0; right:0; z-index:4; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; width:100%; height:120px; object-fit:cover; }
.sidebar .PopularPosts .item-title { font:15px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; text-align:center; margin:0 auto; padding-bottom:10px; border-bottom:1px solid #000; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { padding:10px 15px; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; text-align:center; }

Salve isso 


Va em layout adicionar gadget procure por popular post e deixe marcado todas as alternativas como mostra a figura abaixo salve e pronto vai ter o resultado.

terbaik untuk belajar
Salve e pronto 



Click to comment