Customizable Related Posts Widget for Blogger

We already posted a few tutorials on how to add <a href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html">related posts widget with thumbnails in Blogger</a> 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.<br /><br />Now let's see what this related posts blogger widget has to offer.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="related posts widget, blogger widget" border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb231YloYP9kuecZUsNQvtaQwzIP2LQbewtR6_Yayy4Vb__5fjL8jwB_9cYvgICAbNx3j4YhPCJw3jHtOV95fxYZjetK1-NmZJSra1FASI1KaAjdVaO1FoKa7sHxdp4jvK7uo9U51qhF_J/s400/related-posts-widget-for-blogger.png" title="Customizable Related Posts Widget for Blogger" width="400" /></div><br /><h3>Related Posts Widget Features:</h3><ul><li>9 attractive styles to match your needs</li><li>Show Title, excerpt & thumbnails</li><li>Display simple related posts with titles / summaries / post date</li><li>Choose whether to display the post thumbnails or not</li><li>Ability to control the thumbnail image size</li><li>Option to choose square or round thumbnails</li><li>Show post text excerpts</li><li>Control the length of the post excerpt / title</li><li>Determine the number of related posts to display</li></ul><h4>Requirements:</h4><ol><li>The 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.</li><li>This widget is compatible with the standard desktop Blogger templates except Dynamic Views, which does not accept customization.</li><li>The script does not work on private blogs, so your blog / site must be open to the public in order to show.</li></ol><h2>Adding Customizable Related Posts Widget in Blogger</h2>Log into your <a href="https://blogger.com/" rel="nofollow" target="_blank">Blogger dashboard</a>, go to 'Template' and open template editor by clicking the 'Edit HTML' button below 'Live On Blog' preview.<br /><br />Next, we're going to use the template search feature, be sure to follow these directions exactly:<br /><br />1. Place your cursor on the template code.<br />2. Click once.<br />3. Press CTRL and F at the same time (PC) or Command and F (Mac).<br /><br />The search box will open in the upper right corner of the template editor.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAYwt8Ozijk1Jjg0mhmtNWl0iBO5mws7pnOR1xQMj7Qs8RqJUGYS1mNvB0QGziaBdJOZs20RYrzSMsTdT8N0GLmjbFWIfH0VaR52xb0Ij9dDlxK6vjdoX1MOK9O1aMKLOMGhwpEiUEA5g/s640/blogger-head-tag.png" width="640" /></div><br />Type <span style="background-color: yellow;"></head></span> in the search box, then press ENTER. This will take you to the <span style="background-color: yellow;"></head></span> tag in your template and highlight it in yellow.<br /><br />Select and copy the entire CSS style below and paste it directly ABOVE the <span style="background-color: yellow;"></head></span> tag:<br /><blockquote class="tr_bq"><style type='text/css'><br />.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px &#39;Open Sans&#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 &#39;Open Sans&#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#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:<span style="color: red;">22.7%</span>;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:<span style="color: red;">25%</span> !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 &#39;Open Sans&#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}<br /></style></blockquote><br />Next, we need to add the script  - search for the following line:<br /><blockquote class="tr_bq"><b:includable id='postQuickEdit' var='post'></blockquote><br />Once you found it, click the small arrow not beside it but with one level above to expand code and scroll down until you see <span style="background-color: yellow;"></b:includable></span> - right below this tag, you should see the line including the "postQuickEdit" id.<br /><br />See the screenshot for more help:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjx4jSCTVp5qGDMR7L7qaxFRAkgiIiH3y14ITraI6gumLI2SJxgwlGwoI3RhyEcaDajVpDg5196GuFhMJ2tL2dZK8t_FPqQmWj5Vx281kcpe7GlYji8GnurnffjSMAk0roBCfvW4A_Y3GR/s1600/how-to-add-related-posts-widget-to-blogger.png" width="640" /></div><br />Just ABOVE the <span style="background-color: yellow;"></b:includable></span> tag, add the following script:<br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='related-posts-container' id='related-posts-widget'/><br /><div style='clear: both;'/><br /><script type='text/javascript'><br />var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];<br />var relatedSettings = {<br />blogURL:&quot;<data:blog.homepageUrl/>&quot;,<br />relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;<span style="color: red;">Related Posts</span>&lt;/span&gt;&lt;/h4&gt;&quot;,<br />relatedPosts:<span style="color: red;">4</span>,<br />relatedStyle:<span style="color: red;">4</span>,<br />thumbnailSize:&quot;w<span style="color: red;">300</span>-h<span style="color: red;">200</span>-p-nu&quot;,<br />defaultThumb:&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicL26nXbHwB5cU07UxIRVmNZ4dnsK2aIjoAf5jR6fKG2VAY6DRrlunSAoRaUlBogfBmn7vJp_6mHKVvfXf2wfG8YJCmiHhNm_dLV_7x3w8uPEaEh5e8BdaY2ngGVs7V8j0m7wB9HpsfCt/<span style="color: red;">300</span>-h<span style="color: red;">200</span>-c/no-thumb.png&quot;,<br />roundThumbs:<span style="color: red;">false</span>,<br />titleLength:&quot;<span style="color: red;">auto</span>&quot;,<br />snippetLength:<span style="color: red;">45</span>,<br />centerText:<span style="color: red;">false</span>,<br />openNewTab:<span style="color: red;">false</span><br />};</script><br /><script type='text/javascript'><br />//<![CDATA[<br />var 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&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&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+'<ul class="related-posts-'+e+'">',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='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"&hellip;":n,p="media$thumbnail"in c[r]&&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<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"&hellip;":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);<br />//]]><br /></script><br /></b:if></blockquote><br /><h2>How to Customize the Related Posts Widget for Blogger?</h2>To change the 'Related Posts' text that appears above the widget, modify the text in red:<br /><blockquote class="tr_bq">relatedHeading: &quot;&lt;h4&gt;&lt;span&gt;<span style="color: red;">Related Posts</span>&lt;/span&gt;&lt;/h4&gt;&quot;,</blockquote><br />To change the number of posts to display, change the '4' value from this line:<br /><blockquote class="tr_bq">relatedPosts: <span style="color: red;">4</span>,</blockquote><br />Note: 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.<br /><br />To change the style of the related posts widget, modify the '4' value from:<br /><blockquote class="tr_bq">relatedStyle: <span style="color: red;">4</span>,</blockquote><br /><h4>Available Related Posts Styles</h4><ol><li>simple related posts widget that will show post titles only</li><li>display post titles and snippets</li><li>display post thumbnails, titles and snippets</li><li>display related posts thumbnails, titles and post date (shows by default)</li><li>display related posts thumbnails and titles</li><li>post titles in front of thumbnails, instead of having them below the thumbnail</li><li>display thumbnails only</li><li>small thumbnail with titles on the right and date below</li><li>small thumbnails with post titles and excerpts on the right</li></ol><h3>Customizing the Related Post Thumbnail Size & Style</h3>By 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:<br /><blockquote class="tr_bq">thumbnailSize: &quot;w<span style="color: red;">300</span>-h<span style="color: red;">200</span>-p-nu&quot;,<br />defaultThumb: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicL26nXbHwB5cU07UxIRVmNZ4dnsK2aIjoAf5jR6fKG2VAY6DRrlunSAoRaUlBogfBmn7vJp_6mHKVvfXf2wfG8YJCmiHhNm_dLV_7x3w8uPEaEh5e8BdaY2ngGVs7V8j0m7wB9HpsfCt/<span style="color: red;">300</span>-h<span style="color: red;">200</span>-c/no-thumb.png&quot;,</blockquote>Note: '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.<br /><br />If you want thumbnails have rounded corners, change 'false' with 'true':<br /><blockquote class="tr_bq">roundThumbs:<span style="color: red;">false</span>,</blockquote><br /><h3>Customizing Related Titles & Excerpts </h3>To shorten the post title, change <span style="color: red;">auto</span> with the number of characters to show:<br /><blockquote class="tr_bq">titleLength: &quot;<span style="color: red;">auto</span>&quot;,</blockquote><br />To reduce or add more characters to the snippets, change the "45" value:<br /><blockquote class="tr_bq">snippetLength: <span style="color: red;">45</span>,</blockquote><br />If you want to center text (title and summary), change 'false' to 'true':<br /><blockquote class="tr_bq">centerText:<span style="color: red;">false</span>,</blockquote><br />To open links in a new tab when visitors click on a related post, change "false" to "true":<br /><blockquote class="tr_bq">openNewTab: <span style="color: red;">false</span></blockquote><br />Once 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.<br /><br /><h4>Final words</h4>That'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.

