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

Two Column Recent Post Widget with Thumbnails in blogger, how to add recent post widgets with thumbnails in blogger, add two column recent post widget.

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.

COMMENTS

Name

Adsense Alternative,2,Adsense info,1,Affiliate marketing,1,airtel new sim offer,1,Android App,1,Android Tricks,1,App developing,1,banglalink bondho sim offer,1,Bitcoin,1,bkash pay bill,1,BL internet offer,1,BL sim offer,1,blogging,10,Bondho sim offer,1,coronavirus,1,coronavirus symptoms,1,Dakhil result,1,data entry,1,domain info,4,download,1,Drop shipping,1,Education,2,Freelancing,1,getshelps,1,gp bondho sim offer 2020,1,gp internet offer,2,GP sim offer,3,gp sms offer,1,graphic design,1,hindi movie download,1,Hindi movie download website,1,hosting info,6,HSC routine 2020,1,Increase ranking,1,internet offer,2,JSC rescrutiny process,1,JSC Rescrutiny Result 2019,1,JSC result,2,make money online,11,National ID card,1,New sim offer,1,NID card,1,NID card download,1,Online marketing,3,PSC result 2019,1,rescrutiny result,1,result,8,Robi 9 taka 1 Gb,1,Robi internet offer,1,routine,3,SEO,8,SIM offer,4,SSC result 2020,3,SSC routine,1,SSC suggestion 2020,3,study,1,Template.,1,Thamplate,1,Youtube video download change url,1,youtuber helps,1,
ltr
item
Gets Helps - Make money ideas, result bd, SIM offer: 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- getshelps.info
Two Column Recent Post Widget with Thumbnails in blogger, how to add recent post widgets with thumbnails in blogger, add two column recent post widget.
https://1.bp.blogspot.com/-R5kcaSziAeI/XX4npYWm2XI/AAAAAAAAAxQ/34kVjfOkV-oHQ4PLDB2qeD7I7cPUDcHngCLcBGAsYHQ/s640/recent%2Bweight.png
https://1.bp.blogspot.com/-R5kcaSziAeI/XX4npYWm2XI/AAAAAAAAAxQ/34kVjfOkV-oHQ4PLDB2qeD7I7cPUDcHngCLcBGAsYHQ/s72-c/recent%2Bweight.png
Gets Helps - Make money ideas, result bd, SIM offer
http://www.getshelps.info/2019/09/add-two-column-recent-post-widgets-in-blogger.html
http://www.getshelps.info/
http://www.getshelps.info/
http://www.getshelps.info/2019/09/add-two-column-recent-post-widgets-in-blogger.html
true
6763698981641185696
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy