Related post keren Widget Grid format

related post keren untuk grid format widget



Related post keren Widget Grid format  é um widget diferenciado isso tem um perfeito Grid o que tornar isso mais limpo e também mais facil das pessoas clicar para visualizar postagens relacionadas se você deseja adicionar no seu template siga os passos abaixo:


Adicionando Related post keren Widget Grid format

Faça login no blogger então va no menu tema
com as teclas combinadas CTRL+F busque por : </head> então copie e cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* css related posts DTE */
#related-wrapper{margin:auto;padding:0 20px}.related-post{width:auto;margin:0 -20px;padding:0}.related-post h4{margin:15px 0 15px 10px}.related-post-style-3{margin:0 3px!important;}.related-post-style-3 li{margin:0!important;width:100%;}.related-post-style-3,.related-post-style-3 li{padding:0;list-style:none;word-wrap:break-word;display:inline-block}.related-post-style-3 .related-post-item{display:block;float:left;height:auto;padding:0 0 10px;margin:0 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:calc(33.33% - 20.2px);}.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:140px;padding:0;z-index:0;overflow:hidden}.related-post-style-3 .related-post-item-tooltip{background:#f5f5f5;padding:13px 10px 16px;overflow:hidden;display:block;position:relative;margin:0 0}.related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:12px;font-weight:700;display:block;color:#444;padding:0;text-transform:uppercase;font-family: Trebuchet MS, sans-serif;}.related-post-style-3 .related-post-item-title:hover{color:#222}.download{background:#dc4b3b;text-align:center;list-style:none;max-width:150px;padding:8px 14px;font-weight:400;transition:all .3s ease-in;display:block;margin:15px auto 25px;color:#fff;border-radius:5px}.klik-download a:link,.klik-download a:visited,.klik-download a:active,.klik-demo a:link,.klik-demo a:visited,.klik-demo a:active{color:#fff;text-transform:capitalize;font-size:135%;transition:all .3s ease-in-out;line-height:30px;text-align:center}.download:hover{background:#d94231;transition:all .3s ease-in}.demo{background:#097ac7;text-align:center;list-style:none;max-width:150px;padding:8px 14px;font-weight:400;transition:all .3s ease-in;display:block;margin:25px auto 0;color:#fff;border-radius:5px}.demo:hover{background:#4586f3;transition:all .3s ease-in;}.klik-download a:hover,.klik-demo a:hover{}#inline_wrapper{display:block;padding:0;margin:0 auto}.related_inline_wrapper{width:100%;display:block;overflow:hidden}.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}ding:0;text-transform:uppercase;}.related-post-style-3 .related-post-item-title:hover{color:#222}
}
</style>
</b:if>

Então coloque o seguinte código sob o código </article> ou conforme seu gosto

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;&lt;h4&gt;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:3,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}
  </script></div>
</b:if>

salve e pronto.

Click to comment