Customizable Related Posts Widget for Blogger

We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be...

Read more »

Stop Blogger from Redirecting Blogspot to Country Specific URLs

Let's say you're from France and have set up - just for examples sake - a blog called frenchlitgeek.blogspot.com where you share your thoughts and insights on French literature. Now, with Google's <b>country specific redirection in Blogger</b>, you might be redirected to frenchlitgeek.blogspot.fr when you try to access your site. The thing is, you perfectly liked the .com and didn't sign up for the .fr but you find yourself being directed there. Sure, your blog works and all but you also wonder why.<br /><div class="ssmainhide"><img alt="blogger country specific redirection" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4l6igBbR0km-k2INsuh4eE3tUV2FgcQ1_DZyuMtCT9OrsPhX3gHD28cu3zM49NhP0-7VZb3opWv7CojMcwJW2Y9TAY3dovBdjXMxJO0UVIyqpPSTOTKoRuSSTxQ93nZn4xgtMxzCEPuB/s1600/how-to-stop-blogger-country-specific-redirection-of-blogspot.png" title="Stop Blogger from Redirecting Blogspot to Country Specific URLs" /></div><br /><h4>Why Did Google Do This?</h4>Google has always supported the expression of views, and they stated as much on their <a href="https://googleblog.blogspot.com/" rel="nofollow" target="_blank">official blog</a>. In the post <a href="https://googleblog.blogspot.com/2007/11/free-expression-and-controversial.html" rel="nofollow" target="_blank">Free expression and controversial content on the web</a>, which was published in 2007, it said "Our world would be a very boring place if we all agreed all the time. So, while people may strongly disagree with what someone says, or think that a particular newspaper is total nonsense, we recognize that each of us have the right to an opinion."<br /><br />The post continued, "We also know that letting people express their views freely has real practical benefits. Allowing individuals to voice unpopular, inconvenient or controversial opinions is important. Not only might they be right (think Galileo) but debating difficult issues in the open often helps people come to better decisions".<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogspot country redirection" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwvYuVEeARhUHWadfEvCoJWwhpPbuFzRRO1IxGgHgiQp9E5kpqC1jXOKoDYiTuI43MnFQYGhPPDeka4cMY9z4w6YdjulBaUpIGZDwwAW84Hwr7z4SYYMdKMK56Sr94ffDXcY1uFCvXo4d/s1600/country-specific-redirection-blogger-blogspot.png" title="Blogger country-specific redirection" /></div><br />While the company is clearly on the side of people freely expressing their opinions, they also believe that a line has to be drawn somewhere. Then again, for a company providing services in over 100 countries around the world and each with their own national laws and cultural norms, it's surely difficult for a company like Google to decide where to draw boundaries.<br /><br />However, there are cases like child pornography which is illegal in just about any country where decisions are clear cut.<br /><br />For a company whose products are "specifically designed to help people create and communicate, to find and share information and opinions across the world", how does Google deal with this challenge?<br /><br />One of the most challenging areas where Google deals with issues regarding free expression is in Blogger, their content generation platform. Since Google can't check what you've written before you publish, they rely on active vocal users who are diligent in alerting the proper if a post borders on offensive. Then again, that in itself is a tricky issue as well because what one person may view as offensive, another might not.<br /><br />In other words, it's always a work in progress with Google.<br /><br />Fast forward to January 9, 2012 when Google announced it was making changes to the Blogger platform with regards to censorship. That said change would make use of a <b>country specific domain</b> to the Blogger platform. Doing this would allow Google to censor and remove content specific to a certain country.<br /><br />In their announcement, Google said: "Migrating to localized domains will allow us to continue promoting free expression and responsible publishing while providing greater flexibility in complying with valid removal requests pursuant to local law. By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers."<br /><br />The move by Google come after pressure from countries like India that are working on hunting down content on social media sites which are considered inappropriate. Also, the move followed closely on the heels of Twitter's new censorship policies.<br /><br />Since Google aims to "help people create and communicate, to find and share information and opinions across the world", it would be strange to take down a post that was just banned in a certain area. In essence, with <b>country specific redirection</b>, a piece of content can still be accessible by the world save for the country where it was blocked.<br /><br /><h3>How Would Country Specific Redirection Affect Your Site?</h3>Of course, not all site owners greeted the country specific URL change with open arms. A few of the issues brought up in regard to the change include:<br /><br />1. <u><b>A reduction in social stats</b></u>. These are your Facebook Likes, Google +1s and so on from your blog posts. They might be reduced because the URLs from one blog post will be different depending on where your readers are from.<br /><br />2. <u><b>A problem with external commenting platforms</b></u>. If you use Disqus - for example - for your comments section, then you might run into trouble because blog URLs will be different even if essentially the page being accessed is just the same.<br /><br />3. <u><b>A slight problem with AdSense earnings</b></u>. Some users have complained about seeing a dip in their earnings when their pages are served through country specific domains.<br /><br />4. <u><b>An issue with link juice</b></u>. You want external sites to link to you and not your country specific URL. But the issue here is that you can't control how others link to your page. They might use the top level domain or they might use the country code top-level domain.<br /><br /><h2>Stop Blogger from Redirecting to Country-Specific Domains</h2>If <b>country specific redirection</b> affects important factors such as traffic and link juice, and you need those in order to rank well, what can you possibly do? Well, thankfully, Google has provided a way to get around this. All you have to do is <a href="https://support.google.com/blogger/answer/2402711?hl=en" rel="nofollow" target="_blank">add an ncr/ to the end of the URL</a> - ncr here stands for No Country Redirect. So basically, it goes frenchlitgeek.blogspot.com/ncr/.<br /><br />That solution is great but do you want your users to always have to do that every time they visit your blog? To eliminate that hassle, and for the good of your site statistics, a simple redirection script will do the trick. Here's how:<br /><br />1. Log in to your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger account</a>.<br /><br />2. Click on Template → Edit HTML.<br /><br />3. Find the <span style="background-color: yellow;"><head></span> tag in the HTML editor by opening the search box using Ctrl + F.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger country redirection" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPkIfk0MGXkXJ3w8spfy65RQ9gjUWrPhn0tENeKiHoGENRLlWQFonSrHmCMu3yzlufLh3gMrLOctN-zzYNI8tXdqU776sLCC8MdxNISDWYLoJmRAsKMoRhjCXBtFxvQ1bG2KpotF89_OZW/s1600/search-box-blogger-template-html-editor.png" title="Stop Blogger Country Redirection on Blogspot" /></div><br />4. Copy the redirection code seen below after the <head> tag.<br /><blockquote class="tr_bq"><script type="text/javascript"><br />var blog = document.location.href.toLowerCase();<br />if (!blog.match(/\.blogspot\.com/)) {<br />blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");<br />window.location.replace(blog);<br />}<br /></script></blockquote><br />5. Click on "Save Template".<br /><br />Credit: <a href="http://www.labnol.org/internet/prevent-blogger-country-redirection/21031/" rel="nofollow" target="_blank">labnol.com</a><br /><br />And that's it! Whenever someone accesses your Blogger, they'll be taken to the top level domain rather than the country specific one.

Stop Blogger from Redirecting Blogspot to Country Specific URLs

Let's say you're from France and have set up - just for examples sake - a blog called frenchlitgeek.blogspot.com where you share you...

