// API callback
relatedposts({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243"},"updated":{"$t":"2023-12-15T03:10:29.561-08:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"posts"},{"term":"css"},{"term":"Comments"},{"term":"adsense"},{"term":"SEO"},{"term":"jQuery"},{"term":"social media"},{"term":"Image Effects"},{"term":"beginner's guide"},{"term":"blogger posts"},{"term":"Navigation"},{"term":"make money online"},{"term":"javascript"},{"term":"adsense optimization"},{"term":"menus"},{"term":"Facebook"},{"term":"adsense tips"},{"term":"social media plugins"},{"term":"popular posts"},{"term":"blogger"},{"term":"blogger pages"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"threaded comments"},{"term":"google plus"},{"term":"related posts"},{"term":"blogging tips"},{"term":"recent comments"},{"term":"slideshows"},{"term":"static pages"},{"term":"tools"},{"term":"Templates"},{"term":"backlinks"},{"term":"custom domain"},{"term":"emoticons"},{"term":"instagram"},{"term":"labels"},{"term":"sitemap"},{"term":"RSS"},{"term":"click bombing"},{"term":"feedburner"},{"term":"firebug"},{"term":"font awesome"},{"term":"google analytics"},{"term":"homepage"},{"term":"invalid clicks"},{"term":"robots"},{"term":"statcounter"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Blog+Design?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/search\/label\/Blog%20Design"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Blog+Design\/-\/Blog+Design?alt=json-in-script\u0026start-index=7\u0026max-results=6"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"88"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5523599199751671360"},"published":{"$t":"2015-10-07T08:46:00.000-07:00"},"updated":{"$t":"2020-04-17T09:54:21.556-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"font awesome"},{"scheme":"http://www.blogger.com/atom/ns#","term":"social media"}],"title":{"type":"text","$t":"How to Add Font Awesome Social Icons in Blogger"},"content":{"type":"html","$t":"It's near impossible to find a blog or site these days without at least one social media account to their name. Be it Twitter or Facebook, \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/09\/how-to-add-instagram-widget-in-blogger.html\"\u003EInstagram\u003C\/a\u003E or \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/pinterest-pin-it-mouseover-button-for-blogger-images.html\"\u003EPinterest\u003C\/a\u003E, or all of those for that matter, what's become increasingly clear is that social media helps increase your online presence.\u003Cbr \/\u003E\u003Cbr \/\u003E\nGone are the days when you used to rely on good old search engine results alone. These days, maybe you don't rank well in results for your keyword on Google or any other search engine, but you can launch a social media campaign that can hopefully give you the results that you want.\u003Cbr \/\u003E\u003Cbr \/\u003E\nEssentially, your site and social media need to co-exist. One cannot live without the other, if you want another way of putting it. Social media is one of the best drivers of traffic on the internet, and if you want to increase your chances of being seen, then you have got to get an account on one or more platforms as long as it fits with your brand's identity.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"hidden-image\"\u003E\u003Cimg alt=\"font awesome social icons\" src=\"https:\/\/3.bp.blogspot.com\/-3tqcD9nQKlQ\/XpndiIM4iPI\/AAAAAAAAMQU\/TdgSyOO0qfwmxb-Qxjq1jZFjXeyHpc1hQCLcBGAsYHQ\/s1600\/font-awesome-blogger-social-icons.jpg\" title=\"How to Add Font Awesome Social Icons in Blogger\"\/\u003E\u003C\/div\u003E\n\u003Ch3\u003ESpreading Awareness of Your Social Media Presence\u003C\/h3\u003E\nOnce you've set up your social media accounts, you don't just leave it there to be discovered. Sure, you can \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/07\/best-hashtag-instagram-widget.html\"\u003Emake use of hashtags\u003C\/a\u003E and communicate with industry leaders, but that's not enough to bring awareness to your customers. To let them know you have a presence on Facebook, Twitter, Instagram, Vine or Pinterest, you have to make use of the real estate on your website.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHow exactly do you do that, you ask? Well, by means of social icons.\u003Cbr \/\u003E\u003Cbr \/\u003E\nSocial icons are those little images you see that represent a symbol associated with a particular social network. For example, social icons for Twitter usually feature a blue bird. If not that, then a lowercase letter T.\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe presence of these images remind your viewers that they have other ways of being up to date with whatever you put out. Social media use is pretty high these days thanks to the immediacy of the medium as well as the fun factor. And more likely than not, your audience would want to know whether you're on any social network.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you're on the Blogger platform, you can add these social media representations through \u003Cb\u003EFont Awesome social icons\u003C\/b\u003E.\u003Cbr \/\u003E\n\u003Ch2\u003EWhat is Font Awesome?\u003C\/h2\u003E\nFont Awesome \"gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS\". In essence, it functions as a toolkit where you get access to more than 500 icons for use on your site - free of charge.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, if you've used social media icons before, you know that there are non-vector varieties. But those offered by Font Awesome are scalable vector icons, and in the long run, they are the better option for your site.\u003Cbr \/\u003E\u003Cbr \/\u003E\nWhy is that the case?\u003Cbr \/\u003E\u003Cbr \/\u003E\nWell, a very good reason would be that \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/07\/blogger-seo-image-optimization.html\"\u003Eimages take time to load\u003C\/a\u003E. Yes, these images are tiny but the point still stands. Plus, images tend to lose their quality as computer resolution increases. In other words, if you want your icons to load faster and have a nice, crisp and clean look, then you're better off with using the collection of Font Awesome. Also, the chance to customize your icons accordingly is definitely an attractive factor too.\u003Cbr \/\u003E\n\u003Ch2\u003EWhy you should start using Font Awesome?\u003C\/h2\u003E\nOf the many providers out there, why stick with Font Awesome?\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cb\u003ELarge collection of icons\u003C\/b\u003E. You'll not only find social media icons here, but other traditional icons as well. \u003C\/li\u003E\u003Cli\u003E\u003Cb\u003ECSS support\u003C\/b\u003E. With CSS, you can adjust the icons according to what suits your site best. You can tinker with the colors, size, shadows and other components. This is something sorely lacking with non-vector images because you're stuck with the icon you chose.\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003ESpeed\u003C\/b\u003E. Vector images are lightweight and therefore load faster.\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003EFree\u003C\/b\u003E. You don't have to pay a single thing when you use Font Awesome.\u003C\/li\u003E\u003C\/ul\u003E\nSo now you know the importance of icons on your site, it's time to learn \u003Cb\u003Ehow to add Font Awesome icons in Blogger\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EAdding Font Awesome Social Icons in Blogger\u003C\/h2\u003E\nThe adding of icons to your Blogger isn't rocket science. In fact, the process is pretty straightforward.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHere's what you have to do:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EAdd Font Awesome Stylesheet into Blogger\u003C\/h3\u003E\nFollow the steps below to get Font Awesome working with your blog:\u003Cbr \/\u003E\n\u003Col\u003E\u003Cli\u003ELog into your Blogger dashboard, then go to \u003Cb\u003ETheme\u003C\/b\u003E and press the \u003Cb\u003EEdit HTML\u003C\/b\u003E button.\u003C\/li\u003E\n\u003Cli\u003EClick anywhere inside the code area and press CTRL + F keys to open the search box.\u003C\/li\u003E\n\u003Cli\u003EType the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;head\u0026gt;\u003C\/span\u003E tag inside the search box and press Enter to find it.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome stylesheet\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-oKddzaVAI4U\/VhVitVj7urI\/AAAAAAAALf0\/xhWO08QVMYc\/s1600\/add-font-awesome-stylesheet-to-blogger.png\" title=\"How to Add Font Awesome Stylesheet to Blogger\" \/\u003E\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli\u003EAdd the following line of code referencing the location of the font-awesome.min.css stylesheet just below the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;head\u0026gt;\u003C\/span\u003E tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" \/\u0026gt;\u003C\/blockquote\u003E\u003C\/li\u003E\n\u003Cli\u003EClick the 'Save theme' button to save the changes and start playing with Font Awesome!\u003C\/li\u003E\u003C\/ol\u003E\n\u003Ch3\u003EUsing the Font Awesome Icons\u003C\/h3\u003E\nAfter you get the steps in the previous section done, you're now ready to use Font Awesome in your blog. The first thing you need to do is add the social icons links to the HTML and delete the icons that you don't need anymore.\n\u003Cbr \/\u003E\u003Cbr \/\u003E\nThis is a sample HTML  that you can add:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div id=\"fawesomeicons\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Facebook\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-facebook\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Google Plus\" \ntarget=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-google-plus\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Twitter\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-twitter\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Pinterest\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-pinterest\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Instagram\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-instagram\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Bloglovin\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-heart\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt; \u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Tumblr\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-tumblr\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"RSS\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u003Cb\u003E\u0026lt;i class=\"fa fa-rss\"\u0026gt;\u0026lt;\/i\u0026gt;\u003C\/b\u003E\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\nIn the above HTML code, we can see 8 separate social icons which can be recognized by looking at the link title attribute. For example, the first one is for Facebook.\u003Cbr \/\u003E\u003Cbr \/\u003E\nTo use the social icons, paste your URL where it says \u003Cb\u003EURL-HERE\u003C\/b\u003E for each social icon you want to include. Put the link between the quotes and make sure to not remove any of the quotation marks.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you want to remove a social icon, just delete that line of code starting with \"\u0026lt;a href\" and ending with \"\u0026lt;\/a\u0026gt;\".\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, keep in mind that Font Awesome works anywhere with the \u003Cb\u003E\u0026lt;i\u0026gt;\u003C\/b\u003E tag as it was designed to work with inline elements. Although you can use \u0026lt;span\u0026gt;, official documentation prefers the \u003Cb\u003E\u0026lt;i\u0026gt;\u003C\/b\u003E option for brevity.\u003Cbr \/\u003E\u003Cbr \/\u003E\nFont Awesome icons can be placed anywhere using the CSS prefix \u003Cb\u003Efa\u003C\/b\u003E together with the name of the icon. For a \u003Ca href=\"http:\/\/fontawesome.io\/icons\/\" rel=\"nofollow\" target=\"_blank\"\u003Elist of social media icon names\u003C\/a\u003E, you can refer to the official website of Font Awesome.\u003Cbr \/\u003E\u003Cbr \/\u003E\nLet's say that you want to display a Youtube icon so you can link it to your official account on the platform. Find the Youtube icon on the list and click on it:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome icon\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-0H-TTPKPDn0\/VhUPwj2Q_iI\/AAAAAAAALdU\/6e3S2N1V3fU\/s1600\/youtube-font-awesome-icon.png\" title=\"How to Add Font Awesome Social Icons\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nThat will bring you to a page for Youtube where you will see this code:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome social icons\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-AZB690mHac8\/VhVey-W5LpI\/AAAAAAAALfo\/upOnl9eVygE\/s1600\/font-awesome-icon-youtube.png\" title=\"Add Font Awesome Youtube Icon\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nTo include the icon within the list, copy any line starting with \"\u0026lt;a href\" and ending with \"\u0026lt;\/a\u0026gt; from the code above, paste where you want it to appear and replace the code starting with \"\u0026lt;i class=\"fa \" and ending with \"\u0026lt;\/i\u0026gt;\" with that of your chosen icon.\u003Cbr \/\u003E\u003Cbr \/\u003E\nFinally, after adding the icon, the list will look like this: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div id=\"fawesomeicons\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Facebook\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-facebook\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Google Plus\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-google-plus\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Twitter\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-twitter\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Pinterest\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-pinterest\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Instagram\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-instagram\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Bloglovin\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-heart\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"Tumblr\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-tumblr\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a href=\"URL-HERE\" title=\"RSS\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-rss\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u003Cb\u003E\u0026lt;a href=\"URL-HERE\" title=\"Youtube\" target=\"_blank\" rel=\"nofollow\"\u0026gt;\u0026lt;i class=\"fa fa-youtube\"\u0026gt;\u0026lt;\/i\u0026gt;\u0026lt;\/a\u0026gt;\u003C\/b\u003E\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\nNote: don't forget to change the title and add your URL between the quotes.\u003Cbr \/\u003E\u003Cbr \/\u003E\nOnce you've finished editing the icons, insert the code into a HTML\/Javascript gadget by going to \"Layout\" and click on the \"Add a gadget\" link. If you're using WordPress, paste it in a Text widget.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003ECustomize the Font Awesome Icons Using CSS\u003C\/h3\u003E\nSuppose you want to make the icons a lot bigger than they currently are. That task is made simple with the use of CSS. Here's a sample code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons a {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp; \u0026nbsp;font-size: 16px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp; \u0026nbsp;width: 30px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp; \u0026nbsp;height: 30px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp; \u0026nbsp;line-height: 30px;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nTo change the font size, increase or decrease the 16px value. Below are the values (30px) for the container's width and height which should always match. Increasing\/decreasing these values, will increase\/decrease the size of the container where is the font.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHere are some different styles for the font awesome social icons. In the CSS, look for the \u003Cb\u003E#background-color\u003C\/b\u003E, \u003Cb\u003E#border-color\u003C\/b\u003E, \u003Cb\u003E#font-color\u003C\/b\u003E and \u003Cb\u003E#hover-color\u003C\/b\u003E text so that you can know here to put the color codes. You can use this tool to generate the color code: \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/02\/color-code-generator.html\"\u003EColor Code Generator\u003C\/a\u003E. And if you're not familiar with CSS, please see \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/03\/how-to-add-css-to-blogger-via-template-designer.html\"\u003Ethis tutorial\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome social icons\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-lES1EaFrLG0\/VhUlQDIveJI\/AAAAAAAALec\/nWMTjoPaUV8\/s1600\/font-awesome-social-icons-square.png\" title=\"Font Awesome Social Icons for Blogger 1\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons {\u003Cbr \/\u003E\ntext-align: center;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a {\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#background-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\ndisplay: inline-block;\u003Cbr \/\u003E\nfont-size: 16px;\u003Cbr \/\u003E\nwidth: 30px;\u003Cbr \/\u003E\nheight: 30px;\u003Cbr \/\u003E\nline-height: 30px;\u003Cbr \/\u003E\nmargin: 0 1px 6px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a:hover{\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#hover-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome social icons\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-Gc9JdGwCoio\/VhUmL5zpTTI\/AAAAAAAALeo\/W10syAOp_gk\/s1600\/font-awesome-social-icons-rounded-icons.png\" title=\"Font Awesome Social Icons for Blogger 2\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons {\u003Cbr \/\u003E\ntext-align: center;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a {\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#background-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\ndisplay: inline-block;\u003Cbr \/\u003E\nfont-size: 16px;\u003Cbr \/\u003E\nwidth: 30px;\u003Cbr \/\u003E\nheight: 30px;\u003Cbr \/\u003E\nline-height: 30px;\u003Cbr \/\u003E\nmargin: 0 1px 6px;\u003Cbr \/\u003E\n-webkit-border-radius: 100%;\u003Cbr \/\u003E\n-moz-border-radius: 100%;\u003Cbr \/\u003E\nborder-radius: 100%;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a:hover{\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#hover-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome social icons\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-mbd1NVPasl0\/VhUky1Ps4KI\/AAAAAAAALeU\/R1V8Um5MHT8\/s1600\/font-awesome-social-icons-square-border.png\" title=\"Font Awesome Social Icons for Blogger 3\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons {\u003Cbr \/\u003E\ntext-align: center;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a {\u003Cbr \/\u003E\nborder: 1px solid \u003Cb\u003E#border-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\ndisplay: inline-block;\u003Cbr \/\u003E\nfont-size: 16px;\u003Cbr \/\u003E\nwidth: 30px;\u003Cbr \/\u003E\nheight: 30px;\u003Cbr \/\u003E\nline-height: 30px;\u003Cbr \/\u003E\nmargin: 0 1px 6px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a:hover{\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#hover-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome social icons\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-aDqKXc6bsFQ\/VhUkdkfwANI\/AAAAAAAALeM\/KhnGCsPa6Tw\/s1600\/font-awesome-social-icons-rounded-border.png\" title=\"Font Awesome Social Icons for Blogger 4\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons {\u003Cbr \/\u003E\ntext-align: center;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a {\u003Cbr \/\u003E\nborder: 1px solid \u003Cb\u003E#border-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\ndisplay: inline-block;\u003Cbr \/\u003E\nfont-size: 16px;\u003Cbr \/\u003E\nwidth: 30px;\u003Cbr \/\u003E\nheight: 30px;\u003Cbr \/\u003E\nline-height: 30px;\u003Cbr \/\u003E\nmargin: 0 1px 6px;\u003Cbr \/\u003E\n-webkit-border-radius: 100%;\u003Cbr \/\u003E\n-moz-border-radius: 100%;\u003Cbr \/\u003E\nborder-radius: 100%;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a:hover{\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#hover-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font awesome social icons\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-vMXgiF1sucw\/VhUkFTzQciI\/AAAAAAAALeE\/fMJD-3NQ-5c\/s1600\/font-awesome-social-icons-font-color.png\" title=\"Font Awesome Social Icons for Blogger 5\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons {\u003Cbr \/\u003E\ntext-align: center;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a {\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\ndisplay: inline-block;\u003Cbr \/\u003E\nfont-size: 23px;\u003Cbr \/\u003E\nmargin: 0 6px 6px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a:hover{\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#hover-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\nNow, what if we want to change the background or font color of a specific icon? First, we need to identify the icon class which is just after the \u0026lt;i class=\"fa ...\" and add it like this:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons\u003Cb\u003E a .\u003Cspan style=\"color: red;\"\u003Efa-facebook\u003C\/span\u003E\u003C\/b\u003E {\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#background-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nHere, we can change the background and color for the Facebook icon but we can do it for any icon you want. For example, let's add another rule for the twitter icon:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons\u003Cb\u003E a .\u003Cspan style=\"color: red;\"\u003Efa-facebook\u003C\/span\u003E\u003C\/b\u003E {\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#background-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u0026nbsp;#fawesomeicons a .\u003Cspan style=\"color: #e06666;\"\u003E\u003Cb\u003Efa-twitter\u003C\/b\u003E\u003C\/span\u003E {\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#background-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nTo make the fonts bigger, we can add the CSS code like this:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n#fawesomeicons {\u003Cbr \/\u003E\ntext-align: center;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons a .fa{\u003Cbr \/\u003E\ndisplay: inline-block;\u003Cbr \/\u003E\nfont-size: 16px;\u003Cbr \/\u003E\nwidth: 30px;\u003Cbr \/\u003E\nheight: 30px;\u003Cbr \/\u003E\nline-height: 30px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n#fawesomeicons\u003Cb\u003E a .\u003Cspan style=\"color: red;\"\u003Efa-facebook\u003C\/span\u003E\u003C\/b\u003E {\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#background-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u0026nbsp;#fawesomeicons a .\u003Cspan style=\"color: #e06666;\"\u003E\u003Cb\u003Efa-twitter\u003C\/b\u003E\u003C\/span\u003E {\u003Cbr \/\u003E\nbackground: \u003Cb\u003E#background-color\u003C\/b\u003E;\u003Cbr \/\u003E\ncolor: \u003Cb\u003E#font-color\u003C\/b\u003E;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nTo apply, copy the code above and add the CSS rule with the icon class that you wish to change.\u003Cbr \/\u003E\u003Cbr \/\u003E\nImportant: When adding the class for your icon, always put a dot (.) in front of it as you can see in the example above, otherwise it won't work.\u003Cbr \/\u003E\u003Cbr \/\u003E\nAnd that's it! Hopefully, this tutorial helped you to add Font Awesome social icons in Blogger. If you're still in trouble adding them, please take a look at \u003Ca href=\"http:\/\/fontawesome.io\/examples\/\" rel=\"nofollow\" target=\"_blank\"\u003EExamples page\u003C\/a\u003E."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/5523599199751671360\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/10\/how-to-add-font-awesome-social-icons.html#comment-form","title":"8 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5523599199751671360"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5523599199751671360"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/10\/how-to-add-font-awesome-social-icons.html","title":"How to Add Font Awesome Social Icons in Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/3.bp.blogspot.com\/-3tqcD9nQKlQ\/XpndiIM4iPI\/AAAAAAAAMQU\/TdgSyOO0qfwmxb-Qxjq1jZFjXeyHpc1hQCLcBGAsYHQ\/s72-c\/font-awesome-blogger-social-icons.jpg","height":"72","width":"72"},"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-461635542822477187"},"published":{"$t":"2015-03-11T13:12:00.001-07:00"},"updated":{"$t":"2016-10-28T11:44:02.596-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"Building a List\/Grid View Switcher in Blogger with Auto Read More"},"content":{"type":"html","$t":"A list of posts in grid or list view provides a more defined canvas with which a blogger or website owner can use as a guide in creating content. This concept has extended to visitors, where they can have control on whether or not they wish to \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/03\/masonry-grid-layouts-for-blogger-posts.html\"\u003Edisplay posts in list or grid view\u003C\/a\u003E. While custom modification codes are shared by some blogging sites, others are not. Some that are shared, however, can be complex even to bloggers themselves, such as JQuery. \u003Cbr \/\u003E\u003Cbr \/\u003E\nThe good news is there are lightweight codes available, including the \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/auto-read-more-with-thumbnail-for.html\"\u003EAuto Read More in Blogger\u003C\/a\u003E. Through it, a blogger can add two buttons that will enable visitors to switch between grid view and list view, depending on what they prefer. These buttons, however, are only visible on limited pages - homepage, label page and archive page. Nonetheless, it is better than not having this particular feature at all.\u003Cbr \/\u003E\u003Cbr \/\u003E\nUnlike JQuery, the Auto Read More uses HTML, CSS and JavaScript. To view posts in a list view, two sets of CSS codes are added as one. Another set is added to view posts in grid view. Other combination of codes is used to enable easy switch between views, particularly at a click of a button. \u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-gsGdrHGHDsE\/VQCgetsEwCI\/AAAAAAAALKc\/8MkSq_UINHk\/s1600\/grid-list-view-switcher-for-blogger-posts.png\" height=\"213\" width=\"400\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\n\u003Ca class=\"demo-link\" href=\"https:\/\/grid-list-view.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003ELive Demo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add a List\/Grid View Switcher in Blogger\u003C\/h2\u003E\nStep 1. Log into your \u003Ca href=\"http:\/\/www.blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E and select your blog, then go to \"Template\" \u0026gt; press the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type this tag below inside the box and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E\nStep 3. Just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag, copy and paste the following CSS style and scripts:\u003Cbr \/\u003E\n\u003Cdiv class=\"code1\"\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nfunction list_view(){\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post-grid-view\u0026amp;quot;;}}\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post-title\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post-title\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post-title-grid\u0026amp;quot;;}}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nfunction grid_view(){\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post-grid-view\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post-grid-view\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post\u0026amp;quot;;}}\u003Cbr \/\u003E\nif(document.getElementsByClassName(\u0026amp;quot;post-title-grid\u0026amp;quot;)) {elementArray = document.getElementsByClassName(\u0026amp;quot;post-title-grid\u0026amp;quot;); while (elementArray.length) {elementArray[0].className = \u0026amp;quot;post-title\u0026amp;quot;;}}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nposts_no_thumb_sum = 100;\u003Cbr \/\u003E\nposts_thumb_sum = 350;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nfunction removeHtmlTag(strx,chop){\u003Cbr \/\u003E\nif(strx.indexOf(\"\u0026lt;\")!=-1)\u003Cbr \/\u003E\n{\u003Cbr \/\u003E\nvar s = strx.split(\"\u0026lt;\");\u003Cbr \/\u003E\nfor(var i=0;i\u0026lt;s.length;i++){\u003Cbr \/\u003E\nif(s[i].indexOf(\"\u0026gt;\")!=-1){\u003Cbr \/\u003E\ns[i] = s[i].substring(s[i].indexOf(\"\u0026gt;\")+1,s[i].length);\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nstrx = s.join(\"\");\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nchop = (chop \u0026lt; strx.length-1) ? chop : strx.length-2;\u003Cbr \/\u003E\nwhile(strx.charAt(chop-1)!=' ' \u0026amp;\u0026amp; strx.indexOf(' ',chop)!=-1) chop++;\u003Cbr \/\u003E\nstrx = strx.substring(0,chop-1);\u003Cbr \/\u003E\nreturn strx+'...';\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nfunction createSummaryAndThumb(pID, pURL, pTITLE){\u003Cbr \/\u003E\nvar div = document.getElementById(pID);\u003Cbr \/\u003E\nvar imgtag = \"\";\u003Cbr \/\u003E\nvar img = div.getElementsByTagName(\"img\");\u003Cbr \/\u003E\nvar summ = posts_no_thumb_sum;\u003Cbr \/\u003E\nif(img.length\u0026gt;=1) {\u003Cbr \/\u003E\nimgtag = '\u0026lt;span class=\"posts-thumb\" style=\"float:left; margin-right: 10px;\"\u0026gt;\u0026lt;a href=\"'+ pURL +'\"\u0026gt;\u0026lt;img src=\"'+img[0].src+'\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;';\u003Cbr \/\u003E\nsumm = posts_thumb_sum;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nelse {\u003Cbr \/\u003E\nimgtag = '\u0026lt;span class=\"posts-thumb\" style=\"float:left; margin-right: 10px;\"\u0026gt;\u0026lt;a href=\"'+ pURL +'\" title=\"'+ pTITLE+'\"\u0026gt;\u0026lt;img src=\"http:\/\/2.bp.blogspot.com\/-Gbn3dT1R9Yo\/VPXSJ8lih_I\/AAAAAAAALDQ\/24wFWdfFvu4\/s1600\/sorry-image-not-available.png\" style=\"margin-top: -30px;\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;';\u003Cbr \/\u003E\nsumm = posts_thumb_sum;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nvar summary = imgtag + '\u0026lt;a href=\"'+ pURL +'\"\u0026gt;\u0026lt;div class=\"post-summary-text\"\u0026gt;' + removeHtmlTag(div.innerHTML,summ) + '\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;';\u003Cbr \/\u003E\ndiv.innerHTML = summary;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style\u0026gt;\u003Cbr \/\u003E\n#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}\u003Cbr \/\u003E\n#list-view-button a{text-decoration: none; color: #666;}\u003Cbr \/\u003E\n.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}\u003Cbr \/\u003E\n.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}\u003Cbr \/\u003E\n.post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }\u003Cbr \/\u003E\n.post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}\u003Cbr \/\u003E\n.post-grid-view .post-header {display: none;}\u003Cbr \/\u003E\n.post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}\u003Cbr \/\u003E\n.post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;}\u003Cbr \/\u003E\n.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}\u003Cbr \/\u003E\n.post-title-grid a { font-size:170%;color: #777;font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;}\u003Cbr \/\u003E\n.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}\u003Cbr \/\u003E\n.post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;}\u003Cbr \/\u003E\n.post-grid-view .post-footer a{color: #128EC9;}\u003Cbr \/\u003E\n.post-grid-view a.comment-bubble {display: none;}\u003Cbr \/\u003E\n.main-inner .column-center-inner .section {margin: 0px !important;}\u003Cbr \/\u003E\n.post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n#blog-pager {clear:both;}\u003Cbr \/\u003E\n.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}\u003Cbr \/\u003E\n.date-header {display: none;}\u003Cbr \/\u003E\nh3.post-title a {font-size:90%;font-family: \u0026amp;#39;Open Sans Condensed\u0026amp;#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}\u003Cbr \/\u003E\nh3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}\u003Cbr \/\u003E\nh3.post-title:hover {opacity: 1;}\u003Cbr \/\u003E\n.posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;}\u003Cbr \/\u003E\n.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}\u003Cbr \/\u003E\n.post-body a {text-decoration: none;}\u003Cbr \/\u003E\n.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}\u003Cbr \/\u003E\n.post-summary-text {display: none;}\u003Cbr \/\u003E\na.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;left: 0px;text-shadow:1px 2px 1px #333;font-family: \u0026amp;#39;Pacifico\u0026amp;#39;, cursive;z-index: 122;}\u003Cbr \/\u003E\na.comment-bubble:before { content: \u0026amp;quot;Comments: \u0026amp;quot; url(http:\/\/4.bp.blogspot.com\/-t1i_svebif4\/VPMpZqPrKzI\/AAAAAAAALAg\/TRJ2Un238Gs\/s1600\/heart-active.png);}\u003Cbr \/\u003E\n.post-header,.post-footer {display:none;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Pacifico' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/div\u003E\n\u003Cbr \/\u003E\nStep 4. Next, search for the following line:\u003Cbr \/\u003E\n\u003Cblockquote\u003E\u0026lt;b:section class='main' id='main' name='Main' showaddelement='no'\u0026gt;\u003C\/blockquote\u003E\n...in case you can't find it, search for this one instead:\u003Cbr \/\u003E\n\u003Cblockquote\u003E\u0026lt;b:section class='main' id='main' name='Main' showaddelement='yes'\u0026gt;\u003C\/blockquote\u003E\nStep 5. Just above this line, add the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='list-view-button'\u0026gt;\u0026lt;a class='grid-view-button' onclick='grid_view()'\u0026gt;\u0026lt;img src='http:\/\/1.bp.blogspot.com\/-vjVOXJyXcC4\/VP9A7twG8mI\/AAAAAAAALJ8\/YW0yxhvxP7A\/s1600\/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'\/\u0026gt; Grid View\u0026lt;\/a\u0026gt; \u0026lt;a class='list-view-button' onclick='list_view()'\u0026gt;\u0026lt;img src='http:\/\/4.bp.blogspot.com\/-SrQiXEhgVmA\/VP9BUnr3KkI\/AAAAAAAALKE\/EwVFym9YxoA\/s1600\/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'\/\u0026gt; List View\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\nStep 6. Now, search the tag below:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/blockquote\u003E\nStep 7. You will find 3 occurrences of this code... replace only the second and third one with this one below:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026nbsp;\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;div expr:id='\u0026amp;quot;summary\u0026amp;quot; + data:post.id'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;createSummaryAndThumb(\u0026amp;quot;summary\u0026lt;data:post.id\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;\u0026lt;data:post.url\/\u0026gt;\u0026amp;quot;);\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:post.allowComments'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.numComments\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nImportant: if you already added the auto read more script, remove the previous one in order to make this work.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nStep 8. Finally, click \"Preview\" to see if everything looks good and press the 'Save Template' button to save the changes... \u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EThat's it!\u003C\/h4\u003E\nAdding a dynamic view switcher on a blog will make viewing content a lot easier for visitors. Whether using a list or grid view, a more compressed list of posts will eliminate the need to click on the next page, which could take time if loading takes a while to complete. For a blog archive, using the Auto Read More codes in Blogger will surely make everyone's viewing experience very convenient. \u003Cbr \/\u003E\u003Cbr \/\u003E\nConsidering the ease with which the codes can be customized, building a list\/grid view switcher would be completed in no time. A real bonus is that Auto Read More works on all platforms, with cross-browser support as well."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/461635542822477187\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/list-grid-view-switcher-for-blogger.html#comment-form","title":"6 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/461635542822477187"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/461635542822477187"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/list-grid-view-switcher-for-blogger.html","title":"Building a List\/Grid View Switcher in Blogger with Auto Read More"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-gsGdrHGHDsE\/VQCgetsEwCI\/AAAAAAAALKc\/8MkSq_UINHk\/s72-c\/grid-list-view-switcher-for-blogger-posts.png","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5446842046320126914"},"published":{"$t":"2015-03-05T15:44:00.000-08:00"},"updated":{"$t":"2016-10-28T16:36:58.396-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript"},"content":{"type":"html","$t":"How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be anyone's favorite. This is why content must be displayed in an organized, easy to follow and straightforward manner. Nothing works better than a structured grid, in this case.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/03\/list-grid-view-switcher-for-blogger.html\"\u003EPosts listed in grid view\u003C\/a\u003E provide an excellent viewing experience for both the blogger or website owner and the visitors. This is especially true if the grid comes with images that would play with a person's visual inclination. What is great about grids is the seamless and smooth layout, complemented with a structured yet simple architecture. This makes it easier to navigate through a blog archive or product page. The style also enables a website owner to present posts in a more artistic and informative manner, without delving into the details. Suffice to say that a grid view demands creativity to be effortlessly mixed with functionality.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHow views can be switched depends on a number of changes in a blog's codes. Some are fairly easy to implement, while others can be a little complex. Not to worry, as there are guides that will be provided. Grid styles also come in huge varieties, with each one designed to cater to a specific audience. Now, are you ready to go on the grid?\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EFeatures\u003C\/h3\u003E\n\u003Ch4\u003EWhat features can you expect from a grid style post in Blogger?\u003C\/h4\u003E\n\u003Cul\u003E\u003Cli\u003EAll the posts will follow the grid style when switching to grid view.\u003C\/li\u003E\n\u003Cli\u003EWhile the codes are being customized, the posts are left untouched. Their length, however, could be changed accordingly.\u003C\/li\u003E\n\u003Cli\u003EAuto Read More will be applied on all posts.\u003C\/li\u003E\n\u003Cli\u003EThumbnails are automatically added based on the first picture found in each post.\u003C\/li\u003E\n\u003Cli\u003ECode is secure and is used across the board. In fact, 99% of bloggers are using a similar code to enable grid style posts in blogger.\u003C\/li\u003E\u003C\/ul\u003E\n\u003Ch4\u003EWhat are the benefits of grid style?\u003C\/h4\u003E\n\u003Cul\u003E\u003Cli\u003EQuick loading time of posts. Since only the snippets are loaded in certain pages, or a thumbnail and a caption, pulling up a blog archive would be quicker. When loading time is decreased, user experience is greatly enhanced.\u003C\/li\u003E\n\u003Cli\u003EProfessional-looking blog. Without the chaos and concerns on readability, a website can look really clean and professional. Combined with the right colors and images, it can also leave a visual impact.\u003C\/li\u003E\n\u003Cli\u003EImproved website ranking. Because visitors have to click in order to view the rest of the post, page views of a site will significantly increase. This makes for a better SEO strategy.\u003C\/li\u003E\u003C\/ul\u003E\nAlthough changes to the CSS codes have to be made to implement the grid style view and make it compatible with a blog's template, all the work will be worth it once it is up and running.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cb\u003EImportant:\u003C\/b\u003E\u003Cbr \/\u003E\nBefore anything make sure that you backup your Blogger template! If have encounter any problems with your edits, you can revert the template back to its previous condition by restoring it from your backup. For this, go to 'Template' in the left menu \u0026gt; click on the 'Backup\/Restore' button in the upper right corner and press the 'Download Full Template' button - choose where you want to save the file on your computer and click the 'Save' button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow we can safely proceed with editing our Blogger template. If you run into problems, just revert back to your saved template.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Create Masonry, Grid Style Posts in Blogger\u003C\/h3\u003E\nStep 1. Log into your \u003Ca href=\"http:\/\/www.blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E and click on the blog where you want to apply the grid style.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 2. Go to \"Template\" located on the left side of the screen and press the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 3. Click anywhere inside the code area and press the CTRL+F keys to open the search box, then type the following tag inside the box (hit Enter to find it):\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;\/head\u0026gt; \u003C\/blockquote\u003E\nStep 4. Now copy the script below and paste it just before the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nposts_no_thumb_sum = 100;\u003Cbr \/\u003E\nposts_thumb_sum = 100;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nfunction removeHtmlTag(a,b){if(a.indexOf(\"\u0026lt;\")!=-1){for(var c=a.split(\"\u0026lt;\"),d=0;d\u0026lt;c.length;d++)c[d].indexOf(\"\u0026gt;\")!=-1\u0026amp;\u0026amp;(c[d]=c[d].substring(c[d].indexOf(\"\u0026gt;\")+1,c[d].length));a=c.join(\"\")}for(b=b\u0026lt;a.length-1?b:a.length-2;\" \"!=a.charAt(b-1)\u0026amp;\u0026amp;a.indexOf(\" \",b)!=-1;)b++;return a=a.substring(0,b-1),a+\"...\"}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e=\"\",f=d.getElementsByTagName(\"img\"),g=posts_no_thumb_sum;f.length\u0026gt;=1?(e='\u0026lt;div class=\"posts-thumb\" style=\"float:left;\"\u0026gt;\u0026lt;a href=\"'+b+'\"\u0026gt;\u0026lt;img src=\"'+f[0].src+'\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;',g=posts_thumb_sum):(e='\u0026lt;div class=\"posts-thumb\" style=\"float:left;\"\u0026gt;\u0026lt;a href=\"'+b+'\" title=\"'+c+'\"\u0026gt;\u0026lt;img src=\"https:\/\/2.bp.blogspot.com\/-Gbn3dT1R9Yo\/VPXSJ8lih_I\/AAAAAAAALDQ\/24wFWdfFvu4\/s1600\/sorry-image-not-available.png\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;',g=posts_thumb_sum);var h=e+'\u0026lt;div class=\"post-summary-text\"\u0026gt;'+removeHtmlTag(d.innerHTML,g)+\"\u0026lt;\/div\u0026gt;\";d.innerHTML=h}\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\nStep 5. Find the following code snippet using CTRL+F or Command + F:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;data:post.body\/\u0026gt;\u003C\/blockquote\u003E\nStep 6. After pressing the \"Enter\" key on your keyboard, you may find three occurrences of the above code, replace only the second and the third one with this code below:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;div expr:id='\u0026amp;quot;summary\u0026amp;quot; + data:post.id'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n \u0026lt;script \ntype='text\/javascript'\u0026gt;createSummaryAndThumb(\u0026amp;quot;summary\u0026lt;data:post.id\/\u0026gt;\u0026amp;quot;,\u0026amp;quot;\u0026lt;data:post.url\/\u0026gt;\u0026amp;quot;);\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;b:if cond='data:post.allowComments'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.numComments\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nStep 7. Now choose one of the styles below, copy the code provided and paste it just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003ESimple Grid Design\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"400\" src=\"https:\/\/1.bp.blogspot.com\/-_P_k_VKGqjM\/VPsQFKJei0I\/AAAAAAAALJY\/6uwsCvGVD24\/s1600\/grid-style-with-thumbnail-summary.png\" width=\"321\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:\u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:\u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:\u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;}a.comment-bubble:before{content:\u0026amp;quot;Comments: \u0026amp;quot;;}.post-header,.post-footer{display:none}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003EGrid Layout with Post Summary and Thumbnail\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"grid layout for blogger\" border=\"0\" height=\"400\" src=\"https:\/\/2.bp.blogspot.com\/-9DP-WlQtTOU\/VPiFxXL2_4I\/AAAAAAAALHY\/WgZ505mNEmw\/s1600\/grid-layout-for-blogger.png\" title=\"Create Masonry, Grid Layouts for Blogger Posts\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/blogger-grid-layouts.blogspot.com\/search?updated-max=2015-03-01T05:57:00-08:00\u0026amp;max-results=9\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https:\/\/1.bp.blogspot.com\/-rh-PYvqjzSs\/VPTARkPOSVI\/AAAAAAAALC4\/GyFFEnl2TO8\/s1600\/blueprint.png);font:100% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% \u0026amp;#39;Pacifico\u0026amp;#39;,cursive;}a.comment-bubble:before{content:\u0026amp;quot;Comments: \u0026amp;quot; url(https:\/\/4.bp.blogspot.com\/-t1i_svebif4\/VPMpZqPrKzI\/AAAAAAAALAg\/TRJ2Un238Gs\/s1600\/heart-active.png);}.post-header,.post-footer{display:none}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Pacifico' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003EGrid Layout with Text Snippet on Hover\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger posts\" border=\"0\" height=\"320\" src=\"https:\/\/2.bp.blogspot.com\/-YtPUvsl4v18\/VPi0gVSCFVI\/AAAAAAAALIE\/fUXEiS3eoKk\/s1600\/grid-layout-summary-on-hover-for-blogger.png\" title=\"Create Masonry, Grid Layouts for Blogger Posts 2\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\n\u003Ca class=\"demo-link\" href=\"http:\/\/blogger-grid-layouts.blogspot.com\/search?updated-max=2015-02-25T08:37:00-08:00\u0026amp;max-results=9\u0026amp;start=9\u0026amp;by-date=false\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% \u0026amp;#39;Pacifico\u0026amp;#39;,cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:\u0026amp;quot;Comments: \u0026amp;quot;}.post-header,.post-footer{display:none}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Pacifico' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: center;\"\u003EMasonry Layout (Pinterest Like Grid)\u003C\/h3\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"masonry layout for blogger\" border=\"0\" height=\"367\" src=\"https:\/\/2.bp.blogspot.com\/-SNzWq6ayMf8\/VPi8Wiqik-I\/AAAAAAAALIU\/H6rTars6ER8\/s1600\/masonry-grid-layout-for-blogger.png\" title=\"Create Masonry, Grid Layouts for Blogger Posts 3\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/blogger-grid-layouts.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDEMO\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType!= \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#blog-pager{clear:both;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!important}.posts-thumb{width:100%;height:auto;overflow:hidden;clear:both}.post-body{overflow:hidden;position:relative}.post-body a{text-decoration:none}.post-body img{display:block;width:auto;height:auto;max-width:100%;max-height:none;min-width:100%;min-height:auto;margin:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;padding:84px 10% 0;left:0;position:absolute;text-align:center;vertical-align:bottom;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;z-index:10;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1}.post-footer{display:none}a.comment-bubble{color:#fff;text-decoration:none;font:120% \u0026amp;#39;Open Sans Condensed\u0026amp;#39;,sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https:\/\/4.bp.blogspot.com\/-t1i_svebif4\/VPMpZqPrKzI\/AAAAAAAALAg\/TRJ2Un238Gs\/s1600\/heart-active.png);}.main-inner .column-center-inner{-moz-column-count:3;-moz-column-gap:1px;-webkit-column-count:3;-webkit-column-gap:1px;column-count:3;column-gap:1px;width:100%;padding:0!important}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nPlease note that the masonry layout might not work if you have a customized template, also older posts will appear vertically (from top to bottom) instead of left to right.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 8. Click \"Preview\" and if everything looks fine, press the \"Save Template\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch5\u003EThat's it!\u003C\/h5\u003E\nImplementing a grid style view has its pros and cons, but the benefits clearly outweigh the disadvantages. The fact that a website will look visually appealing and professional when set in grid style, is already enough to boost its online reputation. An increase in page views is just the beginning. With the right images and content, a blog will also have better SEO. Most importantly, implementing the changes is not as complex as some might think. With a step-by-step guide available, adding a dynamic view switcher would be completed in no time."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/5446842046320126914\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/masonry-grid-layouts-for-blogger-posts.html#comment-form","title":"13 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5446842046320126914"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5446842046320126914"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/03\/masonry-grid-layouts-for-blogger-posts.html","title":"Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-_P_k_VKGqjM\/VPsQFKJei0I\/AAAAAAAALJY\/6uwsCvGVD24\/s72-c\/grid-style-with-thumbnail-summary.png","height":"72","width":"72"},"thr$total":{"$t":"13"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-8736368861274781333"},"published":{"$t":"2014-11-15T12:55:00.001-08:00"},"updated":{"$t":"2020-04-17T10:12:06.261-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"5 Cool Recent Post Widgets for Blogger"},"content":{"type":"html","$t":"For bloggers that pride themselves on always staying up-to-date with new content, a \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/05\/recent-posts-widget-with-thumbnails-for.html\"\u003Erecent post widget for Blogger\u003C\/a\u003E can be an invaluable tool. A recent posts widget for blogger is in many ways similar to a 'breaking news alert' that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"hidden-image\"\u003E\u003Cimg alt=\"recent posts for blogger\" src=\"https:\/\/1.bp.blogspot.com\/-CsF_3elyJOQ\/Xpng-xaL3nI\/AAAAAAAAMQk\/ULq7cErTOAg8F-PHDWiKYNBtxKRIZZp2gCLcBGAsYHQ\/s1600\/recent-posts-gadget-blogger.jpg\" title=\"5 Cool Recent Post Widgets for Blogger\"\/\u003E\u003C\/div\u003E\nAdding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don't have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what's often referred to as the 'Twitter effect' where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they'll leave the site and hurt your bounce rate.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"blogger recent posts widgets\" src=\"https:\/\/1.bp.blogspot.com\/-bFHYZD-Fdec\/XpnjMfXMWnI\/AAAAAAAAMQ0\/k1jb7DzVciMWzoDwohC-NyoOJenUrxflgCLcBGAsYHQ\/s1600\/recent-posts-widget-for-blogger.jpg\" title=\"5 Cool Recent Post Widgets for Blogger\"\/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nOnce you've managed to attract visitors to one of your posts using the \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html\"\u003Erecent post widget for Blogger\u003C\/a\u003E, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you'd rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.\u003Cbr \/\u003E\u003Cbr \/\u003E\nApart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you're interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #1\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"rainbow widget, recent posts\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-EWNUyAP_D5Q\/VGe8VQE8bqI\/AAAAAAAAKsg\/dnZV8lo50vo\/s1600\/rainbow-colorful-recent-posts-widget-for-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]=\"Jan\",w[2]=\"Feb\",w[3]=\"Mar\",w[4]=\"Apr\",w[5]=\"May\",w[6]=\"Jun\",w[7]=\"Jul\",w[8]=\"Aug\",w[9]=\"Sep\",w[10]=\"Oct\",w[11]=\"Nov\",w[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\"),\"content\"in n)var A=n.content.$t;else if(\"summary\"in n)var A=n.summary.$t;else var A=\"\";var k=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(A=A.replace(k,\"\"),1==post_summary)if(A.length\u0026lt;summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(\" \");A=A.substring(0,y),document.write(A+\"...\")}var _=\"\",$=0;document.write('\u0026lt;br\u0026gt;\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;(_=_+w[parseInt(g,10)]+\" \"+v+\" \"+f,$=1),1==readmorelink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" | \"),_=_+'\u0026lt;a href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',$=1),1==showcommentslink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",_+=l,$=1),document.write(_),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = false;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\nvar post_summary = true;\u003Cbr \/\u003E\nvar summary_chars = 70;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Ubuntu+Condensed' rel='stylesheet' type='text\/css' \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}\u003Cbr \/\u003E\nul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover { color: #222;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}\u003Cbr \/\u003E\n.recent-post-title {padding: 6px 0px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #222;}\u003Cbr \/\u003E\n.recent-posts-details {padding: 5px 0px 5px; }\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #2\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts widget for blogger\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-lo0g9x57zfM\/VGdGdgukhuI\/AAAAAAAAKrM\/01hWV5z4SSc\/s1600\/recent-posts-widget-for-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div class=\"recentpoststyle\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestposts(e){for(var t=0;t\u0026lt;posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a\u0026lt;s.link.length;a++)if(\"alternate\"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i=\"... read more\";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]=\"Jan\",m[2]=\"Feb\",m[3]=\"Mar\",m[4]=\"Apr\",m[5]=\"May\",m[6]=\"Jun\",m[7]=\"Jul\",m[8]=\"Aug\",m[9]=\"Sep\",m[10]=\"Oct\",m[11]=\"Nov\",m[12]=\"Dec\",\"content\"in s)var d=s.content.$t;else if(\"summary\"in s)var d=s.summary.$t;else var d=\"\";var v=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(d=d.replace(v,\"\"),document.write('\u0026lt;li class=\"recent-post-title\"\u0026gt;'),document.write(n),document.write('\u0026lt;\/li\u0026gt;\u0026lt;div class=\"recent-post-summ\"\u0026gt;'),1==post_summary)if(d.length\u0026lt;summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(\" \");d=d.substring(0,f),document.write(d+\" \"+i)}document.write(\"\u0026lt;\/div\u0026gt;\"),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+m[parseInt(u,10)]+\" \"+c+\" \"+o+\"\u0026lt;\/div\u0026gt;\")}}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;amp;alt=json-in-script\u0026amp;amp;callback=showlatestposts\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u0026lt;a style=\"font-size: 9px; color: #CECECE;margin-top:10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\n.recentpoststyle {counter-reset: countposts;list-style-type: none;}\u003Cbr \/\u003E\n.recentpoststyle a {text-decoration: none;color: #49A8D1;}\u003Cbr \/\u003E\n.recentpoststyle a:hover {color: #000;}\u003Cbr \/\u003E\n.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}\u003Cbr \/\u003E\n.recent-post-title a {color: #444;text-decoration: none;font: bold 13px \"Avant Garde\",Avantgarde,\"Century Gothic\",CenturyGothic,AppleGothic,sans-serif;}\u003Cbr \/\u003E\n.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}\u003Cbr \/\u003E\n.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,\"Baskerville Old Face\",\"Hoefler Text\",\"Times New Roman\",serif;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #3\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts gadget\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-ovCSmmV2cRA\/VGd60NhBCiI\/AAAAAAAAKrc\/uIEiW2SZdUE\/s1600\/recent-posts-widget-with-comments-count.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"https:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]=\"Jan\",w[2]=\"Feb\",w[3]=\"Mar\",w[4]=\"Apr\",w[5]=\"May\",w[6]=\"Jun\",w[7]=\"Jul\",w[8]=\"Aug\",w[9]=\"Sep\",w[10]=\"Oct\",w[11]=\"Nov\",w[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\"),\"content\"in n)var A=n.content.$t;else if(\"summary\"in n)var A=n.summary.$t;else var A=\"\";var k=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(A=A.replace(k,\"\"),1==post_summary)if(A.length\u0026lt;summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(\" \");A=A.substring(0,y),document.write(A+\"...\")}var _=\"\",$=0;document.write('\u0026lt;br\u0026gt;\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;(_=_+w[parseInt(g,10)]+\" \"+v+\" \"+f,$=1),1==readmorelink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" | \"),_=_+'\u0026lt;a href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',$=1),1==showcommentslink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",_+=l,$=1),document.write(_),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\nvar post_summary = true;\u003Cbr \/\u003E\nvar summary_chars = 40;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}\u003Cbr \/\u003E\n.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}\u003Cbr \/\u003E\n.recent-posts-container a{text-decoration:none;}\u003Cbr \/\u003E\n.recent-post-title {margin-bottom:5px;}\u003Cbr \/\u003E\n.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}\u003Cbr \/\u003E\n.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}\u003Cbr \/\u003E\n.recent-posts-details a{color: #777;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #4\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts for blogger, cool widgets\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-l7--Ewqgibs\/VGeaBc6EXrI\/AAAAAAAAKrs\/iKLxdHqU3gA\/s1600\/recent-posts-gadget-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]=\"Jan\",A[2]=\"Feb\",A[3]=\"Mar\",A[4]=\"Apr\",A[5]=\"May\",A[6]=\"Jun\",A[7]=\"Jul\",A[8]=\"Aug\",A[9]=\"Sep\",A[10]=\"Oct\",A[11]=\"Nov\",A[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+A[parseInt(w,10)]+\" \"+v+\" \"+f+\"\u0026lt;\/div\u0026gt;\"),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\");var g=\"\",k=0;document.write('\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==showcommentslink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",g+=l,k=1),1==readmorelink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" | \"),g=g+'\u0026lt;a class=\"readmorelink\" href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',k=1),document.write(g),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = false;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}\u003Cbr \/\u003E\n.recent-posts-container {font-family: 'Oswald', sans-serif;\u0026nbsp; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type: none;}\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover{color: #4DACE3;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}\u003Cbr \/\u003E\n.recent-post-title { margin: 5px 0px; }\u003Cbr \/\u003E\n.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #888;}\u003Cbr \/\u003E\na.readmorelink {color: #4DACE3;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Post Style #5\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts, blogger gadget\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-NP0YePnPRAg\/VGeofTBkflI\/AAAAAAAAKsI\/_QwawiCLWaA\/s1600\/recent-posts-widget-blogger-count.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]=\"Jan\",A[2]=\"Feb\",A[3]=\"Mar\",A[4]=\"Apr\",A[5]=\"May\",A[6]=\"Jun\",A[7]=\"Jul\",A[8]=\"Aug\",A[9]=\"Sep\",A[10]=\"Oct\",A[11]=\"Nov\",A[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+A[parseInt(w,10)]+\" \"+v+\" \"+f+\"\u0026lt;\/div\u0026gt;\"),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\");var g=\"\",k=0;document.write('\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==showcommentslink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",g+=l,k=1),1==readmorelink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" | \"),g=g+'\u0026lt;a class=\"readmorelink\" href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',k=1),document.write(g),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\" rel=\"nofollow\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text\/css' \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}\u003Cbr \/\u003E\n.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;\u0026nbsp; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;\u0026nbsp; border-top: 2px solid #FCD6CB;}\u003Cbr \/\u003E\nul.recent-posts-container {border: 2px solid #FCD6CB; }\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover { color: #222;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 14px;color: #616662;}\u003Cbr \/\u003E\n.recent-post-title {padding: 6px 0px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #888;}\u003Cbr \/\u003E\n.recent-posts-details {padding-bottom: 5px;}\u003Cbr \/\u003E\na.readmorelink {color: #4DACE3;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add Recent Posts Widget on Blogger\u003C\/h2\u003E\nWant to add one of the styles above? Just follow the following steps below:\u003Cbr \/\u003E\n\u003Col\u003E\u003Cli\u003ELog into your Blogger dashboard and click on your blog.\u003C\/li\u003E\n\u003Cli\u003EGo to \"Layout\" and click the \"Add a gadget\" link on the right side.\u003C\/li\u003E\n\u003Cli\u003EFrom the pop-up window, scroll down and select the \"HTML\/JavaScript\" gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"316\" src=\"https:\/\/3.bp.blogspot.com\/-pJWeUlhQv9E\/VD1bzt1qKoI\/AAAAAAAAKpQ\/OlBnyqkUI1k\/s1600\/add-html-javascript-gadget-blogger.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli\u003EPaste the code of the chosen widget found below it.\u003C\/li\u003E\n\u003Cli\u003EHit the \"Save\" button and you're done!\u003C\/li\u003E\u003C\/ol\u003E\n\u003Ch3\u003EKeep Your Blog Updated\u003C\/h3\u003E\nUsing a recent post widget for Blogger can truly benefit you and improve your skill as a blogger. As you can see, these designs can look great on Blogger sites, but they do act a little bit like a progress report for the author. If you start to fall behind, the dates on your recent post widget will definitely give you away.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/helplogger.blogspot.com\/2016\/09\/how-to-hide-posts-from-blogger-homepage.html\"\u003ESet a schedule\u003C\/a\u003E and make sure that you are making regular posts on the blog. These posts will be automatically updated on your widget and readers can view this information whenever they want. Add your recent post widget for Blogger on the every page of the blog or in your template so that these posts can encourage others to continue reading, thus increasing the total time spent on your site."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/8736368861274781333\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html#comment-form","title":"23 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8736368861274781333"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8736368861274781333"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html","title":"5 Cool Recent Post Widgets for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-CsF_3elyJOQ\/Xpng-xaL3nI\/AAAAAAAAMQk\/ULq7cErTOAg8F-PHDWiKYNBtxKRIZZp2gCLcBGAsYHQ\/s72-c\/recent-posts-gadget-blogger.jpg","height":"72","width":"72"},"thr$total":{"$t":"23"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5227752940803414022"},"published":{"$t":"2014-09-07T20:05:00.001-07:00"},"updated":{"$t":"2017-07-27T09:20:16.970-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogging tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"Where To Find Free Blogger Backgrounds and Textures"},"content":{"type":"html","$t":"Blogger is a fantastic tool for amateur and professional writers that have a passion for publishing online content. Unlike WordPress or hosting companies that require you to design your site before ever getting started, Blogger is a ready to go service right out of the box that will allow you to start writing for yourself or others on day one. The effort required to sign up for an account is minimal, and you can really get as creative as you want, whenever you want.\u003Cbr \/\u003E\u003Cbr \/\u003E\nEven if you aren't familiar with web development or design, that's okay. Blogger is a place for everyone. Thanks to the overwhelming support of the Blogger and creative communities, there are plenty of free to use resources out there to make your site look great and keep you focused on what you love best. Here are some of the top sites for acquiring blogger backgrounds that won't cost you a dime and will look incredible.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"free blogger backgrounds and textures\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-T2QLXom-_qw\/VAuIM4ErkdI\/AAAAAAAAKeI\/T-XAGpleres\/s1600\/free-blogger-backgrounds-3.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/div\u003E\n\u003Ch4\u003EShabby Blogs\u003C\/h4\u003E\nShabby blogs offers some unique texture and graphic rendered Blogger backgrounds to choose from. All of the designs that they have are created to be standard width so you don't get a lot of flexibility to choose from; however, there are guides out there that can teach you how to extend the sidebars, header, and footer of your screen if you find one you love and this is something important to you. In addition to offering Blogger backgrounds Shabby blogs also has a section for cute little buttons that you can add to your site to give it an extra special touch.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"shabby blogs backgrounds\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-7SCNLTz9td0\/VAuCNaplQUI\/AAAAAAAAKdY\/Pw-EJa0r8Vs\/s1600\/AtTheBeachShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-8RgUWDx1TV0\/VAuCNcfe1nI\/AAAAAAAAKdw\/tNnGei5qyqE\/s1600\/DelucaMShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-gyPXaPUmvGU\/VAuCNRrnMcI\/AAAAAAAAKdc\/h2hZgWV4kyM\/s1600\/OwlBeThereMShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-OGihLdaTfZo\/VAuCN37kkcI\/AAAAAAAAKdg\/dhpVtE3vh14\/s1600\/WorldOnFireMShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EHot Bliggity Blog\u003C\/h4\u003E\nAside from having one of the coolest and creative names to say out loud, Hot Bliggity Blog has a wide selection of patterned-based blogs for your site. You can choose between different color schemes, and they also offer three different sizes to pick from, standard, widened, and full width. Best of all, they are really easy to install. All you have to do is click on the install link underneath the image. From there it will copy the code for you into your clipboard and give you instructions on where to paste it.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/hotbliggityblog.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"hot bliggity blog backgrounds\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-XLrPbR-yztA\/VAuIM5F2xCI\/AAAAAAAAKeA\/Fkm6gWNilbk\/s1600\/free-blogger-backgrounds-1.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/hotbliggityblog.com\/\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-T2QLXom-_qw\/VAuIM4ErkdI\/AAAAAAAAKeI\/T-XAGpleres\/s1600\/free-blogger-backgrounds-3.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/hotbliggityblog.com\/\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-a5t4bEw5rWw\/VAuIM2ERr0I\/AAAAAAAAKeE\/Vs07FurZW9Q\/s1600\/free-blogger-backgrounds.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-_JHvEVrLLVY\/VAuINuHhNOI\/AAAAAAAAKeQ\/CUvik-K3nS8\/s1600\/rRraoXU.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EDotty Dot Dot\u003C\/h4\u003E\nDotty Dot is the place to go if you like geometric type backgrounds that are heavy on squares, plaid, circles, and of course dots. The website is a little bit hard to navigate, but they have a sidebar with a bunch of tags to help you sort through all the available templates and find something you like. Just about every color you can imagine is available if you plan on matching your Blogger backgrounds to your favorite color or font style. The widths of the most of the templates vary so some have heavy padded sidebars, whereas some are very skinny.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-rRNswl-c2vg\/VAuYuPTrHcI\/AAAAAAAAKes\/aFuSMIM8gno\/s1600\/Pink_Polka_2c_BACKGROUND.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-vCmpZewsKW0\/VAuYuA_OL0I\/AAAAAAAAKeo\/mqwpvtmIPP8\/s1600\/Square_Buttons_3c_BACKGROUND.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-zEzp8ecXd3c\/VAuYuOlz7SI\/AAAAAAAAKfA\/iSKssQD-zqU\/s1600\/The__80s._Squared.png\" height=\"103\" width=\"173\" \/\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-wUmkAuYAIm0\/VAuYupxiGUI\/AAAAAAAAKew\/VNU0Uyj46ig\/s1600\/Vroom_Zoom_BACKGROUND.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003ELeeLou Blogs\u003C\/h4\u003E\nLee Lou Blogs offers Blogger backgrounds that look a lot like you would find in a scrapbook with a heavy dependency on small pictures and vector graphics. These free templates would go great with any home improvement blog or DIY arts and crafts writer. Most of the free backgrounds are standard size with the high padded sides, but like anything you can get access to more templates if you want to take advantage of any of his premium designs.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/leelou-blogs.com\/type\/blog-backgrounds?style\u0026color\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/leelou-blogs.com\/\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-1laFzaR9zZ4\/VAuhdseqRCI\/AAAAAAAAKgA\/ppZdv9VhjYo\/s1600\/leelou-blogs.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch4\u003ECgTextures\u003C\/h4\u003E\nIf you just want something basic real basic that won't distract customers from your content, you can head over to CgTextures. Their site is full of photos and textures that could be added as a background image with a reduced transparency. The blog would still look great and you wouldn't have to worry as much about trying to match your font style and color so that it fits in with the background. Instead you can draw more focus on what's important and less on the site's bells and whistles.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.cgtextures.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"cg textures for blogger backgrounds\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-li5S_hcb3tM\/VAuazxRKyuI\/AAAAAAAAKfM\/4c4q-H_-TLg\/s1600\/cgtextures.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EEvery Stock Photo\u003C\/h4\u003E\nBloggers that want less of an 'artsy' look to their site and instead more of a serious appeal can get a picture from Every Stock Photo to use as the background image. You can also benefit by using some of the pictures offered through this site within your blog posts so that you aren't stuck buying things from premium image providers. There search bar and navigation panel makes it easy to find exactly what you are looking for to see a unique feel to every page.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/everystockphoto.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"every stock photo background image\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-zat3OdSoEb8\/VAucA5MI-FI\/AAAAAAAAKfY\/t19MojmbSFc\/s1600\/everystockphoto.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EShizoo-Design\u003C\/h4\u003E\nShizoo-Design is a German based design firm with about 554 different patterns to choose from. You can find everything from conservative shapes to abstract rainbows and splashes of color. All of the textures are provided in a range of size, anywhere from 1000x700 pixels to 1300x600 pixels so that they will comfortably fit your entire site's background and work with most browsers and computer screen sizes. Brushes and custom icons are also available from the site, free of charge.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/www.shizoo-design.de\/textures.php\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"shizoo design textures,blogger backgrounds\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-DuD0ufu7LgI\/VAuf4wJ0-LI\/AAAAAAAAKf0\/TNmsWegoBuE\/s1600\/shizoo-design.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EPatterns of Change\u003C\/h4\u003E\nPatterns of Changes offers Blogger backgrounds that are cartoon oriented and that can best be tiled across the screen. The site is perhaps one of the easiest to use compared to all the others on the screen, providing a simple navigation bar where you can choose what color you'd like the pattern to be. When you select one of the colors provided, it will come up with a bunch of different patterns usually associated with that color. For instance, when the color brown is selected, one of the choices ia brown cake. Blogger backgrounds for this site might not be the best choice for business professionals, but they certainly are fun.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.lizaphoenix.com\/tiles\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"patterns of change blogger backgrounds\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-loxLfubFAlk\/VAufZLvuRQI\/AAAAAAAAKfs\/nI4q8licW1w\/s1600\/patterns-of-change.png\" height=\"169\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Add a Background Image using the Blogger Template Designer\u003C\/h3\u003E\nIf you have a background image that you want to upload, then follow these steps:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n1. Log into your \u003Ca href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger account\u003C\/a\u003E and go to \"Template\", press the \"Customize\" button on the right side. Once the Blogger template designer has opened, you'll see the \u003Cb\u003EBackground\u003C\/b\u003E option on the left - click on it:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"change blogger background\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-9yF1zThGxyE\/VAy8F3iaF3I\/AAAAAAAAKiY\/W2ppxtB_41A\/s1600\/upload-background-image-on-blogger-template-designer.png\" height=\"201\" title=\"Where To Find Free Blogger Backgrounds and Textures 1\" width=\"610\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n2. Now click on the box below the \u003Cb\u003EBackground image\u003C\/b\u003E title and it will open a window from where we can select a default background image. On the upper left side of this window, click \u003Cb\u003EUpload Image\u003C\/b\u003E and select the image you would like to use from a location on your computer. \u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"upload background image\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-RitmsXF06nI\/VAy8lf7AbXI\/AAAAAAAAKik\/OcvdDaHxLDs\/s1600\/upload-background-image-on-blogger.png\" height=\"250\" title=\"Where To Find Free Blogger Backgrounds and Textures 2\" width=\"610\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nNote that you should use a JPG, GIF, or PNG image that is no more than 300k in size. If your image is too large, then you can use the \u003Ca href=\"http:\/\/kraken.io\/\" rel=\"nofollow\" target=\"_blank\"\u003EKraken.io\u003C\/a\u003E image optimizer to \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/07\/blogger-seo-image-optimization.html\"\u003Emake the image file smaller\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\n3. After you've uploaded your image, click 'Done' and you'll be taken back to the background menu. Here you will see additional options like: \"Alignment\", \"Tile\" and \"Scroll with page\":\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EAlignment\u003C\/b\u003E: change the position of the background image to start either horizontal (left, center, right) or vertical (top and bottom);\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003ETile (Repeat)\u003C\/b\u003E: if you want a small background image to fill the page, choose to repeat (tile) horizontally and\/or vertically.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EScroll with page\u003C\/b\u003E: the box is checked by default, this means that the background scroll along with the page contents. If you want the background picture to not move as the page is scrolled and stay exactly where it is, uncheck this box.\u003C\/li\u003E\u003C\/ul\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"background image position\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-ky6dHvXaULg\/VAzA27jfYqI\/AAAAAAAAKiw\/42VxfI1V4vE\/s1600\/background-image-scroll-with-page-blogger.png\" height=\"250\" title=\"Where To Find Free Blogger Backgrounds and Textures 3\" width=\"510\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n4. For a background image with plain color in the middle for content, you might want to remove the main and header background. Navigate to \"Advanced\" \u0026gt; \"Backgrounds\" and type the word \"transparent\" inside the \"Main Background\" and \"Header Background\" box:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"change background color\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-Dl8pBYswf48\/VAzI15kjWSI\/AAAAAAAAKjA\/Myj4El5WusA\/s1600\/transparent-background-blogger-advanced.png\" height=\"250\" title=\"Where To Find Free Blogger Backgrounds and Textures 4\" width=\"510\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n5. If the background is smaller than the content area, we can fix this using CSS. Scroll down and click on the \u003Cb\u003EAdd CSS\u003C\/b\u003E option, then paste this CSS code inside the box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nbody {\u003Cbr \/\u003E\nbackground-size: \u003Cspan style=\"color: red;\"\u003E200%\u003C\/span\u003E;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.body-fauxcolumn-outer .cap-top {\u003Cbr \/\u003E\nbackground: none;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nNote: to change the size of the background, modify the \u003Cspan style=\"color: red;\"\u003E200%\u003C\/span\u003E value in red.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"change background size\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-3I4-FKf1zBc\/VAzKUPYTpDI\/AAAAAAAAKjM\/b94f_FVGIEM\/s1600\/background-size-cover-blogger-designer.png\" height=\"250\" title=\"Where To Find Free Blogger Backgrounds and Textures 5\" width=\"510\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nOnce you're happy with the results, press the 'Apply to blog' button and enjoy the new background for your site.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Change Background in a Custom Blogger Template\u003C\/h3\u003E\nSometimes the above options might not appear in some custom Blogger templates if the body.background variable hasn't been defined. In this case, we will need to access the HTML of the template:\u003Cbr \/\u003E\u003Cbr \/\u003E\n1. Go to \"Template\" and click the \"Edit HTML\" button, then click anywhere inside the code area. Press the CTRL + F keys to open the Blogger search box:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger template html\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%2Bf.png\" height=\"215\" title=\"Where To Find Free Blogger Backgrounds and Textures 6\" width=\"505\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n2. Paste or type the following tag inside the search box and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\n3. Immediately before the \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E tag, paste one of the following code snippets:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nFor a large background image:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nbody {\u003Cbr \/\u003E\nbackground-image: url(\u003Cspan style=\"color: blue;\"\u003EIMAGE-URL.png\u003C\/span\u003E) !important;\u003Cbr \/\u003E\nbackground-repeat: \u003Cspan style=\"color: #6aa84f;\"\u003Eno-repeat\u003C\/span\u003E;\u003Cbr \/\u003E\nbackground-position: center top; \u003Cbr \/\u003E\nbackground-attachment: fixed;\u003Cbr \/\u003E\nbackground-size: \u003Cspan style=\"color: red;\"\u003E100%\u003C\/span\u003E; \u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nNote: the \u003Cspan style=\"color: #6aa84f;\"\u003Eno-repeat\u003C\/span\u003E value prevents the image from repeating either vertically or \nhorizontally. Use \u003Cspan style=\"color: #6aa84f;\"\u003Ebackground-repeat: repeat-y\u003C\/span\u003E if you'd like the image to repeat vertically, or \u003Cspan style=\"color: #6aa84f;\"\u003Ebackground-repeat: repeat-x\u003C\/span\u003E if you want it to repeat only horizontally. To increase the size of the background, change the \u003Cspan style=\"color: red;\"\u003E100%\u003C\/span\u003E value.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"adding background in blogger\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-gJe2pMBP4Wo\/VA0awXLD5YI\/AAAAAAAAKjc\/2wus1AlBWnE\/s1600\/add-background-to-blogger-body.png\" height=\"250\" title=\"Where To Find Free Blogger Backgrounds and Textures 7\" width=\"605\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nIf using a repeating pattern, add this CSS code instead:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nbody {\u003Cbr \/\u003E\nbackground-image: url(\u003Cspan style=\"color: blue;\"\u003EIMAGE-URL.png\u003C\/span\u003E) !important;\u003Cbr \/\u003E\nbackground-repeat: repeat;\u003Cbr \/\u003E\nbackground-position: center top; \u003Cbr \/\u003E\nbackground-attachment: fixed;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\n4. Open a new tab and upload your background image to Blogger or an image hosting site, and copy the URL of your hosted image to your clipboard. If you don't know how to do it, please take a look at \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2013\/09\/upload-images-and-get-url-of-image.html\"\u003Ethis tutorial\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\nAfter you copied it, replace the text highlighted in blue from above with your image url.\u003Cbr \/\u003E\u003Cbr \/\u003E\n5. Finally, Preview the template to ensure that the background image appears as you want, and press the \"Save template\" button to save your changes. That's it!\u003Cbr \/\u003E\u003Cbr \/\u003E\nUsing the 8 sites listed above, you have a wide range to choose from when creating a site that really represents you. Given the right tools, designing you blog can be a fun hobby to enjoy that can spark your creativity and improve the quality of your writing. With such a large selection, the hardest part of setting up your new theme will be finding which one you like best."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/5227752940803414022\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/09\/where-to-find-free-blogger-backgrounds-textures.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5227752940803414022"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5227752940803414022"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/09\/where-to-find-free-blogger-backgrounds-textures.html","title":"Where To Find Free Blogger Backgrounds and Textures"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/4.bp.blogspot.com\/-T2QLXom-_qw\/VAuIM4ErkdI\/AAAAAAAAKeI\/T-XAGpleres\/s72-c\/free-blogger-backgrounds-3.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5660041648877530403"},"published":{"$t":"2014-09-01T17:54:00.001-07:00"},"updated":{"$t":"2016-10-29T18:11:14.972-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"How To Upload and Use Custom Fonts in Blogger"},"content":{"type":"html","$t":"Just about anyone can write and publish his or her own blog. In fact, there are about 152 million blogs out there on the internet. But, if you want your blog to stand out you need to impress visitors with the little things. You need to be able to catch there attention and keep it so that they want to come back.\u003Cbr \/\u003E\u003Cbr \/\u003E\nComplementing your blog post with images, links, and catchy titled is a great way to start and should be something you practice on just about everything you post; however, don't just stop there. If you really want to impress people and draw attention toward your blog, you want to start where the content all begins. You need to make use of custom fonts in Blogger. This guide will help you learn a little bit about font styles and how to upload new fonts onto your Blogger site.\u003Cbr \/\u003E\n\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-CzapIQKxT0E\/VAUUu1W1M_I\/AAAAAAAAKZo\/GRuduNWVnmw\/s1600\/how-to-use-custom-fonts-on-blogger.png\" height=\"263\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EThe Different Types of Font\u003C\/h3\u003E\nBefore you can upload any font files, you need to find the right font and typeface that will fit your style. Typeface is the design and symbols used for the letters; font is the actual characters. Some of the most common typeface terms that you should probably be familiar with before starting are:\n\u003Cul\u003E\u003Cli\u003ESerif - distinguished by small decorative lines that are attached to the end of letter strokes; best used for the paragraph or body content.\u003C\/li\u003E\n\u003Cli\u003ESans-serif - modern looking letter strokes that lack the decorate lines at the end; instead the letter end abruptly.\u003C\/li\u003E\n\u003Cli\u003EScript - a handwriting typeface that looks like cursive letters or custom strokes.\u003C\/li\u003E\n\u003Cli\u003EDisplay - typeface that is designed to stand out from the rest of the page; characterized by a broad and unique use of informal letter designs and transparency. Display typeface is best used on titles and headers.\u003C\/li\u003E\u003C\/ul\u003E\nWithin each web browser there are also certain types of font files that are used. Most of the browsers, except Internet Explorer and the iOS browser, will use TTF font file. Internet Explorer is the only web browser service that uses EOS files, and Apple has opted for using an SVG for their mobile and tablet based products. Some custom fonts in Blogger have to be in an \u003Cb\u003E@Font-Face\u003C\/b\u003E kit, but this will be discussed later on.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EWhere to Find Font\u003C\/h3\u003E\nYou can find custom font all over the internet when you're ready to get started. Some custom fonts in Blogger are free to use and can be downloaded to your computer, others you are considered 'premium' and you have to pay to use them, so please check twice whether they are having Commercial or Personal licenses. Google offers its own font service known as \u003Cb\u003EGoogle Web Fonts\u003C\/b\u003E which can be a good place to start looking around for custom fonts in Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003E\nUsing the Google Web Fonts service, you run a filter to find select fonts based on width, thickness, and slant. Better yet, you can test out how using the custom fonts in Blogger would appear by modifying the size, and viewing it in a small display window. If you like a couple different fonts, you can save them to your collection to come back to later.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EAdding a Custom Font to Blogger from Google Web Font\u003C\/h2\u003E\nStep 1. To browse the Google Fonts library, access \u003Ca href=\"http:\/\/www.google.com\/webfonts\" rel=\"nofollow\" target=\"_blank\"\u003Ewww.google.com\/webfonts\u003C\/a\u003E. There are 650 font families in the collection right now, and they keep adding more, so you may want to sort them.\u003Cbr \/\u003E\u003Cbr \/\u003E\nTo organize the fonts by style, you can use the menu on the left side. The top menu lets you to add and preview your own text using the 'Preview Text' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity':\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"google web fonts\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-m94srvi-Gd8\/VANnLJZPtYI\/AAAAAAAAKXQ\/F8ax1oAFgBw\/s1600\/find-custom-google-web-fonts.png\" height=\"310\" title=\"How To Upload and Use Custom Fonts in Blogger 1\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 2. Once you decided what font you want to use, click on the 'Add to Collection' button and then hit the 'Use' tab. This will take you to the 'Almost done!' page that will give you a \u003Cb\u003Elink to the style sheet\u003C\/b\u003E found in the 'Standard' tab (point 3) and the \u003Cb\u003ECSS style\u003C\/b\u003E (point 4).\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe link to style sheet would look like this:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=FONTNAME' rel='stylesheet' type='text\/css'\u0026gt;\u003C\/blockquote\u003E\nAnd the CSS style would look like this:\u003Cbr \/\u003E\n\u003Cblockquote\u003Efont-family: 'FONTNAME', cursive;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"google fonts CSS\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-a7oEScMaKS8\/VANtHRLfqoI\/AAAAAAAAKXc\/GZGBgqeM8RM\/s1600\/google-fonts-stylesheet-css-to-blogger.png\" height=\"286\" title=\"How To Upload and Use Custom Fonts in Blogger 2\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 3. Now that you have selected the fonts and have a general understanding of the different types of fonts available, you can head over to your Blogger blog. Open up the Dashboard and make sure that the first thing you do is to create a backup of your template: go to Template and press the \"Backup\/Restore\" button on the upper right side. That way, you can revert the changes back to the original in case something goes wrong.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 4. From the same \"Template\" location, press the \"Edit HTML\" button:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-7gKKBH5E11g\/VAULygeH3nI\/AAAAAAAAKZc\/O3owc0HYHhw\/s1600\/blogger-dashboard.png\" height=\"191\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 5. Click anywhere inside the code area and press CTRL + F at the same time (PC) or Command + F (Mac) to open the Blogger' search box and type \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;b:skin\u0026gt;\u003C\/span\u003E inside the search box. Press Enter and it will take you to the \u0026lt;b:skin\u0026gt; tag, which will be highlighted in yellow:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"adding custom font to blogger\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-C47EdU9DGkc\/VANxLP4JxlI\/AAAAAAAAKXk\/3H4HhgOW0d4\/s1600\/add-custom-font-to-blogger-template.png\" height=\"314\" title=\"How To Upload and Use Custom Fonts in Blogger 4\" width=\"640\" \/\u003E\u003C\/div\u003E\nStep 6. Directly above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;b:skin\u0026gt;\u003C\/span\u003E tag, copy \u0026amp; paste the link to the style sheet provided by Google Web Fonts (step 2). To prevent any errors, add a forward slash (\/) right before the closing angle bracket (\u0026gt;), like this:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=FONTNAME' rel='stylesheet' type='text\/css' \u003Cspan style=\"background-color: yellow;\"\u003E\/\u003C\/span\u003E\u0026gt;\u003C\/blockquote\u003E\nStep 7. To apply the font on a specific part of our blog, we'll need to find the CSS selector and add the \u003Cb\u003ECSS style\u003C\/b\u003E (point 4) just AFTER the curly bracket. If you don't know how to find the id\/class selector, please read this tutorial: \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/how-firebug-helps-you-design-your.html\"\u003EAdd CSS rules to Design a Blogger blog using Firebug\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\nFor example, if I would want to add the \"Rancho\" font to the posts and comments titles, I will paste the CSS style like this:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nh3.post-title, .comments h4 {\u003Cbr \/\u003E\n\u003Cspan style=\"color: white;\"\u003E\u003Cspan style=\"background-color: #3d85c6;\"\u003E\u0026nbsp; font-family: 'Rancho', cursive;\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cb\u003E\u0026nbsp; font-size: 28px;\u003C\/b\u003E\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nWhere \"h3.post-title, .comments h4 {\" is the class selector for the post and comments titles. Note: to change the size of your font, add the \"font-size: 28px;\" part as well, and change the \"28px\" value to make the font bigger\/smaller.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"custom font to blogger titles\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-pjO0Jjb8MFU\/VAN6dYCVnqI\/AAAAAAAAKXw\/Dw0Zc62rimA\/s1600\/custom-google-web-font-to-blogger-post-titles.png\" height=\"310\" title=\"How To Upload and Use Custom Fonts in Blogger 5\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nYou can also add the same CSS to \"Template\" \u0026gt; press the \"Customize\" button the right side, navigate to \"Advanced\" \u0026gt; \"Add CSS\" tab and paste the CSS code in the empty box.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"css, blogger template designer\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-h2MGWIONdmA\/VAN8sk8lybI\/AAAAAAAAKX4\/anWeOdW2nQA\/s1600\/add-custom-font-using-blogger-template-designer.png\" height=\"198\" title=\"How To Upload and Use Custom Fonts in Blogger 6\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 8. Finally, press the \"Save Template\" button and you're all set!\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EUsing a Custom Font that isn't on Google Web Fonts\u003C\/h2\u003E\nSome of the good places to find free fonts are \u003Ca href=\"http:\/\/www.dafont.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDaFont\u003C\/a\u003E, \u003Ca href=\"http:\/\/www.fontsquirrel.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EFontSquirrel\u003C\/a\u003E and \u003Ca href=\"http:\/\/www.urbanfonts.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EUrbanFonts\u003C\/a\u003E. Click to download the kit (unzip it if necessary), and save the TFF or OFT file on your desktop.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"fontsquirell download font\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-51IWI628nH8\/VAOIa81mN3I\/AAAAAAAAKYQ\/iGy--ycsSSQ\/s1600\/download-fonts-in-tff-format.png\" height=\"187\" title=\"How To Upload and Use Custom Fonts in Blogger 7\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EStep 1: Convert the Font File\u003C\/h3\u003E\nThe font file that you've downloaded is most likely in a TFF or OFT file since this is the most popular type. You need to convert this file into a @Font-Face kit. Many online services can help you do this, but here are two recommended sites:\n\u003Cul\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"nofollow\" target=\"_blank\"\u003EFontsquirrels\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/www.font2web.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EFont2web\u003C\/a\u003E\u003C\/li\u003E\u003C\/ul\u003E\nIf you are using the Font Squirrel Webfont Generator: press the \"Add Fonts\" button, choose the font file that you saved on your desktop and check the \"\u003Cspan style=\"color: #cc0000;\"\u003EYes, the fonts I'm uploading are legally eligible for web embedding.\u003C\/span\u003E\" checkbox. After the font has been successfully uploaded, click the \"Download your kit\" button. \u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"font squirrel webfont generator\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-oGiyQNp72JE\/VAOHUNBN_DI\/AAAAAAAAKYI\/gJ6gdLOFqig\/s1600\/convert-font-to-font-face-using-font-squirrel.png\" height=\"347\" title=\"How To Upload and Use Custom Fonts in Blogger 8\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nThis should open the kit containing 4 formats of fonts (inside the fonts folder), a CSS stylesheet \u0026amp; the html file for the demo page. The only files that you need to extract are the ones with the \u003Cb\u003E.woff\u003C\/b\u003E, \u003Cb\u003E.tff\u003C\/b\u003E, \u003Cb\u003E.svg\u003C\/b\u003E, \u003Cb\u003E.eot\u003C\/b\u003E extension and the \u003Cb\u003Estylesheet.css\u003C\/b\u003E file.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"webfontkit rar file\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-AHp7s_83gfY\/VATRe3xfQUI\/AAAAAAAAKYw\/2bWC52PeF-U\/s1600\/webfontkit-rar.png\" height=\"227\" title=\"How To Upload and Use Custom Fonts in Blogger 9\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EStep 2: Upload The Font Files To Blogger\u003C\/h3\u003E\nCustom fonts in Blogger have to be uploaded before you can use them. For this, we are going to use \u003Ca href=\"https:\/\/www.dropbox.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDropbox\u003C\/a\u003E and upload them to \u003Ca href=\"http:\/\/www.dropbox.com\/home\/Public\" rel=\"nofollow\" target=\"_blank\"\u003EPublic folder\u003C\/a\u003E (upload only the files with the \u003Cb\u003E.woff\u003C\/b\u003E, \u003Cb\u003E.tff\u003C\/b\u003E, \u003Cb\u003E.svg\u003C\/b\u003E and \u003Cb\u003E.eot\u003C\/b\u003E extension).\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"upload fonts using dropbox\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-YY_NNTcub68\/VATSc1WxujI\/AAAAAAAAKY4\/pSOZn2mhuEo\/s1600\/upload-custom-fonts-using-dropbox.png\" height=\"198\" title=\"How To Upload and Use Custom Fonts in Blogger 10\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nOnce you've uploaded them, copy the Public URL's of all 4 fonts: right click on each file, choose \"Copy public link...\" and press the \"Copy to clipboard\" button. Paste each link separately in a Notepad, so that you can link to that location later.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"copy public link in dropbox\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-RVzLraaIQFI\/VATlAol5yNI\/AAAAAAAAKZE\/yqWFeBxpHDQ\/s1600\/dropbox-copy-public-link-font.png\" height=\"250\" title=\"How To Upload and Use Custom Fonts in Blogger 11\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nNext, open up the \u003Cb\u003Estylesheet.css\u003C\/b\u003E file that came with the kit and it will show you a similar code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\/* Generated by Font Squirrel (http:\/\/www.fontsquirrel.com) on September 2, 2014 *\/\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n@font-face {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cspan style=\"color: #cc0000;\"\u003Efont-family: '\u003Cspan style=\"color: red;\"\u003Efontname\u003C\/span\u003E';\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; src: url('\u003Cspan style=\"color: blue;\"\u003Efont-name\u003Cspan style=\"background-color: yellow;\"\u003E.eot\u003C\/span\u003E\u003C\/span\u003E');\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; src: url('\u003Cspan style=\"color: blue;\"\u003Efont-name\u003Cspan style=\"background-color: yellow;\"\u003E.eot\u003C\/span\u003E\u003C\/span\u003E?#iefix') format('embedded-opentype'),\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; url('\u003Cspan style=\"color: blue;\"\u003Efont-name\u003Cspan style=\"background-color: yellow;\"\u003E.woff\u003C\/span\u003E\u003C\/span\u003E') format('woff'),\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; url('\u003Cspan style=\"color: blue;\"\u003Efont-name\u003Cspan style=\"background-color: yellow;\"\u003E.ttf\u003C\/span\u003E\u003C\/span\u003E') format('truetype'),\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; url('\u003Cspan style=\"color: blue;\"\u003Efont-name\u003Cspan style=\"background-color: yellow;\"\u003E.svg\u003C\/span\u003E\u003C\/span\u003E#\u003Cspan style=\"color: red;\"\u003Efontname\u003C\/span\u003E') format('svg');\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: normal;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-style: normal;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nEdit the link location to point toward the font file that you just uploaded to the Dropbox Public folder and pay attention to each extension which should correspond with that found in the stylesheet.css file.\u003Cbr \/\u003E\u003Cbr \/\u003E\nFor example, if you uploaded the font \u003Cspan style=\"background-color: yellow;\"\u003E.tff\u003C\/span\u003E file with this name:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nhttps:\/\/dl.dropboxusercontent.com\/u\/62316253\/amatic-bold-webfont\u003Cspan style=\"background-color: yellow;\"\u003E.ttf\u003C\/span\u003E\u003C\/blockquote\u003E\n...change the CSS link in blue in this line:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nurl('\u003Cspan style=\"color: blue;\"\u003Efont-name\u003Cspan style=\"background-color: yellow;\"\u003E.ttf\u003C\/span\u003E\u003C\/span\u003E') format('truetype'),\u003Cb\u003E \u003C\/b\u003E\u0026nbsp;\u003C\/blockquote\u003E\nto point to:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nurl('\u003Cspan style=\"color: blue;\"\u003Ehttps:\/\/dl.dropboxusercontent.com\/u\/62316253\/amatic-bold-webfont\u003Cspan style=\"background-color: yellow;\"\u003E.ttf\u003C\/span\u003E\u003C\/span\u003E') format('truetype'),\u003C\/blockquote\u003E\nAfter you've added all the links, copy the stylesheet.css code that you modified to your clipboard.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EStep 3: Editing Blogger's CSS\u003C\/h3\u003E\nOpen up the CSS on your Blogger site. This can be found by navigating to Template \u0026gt; Edit HTML. Next, click inside the code area and press the CTRL + F keys to open the search box, then type the tag below and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\nJust ABOVE this tag, add the code that you copied in the \u003Cb\u003Estylesheet.css\u003C\/b\u003E file.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"custom face fonts in blogger \" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-im6fjD_TGJo\/VAT84JP8wRI\/AAAAAAAAKZQ\/1NlY1IHiCCo\/s1600\/how-to-add-custom-font-face-to-blogger.png\" height=\"292\" title=\"How To Upload and Use Custom Fonts in Blogger 12\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nFinally, we need to declare the custom font using CSS. For example, if I want to change the font of the post title, I will add the line in red from above, just below the \"h3.post-title, .comments h4 {\" CSS selector:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nh3.post-title, .comments h4 {\u003Cbr \/\u003E\n\u003Cspan style=\"color: #cc0000;\"\u003Efont-family: '\u003Cspan style=\"color: red;\"\u003Efontname\u003C\/span\u003E';\u003C\/span\u003E\u003Cbr \/\u003E\nfont-size: 28;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nObviously, the \u003Cspan style=\"color: red;\"\u003Efontname\u003C\/span\u003E will be the actual name of the font. This will make sure that your blog can use the custom fonts in Blogger. After we've made these changes, press the \"Save Template\" button and exit.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EStep 4: Test Out the Site\u003C\/h3\u003E\nNavigate back to your sites homepage and you should now see the custom fonts in Blogger that you uploaded during the last few steps. Every time you go to make a new post, the site will now be able to use your font.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EIn Conclusion:\u003C\/h4\u003E\nWebsite design is an important part to maintain a successful blog. As a blog owner, you are responsible for providing content that isn't just fun to read, but looks good. Modifying the font is just one easy way that you can help your blog stand out without making any major changes to your blog itself.\u003Cbr \/\u003E\u003Cbr \/\u003E\nDo you have any other methods for adding custom fonts? Let us know by leaving a comment below!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/5660041648877530403\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/09\/upload-and-use-custom-fonts-in-blogger.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5660041648877530403"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5660041648877530403"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/09\/upload-and-use-custom-fonts-in-blogger.html","title":"How To Upload and Use Custom Fonts in Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-CzapIQKxT0E\/VAUUu1W1M_I\/AAAAAAAAKZo\/GRuduNWVnmw\/s72-c\/how-to-use-custom-fonts-on-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"1"}}]}});