Breaking

Sunday, September 15, 2019

Add to Blog Two Column Recent Post Widget with Thumbnails in blogger- getshelps.info

Add to Blog Two Column Recent Post Widget with Thumbnails in blogger

Add to Blog Two Column Recent Post Widget with Thumbnails

Add a two-column Recent Post Widget according to the Label of the blog with Multiple Thumbnails to style the blogger template.

A few days ago we shared the recent Post Widget with the Magazine Style Multiple Thumbnail according to the blog Label. After doing that post, many people asked me to share Two Column Recent Post Widget. For that reason, we have to share another recent Post Widget considering the needs of everyone. For those who are thinking of creating a magazine template, this widget will provide a lot of work.

This widget will highlight two new Label posts on your blog's home page. Visitors can easily get a sense of all the level posts on your blog. Besides, many more options have been put in it, including the date of the comment and the post. These will help give your blog template a nice-looking face.

How to add recent post widget:

  • First login to the blog.
  • Then from the Blogger Dashboard, click on Template> Edit HTML.
  • Search by pressing Ctrl + F from the keyboard ]]> </b> skin> section.
  • Now paste the following Css codes above the ]]> </b> skin> tag.
/* Two Column Recent Post
-------------------------------------------------------- */
#pro-left-labels-wrap{width:48%;float:left;margin-bottom:20px}
#pro-right-labels-wrap{width:48%;float:right;margin-bottom:20px}
.pro-left-labels ul{list-style:none;margin:0;padding:0}
.pro-left-labels li{margin:0;padding:0;}
.pro-left-labels .widget{margin:0;padding:0}
.pro-left-labels .widget-content{border:1px solid #CCC;padding:0px;margin:0;word-wrap:break-word;overflow:hidden;border-bottom-left-radius:2px;border-bottom-right-radius:2px}
.pro-left-labels h2{position:relative;margin:0;padding:10px;font-size:16px;font-weight:700;color:#333;border:1px solid #CCC;border-bottom:0px;border-top-left-radius:2px;border-top-right-radius:2px}
.pro-left-labels h2{margin:20px 0 0 0;}
.pro-left-labels h2:before{content:'\f269';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#0caa8e}
.pro-left-labels .index{font-size:10px;float:right;font-weight:400;}
.pro-left-labels .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;text-decoration:none}
.pro-left-labels .index a{color:#0caa8e;border-color:#0caa8e}
.pro-left-labels .index a:hover{background:#0caa8e;color:#fff;border-color:transparent}
.pro-left-labels .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.pro-left-labels span.pro-meta-comment a:hover{color:#FF675C!important}
.pro-left-labels ul.pro-thumbnail li a:hover,.pro-left-labels ul.pro-lthumbnail li a:hover{color:#ff675c;text-decoration:none}
.pro-left2{width:95%;float:left;margin:0;padding:10px 10px 0px 10px}
.pro-right2{width:100%;float:left;margin:0;padding:0}
.pro-right-labels ul{list-style:none;margin:0;padding:0}
.pro-right-labels li{margin:0;padding:0}
.pro-right-labels .widget{margin:0;padding:0}
.pro-right-labels .widget-content{border:1px solid #CCC;padding:0px;margin:0;word-wrap:break-word;overflow:hidden;border-bottom-left-radius:2px;border-bottom-right-radius:2px}
.pro-right-labels h2{position:relative;margin:0;padding:10px;font-size:16px;font-weight:700;color:#333;border:1px solid #CCC;border-bottom:0px;border-top-left-radius:2px;border-top-right-radius:2px}
.pro-right-labels h2{margin:20px 0 0 0;}
.pro-right-labels h2:before{content:'\f005';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#0caa8e}
.pro-right-labels .index{font-size:10px;float:right;font-weight:400;}
.pro-right-labels .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;text-decoration:none}
.pro-right-labels .index a{color:#0caa8e;border-color:#0caa8e}
.pro-right-labels .index a:hover{background:#0caa8e;color:#fff;border-color:transparent}
.pro-right-labels .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.pro-right-labels span.pro-meta-comment a:hover{color:#FF675C!important}
.pro-right-labels ul.pro-thumbnail li a:hover,.pro-right-labels ul.pro-lthumbnail li a:hover{color:#ff675c;text-decoration:none}
ul.pro-thumbnail{margin:0;padding:0}
ul.pro-thumbnail li,ul.pro-lthumbnail{margin:0;padding:0}
ul.pro-thumbnail .sub-thumbnail{position:relative;margin:0 0 10px;padding:0;width:298px;height:160px}
ul.pro-thumbnail .sub-thumbnail img{background: url("https://2.bp.blogspot.com/-2YD_jDcfdYI/VofcyRxiE5I/AAAAAAAAGao/_pyh6hjKuqk/s1600/thumbnail-bg.png") repeat scroll 0px 0px transparent;height:150px;width:95%;padding:7px;transition:all 0.2s}
ul.pro-thumbnail .sub-thumbnail img:hover{opacity:.9;}
ul.pro-lthumbnail li{margin:0px;padding:12px 12px 12px;border-top:1px dotted #CCC}
ul.pro-lthumbnail .sub-lthumbnail{float:left;margin:10px 10px 0 5px;width:60px;height:60px;overflow:hidden}
ul.pro-lthumbnail .sub-lthumbnail img{height:auto;border-radius:5px;transition:all .2s}
ul.pro-lthumbnail .sub-lthumbnail img:hover{opacity:.9;}
ul.pro-lthumbnail li a:hover,ul.pro-thumbnail li a:hover{color:#ff675c;text-decoration:none}
span.pro-titles{font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.pro-ltitle{font-size:16px;line-height:1.4em;margin:0px}
span.pro-titles a{color:#333;text-decoration:none}
span.pro-titles a:hover{color:#ff675c;text-decoration:none;font-family:"Oswald",sans-serif}
span.pro-summarys{display:block;line-height:1.6em;font-size:13px;text-align:justify;text-overflow:ellipsis;margin:10px 0 0 0}
span.pro-meta{display:block;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa}
span.pro-meta a{color:#aaa;text-decoration:none;display:inline-block}
span.pro-meta-date,span.pro-meta-comment,span.pro-meta-more{display:inline-block;margin-right:10px}
span.pro-meta-more a:before{content:"\f178";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.pro-meta-comment a:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.pro-meta-comment a:hover{color:#ff675c!important}
span.pro-meta-date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
  •  From the keyboard again press Ctrl + F to search the <b: section class = 'main' id = 'main' section.
  • Now paste the following codes just above the <b: section class = 'main' id = 'main' tag. 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='pro-left-labels-wrap'>
        <b:section class='pro-left-labels' id='pro-left-labels' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML82' locked='false' title='Pro Label Left' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=prolabelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
<div id='pro-right-labels-wrap'>
        <b:section class='pro-right-labels' id='pro-right-labels' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML83' locked='false' title='Pro Label Right' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=prolabelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>
<div style='clear:both'/>
  •  Finally, Save the Template and get out.
  • Now when you go to the Layout option of Blogger template, you will see two new widgets. Click on the Edit button and you will have to enter your desired Label Name in the empty cell only.

Advance options recent widget:

Add the two lower CSS lines below to keep your widgets in the Layout section of your template neat and not as well as downward.

  • From the Blogger template, press Ctrl + F and search for the <b: skin> section.
  • Then paste the following codes below the <b: skin> tag.
body#layout #pro-left-labels-wrap {width:48%;float:left}
body#layout #pro-right-labels-wrap {width:48%;float:right}
  •  Then Save the Template.
  • From now on, the Layout widget will look like two outputs as well.

No comments:

Post a Comment