Read more »

Building a List/Grid View Switcher in Blogger with Auto Read More

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 <a href="http://helplogger.blogspot.com/2015/03/masonry-grid-layouts-for-blogger-posts.html">display posts in list or grid view</a>. 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. <br /><br />The good news is there are lightweight codes available, including the <a href="http://helplogger.blogspot.com/2012/03/auto-read-more-with-thumbnail-for.html">Auto Read More in Blogger</a>. 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.<br /><br />Unlike 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. <br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIAyAeY4_WGX-QrmtijYKCn09pg0uVfggl79CouOTnjHsB0b6LeW3FQmj0lVvrygyLNiQzNNUISS4cPt273VPlSqhCO0W6ll52b9KexW8IWNDf6UdSInoK5y0TH3m9R_ycVSSE20RZEMd/s1600/grid-list-view-switcher-for-blogger-posts.png" width="400" /></div><br /><div style="text-align: center;"><a class="demo-link" href="https://grid-list-view.blogspot.com/" rel="nofollow" target="_blank">Live Demo</a></div><br /><h2>How to Add a List/Grid View Switcher in Blogger</h2>Step 1. Log into your <a href="http://www.blogger.com/" rel="nofollow" target="_blank">Blogger dashboard</a> and select your blog, then go to "Template" > press the "Edit HTML" button.<br /><br />Step 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:<br /><blockquote class="tr_bq"></head></blockquote>Step 3. Just above the <span style="background-color: yellow;"></head></span> tag, copy and paste the following CSS style and scripts:<br /><div class="code1"><script type='text/javascript'><br />function list_view(){<br />if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}<br />if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}<br />}<br />function grid_view(){<br />if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}<br />if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}<br />}<br /></script><br /> <script type='text/javascript'><br />posts_no_thumb_sum = 100;<br />posts_thumb_sum = 350;<br /></script><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />function removeHtmlTag(strx,chop){<br />if(strx.indexOf("<")!=-1)<br />{<br />var s = strx.split("<");<br />for(var i=0;i<s.length;i++){<br />if(s[i].indexOf(">")!=-1){<br />s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br />}<br />}<br />strx = s.join("");<br />}<br />chop = (chop < strx.length-1) ? chop : strx.length-2;<br />while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;<br />strx = strx.substring(0,chop-1);<br />return strx+'...';<br />}<br />function createSummaryAndThumb(pID, pURL, pTITLE){<br />var div = document.getElementById(pID);<br />var imgtag = "";<br />var img = div.getElementsByTagName("img");<br />var summ = posts_no_thumb_sum;<br />if(img.length>=1) {<br />imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';<br />summ = posts_thumb_sum;<br />}<br /><br />else {<br />imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqE1WyUnf0rdYCxn1gu-plpK4M98pnAMh3txWlar5h3kfdbocRmwnZvSm-_bzSf99qLECEu6zO3oI57KOatpZiseoZH1HguSvCxTA6jUCOG1NdwOw15nhOJd3kpujK5TC5YnsPHTrqlzg/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';<br />summ = posts_thumb_sum;<br />}<br /><br />var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';<br />div.innerHTML = summary;<br />}<br />//]]><br /></script><br /><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType!= &quot;item&quot;'><br /><style><br />#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}<br />#list-view-button a{text-decoration: none; color: #666;}<br />.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}<br />.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}<br />.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; }<br />.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;}<br />.post-grid-view .post-header {display: none;}<br />.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;}<br />.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: &#39;Open Sans Condensed&#39;, sans-serif;}<br />.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}<br />.post-title-grid a { font-size:170%;color: #777;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}<br />.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}<br />.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: &#39;Open Sans Condensed&#39;, sans-serif;}<br />.post-grid-view .post-footer a{color: #128EC9;}<br />.post-grid-view a.comment-bubble {display: none;}<br />.main-inner .column-center-inner .section {margin: 0px !important;}<br />.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;}<br /><br />#blog-pager {clear:both;}<br />.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}<br />.date-header {display: none;}<br />h3.post-title a {font-size:90%;font-family: &#39;Open Sans Condensed&#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}<br />h3.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;}<br />h3.post-title:hover {opacity: 1;}<br />.posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;}<br />.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}<br />.post-body a {text-decoration: none;}<br />.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;}<br />.post-summary-text {display: none;}<br />a.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: &#39;Pacifico&#39;, cursive;z-index: 122;}<br />a.comment-bubble:before { content: &quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BBC080_30tw6uB6BPK_pa8VXaGz7Exb-aO9nakCaBCqNCZpId4iysjiLQkpDWUVc0RAa2s02yu640G3EkfvRJPpdhr5HbuA7DQuQw7B1iqO6tKg-reQKzEP-2GPo7hS4rgvDtfp5QkXo/s1600/heart-active.png);}<br />.post-header,.post-footer {display:none;}<br /></style></b:if></b:if><br /><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/><br /><link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/></div><br />Step 4. Next, search for the following line:<br /><blockquote><b:section class='main' id='main' name='Main' showaddelement='no'></blockquote>...in case you can't find it, search for this one instead:<br /><blockquote><b:section class='main' id='main' name='Main' showaddelement='yes'></blockquote>Step 5. Just above this line, add the following code:<br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType!= &quot;item&quot;'><br /><div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQ3-N4usAI4veT-mR_OLhI8_WQBQwr-zaZNZVR9GflYbBQ6HWOWFPgq08OWIyPOR-6tF8uNGC8Ly9OCyXhV69Jk7QrVFZIrnQnMFlCx2PnW9iwEprvrnbl9aF_ss89hoy7w2yjEQyabHu/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLv_XvqgsXrI_a-Me2u8KxxOaCrYsK_zHk2MRRNLnlZejXxpCe07fNyoOILbQarILJ0yXYwJ6jaEhbwpwaCWtEJxKBQkyrF5TaFyB_w_D4fD_P8tQ1hZCHY-a1P7A-DGkCMX0yE4gLPNNv/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div><br /></b:if></b:if></blockquote>Step 6. Now, search the tag below:<br /><blockquote class="tr_bq"><data:post.body/></blockquote>Step 7. You will find 3 occurrences of this code... replace only the second and third one with this one below:<br /><blockquote class="tr_bq"> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br />    <b:if cond='data:blog.pageType != &quot;item&quot;'><br />        <div expr:id='&quot;summary&quot; + data:post.id'><br />            <data:post.body/><br />        </div><br />        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script><br />        <b:if cond='data:post.allowComments'><br />            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br />                <data:post.numComments/><br />            </a><br />        </b:if><br />    </b:if><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br />    <data:post.body/><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />    <data:post.body/><br /></b:if></blockquote><br />Important: if you already added the auto read more script, remove the previous one in order to make this work.<br /><br />Step 8. Finally, click "Preview" to see if everything looks good and press the 'Save Template' button to save the changes... <br /><br /><h4>That's it!</h4>Adding 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. <br /><br />Considering 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.

Building a List/Grid View Switcher in Blogger with Auto Read More

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 con...

