XtGem Forum catalog

Webdesignarena: Home For Web Design Tutorials, Codes, Seo Tips And Others

A Largest Blog Site Based On Web Design Tutorials, Blogspot & Wordpress Tutorials, Seo Tips, Xtgem, Wapkiz, Wapkuz, Nextwapblog And Wapelf Codes, Many Coding Helps And Games And Apps Download

Stats: Forum: 2 member(s) Guestbook: 2232 post Subscriber: 2 sub. Date: Today is Monday 24th June 2024 And the time is 2:17:21 pm

Webdesignarena Forum Rules

* Mrkunlex What is Blogger Recent Post Image Gallery?

Blogspot Recent Post Gallery is a blogger widget which displays the thumbnails of your Recent articles according to the number of thumbnails display set on your blogspot Gallery code/widget.

The recent post Images that will be displayed are clickable to the post they image belongs.
I.e if You create a post about how to make money online and added an image of any currency , If recent post Gallery code is set on your widget that currency image will be shown with a link to the post "how to make money online"

This feature will not only beautify your blogger website but also it will enhance easy Navigation and also it will reduce your bounce rate and increase your daily pageviews as well knowing that some of your readers may likely get attracted by your post images and click on them to read articles related to the thumbnails.

To Add Recent image Gallery widget to your blogspot website simply follow below steps:


Login To Your Blogger Dashboard and click on Layout:

From the layout section Select add Gadget in the area you want this feature to display on your Website.

Now there are many Gadgets but you have to select the HTML section gadget to place your code
Now copy The below blogspot Recent post Gallery widget code
/* CSS Recent Post Gallery Widget */
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
<script type='text/javascript'>
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
var recentpost_thumbs = 72;
var recentpost_title = true;
<script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=gallerygrid"></script></textarea>

Copy code

and paste it in the gadget area as show in the below screenshot
With the Above steps completed you have successful added an image Gallery widget to your Blogger website and it will show as below screenshot:
2018-06-28 07:01 · (0)

Online: Guests: 1
  • zlatan-700x465-1-1.jpg
  • Nokia Games Prince of Persia Classic Screen 320x240.jar
  • Super Pocket Football 2015 240x320.jar
  • Super Pocket Football 2015 Sony Ericsson k800i 240x320.jar
  • Chhota Bheem Kart Racer 240x320.jar
  • 1234...222324»
  • WhatsApp 2 12 10.jar
  • Nimbuzz chat beta.jar
  • Frim Chat.jar
  • uTweet Me v1.3.jar
  • Facebook chat app with text styler by WEEZYWAP.jar
  • 1234...222324»
  • Epston-Blogger-Template.zip
  • cicero.zip
  • CarsPortal-Blogger-Template.zip
  • Table-Blogger-Template.zip
  • Almia-Blogger-Template.zip
  • 1234...171819»
    Share This Page: Facebook Twitter Google+
  • Privacy Policy
  • Disclaimer
  • Terms Of Service
  • Guestbook
  • Chatroom
  • About Owner
  • About Site
  • Facebook
  • Twitter
  • Instagram
  • Google+

  • Last Updated: 2018-10-13 01:35:00:AM

    Online : 1, Today : 213, This Month : 573, Total : 10667 visitors

    Site Menu
    Webmaster/Wapmaster Zone | Forum | Chatroom | Games | Apps | Music/Video
    DISCLAIMER: Webdesignarena Users is solely responsible for what he/she post on this site

    ©2018 (Webdesignarena)- Designed & Owned By Mrkunlex