// API callback
relatedposts({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243"},"updated":{"$t":"2023-12-15T03:10:29.561-08:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"posts"},{"term":"css"},{"term":"Comments"},{"term":"adsense"},{"term":"SEO"},{"term":"jQuery"},{"term":"social media"},{"term":"Image Effects"},{"term":"beginner's guide"},{"term":"blogger posts"},{"term":"Navigation"},{"term":"make money online"},{"term":"javascript"},{"term":"adsense optimization"},{"term":"menus"},{"term":"Facebook"},{"term":"adsense tips"},{"term":"social media plugins"},{"term":"popular posts"},{"term":"blogger"},{"term":"blogger pages"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"threaded comments"},{"term":"google plus"},{"term":"related posts"},{"term":"blogging tips"},{"term":"recent comments"},{"term":"slideshows"},{"term":"static pages"},{"term":"tools"},{"term":"Templates"},{"term":"backlinks"},{"term":"custom domain"},{"term":"emoticons"},{"term":"instagram"},{"term":"labels"},{"term":"sitemap"},{"term":"RSS"},{"term":"click bombing"},{"term":"feedburner"},{"term":"firebug"},{"term":"font awesome"},{"term":"google analytics"},{"term":"homepage"},{"term":"invalid clicks"},{"term":"robots"},{"term":"statcounter"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/posts?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/search\/label\/posts"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/posts\/-\/posts?alt=json-in-script\u0026start-index=7\u0026max-results=6"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"29"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-6590088027126792597"},"published":{"$t":"2016-09-13T07:57:00.001-07:00"},"updated":{"$t":"2016-10-28T08:24:04.924-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"related posts"}],"title":{"type":"text","$t":"Customizable Related Posts Widget for Blogger"},"content":{"type":"html","$t":"We already posted a few tutorials on how to add \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/how-to-add-related-posts-widget-to.html\"\u003Erelated posts widget with thumbnails in Blogger\u003C\/a\u003E with summaries or only titles, which can be compiled into a single All-In-One Widget with powerful options. This new customizable related posts widget for Blogger integrates all the features we've seen before and more, such as thumbnails (square or round), post dates, excerpts, display only titles \/ thumbnails.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow let's see what this related posts blogger widget has to offer.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"related posts widget, blogger widget\" border=\"0\" height=\"245\" src=\"https:\/\/1.bp.blogspot.com\/-klS-ZV7SIf0\/V9gOKOH_iwI\/AAAAAAAALuk\/DEUdh6GKbOY8o2y_PJY0enmUYa-LysK2ACLcB\/s400\/related-posts-widget-for-blogger.png\" title=\"Customizable Related Posts Widget for Blogger\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003ERelated Posts Widget Features:\u003C\/h3\u003E\n\u003Cul\u003E\u003Cli\u003E9 attractive styles to match your needs\u003C\/li\u003E\n\u003Cli\u003EShow Title, excerpt \u0026amp; thumbnails\u003C\/li\u003E\n\u003Cli\u003EDisplay simple related posts with titles \/ summaries \/ post date\u003C\/li\u003E\n\u003Cli\u003EChoose whether to display the post thumbnails or not\u003C\/li\u003E\n\u003Cli\u003EAbility to control the thumbnail image size\u003C\/li\u003E\n\u003Cli\u003EOption to choose square or round thumbnails\u003C\/li\u003E\n\u003Cli\u003EShow post text excerpts\u003C\/li\u003E\n\u003Cli\u003EControl the length of the post excerpt \/ title\u003C\/li\u003E\n\u003Cli\u003EDetermine the number of related posts to display\u003C\/li\u003E\u003C\/ul\u003E\n\u003Ch4\u003ERequirements:\u003C\/h4\u003E\n\u003Col\u003E\u003Cli\u003EThe related posts widget recognizes post thumbnails uploaded through Blogger itself (or Picasa Web Albums), other images from Photobucket, Flickr, or other non-Blogger hosts will not be supported.\u003C\/li\u003E\n\u003Cli\u003EThis widget is compatible with the standard desktop Blogger templates except Dynamic Views, which does not accept customization.\u003C\/li\u003E\n\u003Cli\u003EThe script does not work on private blogs, so your blog \/ site must be open to the public in order to show.\u003C\/li\u003E\u003C\/ol\u003E\n\u003Ch2\u003EAdding Customizable Related Posts Widget in Blogger\u003C\/h2\u003E\nLog into your \u003Ca href=\"https:\/\/blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E, go to 'Template' and open template editor by clicking the 'Edit HTML' button below 'Live On Blog' preview.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNext, we're going to use the template search feature, be sure to follow these directions exactly:\u003Cbr \/\u003E\u003Cbr \/\u003E\n1. Place your cursor on the template code.\u003Cbr \/\u003E\n2. Click once.\u003Cbr \/\u003E\n3. Press CTRL and F at the same time (PC) or Command and F (Mac).\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe search box will open in the upper right corner of the template editor.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"344\" src=\"https:\/\/1.bp.blogspot.com\/-yrx8eK37SZQ\/V9HZFTiIITI\/AAAAAAAALtw\/V6CbW1gghmAoyryIEOZ_kPCqJgE2VomEgCPcB\/s640\/blogger-head-tag.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nType \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E in the search box, then press ENTER. This will take you to the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag in your template and highlight it in yellow.\u003Cbr \/\u003E\u003Cbr \/\u003E\nSelect and copy the entire CSS style below and paste it directly ABOVE the  \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:\u003Cspan style=\"color: red;\"\u003E22.7%\u003C\/span\u003E;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:\u003Cspan style=\"color: red;\"\u003E25%\u003C\/span\u003E !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;color:#999999;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\nNext, we need to add the script\u0026nbsp; - search for the following line:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:includable id='postQuickEdit' var='post'\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\nOnce you found it, click the small arrow not beside it but with one level above to expand code and scroll down until you see \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:includable\u0026gt;\u003C\/span\u003E - right below this tag, you should see the line including the \"postQuickEdit\" id.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSee the screenshot for more help:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg border=\"0\" height=\"212\" src=\"https:\/\/3.bp.blogspot.com\/-mHLx2gzbK_w\/U2080khO0lI\/AAAAAAAAJBA\/W_pLHwDKUUw\/s1600\/how-to-add-related-posts-widget-to-blogger.png\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nJust ABOVE the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:includable\u0026gt;\u003C\/span\u003E tag, add the following script:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='related-posts-container' id='related-posts-widget'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div style='clear: both;'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nvar labelArray = [\u0026lt;b:if cond='data:post.labels'\u0026gt;\u0026lt;b:loop values='data:post.labels' var='label'\u0026gt;\u0026amp;quot;\u0026lt;data:label.name\/\u0026gt;\u0026amp;quot;\u0026lt;b:if cond='data:label.isLast != \u0026amp;quot;true\u0026amp;quot;'\u0026gt;,\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:loop\u0026gt;\u0026lt;\/b:if\u0026gt;];\u003Cbr \/\u003E\nvar relatedSettings = {\u003Cbr \/\u003E\nblogURL:\u0026amp;quot;\u0026lt;data:blog.homepageUrl\/\u0026gt;\u0026amp;quot;,\u003Cbr \/\u003E\nrelatedHeading:\u0026amp;quot;\u0026amp;lt;h4\u0026amp;gt;\u0026amp;lt;span\u0026amp;gt;\u003Cspan style=\"color: red;\"\u003ERelated Posts\u003C\/span\u003E\u0026amp;lt;\/span\u0026amp;gt;\u0026amp;lt;\/h4\u0026amp;gt;\u0026amp;quot;,\u003Cbr \/\u003E\nrelatedPosts:\u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003Cbr \/\u003E\nrelatedStyle:\u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003Cbr \/\u003E\nthumbnailSize:\u0026amp;quot;w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-p-nu\u0026amp;quot;,\u003Cbr \/\u003E\ndefaultThumb:\u0026amp;quot;https:\/\/4.bp.blogspot.com\/-BLiit18tHXA\/V9gCeNNCXzI\/AAAAAAAALt8\/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB\/w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-c\/no-thumb.png\u0026amp;quot;,\u003Cbr \/\u003E\nroundThumbs:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003Cbr \/\u003E\ntitleLength:\u0026amp;quot;\u003Cspan style=\"color: red;\"\u003Eauto\u003C\/span\u003E\u0026amp;quot;,\u003Cbr \/\u003E\nsnippetLength:\u003Cspan style=\"color: red;\"\u003E45\u003C\/span\u003E,\u003Cbr \/\u003E\ncenterText:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003Cbr \/\u003E\nopenNewTab:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E\u003Cbr \/\u003E\n};\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nvar randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]=\"undefined\"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement(\"script\");d.type=\"text\/javascript\",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i=\"object\"==typeof labelArray\u0026amp;\u0026amp;labelArray.length\u0026gt;0?\"\/-\/\"+h(labelArray)[0]:\"\",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b\u0026gt;0?b:1);f(d.blogURL.replace(\/\\\/$\/,\"\")+\"\/feeds\/posts\/summary\"+i+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;start-index=\"+c+\"\u0026amp;max-results=\"+d.relatedPosts+\"\u0026amp;callback=startRelated\")},k=function(a){var l,m,n,o,p,q,b=document.getElementById(\"related-posts-widget\"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'\u0026lt;ul class=\"related-posts-'+e+'\"\u0026gt;',g=d.openNewTab?' target=\"_blank\"':\"\",i=d.centerText?\"text-align:center;\":\"\",j=d.roundThumbs?\"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;\":\"\",k='\u0026lt;span style=\"display:block;clear:both;\"\u0026gt;\u0026lt;\/span\u0026gt;';if(b){for(var r=0;r\u0026lt;d.relatedPosts\u0026amp;\u0026amp;r!=c.length;r++){n=c[r].title.$t,o=\"auto\"!==d.titleLength\u0026amp;\u0026amp;d.titleLength\u0026lt;n.length?n.substring(0,d.titleLength)+\"\u0026amp;hellip;\":n,p=\"media$thumbnail\"in c[r]\u0026amp;\u0026amp;d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(\/\\\/s[0-9]+(\\-c)?\/,\"\/\"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=[\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"],u=l.split(\"-\")[2].substring(0,2),v=l.split(\"-\")[1],w=l.split(\"-\")[0],x=0;x\u0026lt;s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+\" \"+u+\" \"+w,q=\"summary\"in c[r]\u0026amp;\u0026amp;d.snippetLength\u0026gt;0?c[r].summary.$t.replace(\/\u0026lt;br ?\\\/?\u0026gt;\/g,\" \").replace(\/\u0026lt;.*?\u0026gt;\/g,\"\").replace(\/[\u0026lt;\u0026gt;]\/g,\"\").substring(0,d.snippetLength)+\"\u0026amp;hellip;\":\"\";for(var y=0,z=c[r].link.length;y\u0026lt;z;y++)m=\"alternate\"==c[r].link[y].rel?c[r].link[y].href:\"#\";1==e?f+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+\"\u0026gt;\"+o+\"\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\":2==e?f+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-snippets\"\u0026gt;'+q+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":3==e?f+='\u0026lt;li class=\"related-post-item\" style=\"'+i+'\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-snippets\"\u0026gt;'+q+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":4==e?f+='\u0026lt;li class=\"related-post-item\" style=\"'+i+'\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-date\"\u0026gt;'+postdate+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":5==e?f+='\u0026lt;li class=\"related-post-item\" style=\"'+i+'\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+\"\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\":6==e?f+='\u0026lt;li class=\"related-post-item\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-wrapper\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-wrapper-inner\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+\"\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\":7==e?f+='\u0026lt;li class=\"related-post-item\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;':8==e?f+='\u0026lt;li class=\"related-post-item\"\u0026gt;\u0026lt;a class=\"related-post-item-wrapper\" href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-date\"\u0026gt;'+postdate+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":9==e\u0026amp;\u0026amp;(f+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-snippets\"\u0026gt;'+q+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\")}b.innerHTML=f+=\"\u0026lt;\/ul\u0026gt;\"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(\/\\\/$\/,\"\")+\"\/feeds\/posts\/summary\"+i+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;max-results=0\u0026amp;callback=randomRelatedIndex\")}(window,document,document.getElementsByTagName(\"head\")[0]);\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003E\nHow to Customize the Related Posts Widget for Blogger?\u003C\/h2\u003E\nTo change the 'Related Posts' text that appears above the widget, modify the text in red:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nrelatedHeading: \u0026amp;quot;\u0026amp;lt;h4\u0026amp;gt;\u0026amp;lt;span\u0026amp;gt;\u003Cspan style=\"color: red;\"\u003ERelated Posts\u003C\/span\u003E\u0026amp;lt;\/span\u0026amp;gt;\u0026amp;lt;\/h4\u0026amp;gt;\u0026amp;quot;,\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\nTo change the number of posts to display, change the '4' value from this line:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nrelatedPosts: \u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\nNote: you may need to change the percentages in the CSS styles above in order to make posts fit the related container. Just follow the values in red and play with them until you get the best results.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTo change the style of the related posts widget, modify the '4' value from:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nrelatedStyle: \u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Ch4\u003EAvailable Related Posts Styles\u003C\/h4\u003E\n\u003Col\u003E\u003Cli\u003Esimple related posts widget that will show post titles only\u003C\/li\u003E\n\u003Cli\u003Edisplay post titles and snippets\u003C\/li\u003E\n\u003Cli\u003Edisplay post thumbnails, titles and snippets\u003C\/li\u003E\n\u003Cli\u003Edisplay related posts thumbnails, titles and post date (shows by default)\u003C\/li\u003E\n\u003Cli\u003Edisplay related posts thumbnails and titles\u003C\/li\u003E\n\u003Cli\u003Epost titles in front of thumbnails, instead of having them below the thumbnail\u003C\/li\u003E\n\u003Cli\u003Edisplay thumbnails only\u003C\/li\u003E\n\u003Cli\u003Esmall thumbnail with titles on the right and date below\u003C\/li\u003E\n\u003Cli\u003Esmall thumbnails with post titles and excerpts on the right\u003C\/li\u003E\u003C\/ol\u003E\n\u003Ch3\u003ECustomizing the Related Post Thumbnail Size \u0026amp; Style\u003C\/h3\u003E\nBy default, thumbnails are resized and cropped automatically to be 300px wide by 200px tall. If you want to change the width and height of the thumbnails, modify the '300' and '200' values from:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nthumbnailSize: \u0026amp;quot;w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-p-nu\u0026amp;quot;,\u003Cbr \/\u003E\ndefaultThumb: \u0026amp;quot;https:\/\/4.bp.blogspot.com\/-BLiit18tHXA\/V9gCeNNCXzI\/AAAAAAAALt8\/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB\/w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-c\/no-thumb.png\u0026amp;quot;,\u003C\/blockquote\u003E\nNote: 'w' comes from width, 'h' comes from height. To make the thumbnails square, change the 'h' (height) value and make it equal with 'w' (width) value. A higher value will result in more high-res images.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you want thumbnails have rounded corners, change 'false' with 'true':\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003EroundThumbs:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3\u003ECustomizing Related Titles \u0026amp; Excerpts \u003C\/h3\u003E\nTo shorten the post title, change \u003Cspan style=\"color: red;\"\u003Eauto\u003C\/span\u003E with the number of characters to show:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003EtitleLength: \u0026amp;quot;\u003Cspan style=\"color: red;\"\u003Eauto\u003C\/span\u003E\u0026amp;quot;,\u003C\/blockquote\u003E\u003Cbr \/\u003E\nTo reduce or add more characters to the snippets, change the \"45\" value:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003EsnippetLength: \u003Cspan style=\"color: red;\"\u003E45\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003E\nIf you want to center text (title and summary), change 'false' to 'true':\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003EcenterText:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003E\nTo open links in a new tab when visitors click on a related post, change \"false\" to \"true\":\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003EopenNewTab: \u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\nOnce you're done with the settings, click the 'Save Template' button and now you can see the related posts widget live on your Blogger blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EFinal words\u003C\/h4\u003E\nThat's it! With the new customizable Related Posts widget for Blogger you will be able to add unique features to the related content section of your blog. However, all of these styles look and work slightly different, so take your time, and pick your favorite."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/6590088027126792597\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/09\/new-related-posts-widget-for-blogger.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6590088027126792597"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6590088027126792597"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/09\/new-related-posts-widget-for-blogger.html","title":"Customizable Related Posts Widget for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-klS-ZV7SIf0\/V9gOKOH_iwI\/AAAAAAAALuk\/DEUdh6GKbOY8o2y_PJY0enmUYa-LysK2ACLcB\/s72-c\/related-posts-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-1780330582935793345"},"published":{"$t":"2016-05-29T10:05:00.002-07:00"},"updated":{"$t":"2016-10-28T08:50:42.941-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Automatic Featured Posts Slider Widget for Blogger"},"content":{"type":"html","$t":"Anyone with a blog wants readers to stay rather than move on to another. It's not being selfish but after someone has read one post, you'd definitely want them to read another, right? After all, isn't it one of the tenets of \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/07\/7-seo-tips-for-bloggers.html\"\u003ESEO\u003C\/a\u003E to make people stay longer on your blog if it has to have a fighting chance at the rankings game?\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe question now is: how exactly do you entice them to read a few more of your blog posts?\u003Cbr \/\u003E\u003Cbr \/\u003E\nFirst off, you don't know exactly what brought a reader to your site. Well, you sort of do, if you have \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/google-analytics-basics-for-beginners.html\"\u003EGoogle Analytics\u003C\/a\u003E and all that. But that's beside the point. It wouldn't be productive for you to stare at GA the entire day hoping that it will tell you that yes, someone has been perusing your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHow exactly do you do that?\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EThe Tactics of Persuading Users to Stay\u003C\/h4\u003E\nBloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/09\/5-popular-posts-widget-for-blogger.html\"\u003EPopular Posts\u003C\/a\u003E, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention.\u003Cbr \/\u003E\u003Cbr \/\u003E\nThankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"318\" src=\"https:\/\/1.bp.blogspot.com\/-pDeiizrWG80\/V0skAGpdhMI\/AAAAAAAALns\/1_mD0w6iTM0HLD3HPU7lzHPtaRJX2ICkgCLcB\/s320\/featured-post-slider-for-blogger.png\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/helplogger-blog.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Add Featured Posts Slider Widget in Blogger\u003C\/h3\u003E\n1. Go to 'Layout' \u0026gt; click the 'Add a gadget' link in the sidebar area and select 'HTML\/JavaScript' gadget from the pop-up window.\u003Cbr \/\u003E\u003Cbr \/\u003E\n2. Add the code below inside the empty box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https:\/\/3.bp.blogspot.com\/-1_Vnfz23h0E\/V0m7kzHpgiI\/AAAAAAAALlU\/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB\/s400\/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}\u003Cbr \/\u003E\n.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:\"\";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}\u003Cbr \/\u003E\n.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id=\"featuredbwidget\"\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Abel' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.0\/jquery.min.js\" type=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nfeaturedbwidget({\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003ElistURL\u003C\/span\u003E:\"https:\/\/helplogger.blogspot.com\/\",\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003EfeaturedNum\u003C\/span\u003E:9,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003ElistbyLabel\u003C\/span\u003E:false,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003EfeathumbSize\u003C\/span\u003E:350,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003Einterval\u003C\/span\u003E:3000,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003Eautoplay\u003C\/span\u003E:true,\u003Cbr \/\u003E\nfeaturedID:\"#featuredbwidget\"\u003Cbr \/\u003E\n});\u003Cbr \/\u003E\nfunction featuredbwidget(a){(function(e){var h={listURL:\"\",featuredNum:3,featuredID:\"\",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:\"nextfeatured\",pBlank:\"https:\/\/3.bp.blogspot.com\/-EOu4Rrgcryo\/V0m8dV7MU1I\/AAAAAAAALlg\/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB\/s500\/no-image.png\",byMonth:[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('\u0026lt;div class=\"featslider\"\u0026gt;\u0026lt;ul class=\"featured-widget-list\"\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;div class=\"feat-buttons\"\u0026gt;\u0026lt;a href=\"#\" class=\"feat-prev\"\u0026gt;Prev\u0026lt;\/a\u0026gt;\u0026lt;a href=\"#\" class=\"feat-next\"\u0026gt;Next\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;');var f=function(w){var q,k,m,u,x,p,t,v,r,l=\"\",s=w.feed.entry;for(var o=0;o\u0026lt;s.length;o++){for(var n=0;n\u0026lt;s[o].link.length;n++){if(s[o].link[n].rel==\"alternate\"){q=s[o].link[n].href;break}}if(\"media$thumbnail\" in s[o]){u=s[o].media$thumbnail.url.replace(\/\\\/s[0-9]+\\-c\/g,\"\/s\"+h.feathumbSize+\"-c\")}else{u=h.pBlank.replace(\/\\\/s[0-9]+(\\-c|\\\/)\/,\"\/s\"+h.feathumbSize+\"$1\")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+q+'\"\u0026gt;\u0026lt;div class=\"featuredbg\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;img class=\"featuredthumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;h5\u0026gt;'+k+'\u0026lt;\/h5\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"featured-meta\"\u0026gt;\u0026lt;span class=\"fdate\"\u0026gt;\u0026lt;span class=\"fday\"\u0026gt;'+t+'\u0026lt;\/span\u0026gt; \u0026lt;span class=\"fmonth\"\u0026gt;'+v+'\u0026lt;\/span\u0026gt; \u0026lt;span class=\"fyear\"\u0026gt;'+x+'\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt; - \u0026lt;span class=\"fauthor\"\u0026gt;'+m+\"\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\"}e(\"ul\",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+\" .feat-next\").click()};var b=function(){e.get((h.listURL===\"\"?window.location.protocol+\"\/\/\"+window.location.host:h.listURL)+\"\/feeds\/posts\/summary\"+(h.listbyLabel===false?\"\":\"\/-\/\"+h.listbyLabel)+\"?max-results=\"+h.featuredNum+\"\u0026amp;orderby=published\u0026amp;alt=json-in-script\",f,\"jsonp\");setTimeout(function(){e(h.featuredID+\" .feat-prev\").click(function(){e(h.featuredID+\" .featslider li:first\").before(e(h.featuredID+\" .featslider li:last\"));return false});e(h.featuredID+\" .feat-next\").click(function(){e(h.featuredID+\" .featslider li:last\").after(e(h.featuredID+\" .featslider li:first\"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+\" .featslider li:first\").before(e(h.featuredID+\" .featslider li:last\"));e(h.featuredID+\" .featslider\").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e(\"ul\",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4\u003EAutomatic Featured Posts Slider Settings\u003C\/h4\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003ElistURL\u003C\/span\u003E - replace \"https:\/\/helplogger.blogspot.com\/\" with your blog URL\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003EfeaturedNum\u003C\/span\u003E - add the number of posts to display in the slider\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003ElistbyLabel\u003C\/span\u003E - if you want to display posts by category \/ label, such as the tag \u003Cb\u003Efashion\u003C\/b\u003E, it will be written as \u003Cb\u003ElistbyLabel: \"fashion\"\u003C\/b\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003EfeathumbSize\u003C\/span\u003E - the size or dimension of the image in pixels\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003Einterval\u003C\/span\u003E - time taken to change the slides position in milliseconds\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003Eautoplay\u003C\/span\u003E - replace \u003Cb\u003Etrue\u003C\/b\u003E with \u003Cb\u003Efalse\u003C\/b\u003E if you don't want the slides to change automatically.\u003C\/li\u003E\u003C\/ul\u003E\n3. Once you are done with the settings, click the 'Save' button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, this code is for a slider widget which means that instead of just a random list of Featured Posts, you get to display them with images (if they have one) and you can include effects too. You can also control how many slides should be shown because it just wouldn't be prudent to feature your entire oeuvre, right?\u003Cbr \/\u003E\u003Cbr \/\u003E\nPlus, being a slider widget, it adds a nice little visual to your site. And we all know how visuals are important in enticing people to stay, don't we?"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/1780330582935793345\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/05\/featured-posts-slider-widget-blogger.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1780330582935793345"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1780330582935793345"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/05\/featured-posts-slider-widget-blogger.html","title":"Automatic Featured Posts Slider Widget for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-pDeiizrWG80\/V0skAGpdhMI\/AAAAAAAALns\/1_mD0w6iTM0HLD3HPU7lzHPtaRJX2ICkgCLcB\/s72-c\/featured-post-slider-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-461635542822477187"},"published":{"$t":"2015-03-11T13:12:00.001-07:00"},"updated":{"$t":"2016-10-28T11:44:02.596-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"Building a List\/Grid View Switcher in Blogger with Auto Read More"},"content":{"type":"html","$t":"A list of posts in grid or list view provides a more defined canvas with which a blogger or website owner can use as a guide in creating content. This concept has extended to visitors, where they can have control on whether or not they wish to \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/03\/masonry-grid-layouts-for-blogger-posts.html\"\u003Edisplay posts in list or grid view\u003C\/a\u003E. While custom modification codes are shared by some blogging sites, others are not. Some that are shared, however, can be complex even to bloggers themselves, such as JQuery. \u003Cbr \/\u003E\u003Cbr \/\u003E\nThe good news is there are lightweight codes available, including the \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/auto-read-more-with-thumbnail-for.html\"\u003EAuto Read More in Blogger\u003C\/a\u003E. Through it, a blogger can add two buttons that will enable visitors to switch between grid view and list view, depending on what they prefer. These buttons, however, are only visible on limited pages - homepage, label page and archive page. Nonetheless, it is better than not having this particular feature at all.\u003Cbr \/\u003E\u003Cbr \/\u003E\nUnlike JQuery, the Auto Read More uses HTML, CSS and JavaScript. To view posts in a list view, two sets of CSS codes are added as one. Another set is added to view posts in grid view. Other combination of codes is used to enable easy switch between views, particularly at a click of a button. \u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-gsGdrHGHDsE\/VQCgetsEwCI\/AAAAAAAALKc\/8MkSq_UINHk\/s1600\/grid-list-view-switcher-for-blogger-posts.png\" height=\"213\" width=\"400\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\n\u003Ca class=\"demo-link\" href=\"https:\/\/grid-list-view.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003ELive Demo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add a List\/Grid View Switcher in Blogger\u003C\/h2\u003E\nStep 1. Log into your \u003Ca href=\"http:\/\/www.blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E and select your blog, then go to \"Template\" \u0026gt; press the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type this tag below inside the box and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E\nStep 3. Just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag, copy and paste the following CSS style and scripts:\u003Cbr \/\u003E\n\u003Cdiv class=\"code1\"\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nfunction list_view(){\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post-grid-view\u0026amp;quot;;}}\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post-title\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post-title\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post-title-grid\u0026amp;quot;;}}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nfunction grid_view(){\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post-grid-view\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post-grid-view\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post\u0026amp;quot;;}}\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post-title-grid\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post-title-grid\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post-title\u0026amp;quot;;}}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nposts_no_thumb_sum = 100;\u003Cbr \/\u003E\nposts_thumb_sum = 350;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nfunction removeHtmlTag(strx,chop){\u003Cbr \/\u003E\nif(strx.indexOf(\"\u0026lt;\")!=-1)\u003Cbr \/\u003E\n{\u003Cbr \/\u003E\nvar s = strx.split(\"\u0026lt;\");\u003Cbr \/\u003E\nfor(var i=0;i\u0026lt;s.length;i++){\u003Cbr \/\u003E\nif(s[i].indexOf(\"\u0026gt;\")!=-1){\u003Cbr \/\u003E\ns[i] = s[i].substring(s[i].indexOf(\"\u0026gt;\")+1,s[i].length);\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nstrx = s.join(\"\");\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nchop = (chop \u0026lt; strx.length-1) ? chop : strx.length-2;\u003Cbr \/\u003E\nwhile(strx.charAt(chop-1)!=' ' \u0026amp;\u0026amp; strx.indexOf(' ',chop)!=-1) chop++;\u003Cbr \/\u003E\nstrx = strx.substring(0,chop-1);\u003Cbr \/\u003E\nreturn strx+'...';\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nfunction createSummaryAndThumb(pID, pURL, pTITLE){\u003Cbr \/\u003E\nvar div = document.getElementById(pID);\u003Cbr \/\u003E\nvar imgtag = \"\";\u003Cbr \/\u003E\nvar img = div.getElementsByTagName(\"img\");\u003Cbr \/\u003E\nvar summ = posts_no_thumb_sum;\u003Cbr \/\u003E\nif(img.length\u0026gt;=1) {\u003Cbr \/\u003E\nimgtag = '\u0026lt;span class=\"posts-thumb\" style=\"float:left; margin-right: 10px;\"\u0026gt;\u0026lt;a href=\"'+ pURL +'\"\u0026gt;\u0026lt;img src=\"'+img[0].src+'\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;';\u003Cbr \/\u003E\nsumm = posts_thumb_sum;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nelse {\u003Cbr \/\u003E\nimgtag = '\u0026lt;span class=\"posts-thumb\" style=\"float:left; margin-right: 10px;\"\u0026gt;\u0026lt;a href=\"'+ pURL +'\" title=\"'+ pTITLE+'\"\u0026gt;\u0026lt;img src=\"http:\/\/2.bp.blogspot.com\/-Gbn3dT1R9Yo\/VPXSJ8lih_I\/AAAAAAAALDQ\/24wFWdfFvu4\/s1600\/sorry-image-not-available.png\" style=\"margin-top: -30px;\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;';\u003Cbr \/\u003E\nsumm = posts_thumb_sum;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nvar summary = imgtag + '\u0026lt;a href=\"'+ pURL +'\"\u0026gt;\u0026lt;div class=\"post-summary-text\"\u0026gt;' + removeHtmlTag(div.innerHTML,summ) + '\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;';\u003Cbr \/\u003E\ndiv.innerHTML = summary;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style\u0026gt;\u003Cbr \/\u003E\n#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}\u003Cbr \/\u003E\n#list-view-button a{text-decoration: none; color: #666;}\u003Cbr \/\u003E\n.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}\u003Cbr \/\u003E\n.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}\u003Cbr \/\u003E\n.post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }\u003Cbr \/\u003E\n.post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}\u003Cbr \/\u003E\n.post-grid-view .post-header {display: none;}\u003Cbr \/\u003E\n.post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}\u003Cbr \/\u003E\n.post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;}\u003Cbr \/\u003E\n.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}\u003Cbr \/\u003E\n.post-title-grid a { font-size:170%;color: #777;font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;}\u003Cbr \/\u003E\n.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}\u003Cbr \/\u003E\n.post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;}\u003Cbr \/\u003E\n.post-grid-view .post-footer a{color: #128EC9;}\u003Cbr \/\u003E\n.post-grid-view a.comment-bubble {display: none;}\u003Cbr \/\u003E\n.main-inner .column-center-inner .section {margin: 0px !important;}\u003Cbr \/\u003E\n.post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n#blog-pager {clear:both;}\u003Cbr \/\u003E\n.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}\u003Cbr \/\u003E\n.date-header {display: none;}\u003Cbr \/\u003E\nh3.post-title a {font-size:90%;font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}\u003Cbr \/\u003E\nh3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}\u003Cbr \/\u003E\nh3.post-title:hover {opacity: 1;}\u003Cbr \/\u003E\n.posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;}\u003Cbr \/\u003E\n.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}\u003Cbr \/\u003E\n.post-body a {text-decoration: none;}\u003Cbr \/\u003E\n.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}\u003Cbr \/\u003E\n.post-summary-text {display: none;}\u003Cbr \/\u003E\na.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;left: 0px;text-shadow:1px 2px 1px #333;font-family: \u0026amp;#39;Pacifico\u0026amp;#39;, cursive;z-index: 122;}\u003Cbr \/\u003E\na.comment-bubble:before { content: \u0026amp;quot;Comments: \u0026amp;quot; url(http:\/\/4.bp.blogspot.com\/-t1i_svebif4\/VPMpZqPrKzI\/AAAAAAAALAg\/TRJ2Un238Gs\/s1600\/heart-active.png);}\u003Cbr \/\u003E\n.post-header,.post-footer {display:none;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Pacifico' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/div\u003E\n\u003Cbr \/\u003E\nStep 4. Next, search for the following line:\u003Cbr \/\u003E\n\u003Cblockquote\u003E\u0026lt;b:section class='main' id='main' name='Main' showaddelement='no'\u0026gt;\u003C\/blockquote\u003E\n...in case you can't find it, search for this one instead:\u003Cbr \/\u003E\n\u003Cblockquote\u003E\u0026lt;b:section class='main' id='main' name='Main' showaddelement='yes'\u0026gt;\u003C\/blockquote\u003E\nStep 5. Just above this line, add the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='list-view-button'\u0026gt;\u0026lt;a class='grid-view-button' onclick='grid_view()'\u0026gt;\u0026lt;img src='http:\/\/1.bp.blogspot.com\/-vjVOXJyXcC4\/VP9A7twG8mI\/AAAAAAAALJ8\/YW0yxhvxP7A\/s1600\/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'\/\u0026gt; Grid View\u0026lt;\/a\u0026gt; \u0026lt;a class='list-view-button' onclick='list_view()'\u0026gt;\u0026lt;img src='http:\/\/4.bp.blogspot.com\/-SrQiXEhgVmA\/VP9BUnr3KkI\/AAAAAAAALKE\/EwVFym9YxoA\/s1600\/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'\/\u0026gt; List View\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\nStep 6. Now, search the tag below:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/blockquote\u003E\nStep 7. You will find 3 occurrences of this code... replace only the second and third one with this one below:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026nbsp;\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;div expr:id='\u0026amp;quot;summary\u0026amp;quot; + data:post.id'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;createSummaryAndThumb(\u0026amp;quot;summary\u0026lt;data:post.id\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;\u0026lt;data:post.url\/\u0026gt;\u0026amp;quot;);\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:post.allowComments'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.numComments\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nImportant: if you already added the auto read more script, remove the previous one in order to make this work.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nStep 8. Finally, click \"Preview\" to see if everything looks good and press the 'Save Template' button to save the changes... \u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EThat's it!\u003C\/h4\u003E\nAdding a dynamic view switcher on a blog will make viewing content a lot easier for visitors. Whether using a list or grid view, a more compressed list of posts will eliminate the need to click on the next page, which could take time if loading takes a while to complete. For a blog archive, using the Auto Read More codes in Blogger will surely make everyone's viewing experience very convenient. \u003Cbr \/\u003E\u003Cbr \/\u003E\nConsidering the ease with which the codes can be customized, building a list\/grid view switcher would be completed in no time. A real bonus is that Auto Read More works on all platforms, with cross-browser support as well."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/461635542822477187\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/list-grid-view-switcher-for-blogger.html#comment-form","title":"6 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/461635542822477187"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/461635542822477187"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/list-grid-view-switcher-for-blogger.html","title":"Building a List\/Grid View Switcher in Blogger with Auto Read More"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-gsGdrHGHDsE\/VQCgetsEwCI\/AAAAAAAALKc\/8MkSq_UINHk\/s72-c\/grid-list-view-switcher-for-blogger-posts.png","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5446842046320126914"},"published":{"$t":"2015-03-05T15:44:00.000-08:00"},"updated":{"$t":"2016-10-28T16:36:58.396-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript"},"content":{"type":"html","$t":"How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be anyone's favorite. This is why content must be displayed in an organized, easy to follow and straightforward manner. Nothing works better than a structured grid, in this case.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/03\/list-grid-view-switcher-for-blogger.html\"\u003EPosts listed in grid view\u003C\/a\u003E provide an excellent viewing experience for both the blogger or website owner and the visitors. This is especially true if the grid comes with images that would play with a person's visual inclination. What is great about grids is the seamless and smooth layout, complemented with a structured yet simple architecture. This makes it easier to navigate through a blog archive or product page. The style also enables a website owner to present posts in a more artistic and informative manner, without delving into the details. Suffice to say that a grid view demands creativity to be effortlessly mixed with functionality.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHow views can be switched depends on a number of changes in a blog's codes. Some are fairly easy to implement, while others can be a little complex. Not to worry, as there are guides that will be provided. Grid styles also come in huge varieties, with each one designed to cater to a specific audience. Now, are you ready to go on the grid?\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EFeatures\u003C\/h3\u003E\n\u003Ch4\u003EWhat features can you expect from a grid style post in Blogger?\u003C\/h4\u003E\n\u003Cul\u003E\u003Cli\u003EAll the posts will follow the grid style when switching to grid view.\u003C\/li\u003E\n\u003Cli\u003EWhile the codes are being customized, the posts are left untouched. Their length, however, could be changed accordingly.\u003C\/li\u003E\n\u003Cli\u003EAuto Read More will be applied on all posts.\u003C\/li\u003E\n\u003Cli\u003EThumbnails are automatically added based on the first picture found in each post.\u003C\/li\u003E\n\u003Cli\u003ECode is secure and is used across the board. In fact, 99% of bloggers are using a similar code to enable grid style posts in blogger.\u003C\/li\u003E\u003C\/ul\u003E\n\u003Ch4\u003EWhat are the benefits of grid style?\u003C\/h4\u003E\n\u003Cul\u003E\u003Cli\u003EQuick loading time of posts. Since only the snippets are loaded in certain pages, or a thumbnail and a caption, pulling up a blog archive would be quicker. When loading time is decreased, user experience is greatly enhanced.\u003C\/li\u003E\n\u003Cli\u003EProfessional-looking blog. Without the chaos and concerns on readability, a website can look really clean and professional. Combined with the right colors and images, it can also leave a visual impact.\u003C\/li\u003E\n\u003Cli\u003EImproved website ranking. Because visitors have to click in order to view the rest of the post, page views of a site will significantly increase. This makes for a better SEO strategy.\u003C\/li\u003E\u003C\/ul\u003E\nAlthough changes to the CSS codes have to be made to implement the grid style view and make it compatible with a blog's template, all the work will be worth it once it is up and running.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cb\u003EImportant:\u003C\/b\u003E\u003Cbr \/\u003E\nBefore anything make sure that you backup your Blogger template! If have encounter any problems with your edits, you can revert the template back to its previous condition by restoring it from your backup. For this, go to 'Template' in the left menu \u0026gt; click on the 'Backup\/Restore' button in the upper right corner and press the 'Download Full Template' button - choose where you want to save the file on your computer and click the 'Save' button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow we can safely proceed with editing our Blogger template. If you run into problems, just revert back to your saved template.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Create Masonry, Grid Style Posts in Blogger\u003C\/h3\u003E\nStep 1. Log into your \u003Ca href=\"http:\/\/www.blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E and click on the blog where you want to apply the grid style.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 2. Go to \"Template\" located on the left side of the screen and press the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 3. Click anywhere inside the code area and press the CTRL+F keys to open the search box, then type the following tag inside the box (hit Enter to find it):\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;\/head\u0026gt; \u003C\/blockquote\u003E\nStep 4. Now copy the script below and paste it just before the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nposts_no_thumb_sum = 100;\u003Cbr \/\u003E\nposts_thumb_sum = 100;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nfunction removeHtmlTag(a,b){if(a.indexOf(\"\u0026lt;\")!=-1){for(var c=a.split(\"\u0026lt;\"),d=0;d\u0026lt;c.length;d++)c[d].indexOf(\"\u0026gt;\")!=-1\u0026amp;\u0026amp;(c[d]=c[d].substring(c[d].indexOf(\"\u0026gt;\")+1,c[d].length));a=c.join(\"\")}for(b=b\u0026lt;a.length-1?b:a.length-2;\" \"!=a.charAt(b-1)\u0026amp;\u0026amp;a.indexOf(\" \",b)!=-1;)b++;return a=a.substring(0,b-1),a+\"...\"}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e=\"\",f=d.getElementsByTagName(\"img\"),g=posts_no_thumb_sum;f.length\u0026gt;=1?(e='\u0026lt;div class=\"posts-thumb\" style=\"float:left;\"\u0026gt;\u0026lt;a href=\"'+b+'\"\u0026gt;\u0026lt;img src=\"'+f[0].src+'\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;',g=posts_thumb_sum):(e='\u0026lt;div class=\"posts-thumb\" style=\"float:left;\"\u0026gt;\u0026lt;a href=\"'+b+'\" title=\"'+c+'\"\u0026gt;\u0026lt;img src=\"https:\/\/2.bp.blogspot.com\/-Gbn3dT1R9Yo\/VPXSJ8lih_I\/AAAAAAAALDQ\/24wFWdfFvu4\/s1600\/sorry-image-not-available.png\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;',g=posts_thumb_sum);var h=e+'\u0026lt;div class=\"post-summary-text\"\u0026gt;'+removeHtmlTag(d.innerHTML,g)+\"\u0026lt;\/div\u0026gt;\";d.innerHTML=h}\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\nStep 5. Find the following code snippet using CTRL+F or Command + F:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;data:post.body\/\u0026gt;\u003C\/blockquote\u003E\nStep 6. After pressing the \"Enter\" key on your keyboard, you may find three occurrences of the above code, replace only the second and the third one with this code below:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;div expr:id='\u0026amp;quot;summary\u0026amp;quot; + data:post.id'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n \u0026lt;script \ntype='text\/javascript'\u0026gt;createSummaryAndThumb(\u0026amp;quot;summary\u0026lt;data:post.id\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;\u0026lt;data:post.url\/\u0026gt;\u0026amp;quot;);\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:post.allowComments'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.numComments\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nStep 7. Now choose one of the styles below, copy the code provided and paste it just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003ESimple Grid Design\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"400\" src=\"https:\/\/1.bp.blogspot.com\/-_P_k_VKGqjM\/VPsQFKJei0I\/AAAAAAAALJY\/6uwsCvGVD24\/s1600\/grid-style-with-thumbnail-summary.png\" width=\"321\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:\u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:\u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:\u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;}a.comment-bubble:before{content:\u0026amp;quot;Comments: \u0026amp;quot;;}.post-header,.post-footer{display:none}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003EGrid Layout with Post Summary and Thumbnail\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"grid layout for blogger\" border=\"0\" height=\"400\" src=\"https:\/\/2.bp.blogspot.com\/-9DP-WlQtTOU\/VPiFxXL2_4I\/AAAAAAAALHY\/WgZ505mNEmw\/s1600\/grid-layout-for-blogger.png\" title=\"Create Masonry, Grid Layouts for Blogger Posts\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/blogger-grid-layouts.blogspot.com\/search?updated-max=2015-03-01T05:57:00-08:00\u0026amp;max-results=9\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https:\/\/1.bp.blogspot.com\/-rh-PYvqjzSs\/VPTARkPOSVI\/AAAAAAAALC4\/GyFFEnl2TO8\/s1600\/blueprint.png);font:100% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% \u0026amp;#39;Pacifico\u0026amp;#39;,cursive;}a.comment-bubble:before{content:\u0026amp;quot;Comments: \u0026amp;quot; url(https:\/\/4.bp.blogspot.com\/-t1i_svebif4\/VPMpZqPrKzI\/AAAAAAAALAg\/TRJ2Un238Gs\/s1600\/heart-active.png);}.post-header,.post-footer{display:none}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Pacifico' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003EGrid Layout with Text Snippet on Hover\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger posts\" border=\"0\" height=\"320\" src=\"https:\/\/2.bp.blogspot.com\/-YtPUvsl4v18\/VPi0gVSCFVI\/AAAAAAAALIE\/fUXEiS3eoKk\/s1600\/grid-layout-summary-on-hover-for-blogger.png\" title=\"Create Masonry, Grid Layouts for Blogger Posts 2\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\n\u003Ca class=\"demo-link\" href=\"http:\/\/blogger-grid-layouts.blogspot.com\/search?updated-max=2015-02-25T08:37:00-08:00\u0026amp;max-results=9\u0026amp;start=9\u0026amp;by-date=false\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% \u0026amp;#39;Pacifico\u0026amp;#39;,cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:\u0026amp;quot;Comments: \u0026amp;quot;}.post-header,.post-footer{display:none}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Pacifico' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003EMasonry Layout (Pinterest Like Grid)\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"masonry layout for blogger\" border=\"0\" height=\"367\" src=\"https:\/\/2.bp.blogspot.com\/-SNzWq6ayMf8\/VPi8Wiqik-I\/AAAAAAAALIU\/H6rTars6ER8\/s1600\/masonry-grid-layout-for-blogger.png\" title=\"Create Masonry, Grid Layouts for Blogger Posts 3\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/blogger-grid-layouts.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDEMO\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!important}.posts-thumb{width:100%;height:auto;overflow:hidden;clear:both}.post-body{overflow:hidden;position:relative}.post-body a{text-decoration:none}.post-body img{display:block;width:auto;height:auto;max-width:100%;max-height:none;min-width:100%;min-height:auto;margin:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;padding:84px 10% 0;left:0;position:absolute;text-align:center;vertical-align:bottom;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;z-index:10;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1}.post-footer{display:none}a.comment-bubble{color:#fff;text-decoration:none;font:120% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https:\/\/4.bp.blogspot.com\/-t1i_svebif4\/VPMpZqPrKzI\/AAAAAAAALAg\/TRJ2Un238Gs\/s1600\/heart-active.png);}.main-inner .column-center-inner{-moz-column-count:3;-moz-column-gap:1px;-webkit-column-count:3;-webkit-column-gap:1px;column-count:3;column-gap:1px;width:100%;padding:0!important}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nPlease note that the masonry layout might not work if you have a customized template, also older posts will appear vertically (from top to bottom) instead of left to right.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 8. Click \"Preview\" and if everything looks fine, press the \"Save Template\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch5\u003EThat's it!\u003C\/h5\u003E\nImplementing a grid style view has its pros and cons, but the benefits clearly outweigh the disadvantages. The fact that a website will look visually appealing and professional when set in grid style, is already enough to boost its online reputation. An increase in page views is just the beginning. With the right images and content, a blog will also have better SEO. Most importantly, implementing the changes is not as complex as some might think. With a step-by-step guide available, adding a dynamic view switcher would be completed in no time."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/5446842046320126914\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/masonry-grid-layouts-for-blogger-posts.html#comment-form","title":"13 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5446842046320126914"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5446842046320126914"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/masonry-grid-layouts-for-blogger-posts.html","title":"Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-_P_k_VKGqjM\/VPsQFKJei0I\/AAAAAAAALJY\/6uwsCvGVD24\/s72-c\/grid-style-with-thumbnail-summary.png","height":"72","width":"72"},"thr$total":{"$t":"13"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-1285196704586866731"},"published":{"$t":"2014-07-01T18:53:00.003-07:00"},"updated":{"$t":"2016-10-30T10:12:58.130-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger pages"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"How To Set Custom Redirects in Blogger"},"content":{"type":"html","$t":"Over time, most blogs may go through many changes, like posts being added or deleted. In some occasions, you don't want people to \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2013\/10\/redirect-blogger-404-error-homepage.html\"\u003Eget 404 messages\u003C\/a\u003E when they navigate to posts or pages that don't exist on your blog and instead, make all requests to a specific link to be redirected to another page. One of the best way to avoid broken links and keep your traffic flowing in the right direction is setting custom redirects via the \u003Cb\u003EBlogger Custom Redirects\u003C\/b\u003E tool.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-nma4XzKH434\/U7NmwmiRPvI\/AAAAAAAAJaw\/Wx52ENYIVNQ\/s1600\/blogger-custom-redirects-redirect-old-url-to-new-url.png\" \/\u003E\u003C\/div\u003E\nThis tutorial will show you how to set custom redirects for Blogger posts and redirect an old URL to a new URL. But before redirecting any URL, you must know that there are two types of redirects:\n\u003Cul\u003E\u003Cli\u003EA \u003Cb\u003E302 redirect\u003C\/b\u003E means that the page \u003Cb\u003Ehas moved temporarily\u003C\/b\u003E. This redirect doesn't pass the URL value to the new location and instead, it will take the visitors to an appropriate location so that you aren't showing them a 404 page not found, or an error page. You can use a 302 redirect for coming soon pages or maintenance pages.\u003C\/li\u003E\n\u003Cli\u003EA \u003Cb\u003E301 redirect\u003C\/b\u003E means that a page \u003Cb\u003Ehas moved permanently\u003C\/b\u003E to a new location. Use the 301 redirect when you deleted or changed the URL of your post. In most instances, the 301 redirects are always recommended for SEO because they will pass link juice (ranking power) to the redirected page and visitors will also benefit from this. However, 301s aren't suitable when you change your custom-domain, because it only supports redirection within the same blog, not to an external URL.\u003C\/li\u003E\u003C\/ul\u003E\nNow that we've established which is which, let's see how to set custom redirects for Blogger posts.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to redirect old URL to new URL in Blogger\u003C\/h3\u003E\nStep 1. Login to you Blogger account with email and password.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 2. Click on your blog \u0026gt; go to Settings \\ Search Preferences and click \"Edit\" next to \"Custom Redirects.\"\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"search preferences, custom redirects, 301, 302 redirect\" border=\"0\" height=\"290\" src=\"https:\/\/4.bp.blogspot.com\/-brDx_7HqOoY\/U7M4xx3YWRI\/AAAAAAAAJZc\/6XqtWyQt5FE\/s1600\/search-preferences-custom-redirects-301-permanently-302-temporary-blogger.png\" title=\"How To Set Custom Redirects for Blogger Post\" width=\"600\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 3. Enter the old URL in the \"From\" field, and the new URL in the \"To\" field including the forward slash \"\/\" (see the screenshot below)\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"custom redirects, redirect old url to new url\" border=\"0\" height=\"250\" src=\"https:\/\/3.bp.blogspot.com\/-6ELsFAALT_M\/U7M8IOZB-iI\/AAAAAAAAJZw\/kAYIhpZvnsk\/s1600\/custom-redirects-blogger-old-url-new-url.png\" title=\"How To Set Custom Redirects in Blogger\" width=\"600\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nNote: Do not enter the full URL in these fields. Just omit the address of your blog and type only the rest of the link. Again, this works only if you wish to redirect within your blogger blog and not to any external links.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 4. Click the \"Save\" link (1) and the \"Save changes\" button (2), and you're done!\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger custom redirects\" border=\"0\" height=\"177\" src=\"https:\/\/2.bp.blogspot.com\/-t0jjdix6nQM\/U7M_FvzbvTI\/AAAAAAAAJZ8\/Yt0L8B10vKU\/s1600\/custom-redirects-to-from-permanent-blogger-deleted-new-page.png\" title=\"How To Set Custom Redirects in Blogger\" width=\"600\" \/\u003E\u003C\/div\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger custom redirect\" border=\"0\" height=\"177\" src=\"https:\/\/3.bp.blogspot.com\/-lbBoZ0V4MF8\/U7M_HSsAb4I\/AAAAAAAAJaE\/3vVfl08d2zo\/s1600\/custom-redirects-to-from-permanent-blogger-save-changes.png\" title=\"How To Set Custom Redirects in Blogger\" width=\"600\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nIf you want to redirect more pages, just click the \"New redirect\" button. Also, you can check out this tutorial to learn \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2016\/10\/how-to-create-static-home-page-in-blogger.html\"\u003Ehow to create a static homepage in Blogger\u003C\/a\u003E using \u003Cb\u003Ecustom redirects\u003C\/b\u003E."},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1285196704586866731"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1285196704586866731"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/07\/how-to-set-custom-redirects-for-blogger-post.html","title":"How To Set Custom Redirects in Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/4.bp.blogspot.com\/-nma4XzKH434\/U7NmwmiRPvI\/AAAAAAAAJaw\/Wx52ENYIVNQ\/s72-c\/blogger-custom-redirects-redirect-old-url-to-new-url.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-7266582666744642898"},"published":{"$t":"2014-05-12T14:26:00.005-07:00"},"updated":{"$t":"2016-10-30T11:35:22.972-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"css"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"Responsive CSS Timeline with 3D Effect for Blogger"},"content":{"type":"html","$t":"Here's another amazing way to display the Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogger Posts, we will have a responsive timeline-like structure of our most recent posts with thumbnails, plus some cool CSS effects. When clicking on the associated radio input, the posts snippet\/summary will expand by changing their style and size and will rotate in 3D. The main structure of this CSS timeline with 3D effect is an unordered list.\u003Cbr \/\u003E\u003Cbr \/\u003E\nTo get an idea of how it looks like, you can visit this \u003Ca href=\"http:\/\/life-famous-quotes.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003Edemo blog\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"responsive CSS timeline, customize blogger posts\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-2VK5LJOstKc\/U6mYRMe_rUI\/AAAAAAAAJWQ\/wU6Y9AoaT0M\/s1600\/responsive-css-timeline-effect-for-blogger-posts.png\" height=\"460\" title=\"Responsive CSS Timeline with 3D Effect for Blogger Posts\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add Responsive CSS Timeline View to Blogger Posts \u003C\/h2\u003E\nStep 1. Go to \u003Ca href=\"http:\/\/www.blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E \u0026gt; \"Template\" \u0026gt; click on the \"Edit HTML\" button:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger template, edit html\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" title=\"Responsive CSS Timeline with 3D Effect for Blogger Posts\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger search box\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-5nCDW329k6I\/Us9kWq0wcqI\/AAAAAAAAF1I\/PIe9SpIdtjc\/s1600\/blogger-template-search-box.png\" height=\"105\" title=\"Responsive CSS Timeline with 3D Effect for Blogger Posts\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 3. Type or paste the following tag inside the search box and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E\nStep 4. Just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag, copy and paste the following style:\u003Cbr \/\u003E\n\u003Cdiv class=\"code1\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,\u003Cbr \/\u003E\n.BlogList .item-thumbnail img {padding: 0px; border: 0px;}\u003Cbr \/\u003E\n.post-footer {display: none;}\u003Cbr \/\u003E\n.post {margin-bottom: 50px; padding-bottom: 0px; background: none; border: none;}\u003Cbr \/\u003E\n.jump-link a {display: none;}\u003Cbr \/\u003E\n\u0026nbsp; h3.post-title a {display: none;}\u003Cbr \/\u003E\n\u0026nbsp;.date-header {display: none;}\u003Cbr \/\u003E\n*,\u003Cbr \/\u003E\n.timeline:after,\u003Cbr \/\u003E\n.timeline:before {box-sizing: border-box;padding: 0; margin: 0;}\u003Cbr \/\u003E\n.timeline {position: relative;padding: 30px 0 50px 0;font-family: Arial, sans-serif;}\u003Cbr \/\u003E\n.timeline:before {content: \u0026amp;#39;\u0026amp;#39;;position: absolute;width: 5px;height: 100%;margin:0px;top: 0;left: 200px;background: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP\/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);}\u003Cbr \/\u003E\n.event {position: relative;margin-bottom: 80px;padding-right: 40px;}\u003Cbr \/\u003E\n.thumb {position: absolute; width: 90px; height: 90px;box-shadow:\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; 0 0 0 8px #87939E,\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; 0 1px 1px rgba(255,255,255,0.5);background-repeat: no-repeat;border-radius: 50%;-webkit-transform: scale(0.8) translateX(24px);-moz-transform: scale(0.8) translateX(24px);-o-transform: scale(0.8) translateX(24px);-ms-transform: scale(0.8) translateX(24px);transform: scale(0.8) translateX(24px);}\u003Cbr \/\u003E\n.thumb:before {content: \u0026amp;#39;\u0026amp;#39;;background: transparent url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP\/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);position: absolute;height: 8px; z-index: -1; width: 50px;top: 42px; left: 100%;margin-left: 8px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.thumb span {color: #87939E;width: 100%;text-align: center;font-weight: 700;font-size: 15px;text-transform: uppercase;position: absolute;bottom: -30px;}\u003Cbr \/\u003E\n.event label,.event input[type=\u0026amp;quot;radio\u0026amp;quot;] {width: 24px;height: 24px;left: 158px;top: 36px;position: absolute;display: block;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;] {opacity: 0;z-index: 10;cursor: pointer;}\u003Cbr \/\u003E\n.event label:after{content: \u0026amp;quot;\\2713\u0026amp;quot;;background: #8995A1;border-radius: 50%;color: #fff;font-size: 20px;height: 100%;width: 100%;font-weight: bold;left: -2px;top: -3px;line-height: 24px;position: absolute;text-align: center;}\u003Cbr \/\u003E\n.content-perspective { margin-left: 230px;position: relative;perspective: 600px;-webkit-perspective: 600px;-moz-perspective: 600px;-o-perspective: 600px;-ms-perspective: 600px;}\u003Cbr \/\u003E\n.content-perspective:before { content: \u0026amp;#39;\u0026amp;#39;; width: 34px; left: -44px; top: 48px;position: absolute;height: 1px; z-index: -2;background: #fff;}\u003Cbr \/\u003E\n.post-content {transform: rotateY(10deg);transform-origin: 0 0;transform-style: preserve-3d;}\u003Cbr \/\u003E\n.blog-post-body {position: relative;padding: 20px;color: #333; border-left: 5px solid #8995A1;box-shadow: 0 4px 6px rgba(0,0,0,0.1);background: #F9F9F9;}\u003Cbr \/\u003E\n.blog-post-body h3 {border: none;margin: 0px;}\u003Cbr \/\u003E\n.blog-post-body h3 a{font-size: 21px;padding: 5px 0 5px 0;color: #86919D;margin: 0px;text-decoration: none;border: none;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body h3 a{color: #F26328;}\u003Cbr \/\u003E\n.blog-post-body p,.thumb span,.event label {-webkit-backface-visibility: hidden;}\u003Cbr \/\u003E\n.blog-post-body p {font-size: 15px;max-height: 0px; overflow: hidden; color: rgba(0,0,0,0);text-align: left;}\u003Cbr \/\u003E\n.blog-post-body:before {content: \u0026amp;#39;\\25c2\u0026amp;#39;;font-weight: normal; line-height: 86px; font-size: 86px;position: absolute;color: #8995A1; left: -41px;width: 100%;height: 100%; top: 3px;z-index: -1;}\u003Cbr \/\u003E\n.thumb,.thumb span,.blog-post-body h3 {transition: all 0.6s ease-in-out 0.2s;-webkit-transition: all 0.6s ease-in-out 0.2s;-moz-transition: all 0.6s ease-in-out 0.2s;-o-transition: all 0.6s ease-in-out 0.2s;-ms-transition: all 0.6s ease-in-out 0.2s;transition: all 0.6s ease-in-out 0.2s;}\u003Cbr \/\u003E\n.blog-post-body { transition: box-shadow 0.8s linear 0.2s;-webkit-transition: box-shadow 0.8s linear 0.2s;-moz-transition: box-shadow 0.8s linear 0.2s;-o-transition: box-shadow 0.8s linear\u0026nbsp; 0.2s;-ms-transition: box-shadow 0.8s linear 0.2s;}\u003Cbr \/\u003E\n.post-content {transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;}\u003Cbr \/\u003E\n.blog-post-body p { transition: max-height 0.5s linear, color 0.3s linear;-webkit-transition: max-height 0.5s linear, color 0.3s linear;-moz-transition: max-height 0.5s linear, color 0.3s linear;-o-transition: max-height 0.5s linear, color 0.3s linear;-ms-transition: max-height 0.5s linear, color 0.3s linear;} \u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked + label:after {content: \u0026amp;#39;\\2714\u0026amp;#39;;color: #fff;background: #F26328;box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective:before {background: #F26328;}\u003Cbr \/\u003E\n\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body h3 { color: #F26328;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .post-content {transform: rotateY(-5deg);-webkit-transform: rotateY(-5deg);-moz-transform: rotateY(-5deg);-o-transform: rotateY(-5deg);-ms-transform: rotateY(-5deg);}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body p {max-height: 460px; color: rgba(0,0,0,0.6); transition-delay: 0s, 0.6s;-webkit-transition-delay: 0s, 0.6s;-moz-transition-delay: 0s, 0.6s;-o-transition-delay: 0s, 0.6s;-ms-transition-delay: 0s, 0.6s;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body:before {color: #F26328;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb {transform: scale(1);box-shadow: 0 0 0 8px rgba(242,99,40,1), 0 1px 1px rgba(255,255,255,0.5); -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb span {color: #F26328;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb:before {\u003Cbr \/\u003E\nbackground: transparent url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);}\u003Cbr \/\u003E\n@media screen and (max-width: 850px) {.blog-post-body h3 {font-size: 20px;}\u003Cbr \/\u003E\n\u0026nbsp;.blog-post-body p { font-size: 14px; text-align: justify; }\u003Cbr \/\u003E\n\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body p { max-height: 500px; }}\u003Cbr \/\u003E\n@media screen and (max-width: 540px) {.timeline:before { left: 50px;}\u003Cbr \/\u003E\n.event {padding-right: 0px; margin-bottom: 100px; }\u003Cbr \/\u003E\n\u0026nbsp;.thumb { transform: scale(0.8); -webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-ms-transform: scale(0.8);}\u003Cbr \/\u003E\n\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;] { width: 100px;height: 100px;left: 0px;top: 0px; }\u003Cbr \/\u003E\n.thumb:before,.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb:before {background: none;width: 0;}\u003Cbr \/\u003E\n\u0026nbsp;.event label {display: none;}\u003Cbr \/\u003E\n\u0026nbsp;.content-perspective {margin-left: 0px;top: 80px;}\u003Cbr \/\u003E\n\u0026nbsp;.content-perspective:before {height: 0px; }\u003Cbr \/\u003E\n\u0026nbsp;.post-content { transform: rotateX(-10deg);-webkit-transform: rotateX(-10deg);-moz-transform: rotateX(-10deg);-o-transform: rotateX(-10deg);-ms-transform: rotateX(-10deg);}\u003Cbr \/\u003E\n\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .post-content { transform: rotateX(10deg);-webkit-transform: rotateX(10deg);-moz-transform: rotateX(10deg);-o-transform: rotateX(10deg);-ms-transform: rotateX(10deg);}\u003Cbr \/\u003E\n.blog-post-body {border-left: none;border-top: 5px solid #8995A1;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);}\u003Cbr \/\u003E\n.blog-post-body:before {content: \u0026amp;#39;\\25b4\u0026amp;#39;;left: 33px; top: -32px;}\u003Cbr \/\u003E\n.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body p {max-height:300px; }}\u003Cbr \/\u003E\nul.timeline {list-style-type: none;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt; \u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\nStep 5. Search for the SECOND instance of this code below (hit Enter two times):\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/blockquote\u003E\nNote: depending on the template you are using, you could find more lines like this one above. Thus, if you don't see any changes after saving the template, try to replace the last one, as well.\u003Cbr \/\u003E\u003Cbr \/\u003E\nAlso, please note that if you are using the Read more function, you will need to remove it in order to make it work.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 6. After you found \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/span\u003E, replace it this HTML code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;ul class='timeline'\u0026gt;\u0026lt;li class='event'\u0026gt;\u0026lt;input checked='checked' name='tl-group' type='radio'\/\u0026gt;\u0026lt;label\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:post.thumbnailUrl'\u0026gt;\u0026lt;img class='thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;div class='thumb'\u0026gt;\u0026lt;b:if cond='data:post.dateHeader'\u0026gt;\u0026lt;span\u0026gt;\u0026lt;data:post.dateHeader\/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='content-perspective'\u0026gt;\u0026lt;div class='post-content'\u0026gt;\u0026lt;div class='blog-post-body'\u0026gt;\u0026lt;h3\u0026gt;\u0026lt;b:if cond='data:post.link'\u0026gt;\u0026lt;a expr:href='data:post.link'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;b:else\/\u0026gt;\u0026lt;b:if cond='data:post.url'\u0026gt;\u0026lt;b:if cond='data:blog.url != data:post.url'\u0026gt;\u0026lt;a expr:href='data:post.url'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;b:else\/\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;b:else\/\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/h3\u0026gt;\u0026lt;p\u0026gt;\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u0026lt;data:post.snippet\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/p\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\nStep 7. Finally, click on the \"Save template\" button to save the changes.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, we will need to make some small adjustments in order to make the posts date appear correctly:\u003Cbr \/\u003E\nGo to \"Layout\" and click on the \"Edit\" link just below the Blog posts area. When the pop-up window appears, check the date option and choose to display the date in the following order (date\/month\/year):\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-diaKlrIouqA\/U3E0cjW8uAI\/AAAAAAAAJEA\/MTVbP9ZK5BA\/s1600\/configure-blog-posts-on-blogger.png\" height=\"226\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nNote that you can also hide the posts date by unchecking this option.\u003Cbr \/\u003E\u003Cbr \/\u003E\nFinally, click on the \"Save\" button and that's it! View your blog and enjoy this Responsive Timeline view with 3D Effect on Blogger posts.\u003Cbr \/\u003E\u003Cbr \/\u003E\nCredit: \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2012\/11\/19\/responsive-css-timeline-with-3d-effect\/\" rel=\"nofollow\" target=\"_blank\"\u003Etympanus.net\u003C\/a\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/7266582666744642898\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/05\/responsive-css-timeline-with-3d-effect-for-blogger-posts.html#comment-form","title":"8 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7266582666744642898"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7266582666744642898"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/05\/responsive-css-timeline-with-3d-effect-for-blogger-posts.html","title":"Responsive CSS Timeline with 3D Effect for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/4.bp.blogspot.com\/-2VK5LJOstKc\/U6mYRMe_rUI\/AAAAAAAAJWQ\/wU6Y9AoaT0M\/s72-c\/responsive-css-timeline-effect-for-blogger-posts.png","height":"72","width":"72"},"thr$total":{"$t":"8"}}]}});