Read more »

Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript

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.<br /><br /><a href="http://helplogger.blogspot.com/2015/03/list-grid-view-switcher-for-blogger.html">Posts listed in grid view</a> 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.<br /><br />How 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?<br /><br /><h3>Features</h3><h4>What features can you expect from a grid style post in Blogger?</h4><ul><li>All the posts will follow the grid style when switching to grid view.</li><li>While the codes are being customized, the posts are left untouched. Their length, however, could be changed accordingly.</li><li>Auto Read More will be applied on all posts.</li><li>Thumbnails are automatically added based on the first picture found in each post.</li><li>Code 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.</li></ul><h4>What are the benefits of grid style?</h4><ul><li>Quick 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.</li><li>Professional-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.</li><li>Improved 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.</li></ul>Although 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.<br /><br /><b>Important:</b><br />Before 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 > 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.<br /><br />Now we can safely proceed with editing our Blogger template. If you run into problems, just revert back to your saved template.<br /><br /><h3>How to Create Masonry, Grid Style Posts in Blogger</h3>Step 1. Log into your <a href="http://www.blogger.com/" rel="nofollow" target="_blank">Blogger dashboard</a> and click on the blog where you want to apply the grid style.<br /><br />Step 2. Go to "Template" located on the left side of the screen and press the "Edit HTML" button.<br /><br />Step 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):<br /><blockquote class="tr_bq"></head> </blockquote>Step 4. Now copy the script below and paste it just before the <span style="background-color: yellow;"></head></span> tag:<br /><blockquote class="tr_bq"><script type='text/javascript'><br />posts_no_thumb_sum = 100;<br />posts_thumb_sum = 100;<br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&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>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqE1WyUnf0rdYCxn1gu-plpK4M98pnAMh3txWlar5h3kfdbocRmwnZvSm-_bzSf99qLECEu6zO3oI57KOatpZiseoZH1HguSvCxTA6jUCOG1NdwOw15nhOJd3kpujK5TC5YnsPHTrqlzg/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}<br />//]]><br /></script></blockquote>Step 5. Find the following code snippet using CTRL+F or Command + F:<br /><blockquote class="tr_bq"><data:post.body/></blockquote>Step 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:<br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br />    <b:if cond='data:blog.pageType != &quot;item&quot;'><br />        <div expr:id='&quot;summary&quot; + data:post.id'><br />            <data:post.body/><br />        </div><br />        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script><br />        <b:if cond='data:post.allowComments'><br />            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br />                <data:post.numComments/><br />            </a><br />        </b:if><br />    </b:if><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br />    <data:post.body/><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />    <data:post.body/><br /></b:if></blockquote><br />Step 7. Now choose one of the styles below, copy the code provided and paste it just above the <span style="background-color: yellow;"></head></span> tag:<br /><br /><h3 style="text-align: center;">Simple Grid Design</h3><div class="separator" style="clear: both; text-align: center;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiutIM-fJVkTpdPU6YX8GzuV2_SbapZbWApMHXv_LVqx564JcgxozAa-UacoKMC2xW8eaYBVHLR_BPWiDhYp7ymSSp2LfCpP_zXssKkMKsmk7seePsXNIM5gCofWSIUNQLiUPPG_Az-ewu4/s1600/grid-style-with-thumbnail-summary.png" width="321" /></div><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType!= &quot;item&quot;'><br /><style type="text/css"><br />#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:&#39;Open Sans Condensed&#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:&#39;Open Sans Condensed&#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:&#39;Open Sans Condensed&#39;,sans-serif;}a.comment-bubble:before{content:&quot;Comments: &quot;;}.post-header,.post-footer{display:none}<br /></style></b:if></b:if><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/></blockquote><br /><h3 style="text-align: center;">Grid Layout with Post Summary and Thumbnail</h3><div class="separator" style="clear: both; text-align: center;"><img alt="grid layout for blogger" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaieKSOQk4xSgi1CEWshR8GQ4iNKWHmSXRzf-v3VXHoNAeVxp5hLWoKiwwjWecY5_PnonfoG3-_LqZslIubgBuBmRzPwz_m7TP-PMqKOaPc3TXYGCo5N0N0iwc4ws-j1iUndFH3hyphenhyphenhZjXI/s1600/grid-layout-for-blogger.png" title="Create Masonry, Grid Layouts for Blogger Posts" width="320" /></div><br /><div style="text-align: center;"><a class="demo-link" href="http://blogger-grid-layouts.blogspot.com/search?updated-max=2015-03-01T05:57:00-08:00&max-results=9" rel="nofollow" target="_blank">Demo</a></div><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType!= &quot;item&quot;'><br /><style type="text/css"><br />#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% &#39;Open Sans Condensed&#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRsHxNbqlX5fEHoTMRUS_tH1ta2sqQav7EZjf2oVUMh0zsVu37C4UkhXsLuXjs2EKp99qbDJ2IE8R7QGFSt_VBP-_U7MTFv93TbId_nhuaVfq55_UNZw0v-H0CUSeWVPktUopiHsyQEJC/s1600/blueprint.png);font:100% &#39;Open Sans Condensed&#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% &#39;Pacifico&#39;,cursive;}a.comment-bubble:before{content:&quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BBC080_30tw6uB6BPK_pa8VXaGz7Exb-aO9nakCaBCqNCZpId4iysjiLQkpDWUVc0RAa2s02yu640G3EkfvRJPpdhr5HbuA7DQuQw7B1iqO6tKg-reQKzEP-2GPo7hS4rgvDtfp5QkXo/s1600/heart-active.png);}.post-header,.post-footer{display:none}<br /></style></b:if></b:if><br /><link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/><br /><link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/></blockquote><br /><h3 style="text-align: center;">Grid Layout with Text Snippet on Hover</h3><div class="separator" style="clear: both; text-align: center;"><img alt="blogger posts" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdeeG7rbf7fHu7zEChtCWaO1NyNbJE50wrGvKQiDiFBa8a4kNurLamRnv44B4sZy91sFLb2fDIjdilZDoa2p0_MH9LwBnq0k00Fxq_arR0089n7A1M1gMy1KYMlHMB1WzrrLLeAED1XpPX/s1600/grid-layout-summary-on-hover-for-blogger.png" title="Create Masonry, Grid Layouts for Blogger Posts 2" width="400" /></div><br /><div style="text-align: center;"><a class="demo-link" href="http://blogger-grid-layouts.blogspot.com/search?updated-max=2015-02-25T08:37:00-08:00&max-results=9&start=9&by-date=false" rel="nofollow" target="_blank">Demo</a></div><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType!= &quot;item&quot;'><br /><style type="text/css"><br />#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% &#39;Open Sans Condensed&#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% &#39;Open Sans Condensed&#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% &#39;Pacifico&#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:&quot;Comments: &quot;}.post-header,.post-footer{display:none}<br /></style></b:if></b:if><br /><link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/><br /><link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/></blockquote><br /><h3 style="text-align: center;">Masonry Layout (Pinterest Like Grid)</h3><div class="separator" style="clear: both; text-align: center;"><img alt="masonry layout for blogger" border="0" height="367" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQHU0N_PpaLNCfCyH5tZaBfS8FuTyNSwAr66EH2HYRPP1oVnZzMancuZ7otvMpeY69xH4nKmKkDs6DPB-x_ILzb2_JSJg4okKdLwg43YFe0KJrh3lIb3m-468JZsXYulpeNaLGIYGZH5B/s1600/masonry-grid-layout-for-blogger.png" title="Create Masonry, Grid Layouts for Blogger Posts 3" width="400" /></div><br /><div style="text-align: center;"><a class="demo-link" href="http://blogger-grid-layouts.blogspot.com/" rel="nofollow" target="_blank">DEMO</a></div><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType!= &quot;item&quot;'><br /><style type="text/css"><br />#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% &#39;Open Sans Condensed&#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% &#39;Open Sans Condensed&#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% &#39;Open Sans Condensed&#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BBC080_30tw6uB6BPK_pa8VXaGz7Exb-aO9nakCaBCqNCZpId4iysjiLQkpDWUVc0RAa2s02yu640G3EkfvRJPpdhr5HbuA7DQuQw7B1iqO6tKg-reQKzEP-2GPo7hS4rgvDtfp5QkXo/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}<br /></style></b:if></b:if><br /><link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/></blockquote><br />Please 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.<br /><br />Step 8. Click "Preview" and if everything looks fine, press the "Save Template" button.<br /><br /><h5>That's it!</h5>Implementing 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.

Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript

How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly r...

Read more »

Facebook Popup Like Box Widget For Blogger

Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.<br /><br />In order to produce an effective digital campaign, you absolutely must take advantage of social media by doing things like integrating <a href="http://helplogger.blogspot.com/2016/09/how-to-share-blogger-post-to-facebook.html">Facebook on Blogger</a>. Email marketing can be useful, but it comes with restrictions that could limit your blog's potential. Perhaps the most significant problem is that emails don't come with a face or personality like Facebook does.<br /><br />Think of a time when you received an email in you inbox from someone you didn't know. Where you inclined to open it or did you send it right to the junk folder? If it's your first introduction to new consumer, they simply don't know who you are, what you want, and how you got their email. This sets off an initial breakdown of any type of trust that might have developed. The reputation of email marketing is further deteriorated with a study done by Kaspersky Lab, an Internet research firm. They estimate that around 70% of all the emails sent in the world are spam.<br /><br />Sharing site content using a <a href="http://helplogger.blogspot.com/2012/03/how-to-add-facebook-likefan-box-to.html">Facebook Like Box</a> is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. <a href="http://helplogger.blogspot.com/2012/04/add-static-facebook-pop-out-like-box.html">Adding a Facebook Like Box</a> to your site helps to reduces your individual workload, and instead distributes that ability equally among your readers.<br /><br />When someone reads your content and appreciates the kind of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a 'Like Box' to your Blogger site so that you can began taking advantage of these great opportunities.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjROdHGd2s9QKA1Ds-Rdgj2-wq0SNDGuoA0fkAN8T-Wy_hpTXru3l89Z1ZH6pMkCiJDc4zpzGfkPqD1XpM4uTIm2EOLp7Q11T9Rx4y_EplswbAZ1vkrZf0fZwWjBVClozN2yQ7fqcsIk9VB/s1600/facebook-popup-like-box-widget-for-blogger.png" width="320" /></div><br /><center><a class="demo-link" href="http://popular-posts-blogger-widget.blogspot.com/" rel="nofollow" target="_blank">Click here for a DEMO</a></center><br /><br /><h2>How to Add the Facebook Popup Like Box Widget</h2>1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side.<br />2. Once the popup window is open, select the HTML/JavaScript gadget from the list:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZVqNTmHGnhtfyb4VWxQjcBgk_BW3iUqxgdpj2Nyra-l7zGXslh5Hz618SnJDzMhDAtyjVewUF5yhCEqSpAYiG_bYKAq5_m0cRiQSHHDSaQYFDSTwMwhbtEk8lW9uLfuPDU3ESE4fzgyn/s1600/add-html-javascript-gadget-blogger.png" width="400" /></div><br />3. Copy and paste the following code inside the empty box:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><br /><style type="text/css"><br />#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}<br /></style><br /><script type='text/javascript'><br />//<![CDATA[<br />jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};<br />//]]><br /></script><br /><script type='text/javascript'><br />jQuery(document).ready(function($){<br />if($.cookie('popup_facebook_box') != 'yes'){<br />$('#fbox-background')<span style="color: red;">.delay(5000)</span>.fadeIn('medium');<br />$('#fbox-button, #fbox-close').click(function(){<br />$('#fbox-background').stop().fadeOut('medium');<br />});<br />}<br /><span style="color: #6aa84f;">$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });</span><br />});<br /></script><br /><div id='fbox-background'><br /><div id='fbox-close'><br /></div><br /><div id='fbox-display'><br /><div id='fbox-button'><br /></div><br /><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?<br />href=<span style="color: blue;">https://www.facebook.com/pages/Helplogger/120574614736021</span>&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'<br />style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe><br /><div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">Helplogger</a></div><br /></div><br /></div></blockquote>4. Press the 'Save' button to add the widget to your blog. That's it!<br /><br /><h3>Facebook Popup Like Box Customization</h3>After adding the code, replace the address in blue <span style="color: blue;">https://www.facebook.com/pages/Helplogger/120574614736021</span> with your site's facebook page URL.<br /><br />The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:<br /><blockquote class="tr_bq"><span style="color: red;">.delay(5000)</span></blockquote>By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:<br /><blockquote class="tr_bq"><span style="color: #6aa84f;">$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });</span></blockquote>If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:<br /><blockquote class="tr_bq"></body></blockquote>Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:<br /><blockquote class="tr_bq"><b:if cond='data:page.type == "index"'><span style="color: #3d85c6;">ADD THE FACEBOOK WIDGET CODE HERE </span></b:if></blockquote>After saving this widget, you can test it out by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's Facebook page.<br /><br />If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of <a href="http://helplogger.blogspot.com/2012/03/how-to-create-facebook-fan-page-for.html">Facebook fans</a>.

Facebook Popup Like Box Widget For Blogger

Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to ...

Read more »

How To Host Blogger CSS and JavaScript Files in Google Drive

Anyone that has ever worked on a web design or development can tell you that where you decide to store your files is important. Every time someone visits your site, the server or host will access this location and bring up the relevant files that need to be displayed. Wherever you decide to store your files, this will have an impact on some important aspects like the speed that your site loads, your overall SEO ranking and your ability to make necessary adjustments to the site.<br /><br /><h3>Things To Think About</h3>When you are designing your online structure and where to store your important CSS and JavaScript files, here is a run down on how this decision might impact your site later on:<br /><br /><h4>Site Loading Speed</h4>By combining some of the style sheets and website files, the Blogger server only has to collect information from a single location. When you split up your files or decentralize the file system, it takes a longer time for all the data to come together to make your site possible.<br /><br />Slow loading speeds can negatively impact your SEO ratings because the slower the site is, the less likely that visitors are going to wait around for it to load. If someone visits your site and immediately clicks the 'back' button because it's taking too long to load, that is going to increase your bounce rate and provide Google with statistics that show your site is either low quality or irrelevant to the search keywords.<br /><br /><h4>File Storage Affects SEO</h4>In addition to increasing your bounce rate, storing your files in a central location and managing the name of your files can affect SEO site wide. Web crawlers enlisted by Google, or some of the other search engines, index both the code on your site, and the name and directory of your files. If file names are random or not placed in the proper categories, the web crawlers aren't going to know what to do with the information.<br /><br />Clear file structure and a central location provide you with incentive to organize everything and name them appropriately. All the content that is relevant to the subject of your website or blog will be in the same location for web crawlers to review.<br /><br /><h4>Storage Locations Affect Editing Abilities</h4>Shuffling through files and folders or opening up FTP connections just to make some simple edits can be a hassle, and take up a lot of time that could have otherwise have been spent writing new content.<br /><br />If you're a Blogger site owner, this is something you need to think about. When you need to make alterations to things like social media sharing buttons, popular posts, recent posts and related posts widgets, you have to know where everything is intended to go, or risk losing both available content and money.<br /><br />Some of the larger sites that produce hundreds of unique articles each month can't afford to have content in different locations. When articles start to get lost out of order, they run the risk of duplicating content on their site, or forgetting to post it altogether. Things should be right at your fingertips to minimize mistakes and reduce the amount of time spent editing the site while it's still live.<br /><br /><h2>Storing Javascript/CSS Files With Google Drive</h2>Storing Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.<br /><br />Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.<br /><br />Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.<br /><br />This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="host blogger css javascript files" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwWcfqI-fYen3Sy2yYLd8tE1ajH40EQI3vU-mdRcFhVt5ivWL4Cv7o21hinONeruLs721uLRa4Bf0rUxRksfVhHdnB2d8UnCeMDZ4KVxgf4oLTZJEtiWDGvwSYXvjjce9fT2ZUTyUIL0D/s1600/host-blogger-javascript-css-files-externally-using-google-drive.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive" width="320" /></div><br /><h3>Step 1. Prepare the CSS/JavaScript Files</h3><ul><li>First, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the <style> and </style> tags, remove them). </li></ul><ul><li>In the Notepad menu, select 'File' > 'Save as' and type the file name with the <span style="background-color: yellow;">.css</span> extension just like I did with mycssfile.css - see the screenshot below.</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="create a css file" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOt91THWWxXlloTE7Alcf0mQl7uL5FBRZ6t3OV_ffNi2YR3OIZNSseQDURrF6UjH319MBA6VHn5N7rlSyjx5iMyyJCLGsWFqfxbKhiBB-a7b4lhPTxigCwKR-l1l3MAVkcJVeBsiUfM9O2/s640/create-a-css-style-sheet-file.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 1" width="640" /></div><ul><li>In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8.</li></ul><ul><li>If you want to host a JavaScript file, add the <span style="background-color: yellow;">.js</span> extension (instead of .css) at the end of your file name (remove the <script>...</script> tags if you see them). Click "Save" and navigate to the location where you want to save the file.</li></ul><h3>Step 2. Upload Your File on Google Drive</h3><ul><li>Access <a href="https://drive.google.com/" rel="nofollow" target="_blank">https://drive.google.com</a> and log in with your Gmail account. After you logged in, click on the 'Create' button and add a new separate folder to upload your JavaScript and CSS files.</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="create folder in Google drive" border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_vPo55Hr6i0rVIo3k2WCm9gPLN1rn65yhQXlY2OSD4HaLTxdHDcbZwA3BhB-90e3eA4BV-Sav-5pwAk3ML-6Z-9xYf9e1hEa_MATdRDAeMGJcs3eA8X3jX3bNoFqciwPznhYqaOj5JWL/s1600/google-drive-create-folder.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 2" width="640" /></div><ul><li>Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload. </li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="upload files using google drive" border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHyq5UdC9KEjaV7lDeNdkGARkAdpGkMDD2oYfjv25Rt9QfjXT5Dd3T4t1KX63Qv5VNQ-YGRtRFys71m0263bEGMeQvhVYYPTYlKWcm4eMTQ_UHSF-T8qAPR60dt1Vprsxf4rxs4t9vMXf/s1600/upload-css-javascript-files-using-google-drive.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 3" width="640" /></div><ul><li>Now, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.</li></ul><ul><li>After the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select 'Share': </li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="share google drive files" border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmClMFe2dWR9snoxGxtgBs98FzdbR5UQo1ZcCEgjJg3GL98dxRT4AqW7ELXErDoU0gWGFEG7UA7KeRunaOecjQgiYnzEPznUQg9oVgV2RDFpHEciFcYssuNf8JYf4luVLxsEfpfxzwpBBV/s1600/share-google-drive-css-javascript-files.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 4" width="640" /></div><ul><li>In the 'Sharing settings' window, click on the 'Change' link and choose the 'Public on the web' option. Press 'Save' and copy the link(s) of your uploaded file(s) from the 'Links to share' box highlighted in blue, then paste it into a Notepad to use it later.</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="javascript css file sharing" border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85Ogmn4w60APJVfHbrEudKbrjF6ICfl4bU9iyNrIEnlx9353ISqOzADpnUqul4O0zjFDI196iccUVSa6JJaBqVXmFGlx5YmuCATWD9MBRqti2ZtT_h82uIdAVwgcyat7c6ApdWeBRqqWb/s1600/google-drive-link-sharing-public-on-the-web.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 5" width="640" /></div><br /><h3>Step 3. How to Add an External CSS/JavaScript file to Blogger</h3>Before you can use the links, you must replace '<b>https://drive.google.com/file/d</b>' to '<b>https://googledrive.com/host</b>' and remove '<b>/edit?usp=sharing</b>' in the link.<br /><br />For example, the link to mycssfile.css that I copied looks like this:<br /><blockquote>https://drive.google.com/file/d/<span style="color: blue;">0B4n9GL3eVuV-TkphMkc3SFR2Slk</span>/edit?usp=sharing</blockquote>Notice the part in blue after the "/file/d/" part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:<br /><blockquote>https://googledrive.com/host/</blockquote>Add the file ID like this (remove the '<span style="color: blue;"></span>/edit?usp=sharing' part):<br /><blockquote>https://googledrive.com/host/<span style="color: blue;">0B4n9GL3eVuV-TkphMkc3SFR2Slk</span></blockquote>Now log into your Blogger account, select your blog and go to Template > Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="open blogger search box" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTB9B6haG3lHQgVxNVR0Ovj6pQT0aRvxVcIgpwZZiTGvzIzcJmsMUP-eV0rswDQk8CPy_5GlQluN6Z6zm-h2-mS3-BC2QXUXs2ZPfY2b9Nws0gK7bZY6f5Npdhntl33tc0ZYtg9oWcFS8/s1600/open-blogger-search-box-ctrl+f.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 6" width="640" /></div><br />If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:<br /><blockquote class="tr_bq"><head></blockquote>Just BELOW the <head> tag, add this line:<br /><blockquote class="tr_bq"><link rel="stylesheet" type="text/css" href="<span style="color: blue;">https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk</span>" /></blockquote>And replace <span style="color: blue;">https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk</span> with the link of your CSS file:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add external css to blogger" border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavOmH3A37QY6pDWLnGMvI8GB8CoXURpX5zZrITfW1C48jtPL5SpvYPGI-ZkrQLQ4F7Z51sr_0G9FSotDNR3a723GGrzDZSWWtf5IDQS9C3oEPSI4xRWUH2P4DJa2TDr0uiOv0Iz_kIUsS/s1600/add-external-css-style-sheet-file-to-blogger.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 7" width="640" /></div><br />If you want to add a Javascript file, search for the following tag:<br /><blockquote class="tr_bq"></body></blockquote>And add this line just ABOVE it:<br /><blockquote class="tr_bq"><script src='<span style="color: blue;">https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg</span>' type='text/javascript'></script></blockquote>Replace the line in blue with your URL:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add external javascript js to blogger" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtTzRAqCWcVv-DfQZtrcs7pNZqU1XlmDIFHEBpLsK1vYjvVEbO1cyIsr9Tv4QW3MZGQYlcA5yT69ZZrSrDyRf506NVOuCVOHFP9QrTGQ3ZR3EoBEmoC0cf43XmuLuTXPGs-GdT5FfDRJ4H/s1600/add-javascript-file-to-blogger-template.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 8" width="640" /></div><br />Finally, press the 'Save template' button to save the changes. And you're done!<br /><br /><h4>In Conclusion</h4>Once you have saved all your file folders and closed out of the drive, open your site in a browser and make sure that all the changes have completed successfully.<br /><br />Next time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.<br /><br />As you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work.

How To Host Blogger CSS and JavaScript Files in Google Drive

Anyone that has ever worked on a web design or development can tell you that where you decide to store your files is important. Every time s...

Read more »

Display Blogger Posts in Grid View with Thumbnails

Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with a large image which takes up too much space and requires too much scrolling, now we can have a clean page that displays a gallery grid, with thumbnails and post titles, linking back to the source post for that thumbnail.<br /><br />Let's take a look at how it will look like in this <a href="http://helploggergridview.blogspot.com/" rel="nofollow" target="_blank">demo blog</a>.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="grid view on blogger posts" border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijY_YhaZusXEQl-FbECAEPhBGJWlML_fWqu4uFYFI5baSeoFwVb5oN6uUfENOHYAb_cmmMjLwf6UODPfAxpXDXFfaS8-RWnrg9PsOhdn3DzXxYbojFKK89fW6d2RVqYf0OwVpwhyphenhyphen1ekhpI/s1600/display-blogger-posts-in-grid-or-gallery-view-with-thumbnails.png" title="display blogger posts in grid view with thumbnails" width="320" /></div><br />If you have a wallpaper or photo blog that would benefit from displaying a thumbnail grid style layout, look no further. Here's how you can add Grid (gallery) View to Blogger posts.<br /><br /><h2>Adding Grid (Gallery) View to Blogger Posts</h2>Step 1. Log into your Blogger account and go to "Template", then click on the "Edit HTML" button<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template html" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="display blogger posts in grid view with thumbnails " width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLfZGUz_ltJYtwZLmfazCzdUex_IySNW6zDN9Lq9CauxFlnf7EoNV3E3I5oJnHsxyn0q2Ksi8p8Tw6jONo64_6L8GMVc8fez7XlLTZtBjT4tozFpgmL5bGa3uM8hUd6MdB8njrwHz77udf/s1600/blogger-template-search-box.png" width="320" /></div><br />Step 3. Type <span style="background-color: yellow;"></head></span> inside the search box and hit Enter to find it.<br /><br />Step 4. Just above the <span style="background-color: yellow;"></head></span> tag, add the following script and CSS codes:<br /><blockquote class="tr_bq"><b><span style="color: #6aa84f;"><script src='http://code.jquery.com/jquery-1.9.1.js'/></span></b><br /><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><script type='text/javascript'>//<![CDATA[<br />function hideLightbox(){for(var a=document.getElementsByTagName("img"),b=0;b<a.length;++b)a[b].onmouseover=function(){var a=this.parentNode.innerHTML;this.parentNode.innerHTML=a,this.onmouseover=null}}$(document).ready(function(){var a=200,b=<span style="color: blue;"><b>170</b></span>,c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbOkz3P7U7sipHtUZWnDqkhwx4v4e8LyWBw2lBoOQltcMkHaFV5zLa98wo8NwBAbb1BzaMY_WfDmtTKsje-pxd0YLLctKBE0hDFeHtX8KRJOQrg7_HX8FkCZ-dUreY2MRhHe-ZgdY1pw/w500-c-h330/no-thumb.png",d=1;$(".post-body").each(function(e,f){var f=$(f),g=$(f).find("img").first(),h=f.parent().find("h3 a"),i=h.attr("href"),j=h.text();if($(h).remove(),f.empty(),g.attr("src")){var k=g.attr("height"),l=g.attr("width"),m=$(g).parent();if(f.append(m),d)g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"w500-h330-c")}),g.removeAttr("width").removeAttr("height");else{g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"s"+a)}),g.removeAttr("width");var n=(k/l*a).toFixed(0);g.attr("height",n)}}else var g=$("<img>").attr("src",c),m=$("<a>").append(g).appendTo(f);m.attr("href",i).css("clear","none").css("margin-left","0").css("margin-right","0").addClass("postThumbnail");var o=$("<div>").prepend(j).css("opacity","0.9").css("filter","alpha(opacity=0.9)").appendTo(m);o.height();o.css("margin-top","-28px"),f.css("height",b).css("overflow","hidden")}),$("#blog-pager").css("clear","both")}),window.addEventListener?window.addEventListener("load",hideLightbox,void 0):window.attachEvent("onload",hideLightbox);<br />//]]><br /></script><br /><style type='text/css'><br />.post {<br />width:31.3%;<br />float:left;<br />display:inline-block;<br />border-bottom: medium none;<br />margin: 0 1% 2%;<br />padding-bottom: 0;<br />}<br />h2.date-header,.post-footer {<br />display: none;<br />}<br />h3.post-title, .comments h4,.post-header{margin:0;}<br />.postThumbnail:hover {text-decoration:none;}<br />a.postThumbnail div {<br />text-decoration: none;<br />color: #fff;<br />padding:0 5px;<br />height:24px;<br />font:bold 12px/25px &quot;Trebuchet MS&quot;,Trebuchet,Verdana,sans-serif;<br />text-transform: capitalize;<br />background: rgb(125,126,125);<br />background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));<br />background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#7d7e7d&#39;,endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );<br />}<br />.postThumbnail{width:100%;}<br />.postThumbnail:hover div {<br />display: block;<br />}<br />.postThumbnail img {<br />width:100%;<br />background-color: transparent;<br />border: medium none;<br />padding: 0px;<br />-webkit-border-radius: 12px;<br />-moz-border-radius: 12px;<br />border-radius: 12px;<br />transition: opacity .25s ease-in-out;<br />-moz-transition: opacity .25s ease-in-out;<br />-webkit-transition: opacity .25s ease-in-out;<br />}<br />.postThumbnail img:hover {<br />-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;<br />filter: alpha(opacity=70);<br />-moz-opacity: 0.7;<br />-khtml-opacity: 0.7;<br />opacity: 0.7;<br />}<br /></style><br /></b:if></b:if></blockquote>Note: If there's too much space below the posts, modify the <span style="color: blue;">170</span> height value.<br /><br />Step 5. Click on the "Save template" button to save the changes and View your blog. Now you should have a nice grid view on your Blogger posts. Enjoy!

Display Blogger Posts in Grid View with Thumbnails

Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage ...

Read more »

How to Use Cookies in Javascript

Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for example, when we visit a page where we have to login with an username and a password. In this case, after verifying that the login is correct, usually a cookie is stored on our computer.<br /><br />An example would be the popular page of Google. This search engine allows users to choose how many search results they want to see on each page. Thanks to a cookie, this configuration remains unchanged for each computer, even after rebooting several sessions. Despite this, it is good to remove them from time to time because although some will expire being erased automatically after a while, some of them will never do so.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="cookies with javascript, blogger tricks" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IuJjDvzmxqy-v65M5Z8H4lIl-bfr1wUdb-LbfF9rzyOZTIopjRjXRnrZWeW8W2UkwwZKzvzSJfR5UYwGn-KcDAcW3ZZ35dW549USw3NoMG9TEmt7OwiSMjJ9RwslTpZfmmFjPzKWHUJ5/s1600/using-cookies-in-javascript.png" title="How to use cookies in javascript" /></div><br />Like many other things, cookies may suffer a poor use and hence, their bad reputation. For instance, some websites can store and study the browsing habits of a user without their knowledge. This is why most browsers already include a system to filter them and can decide if they will provide some privacy or not.<br /><br />If you want to see a live example of how a cookie works, please visit <a href="http://helplogger-test.blogspot.com/" rel="nofollow" target="_blank">this page</a> and refresh it a few times. You should get an alert window telling you about how many times you visited the page.<br /><br />Script source: <a href="http://javascriptkit.com/script/script2/visitorinfo.shtml" rel="nofollow" target="_blank">javascriptkit.com</a><br /><br />There could be other ways to use cookies but a server could do this with JavaScript. Below we have a simple script that can be used as many times we want, even for different purposes. Basically, what the following script does is to create three functions: the first one is to set a cookie, the second one is to read it, and the last one is to erase it. We can apply it in Blogger by accessing the template HTML and add it just before the </head> tag:<br /><blockquote class="tr_bq"><script type='text/javascript'><br />//<![CDATA[<br /><br /><span style="color: #cc0000;">// Set cookie</span><br />function setCookie(name, value, expires, path, domain, secure) {<br />document.cookie = name + "=" + escape(value) +<br />((expires == null) ? "" : "; expires=" + expires.toGMTString()) +<br />((path == null) ? "" : "; path=" + path) +<br />((domain == null) ? "" : "; domain=" + domain) +<br />((secure == null) ? "" : "; secure");<br />}<br /><br /><span style="color: #cc0000;">// Read cookie</span><br />function getCookie(name){<br />var cname = name + "=";<br />var dc = document.cookie;<br />if (dc.length > 0) {<br />begin = dc.indexOf(cname);<br />if (begin != -1) {<br />begin += cname.length;<br />end = dc.indexOf(";", begin);<br />if (end == -1) end = dc.length;<br />return unescape(dc.substring(begin, end));<br />}<br />}<br />return null;<br />}<br /><br /><span style="color: #cc0000;">//delete cookie</span><br />function eraseCookie (name,path,domain) {<br />if (getCookie(name)) {<br />document.cookie = name + "=" +<br />((path == null) ? "" : "; path=" + path) +<br />((domain == null) ? "" : "; domain=" + domain) +<br />"; expires=Thu, 01-Jan-70 00:00:01 GMT";<br />}<br />}<br /><br />//]]><br /></script></blockquote>Once done, in order to set a cookie, we only need to put the name and the value in quotes when we call the function. Additionally, we will set the expiry date by getting the current Time (in milliseconds) and add the required number of minutes (in milliseconds):<br /><blockquote class="tr_bq">var expiration = new Date();<br />expiration.setTime(expiration.getTime() + <b>10000</b>); <span style="color: #cc0000;">//Expire after 10 seconds</span><br />setCookie("<span style="color: #3d85c6;"><b>cookiename</b></span>","<span style="color: #0b5394;"><b>hello</b></span>",expiration);<br />}</blockquote>The above code sets a cookie called <span style="color: #3d85c6;">cookiename</span>, with the <span style="color: #0b5394;">hello</span> value and set its expiry date to 10 seconds after it has been set (<b>10000</b> milliseconds = 10 seconds). If we want to restore the value of this cookie, then we should use the second function with the cookie name:<br /><blockquote class="tr_bq">var checkCookie = getCookie("<span style="color: #3d85c6;"><b>cookiename</b></span>");</blockquote>By adding this code below the <body> taag, we created a cookie with the value '<b>hello</b>' which can be shown on the screen if we want to. The cookie will disappear after 10 seconds:<br /><blockquote class="tr_bq"><script type='text/javascript'><br />var expiration = new Date();<br />expiration.setTime(expiration.getTime() + <b>10000</b>);<br />setCookie("<span style="color: #3d85c6;"><b>cookiename</b></span>","<span style="color: #0b5394;"><b>hello</b></span>",expiration);<br />var checkCookie = getCookie("<span style="color: #3d85c6;"><b>cookiename</b></span>");<br />document.write(checkCookie);<br /></script></blockquote>The erase function is used in the same way as the one for reading just by clicking on the name of the cookie. The <b>setCookie</b> values for 'domain' and 'secure' are not used. Use 'domain' on the JavaScript cookie if you are using it on a subdomain, where the cookie is set on the widgets subdomain, but you need it to be accessible over the whole yoursite.com domain.<br /><br />The combination of these three functions will allow us to handle cookies for specific purposes, as we will see in the near future.

How to Use Cookies in Javascript

Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for exam...

Read more »

How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will maintain a default size of 72 x 72px which might not look good if we try to make them larger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry.<br /><br />So this tutorial will show you how to increase the thumbnail resolution size of the popular posts Blogger widget, even though we can apply this trick on any of the blog widgets.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE9Z5iXC8UG_YdkgkoQry-GTMnWc_q9dNiQwHnC4M-Ea6UaO2gCbNc-WHJ16saPi9t-dwQvTnDhetcHfvGqL6uJZmZKR5xLjZjtawT7PnINEz9WPJwnJyMC2uOiMI1Rb125vhAZIAMf1x0/s1600/change-thumbnail-resolution-on-blogger.png" /></div><div style="text-align: center;"><a class="demo-link" href="http://demohelplogger1.blogspot.com/" rel="nofollow" target="_blank">Demo Blog</a>.</div><br /><h3>Changing the Thumbnail Size for the Popular Posts Widget</h3>Step 1. First, let's add the Popular posts gadget by going to "Layout" > click on the "Add a gadget" link and select "Popular Posts" from the popup window.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="adding popular posts gadget" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKkH2ogLS1H2rwzlgnV1eo2iPkQrWmrD2DbkYsLOEOAuzmsbqfHMsqhnptS0tWOCvqpdOA4UEnhOmIjfgzY77Lzh6Es0tyEugAEUTLjyIR7-Bh6Eu5Y9PGkhidx-HNKkBNGeaNWs89sYpY/s1600/add-popular-posts-gadget-widget-in-blogger.png" title="How to Increase Thumbnail Resolution on Blogger 1" width="400" /></div><br />Step 2. Next, go to "Template" > click on the "Edit HTML" button > click anywhere inside the code area to open the Blogger search box using the CTRL + F keys.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="edit blogger template html" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTB9B6haG3lHQgVxNVR0Ovj6pQT0aRvxVcIgpwZZiTGvzIzcJmsMUP-eV0rswDQk8CPy_5GlQluN6Z6zm-h2-mS3-BC2QXUXs2ZPfY2b9Nws0gK7bZY6f5Npdhntl33tc0ZYtg9oWcFS8/s1600/open-blogger-search-box-ctrl+f.png" title="How to Increase Thumbnail Resolution on Blogger 2" width="640" /></div><br />Step 3. Type or paste the following tag inside the search box then hit Enter to find it:<br /><blockquote class="tr_bq"></head></blockquote>After you found the <span style="background-color: yellow;"></head></span> tag, add this CSS above it:<br /><blockquote class="tr_bq"><style type='text/css'><br />.PopularPosts .item-thumbnail a {<br />clip: auto;<br />display: block;<br />height: 130px;<br />margin: 0 0px 5px;<br />overflow: hidden;<br />width: 210px;<br />border: 2px solid #EEEEEE;<br />border-radius: 20px;<br />}<br />.PopularPosts .item-thumbnail img {<br />position: relative;<br />top: -30px;<br />transition:all .2s linear;<br /> -o-transition:all .5s linear; <br />-moz-transition:all .2s linear; <br />-webkit-transition:all .2s linear;<br />}<br />.PopularPosts .item-thumbnail img:hover{<br />opacity:.6; <br />filter:alpha(opacity=60)<br />}<br />.PopularPosts .widget-content ul li {<br />background: #F9F9F9;<br />border: 2px solid #EEEEEE;<br />border-radius: 10px;<br />box-shadow: 0 4px 10px #EEEEEE;<br />color: #555555;<br />padding: 10px;<br />margin-bottom: 5px;<br />}<br />.PopularPosts .item-title {<br /><b>clear: both</b><br />font: 14px Cambria,Georgia, sans-serif;<br />color: #2288BB;<br />font-weight: bold;<br />text-transform: uppercase;<br />text-align: center;<br />}<br />.PopularPosts .item-snippet {<br />display: none;<br />}<br />.widget .widget-item-control a img {<br />height: 18px;<br />width: 18px;<br />}<br /></style></blockquote>Step 4. Now search for this tag: <br /><blockquote class="tr_bq"></body></blockquote>And just above it, add this script:<br /><blockquote class="tr_bq"><script type='text/javascript'>                   <br />function changeThumbSize(id,size){<br />var blogGadget = document.getElementById(id);<br />var replacement = blogGadget.innerHTML;<br />blogGadget.innerHTML = replacement.replace(/w72-h72-p-k-no-nu/g,"s"+size+"-c");<br />var thumbnails = blogGadget.getElementsByTagName("img");<br />for(var i=0;i&lt;thumbnails.length;i++){ <br />thumbnails[i].width = size; <br />thumbnails[i].height = size; <br />}<br />}<br /><span style="color: #999999;">changeThumbSize("<span style="color: #cc0000;"><b>PopularPosts1</b></span>",210);      </span>             <br /></script></blockquote>Highlighted in red is the widget ID for the Popular Posts gadget. To change the thumbnail size for any of your blog widgets, find the gadget/widget ID and then add a line below this part:<br /><blockquote class="tr_bq"><span style="color: #999999;">changeThumbSize("<span style="color: #e06666;"><b>PopularPosts1</b></span>",210); </span><br />changeThumbSize("<span style="color: #cc0000;"><b>widget-ID-HERE</b></span>",210);</blockquote>Then replace <span style="color: #cc0000;"><b>widget-ID-HERE</b></span> text with the ID of that widget/gadget.<br /><br />Note: you won't see the changes if the widget has a <b>class</b> selector - for this you may need to change <span style="background-color: yellow;">class</span> with <span style="background-color: yellow;">id</span> and replace the dot "<span style="background-color: yellow;">.></span>" symbol with "<span style="background-color: yellow;">#</span>" in the CSS code.<br /><br />If you don't know how to find the id of a particular widget, please check out this tutorial on <a href="http://helplogger.blogspot.com/2014/08/how-firebug-helps-you-design-your.html" rel="nofollow" target="_blank">How to Use Firebug to Design a Blogger blog</a>.<br /><br />Step 5. Finally, press the "Save Template" to save the changes and this is how you can increase thumbnail resolution on Blogger. Enjoy!

How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will maintain a default size of 72 x 72px which might not look good if we try to make them l...

Read more »