// API callback
showrecentposts({"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":"2014-10-19T07:54:12.616-07:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"css"},{"term":"posts"},{"term":"Comments"},{"term":"jQuery"},{"term":"SEO"},{"term":"Image Effects"},{"term":"adsense"},{"term":"social media"},{"term":"Navigation"},{"term":"menus"},{"term":"adsense optimization"},{"term":"social media plugins"},{"term":"Facebook"},{"term":"blogger posts"},{"term":"popular posts"},{"term":"adsense tips"},{"term":"blogger pages"},{"term":"javascript"},{"term":"threaded comments"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"blogger"},{"term":"google plus"},{"term":"recent comments"},{"term":"related posts"},{"term":"slideshows"},{"term":"tools"},{"term":"Templates"},{"term":"custom domain"},{"term":"emoticons"},{"term":"labels"},{"term":"sitemap"},{"term":"static pages"},{"term":"RSS"},{"term":"feedburner"},{"term":"firebug"},{"term":"robots"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default?alt=json-in-script\u0026orderby=published"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default?alt=json-in-script\u0026start-index=26\u0026max-results=25\u0026orderby=published"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"189"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"25"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5227752940803414022"},"published":{"$t":"2014-09-07T20:05:00.001-07:00"},"updated":{"$t":"2014-09-13T10:02:22.953-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":"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 \/\u003EEven 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\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/hotbliggityblog.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/hotbliggityblog.com\/\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-T2QLXom-_qw\/VAuIM4ErkdI\/AAAAAAAAKeI\/T-XAGpleres\/s1600\/free-blogger-backgrounds-3.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch4\u003E\u003Ca href=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" rel=\"nofollow\" target=\"_blank\"\u003EShabby Blogs\u003C\/a\u003E\u003C\/h4\u003EShabby 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\u003Ca href=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-7SCNLTz9td0\/VAuCNaplQUI\/AAAAAAAAKdY\/Pw-EJa0r8Vs\/s1600\/AtTheBeachShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-8RgUWDx1TV0\/VAuCNcfe1nI\/AAAAAAAAKdw\/tNnGei5qyqE\/s1600\/DelucaMShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-gyPXaPUmvGU\/VAuCNRrnMcI\/AAAAAAAAKdc\/h2hZgWV4kyM\/s1600\/OwlBeThereMShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/www.shabbyblogs.com\/backgrounds.html\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-OGihLdaTfZo\/VAuCN37kkcI\/AAAAAAAAKdg\/dhpVtE3vh14\/s1600\/WorldOnFireMShabby.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003E\u003Ca href=\"http:\/\/hotbliggityblog.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EHot Bliggity Blog\u003C\/a\u003E\u003C\/h4\u003EAside 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\u003Ca href=\"http:\/\/hotbliggityblog.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/hotbliggityblog.com\/\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-XLrPbR-yztA\/VAuIM5F2xCI\/AAAAAAAAKeA\/Fkm6gWNilbk\/s1600\/free-blogger-backgrounds-1.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/hotbliggityblog.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/hotbliggityblog.com\/\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-T2QLXom-_qw\/VAuIM4ErkdI\/AAAAAAAAKeI\/T-XAGpleres\/s1600\/free-blogger-backgrounds-3.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/hotbliggityblog.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/hotbliggityblog.com\/\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-a5t4bEw5rWw\/VAuIM2ERr0I\/AAAAAAAAKeE\/Vs07FurZW9Q\/s1600\/free-blogger-backgrounds.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Cspan id=\"goog_1051388864\"\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/hotbliggityblog.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cspan id=\"goog_1051388865\"\u003E\u003C\/span\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-_JHvEVrLLVY\/VAuINuHhNOI\/AAAAAAAAKeQ\/CUvik-K3nS8\/s1600\/rRraoXU.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003E\u003Ca href=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDotty Dot Dot\u003C\/a\u003E\u003C\/h4\u003EDotty 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\u003Ca href=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-rRNswl-c2vg\/VAuYuPTrHcI\/AAAAAAAAKes\/aFuSMIM8gno\/s1600\/Pink_Polka_2c_BACKGROUND.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-vCmpZewsKW0\/VAuYuA_OL0I\/AAAAAAAAKeo\/mqwpvtmIPP8\/s1600\/Square_Buttons_3c_BACKGROUND.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-zEzp8ecXd3c\/VAuYuOlz7SI\/AAAAAAAAKfA\/iSKssQD-zqU\/s1600\/The__80s._Squared.png\" height=\"103\" width=\"173\" \/\u003E\u003C\/a\u003E\u003Ca href=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/dottydotdotdesign1.blogspot.com\/\" border=\"0\" src=\"http:\/\/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\u003Ch4\u003E\u003Ca href=\"http:\/\/leelou-blogs.com\/type\/blog-backgrounds?style\u0026color\" rel=\"nofollow\" target=\"_blank\"\u003ELeeLou Blogs\u003C\/a\u003E\u003C\/h4\u003ELee 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\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=\"http:\/\/3.bp.blogspot.com\/-1laFzaR9zZ4\/VAuhdseqRCI\/AAAAAAAAKgA\/ppZdv9VhjYo\/s1600\/leelou-blogs.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch4\u003E\u003Ca href=\"http:\/\/www.cgtextures.com\/\" rel=\"nofollow\" target=\"_blank\"\u003ECgTextures\u003C\/a\u003E\u003C\/h4\u003EIf 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.cgtextures.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/www.cgtextures.com\/\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-li5S_hcb3tM\/VAuazxRKyuI\/AAAAAAAAKfM\/4c4q-H_-TLg\/s1600\/cgtextures.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch4\u003E\u003Ca href=\"http:\/\/everystockphoto.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EEvery Stock Photo\u003C\/a\u003E\u003C\/h4\u003EBloggers 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/everystockphoto.com\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/everystockphoto.com\/\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-zat3OdSoEb8\/VAucA5MI-FI\/AAAAAAAAKfY\/t19MojmbSFc\/s1600\/everystockphoto.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch4\u003E\u003Ca href=\"http:\/\/www.shizoo-design.de\/textures.php\" rel=\"nofollow\" target=\"_blank\"\u003EShizoo-Design\u003C\/a\u003E\u003C\/h4\u003EShizoo-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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.shizoo-design.de\/textures.php\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/www.shizoo-design.de\/textures.php\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-DuD0ufu7LgI\/VAuf4wJ0-LI\/AAAAAAAAKf0\/TNmsWegoBuE\/s1600\/shizoo-design.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch4\u003E\u003Ca href=\"http:\/\/www.lizaphoenix.com\/tiles\/\" rel=\"nofollow\" target=\"_blank\"\u003EPatterns of Change\u003C\/a\u003E\u003C\/h4\u003EPatterns 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.lizaphoenix.com\/tiles\/\" rel=\"nofollow\" target=\"_blank\"\u003E\u003Cimg alt=\"http:\/\/www.lizaphoenix.com\/tiles\/\" border=\"0\" src=\"http:\/\/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\u003Ch3\u003EHow to Add a Background Image using the Blogger Template Designer\u003C\/h3\u003EIf you have a background image that you want to upload, then follow these steps:\u003Cbr \/\u003E\u003Cbr \/\u003E1. Log into your \u003Ca href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger account\u003C\/a\u003E and go to \u003Cb\u003ETemplate\u003C\/b\u003E, press the \u003Cb\u003ECustomize\u003C\/b\u003E 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-9yF1zThGxyE\/VAy8F3iaF3I\/AAAAAAAAKiY\/W2ppxtB_41A\/s1600\/upload-background-image-on-blogger-template-designer.png\" imageanchor=\"1\" rel=\"nofollow\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"change blogger background\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-9yF1zThGxyE\/VAy8F3iaF3I\/AAAAAAAAKiY\/W2ppxtB_41A\/s1600\/upload-background-image-on-blogger-template-designer.png\" height=\"126\" title=\"Where To Find Free Blogger Backgrounds and Textures 1\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E2. 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-RitmsXF06nI\/VAy8lf7AbXI\/AAAAAAAAKik\/OcvdDaHxLDs\/s1600\/upload-background-image-on-blogger.png\" imageanchor=\"1\" rel=\"nofollow\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"upload background image\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-RitmsXF06nI\/VAy8lf7AbXI\/AAAAAAAAKik\/OcvdDaHxLDs\/s1600\/upload-background-image-on-blogger.png\" height=\"153\" title=\"Where To Find Free Blogger Backgrounds and Textures 2\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ENote 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 make the file smaller.\u003Cbr \/\u003E\u003Cbr \/\u003E3. 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: \u003Cb\u003EAlignment\u003C\/b\u003E, \u003Cb\u003ETile\u003C\/b\u003E and \u003Cb\u003EScroll with page\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cbr \/\u003E\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\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;\u0026nbsp;\u003C\/li\u003E\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\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-ky6dHvXaULg\/VAzA27jfYqI\/AAAAAAAAKiw\/42VxfI1V4vE\/s1600\/background-image-scroll-with-page-blogger.png\" imageanchor=\"1\" rel=\"nofollow\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"background image position\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-ky6dHvXaULg\/VAzA27jfYqI\/AAAAAAAAKiw\/42VxfI1V4vE\/s1600\/background-image-scroll-with-page-blogger.png\" height=\"195\" title=\"Where To Find Free Blogger Backgrounds and Textures 3\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E4. For a background image with plain color in the middle for content, you might want to remove the main and header background. Navigate to \u003Cb\u003EAdvanced\u003C\/b\u003E \u0026gt; \u003Cb\u003EBackgrounds\u003C\/b\u003E and type the word \u003Cb\u003Etransparent\u003C\/b\u003E inside the \u003Cb\u003EMain Background\u003C\/b\u003E and \u003Cb\u003EHeader Background\u003C\/b\u003E box:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-Dl8pBYswf48\/VAzI15kjWSI\/AAAAAAAAKjA\/Myj4El5WusA\/s1600\/transparent-background-blogger-advanced.png\" imageanchor=\"1\" rel=\"nofollow\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"change background color\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-Dl8pBYswf48\/VAzI15kjWSI\/AAAAAAAAKjA\/Myj4El5WusA\/s1600\/transparent-background-blogger-advanced.png\" height=\"193\" title=\"Where To Find Free Blogger Backgrounds and Textures 4\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E5. 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\u003Cblockquote class=\"tr_bq\"\u003Ebody {\u003Cbr \/\u003Ebackground-size: \u003Cspan style=\"color: red;\"\u003E200%\u003C\/span\u003E;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.body-fauxcolumn-outer .cap-top {\u003Cbr \/\u003Ebackground: none;\u003Cbr \/\u003E}\u003C\/blockquote\u003ENote: to change the size of the background, modify the \u003Cspan style=\"color: red;\"\u003E200%\u003C\/span\u003E value in red.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-3I4-FKf1zBc\/VAzKUPYTpDI\/AAAAAAAAKjM\/b94f_FVGIEM\/s1600\/background-size-cover-blogger-designer.png\" imageanchor=\"1\" rel=\"nofollow\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"change background size\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-3I4-FKf1zBc\/VAzKUPYTpDI\/AAAAAAAAKjM\/b94f_FVGIEM\/s1600\/background-size-cover-blogger-designer.png\" height=\"193\" title=\"Where To Find Free Blogger Backgrounds and Textures 5\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOnce you're happy with the results, press the 'Apply to blog' button and enjoy the new background for your site.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to Change Background in a Custom Blogger Template\u003C\/h3\u003ESometimes 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 \/\u003E1. Go to \u003Cb\u003ETemplate\u003C\/b\u003E, click the \u003Cb\u003EEdit HTML\u003C\/b\u003E button and click anywhere inside the code area. Press the CTRL + F keys to open the Blogger search box:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%2Bf.png\" imageanchor=\"1\" rel=\"nofollow\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template html\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%2Bf.png\" height=\"153\" title=\"Where To Find Free Blogger Backgrounds and Textures 6\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E2. Paste or type the following tag inside the search box and hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E3. 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\u003Cbr \/\u003EFor a large background image:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ebody {\u003Cbr \/\u003Ebackground-image: url(\u003Cspan style=\"color: blue;\"\u003EIMAGE-URL.png\u003C\/span\u003E) !important;\u003Cbr \/\u003Ebackground-repeat: \u003Cspan style=\"color: #6aa84f;\"\u003Eno-repeat\u003C\/span\u003E;\u003Cbr \/\u003Ebackground-position: center top; \u003Cbr \/\u003Ebackground-attachment: fixed;\u003Cbr \/\u003Ebackground-size: \u003Cspan style=\"color: red;\"\u003E100%\u003C\/span\u003E; \u003Cbr \/\u003E}\u003C\/blockquote\u003ENote: the \u003Cspan style=\"color: #6aa84f;\"\u003Eno-repeat\u003C\/span\u003E value prevents the image from repeating either vertically or  horizontally. 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-gJe2pMBP4Wo\/VA0awXLD5YI\/AAAAAAAAKjc\/2wus1AlBWnE\/s1600\/add-background-to-blogger-body.png\" imageanchor=\"1\" rel=\"nofollow\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"adding background in blogger\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-gJe2pMBP4Wo\/VA0awXLD5YI\/AAAAAAAAKjc\/2wus1AlBWnE\/s1600\/add-background-to-blogger-body.png\" height=\"158\" title=\"Where To Find Free Blogger Backgrounds and Textures 7\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIf using a repeating pattern, add this CSS code instead:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ebody {\u003Cbr \/\u003Ebackground-image: url(\u003Cspan style=\"color: blue;\"\u003EIMAGE-URL.png\u003C\/span\u003E) !important;\u003Cbr \/\u003Ebackground-repeat: repeat;\u003Cbr \/\u003Ebackground-position: center top; \u003Cbr \/\u003Ebackground-attachment: fixed;\u003Cbr \/\u003E}\u003C\/blockquote\u003E4. 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\" style=\"color: blue;\" target=\"_blank\"\u003Ethis tutorial\u003C\/a\u003E.  \u003Cbr \/\u003E\u003Cbr \/\u003EAfter you copied it, replace the text highlighted in blue from above with your image url.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cstyle\u003Eh4 a { color: #4584BF; } .post-body ul li { list-style-type: disc; margin-left: 20px; } \u003C\/style\u003E5. Finally, Preview the template to ensure that the background image appears as you want, and press the \u003Cb\u003ESave template\u003C\/b\u003E button to save your changes. That's it! \u003Cbr \/\u003E\u003Cbr \/\u003EUsing 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":"http:\/\/helplogger.blogspot.com\/feeds\/5227752940803414022\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/09\/where-to-find-free-blogger-backgrounds-textures.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5227752940803414022"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5227752940803414022"},{"rel":"alternate","type":"text/html","href":"http:\/\/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":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-T2QLXom-_qw\/VAuIM4ErkdI\/AAAAAAAAKeI\/T-XAGpleres\/s72-c\/free-blogger-backgrounds-3.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-817510071813314466"},"published":{"$t":"2014-09-06T19:03:00.001-07:00"},"updated":{"$t":"2014-09-06T19:15:41.409-07:00"},"title":{"type":"text","$t":"How To Add an Instagram Widget in a Blogger Blog"},"content":{"type":"html","$t":"If you're not familiar with Instagram, it's a photo-sharing network that can be downloaded to your smart phone as an application. Think of it as Facebook without the status updates. By developing a simple service that does one thing, and does it well, Instagram has become one of the most prominent photo sharing apps on the market.\u003Cbr \/\u003E\u003Cbr \/\u003EThe great thing about using Instagram is that it's not just for individuals. Businesses and non-profits alike can take advantage of this service to share their day and passions with their dedicated customers and fans. These fans number nearly 200 million active users a month, and approximately 7.3 million new daily posts. That's an astonishing number of potential new customers available for you to capture.\u003Cbr \/\u003E\u003Cbr \/\u003EBy adding Instagram on Blogger as a widget, you can unleash a new visual aspect of that site and allow visitors to go beyond just words on a page. With the convenience to carry the application around on your smartphone wherever you go, you can snap pictures, apply filters, and upload that content to your profile. From the profile, a widget specially designed for Instagram on Blogger would translate that data and display the image on your site. Even those visitors that aren't members of Instagram could benefit from such a service.\u003Cbr \/\u003E\u003Cbr \/\u003EIt doesn't matter what you are sharing. Whether you're the type of person that loves to share pictures of your dinner with the world, or business owner that loves showcasing their brand in everyday life, Instagram can work for you. Adding Instagram on Blogger as a widget also offers an incredibly accessible tool for stock photos to use in new posts.\u003Cbr \/\u003E\u003Cbr \/\u003EThis guide will explain how to add an Instagram widget to your site with step-by-step instructions. The design of your new Instagram widget is entirely customizable and will allow you to modify the background color, font, and how the widget is actually displayed on the site. When you're finished, you'll find that the Instagram widget will blend together effortlessly with your current theme and make your Blogger site truly stand out from the rest.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-6mmWdXiETNQ\/VAu-ZfAC7AI\/AAAAAAAAKh8\/Zt5VKc7CxYk\/s1600\/how-to-add-an-instagram-widget-to-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"instagram widget in blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-6mmWdXiETNQ\/VAu-ZfAC7AI\/AAAAAAAAKh8\/Zt5VKc7CxYk\/s1600\/how-to-add-an-instagram-widget-to-blogger.png\" title=\"How To Add an Instagram Widget in a Blogger Blog\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to Add An Instagram Widget in Blogger\u003C\/h3\u003E1. To get the Instagram widget, access the Intagme website here: \u003Ca style=\"color: #0000ff\" href=\"http:\/\/www.intagme.com\/\" rel=\"nofollow\"\u003Ehttp:\/\/www.intagme.com\/\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E2. Type in your username \u0026gt; select Grid or Slideshow:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-KvfGPjoU55Y\/VAuv-he-CkI\/AAAAAAAAKgY\/QGPvTt_p6VI\/s1600\/intagram-widget-add-username.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"instagme username setting\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-KvfGPjoU55Y\/VAuv-he-CkI\/AAAAAAAAKgY\/QGPvTt_p6VI\/s1600\/intagram-widget-add-username.png\" title=\"How To Add an Instagram Widget in a Blogger Blog 1\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E3. Select the Thumbnail size of your images (100px is the default) and choose if you want a border around your Photos or not\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-LkKFvE89PDU\/VAuwW3Czz-I\/AAAAAAAAKgg\/EBuJD1VYL24\/s1600\/instagram-widget-thumbnail-size-border.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"instagram widget thumbnail\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-LkKFvE89PDU\/VAuwW3Czz-I\/AAAAAAAAKgg\/EBuJD1VYL24\/s1600\/instagram-widget-thumbnail-size-border.png\" title=\"How To Add an Instagram Widget in a Blogger Blog 2\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E4. To change the Background Color, simply click on the empty box and pick your favorite color \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-8Yt3aJmiFJE\/VAuwrG9jVYI\/AAAAAAAAKgo\/ictZQWfkEoo\/s1600\/instagram-widget-background-color.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"instagram background color\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-8Yt3aJmiFJE\/VAuwrG9jVYI\/AAAAAAAAKgo\/ictZQWfkEoo\/s1600\/instagram-widget-background-color.png\" title=\"How To Add an Instagram Widget in a Blogger Blog 3\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E5. If you want to show the Sharing buttons on your widget, select 'Yes', otherwise, click 'No'.\u003Cbr \/\u003E\u003Cbr \/\u003E6. Once you're satisfied with the widget, press the \"Get Code\" button and copy your code. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-YM19xAB5xnU\/VAuxu0ofd3I\/AAAAAAAAKg0\/htCnjeHihbM\/s1600\/instagram-widget-sharring-button.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"instagram sharing buttons\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-YM19xAB5xnU\/VAuxu0ofd3I\/AAAAAAAAKg0\/htCnjeHihbM\/s1600\/instagram-widget-sharring-button.png\" title=\"How To Add an Instagram Widget in a Blogger Blog 4\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E7. Log into your \u003Ca style=\"color: #0000ff\" href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\"\u003EBlogger account\u003C\/a\u003E and select your blog \u0026gt; navigate to Layout and click on the \"Add a Gadget\" link on the right side:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-YPJczemS0lE\/VAuzJXiryJI\/AAAAAAAAKhA\/nsGP4rDyEUs\/s1600\/blogger-layout-add-a-instagram-widget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"adding instagram to blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-YPJczemS0lE\/VAuzJXiryJI\/AAAAAAAAKhA\/nsGP4rDyEUs\/s1600\/blogger-layout-add-a-instagram-widget.png\" height=\"297\" title=\"How To Add an Instagram Widget in a Blogger Blog 5\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E8. In the pop-up window, scroll down and click on the \"HTML\/JavaScript\" gadget: \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-iu4THEcenbI\/VAu0IdefQEI\/AAAAAAAAKhM\/pTD9bsI7tJw\/s1600\/html-javascript-blogger-gadget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add html javascript gadget\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-iu4THEcenbI\/VAu0IdefQEI\/AAAAAAAAKhM\/pTD9bsI7tJw\/s1600\/html-javascript-blogger-gadget.png\" height=\"296\" title=\"How To Add an Instagram Widget in a Blogger Blog 6\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E9. Paste the code that you got from the Instagme website into the content section and press the 'Save' button to save the widget. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-uVp5m-eIefY\/VAu0Ou4s7rI\/AAAAAAAAKhU\/Z4EZxxvZcn4\/s1600\/html-javascript-blogger-instagram-widget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"instagram code to blogger\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-uVp5m-eIefY\/VAu0Ou4s7rI\/AAAAAAAAKhU\/Z4EZxxvZcn4\/s1600\/html-javascript-blogger-instagram-widget.png\" height=\"289\" title=\"How To Add an Instagram Widget in a Blogger Blog 7\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E10. Click and drag your widget if you want to change its position and press the \"Save Arrangement\" button on the upper right side.  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-AY-1m4PLRd4\/VAu1YfQ0ctI\/AAAAAAAAKhg\/yvtjcCVjiag\/s1600\/add-instagram-widget-to-a-blgger-blog.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger save arrangement\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-AY-1m4PLRd4\/VAu1YfQ0ctI\/AAAAAAAAKhg\/yvtjcCVjiag\/s1600\/add-instagram-widget-to-a-blgger-blog.png\" height=\"320\" title=\"How To Add an Instagram Widget in a Blogger Blog 8\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EAnd that's it! Now you have your very own Instagram widget on your Blogger blog to share new photos with visitors, and provide just a glimpse of your life when you're away from the computer. To change or add any of the photos that are displayed in the widget, you'll have to go directly through the app itself, or log on to your account via Instagram's website.\u003Cbr \/\u003E\u003Cbr \/\u003EOnce you're ready to show off your new work, let all your customers or fans know by posting a Facebook link to the site or a tweet about the changes and asking them to follow you. Just make sure that you've added a few photos before making the announcement, so that they have something to look at. After they access your widget, they can like your new photos and interact with you in entirely new ways."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/817510071813314466\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/09\/how-to-add-instagram-widget-in-blogger.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/817510071813314466"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/817510071813314466"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/09\/how-to-add-instagram-widget-in-blogger.html","title":"How To Add an Instagram Widget in a Blogger Blog"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-6mmWdXiETNQ\/VAu-ZfAC7AI\/AAAAAAAAKh8\/Zt5VKc7CxYk\/s72-c\/how-to-add-an-instagram-widget-to-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5149825099372424740"},"published":{"$t":"2014-09-04T14:53:00.001-07:00"},"updated":{"$t":"2014-09-04T15:28:08.313-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"css"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"}],"title":{"type":"text","$t":"How To Host Blogger CSS and JavaScript Files in Google Drive"},"content":{"type":"html","$t":"Anyone that has ever worked on a web design or development can tell you that where you decide to store your files is important. Every time someone visits your site, the server or host will access this location and bring up the relevant files that need to be displayed. Wherever you decide to store your files, this will have an impact on some important aspects like the speed that your site loads, your overall SEO ranking and your ability to make necessary adjustments to the site.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EThings To Think About\u003C\/h3\u003EWhen you are designing your online structure and where to store your important CSS and JavaScript files, here is a run down on how this decision might impact your site later on:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003ESite Loading Speed\u003C\/h4\u003EBy combining some of the style sheets and website files, the Blogger server only has to collect information from a single location. When you split up your files or decentralize the file system, it takes a longer time for all the data to come together to make your site possible.\u003Cbr \/\u003E\u003Cbr \/\u003ESlow loading speeds can negatively impact your SEO ratings because the slower the site is, the less likely that visitors are going to wait around for it to load. If someone visits your site and immediately clicks the 'back' button because it's taking too long to load, that is going to increase your bounce rate and provide Google with statistics that show your site is either low quality or irrelevant to the search keywords.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003EFile Storage Affects SEO\u003C\/h4\u003EIn addition to increasing your bounce rate, storing your files in a central location and managing the name of your files can affect SEO site wide. Web crawlers enlisted by Google, or some of the other search engines, index both the code on your site, and the name and directory of your files. If file names are random or not placed in the proper categories, the web crawlers aren't going to know what to do with the information.\u003Cbr \/\u003E\u003Cbr \/\u003EClear file structure and a central location provide you with incentive to organize everything and name them appropriately. All the content that is relevant to the subject of your website or blog will be in the same location for web crawlers to review.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003EStorage Locations Affect Editing Abilities\u003C\/h4\u003EShuffling through files and folders or opening up FTP connections just to make some simple edits can be a hassle, and take up a lot of time that could have otherwise have been spent writing new content.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you're a Blogger site owner, this is something you need to think about. When you need to make alterations to things like social media sharing buttons, popular posts, recent posts and related posts widgets, you have to know where everything is intended to go, or risk losing both available content and money.\u003Cbr \/\u003E\u003Cbr \/\u003ESome of the larger sites that produce hundreds of unique articles each month can't afford to have content in different locations. When articles start to get lost out of order, they run the risk of duplicating content on their site, or forgetting to post it altogether. Things should be right at your fingertips to minimize mistakes and reduce the amount of time spent editing the site while it's still live.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EStoring Javascript\/CSS Files With Google Drive\u003C\/h2\u003EStoring Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.\u003Cbr \/\u003E\u003Cbr \/\u003EGoogle Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.\u003Cbr \/\u003E\u003Cbr \/\u003EAnother beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.\u003Cbr \/\u003E\u003Cbr \/\u003EThis guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca style=\"color: #0000ff\" href=\"http:\/\/3.bp.blogspot.com\/-DSoJCIY3vnc\/VAjchiVsyUI\/AAAAAAAAKcA\/BVlcEmj-VhY\/s1600\/host-blogger-javascript-css-files-externally-using-google-drive.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"host blogger css javascript files\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-DSoJCIY3vnc\/VAjchiVsyUI\/AAAAAAAAKcA\/BVlcEmj-VhY\/s1600\/host-blogger-javascript-css-files-externally-using-google-drive.png\" height=\"255\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep 1. Prepare the CSS\/JavaScript Files\u003C\/h3\u003E\u003Cul\u003E\u003Cli\u003EFirst, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the \u0026lt;style\u0026gt; and \u0026lt;\/style\u0026gt; tags, remove them).\u0026nbsp;\u003C\/li\u003E\u003Cbr \/\u003E\u003C\/ul\u003E\u003Cul\u003E\u003Cli\u003EIn the Notepad menu, select 'File' \u0026gt; 'Save as' and type the file name with the \u003Cspan style=\"background-color: yellow;\"\u003E.css\u003C\/span\u003E extension just like I did with mycssfile.css - see the screenshot below.\u003C\/li\u003E\u003C\/ul\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-5bnFTLpOjCI\/VAjnV1OPMOI\/AAAAAAAAKcQ\/QlC0i_S14S8\/s1600\/create-a-css-style-sheet-file.png\" imageanchor=\"1\" \u003E\u003Cimg alt=\"create a css file\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-5bnFTLpOjCI\/VAjnV1OPMOI\/AAAAAAAAKcQ\/QlC0i_S14S8\/s640\/create-a-css-style-sheet-file.png\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cul\u003E\u003Cli\u003EIn the same window, choose \"All files\" in the \"Save as type\" option and set the Character Encoding to UTF-8.\u0026nbsp;\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cul\u003E\u003Cli\u003EIf you want to host a JavaScript file, add the \u003Cspan style=\"background-color: yellow;\"\u003E.js\u003C\/span\u003E extension (instead of .css) at the end of your file name (remove the \u0026lt;script\u0026gt;...\u0026lt;\/script\u0026gt; tags if you see them). Click \"Save\" and navigate to the location where you want to save the file.\u0026nbsp; \u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep 2. Upload Your File on Google Drive\u003C\/h3\u003E\u003Cul\u003E\u003Cli\u003EAccess \u003Ca href=\"https:\/\/drive.google.com\/\" rel=\"nofollow\" target=\"_blank\"\u003Ehttps:\/\/drive.google.com\u003C\/a\u003E and log in with your Gmail account. After you logged in, click on the 'Create' button and add a new separate folder to upload your JavaScript and CSS files.\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-Alf-nPMtSMw\/VAim9yg1obI\/AAAAAAAAKaE\/ShckUlaFN2g\/s1600\/google-drive-create-folder.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"create folder in Google drive\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-Alf-nPMtSMw\/VAim9yg1obI\/AAAAAAAAKaE\/ShckUlaFN2g\/s1600\/google-drive-create-folder.png\" height=\"326\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cul\u003E\u003Cli\u003EOpen the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload. \u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-XH5NYjJ9qyw\/VAitwsCBmhI\/AAAAAAAAKaU\/U-owJwkSFW0\/s1600\/upload-css-javascript-files-using-google-drive.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"upload files using google drive\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-XH5NYjJ9qyw\/VAitwsCBmhI\/AAAAAAAAKaU\/U-owJwkSFW0\/s1600\/upload-css-javascript-files-using-google-drive.png\" height=\"396\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 3\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cul\u003E\u003Cli\u003ENow, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.\u003C\/li\u003E\u003C\/ul\u003E\u003Cul\u003E\u003Cli\u003EAfter the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select 'Share': \u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-by9gdkGX2n0\/VAjBxZer-kI\/AAAAAAAAKbI\/bDQmai75aec\/s1600\/share-google-drive-css-javascript-files.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"share google drive files\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-by9gdkGX2n0\/VAjBxZer-kI\/AAAAAAAAKbI\/bDQmai75aec\/s1600\/share-google-drive-css-javascript-files.png\" height=\"366\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cul\u003E\u003Cli\u003EIn the 'Sharing settings' window, click on the 'Change' link and choose the 'Public on the web' option. Press 'Save' and copy the link(s) of your uploaded file(s) from the 'Links to share' box highlighted in blue, then paste it into a Notepad to use it later.\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-hKcrHYThraI\/VAjAjfkHF5I\/AAAAAAAAKbA\/qQswOzga2Qw\/s1600\/google-drive-link-sharing-public-on-the-web.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"javascript css file sharing\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-hKcrHYThraI\/VAjAjfkHF5I\/AAAAAAAAKbA\/qQswOzga2Qw\/s1600\/google-drive-link-sharing-public-on-the-web.png\" height=\"422\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 5\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep 3. How to Add an External CSS\/JavaScript file to Blogger\u003C\/h3\u003EBefore you can use the links, you must replace '\u003Cb\u003Ehttps:\/\/drive.google.com\/file\/d\u003C\/b\u003E' to '\u003Cb\u003Ehttps:\/\/googledrive.com\/host\u003C\/b\u003E' and remove '\u003Cb\u003E\/edit?usp=sharing\u003C\/b\u003E' in the link.\u003Cbr \/\u003E\u003Cbr \/\u003EFor example, the link to mycssfile.css that I copied looks like this:\u003Cbr \/\u003E\u003Cblockquote\u003Ehttps:\/\/drive.google.com\/file\/d\/\u003Cspan style=\"color: blue;\"\u003E0B4n9GL3eVuV-TkphMkc3SFR2Slk\u003C\/span\u003E\/edit?usp=sharing\u003C\/blockquote\u003ENotice the part in blue after the \"\/file\/d\/\" part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:\u003Cbr \/\u003E\u003Cblockquote\u003Ehttps:\/\/googledrive.com\/host\/\u003C\/blockquote\u003EAdd the file ID like this (remove the '\u003Cspan style=\"color: blue;\"\u003E\u003C\/span\u003E\/edit?usp=sharing' part):\u003Cbr \/\u003E\u003Cblockquote\u003Ehttps:\/\/googledrive.com\/host\/\u003Cspan style=\"color: blue;\"\u003E0B4n9GL3eVuV-TkphMkc3SFR2Slk\u003C\/span\u003E\u003C\/blockquote\u003ENow log into your Blogger account, select your blog and go to Template \u0026gt; Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%2Bf.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"open blogger search box\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%2Bf.png\" height=\"246\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 6\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIf you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;head\u0026gt;\u003C\/blockquote\u003EJust BELOW the \u0026lt;head\u0026gt; tag, add this line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"\u003Cspan style=\"color: blue;\"\u003Ehttps:\/\/googledrive.com\/host\/0B4n9GL3eVuV-TkphMkc3SFR2Slk\u003C\/span\u003E\" \/\u0026gt;\u003C\/blockquote\u003EAnd replace \u003Cspan style=\"color: blue;\"\u003Ehttps:\/\/googledrive.com\/host\/0B4n9GL3eVuV-TkphMkc3SFR2Slk\u003C\/span\u003E with the link of your CSS file:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-koIriKPhTw0\/VAjSDH-kRwI\/AAAAAAAAKbo\/MiCnwqDc780\/s1600\/add-external-css-style-sheet-file-to-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add external css to blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-koIriKPhTw0\/VAjSDH-kRwI\/AAAAAAAAKbo\/MiCnwqDc780\/s1600\/add-external-css-style-sheet-file-to-blogger.png\" height=\"254\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 7\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIf you want to add a Javascript file, search for the following tag:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/body\u0026gt;\u003C\/blockquote\u003EAnd add this line just ABOVE it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script src='\u003Cspan style=\"color: blue;\"\u003Ehttps:\/\/googledrive.com\/host\/0B4n9GL3eVuV-eVYwLXBrTlZrVDg\u003C\/span\u003E' type='text\/javascript'\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003EReplace the line in blue with your URL:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-K9qzNXy0VXQ\/VAjS9XPsbvI\/AAAAAAAAKbw\/R-XytJ2UoDA\/s1600\/add-javascript-file-to-blogger-template.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add external javascript js to blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-K9qzNXy0VXQ\/VAjS9XPsbvI\/AAAAAAAAKbw\/R-XytJ2UoDA\/s1600\/add-javascript-file-to-blogger-template.png\" height=\"248\" title=\"How To Host Blogger CSS and JavaScript Files in Google Drive 8\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EFinally, press the 'Save template' button to save the changes. And you're done!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cstyle\u003E.post-body ul li { list-style-type: disc; margin-left: 30px; } .post-body h4 { font-size: 17px; color: #777; } \u003C\/style\u003E\u003Ch4\u003EIn Conclusion\u003C\/h4\u003EOnce you have successfully saved all your file folders and closed out of the drive. Open your site in a browser and make sure that all the changes have completed successfully.\u003Cbr \/\u003E\u003Cbr \/\u003ENext time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.\u003Cbr \/\u003E\u003Cbr \/\u003EAs you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/5149825099372424740\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/09\/host-blogger-css-javascript-files-in-google-drive.html#comment-form","title":"2 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5149825099372424740"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5149825099372424740"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/09\/host-blogger-css-javascript-files-in-google-drive.html","title":"How To Host Blogger CSS and JavaScript Files in Google Drive"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-DSoJCIY3vnc\/VAjchiVsyUI\/AAAAAAAAKcA\/BVlcEmj-VhY\/s72-c\/host-blogger-javascript-css-files-externally-using-google-drive.png","height":"72","width":"72"},"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5660041648877530403"},"published":{"$t":"2014-09-01T17:54:00.001-07:00"},"updated":{"$t":"2014-09-02T03:37:19.303-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 \/\u003EComplementing 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\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-CzapIQKxT0E\/VAUUu1W1M_I\/AAAAAAAAKZo\/GRuduNWVnmw\/s1600\/how-to-use-custom-fonts-on-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-CzapIQKxT0E\/VAUUu1W1M_I\/AAAAAAAAKZo\/GRuduNWVnmw\/s1600\/how-to-use-custom-fonts-on-blogger.png\" height=\"263\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003E\u003Cspan style=\"color: #777;\"\u003EThe Different Types of Font\u003C\/span\u003E\u003C\/h3\u003EBefore 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:\u003Cbr \/\u003E\u003Cbr \/\u003E\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\u003Cli\u003ESans-serif - modern looking letter strokes that lack the decorate lines at the end; instead the letter end abruptly.\u003C\/li\u003E\u003Cli\u003EScript - a handwriting typeface that looks like cursive letters or custom strokes.\u003C\/li\u003E\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\u003Cbr \/\u003EWithin 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\u003Ch3\u003E\u003Cspan style=\"color: #777;\"\u003EWhere to Find Font\u003C\/span\u003E\u003C\/h3\u003EYou 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 \u003Ca href=\"http:\/\/www.google.com\/webfonts\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EGoogle Web Fonts\u003C\/a\u003E which can be a good place to start looking around for custom fonts in Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003EUsing 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\u003Ch2\u003E\u003Cspan style=\"color: #777;\"\u003EAdding a Custom Font to Blogger from Google Web Font\u003C\/span\u003E\u003C\/h2\u003E\u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003EStep 1. \u003C\/b\u003E\u003C\/span\u003ETo browse the Google Fonts library, access \u003Ca href=\"http:\/\/www.google.com\/webfonts\" rel=\"nofollow\" style=\"color: blue;\" 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 \/\u003ETo 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-m94srvi-Gd8\/VANnLJZPtYI\/AAAAAAAAKXQ\/F8ax1oAFgBw\/s1600\/find-custom-google-web-fonts.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"google web fonts\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003EStep 2. \u003C\/b\u003E\u003C\/span\u003EOnce 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 \/\u003EThe link to style sheet would look like this:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=FONTNAME' rel='stylesheet' type='text\/css'\u0026gt;\u003C\/blockquote\u003EAnd the CSS style would look like this:\u003Cbr \/\u003E\u003Cblockquote\u003Efont-family: 'FONTNAME', cursive;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-a7oEScMaKS8\/VANtHRLfqoI\/AAAAAAAAKXc\/GZGBgqeM8RM\/s1600\/google-fonts-stylesheet-css-to-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"google fonts CSS\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003EStep 3. \u003C\/b\u003E\u003C\/span\u003ENow 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.\u0026nbsp; \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E\u003C\/span\u003E From the same \"Template\" location, press the \"Edit HTML\" button:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-7gKKBH5E11g\/VAULygeH3nI\/AAAAAAAAKZc\/O3owc0HYHhw\/s1600\/blogger-dashboard.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-7gKKBH5E11g\/VAULygeH3nI\/AAAAAAAAKZc\/O3owc0HYHhw\/s1600\/blogger-dashboard.png\" height=\"191\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003EStep 5. \u003C\/b\u003E\u003C\/span\u003EClick 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-C47EdU9DGkc\/VANxLP4JxlI\/AAAAAAAAKXk\/3H4HhgOW0d4\/s1600\/add-custom-font-to-blogger-template.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"adding custom font to blogger\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003EStep 6. \u003C\/b\u003E\u003C\/span\u003EDirectly 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\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\u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003EStep 7.\u003C\/b\u003E\u003C\/span\u003E 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\" style=\"color: blue;\" target=\"_blank\"\u003EAdd CSS rules to Design a Blogger blog using Firebug\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EFor 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\u003Cblockquote class=\"tr_bq\"\u003Eh3.post-title, .comments h4 {\u003Cbr \/\u003E\u003Cspan style=\"color: white;\"\u003E\u003Cspan style=\"background-color: #3d85c6;\"\u003E\u0026nbsp; font-family: 'Rancho', cursive;\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026nbsp; font-size: 28px;\u003C\/b\u003E\u003Cbr \/\u003E}\u003C\/blockquote\u003EWhere \"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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-pjO0Jjb8MFU\/VAN6dYCVnqI\/AAAAAAAAKXw\/Dw0Zc62rimA\/s1600\/custom-google-web-font-to-blogger-post-titles.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom font to blogger titles\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EYou 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-h2MGWIONdmA\/VAN8sk8lybI\/AAAAAAAAKX4\/anWeOdW2nQA\/s1600\/add-custom-font-using-blogger-template-designer.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"css, blogger template designer\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #674ea7;\"\u003EStep 8.\u003C\/span\u003E \u003C\/b\u003EFinally, press the \"Save Template\" button and you're all set!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003E\u003Cspan style=\"color: #777;\"\u003EUsing a Custom Font that isn't on Google Web Fonts\u003C\/span\u003E\u003C\/h2\u003ESome of the good places to find free fonts are \u003Ca href=\"http:\/\/www.dafont.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EDaFont\u003C\/a\u003E, \u003Ca href=\"http:\/\/www.fontsquirrel.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EFontSquirrel\u003C\/a\u003E and \u003Ca href=\"http:\/\/www.urbanfonts.com\/\" rel=\"nofollow\" style=\"color: blue;\" 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-51IWI628nH8\/VAOIa81mN3I\/AAAAAAAAKYQ\/iGy--ycsSSQ\/s1600\/download-fonts-in-tff-format.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"fontsquirell download font\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003E\u003Cspan style=\"color: #777;\"\u003EStep 1: Convert the Font File\u003C\/span\u003E\u003C\/h3\u003EThe 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:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EFontsquirrels\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.font2web.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EFont2web\u003C\/a\u003E\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003EIf you are using the \u003Ca href=\"http:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EFont Squirrel Webfont Generator\u003C\/a\u003E: 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-oGiyQNp72JE\/VAOHUNBN_DI\/AAAAAAAAKYI\/gJ6gdLOFqig\/s1600\/convert-font-to-font-face-using-font-squirrel.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"font squirrel webfont generator\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-AHp7s_83gfY\/VATRe3xfQUI\/AAAAAAAAKYw\/2bWC52PeF-U\/s1600\/webfontkit-rar.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"webfontkit rar file\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003E\u003Cspan style=\"color: #777;\"\u003EStep 2: Upload The Font Files To Blogger\u003C\/span\u003E\u003C\/h3\u003ECustom 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\" style=\"color: blue;\" target=\"_blank\"\u003EDropbox\u003C\/a\u003E and upload them to \u003Ca href=\"http:\/\/www.dropbox.com\/home\/Public\" rel=\"nofollow\" style=\"color: blue;\" 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-YY_NNTcub68\/VATSc1WxujI\/AAAAAAAAKY4\/pSOZn2mhuEo\/s1600\/upload-custom-fonts-using-dropbox.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"upload fonts using dropbox\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOnce 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-RVzLraaIQFI\/VATlAol5yNI\/AAAAAAAAKZE\/yqWFeBxpHDQ\/s1600\/dropbox-copy-public-link-font.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"copy public link in dropbox\" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ENext, 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\u003Cblockquote class=\"tr_bq\"\u003E\/* Generated by Font Squirrel (http:\/\/www.fontsquirrel.com) on September 2, 2014 *\/\u003Cbr \/\u003E\u003Cbr \/\u003E@font-face {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cspan style=\"color: #cc0000;\"\u003Efont-family: '\u003Cspan style=\"color: red;\"\u003Efontname\u003C\/span\u003E';\u003C\/span\u003E\u003Cbr \/\u003E\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\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\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\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\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\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: normal;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-style: normal;\u003Cbr \/\u003E}\u003C\/blockquote\u003EEdit 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 \/\u003EFor example, if you uploaded the font \u003Cspan style=\"background-color: yellow;\"\u003E.tff\u003C\/span\u003E file with this name:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ehttps:\/\/dl.dropboxusercontent.com\/u\/62316253\/amatic-bold-webfont\u003Cspan style=\"background-color: yellow;\"\u003E.ttf\u003C\/span\u003E\u003C\/blockquote\u003E...change the CSS link in blue in this line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Eurl('\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\u003Eto point to:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Eurl('\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\u003EAfter you've added all the links, copy the stylesheet.css code that you modified to your clipboard.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E\u003Cspan style=\"color: #777;\"\u003EStep 3: Editing Blogger's CSS\u003C\/span\u003E\u003C\/h3\u003EOpen 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\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003EJust ABOVE this tag, add the code that you copied in the \u003Cb\u003Estylesheet.css\u003C\/b\u003E file.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-im6fjD_TGJo\/VAT84JP8wRI\/AAAAAAAAKZQ\/1NlY1IHiCCo\/s1600\/how-to-add-custom-font-face-to-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom face fonts in blogger \" border=\"0\" src=\"http:\/\/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\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EFinally, 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\u003Cblockquote class=\"tr_bq\"\u003Eh3.post-title, .comments h4 {\u003Cbr \/\u003E\u003Cspan style=\"color: #cc0000;\"\u003Efont-family: '\u003Cspan style=\"color: red;\"\u003Efontname\u003C\/span\u003E';\u003C\/span\u003E\u003Cbr \/\u003Efont-size: 28;\u003Cbr \/\u003E}\u003C\/blockquote\u003EObviously, 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\u003Cstyle\u003E.post-body ul li { list-style-type: square; margin-left: 20px; } \u003C\/style\u003E\u003Ch3\u003E\u003Cspan style=\"color: #777;\"\u003EStep 4: Test Out the Site\u003C\/span\u003E\u003C\/h3\u003ENavigate 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\u003Ch4\u003E\u003Cspan style=\"color: #777;\"\u003EIn Conclusion:\u003C\/span\u003E\u003C\/h4\u003EWebsite 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 \/\u003EDo 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":"http:\/\/helplogger.blogspot.com\/feeds\/5660041648877530403\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/09\/upload-and-use-custom-fonts-in-blogger.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5660041648877530403"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5660041648877530403"},{"rel":"alternate","type":"text/html","href":"http:\/\/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":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/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":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-510798521604977025"},"published":{"$t":"2014-08-27T19:46:00.001-07:00"},"updated":{"$t":"2014-09-03T13:44:58.251-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"popular posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"How to Display Most Commented Posts in Blogger"},"content":{"type":"html","$t":"One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you'll need a most commented posts widget for Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003EHaving a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you're going to need a few specific things to help you out.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s1600\/most-commented-posts-widget-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"most commented posts widget\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s1600\/most-commented-posts-widget-for-blogger.png\" height=\"254\" title=\"Get a Most Commented Posts Widget For Blogger\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/helplogger-demo-blog2.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EHere's What You're Going To Get\u003C\/h3\u003EThere are certain aspects in the design of a most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cstyle\u003E.post-body ul li { list-style-type: disc; margin: 0px 20px 0px 40px; } \u003C\/style\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EOrdered by popularity.\u003C\/b\u003E The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look. \u003C\/li\u003E\u003C\/ul\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EGraphic incorporation.\u003C\/b\u003E Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design. \u003C\/li\u003E\u003C\/ul\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EDescriptions that blend in.\u003C\/b\u003E The internet today revolves around the value that you can provide each individual user. People don't just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn't able to provide. By having descriptions that blend in, you'll be able to enhance the perceived value that your site can provide. This leads to more clicks!\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003ERelated: \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/add-multi-colored-popular-posts-to.html\" style=\"color: blue;\" target=\"_blank\"\u003EAdd Multi-Colored Popular Posts to Blogger\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EAdd the Most Commented Posts Widget to Blogger\u003C\/h2\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E Log in to your \u003Ca href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger account\u003C\/a\u003E and go to Template, press the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EStep 2.\u003C\/b\u003E Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type the following tag inside it and hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/Group\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E Just below \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/Group\u0026gt;\u003C\/span\u003E, add this code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;Group description=\"Most Commented\" selector=\".most-commented\"\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background1\" description=\"background color1\" type=\"color\" default=\"#fa4242\" value=\"#ee377a\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background2\" description=\"background color2\" type=\"color\" default=\"#ee6107\" value=\"#fcad37\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background3\" description=\"background color3\" type=\"color\" default=\"#f0f\" value=\"#f8e000\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background4\" description=\"background color4\" type=\"color\" default=\"#ff0\" value=\"#c7e93d\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background5\" description=\"background color5\" type=\"color\" default=\"#0ff\" value=\"#5ebded\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/Group\u0026gt; \u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-i0vbvq6PEvg\/U_6Jt4UbCuI\/AAAAAAAAKUc\/rFhQdhYvbu4\/s1600\/add-css-to-blogger-template-html.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add code to blogger html\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-i0vbvq6PEvg\/U_6Jt4UbCuI\/AAAAAAAAKUc\/rFhQdhYvbu4\/s1600\/add-css-to-blogger-template-html.png\" height=\"312\" title=\"Get a Most Commented Posts Widget For Blogger 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003ENote: if you can't find the \u0026lt;\/Group\u0026gt; tag, try to find the following tag instead and add the variables just below it:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E Now search for the following tag (CTRL + F):\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003EStep 5.\u003C\/b\u003E And just above it, add this CSS code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.comment-count {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 3px 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: #fff;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #000;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: right;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px !important;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-family: Century Gothic, sans-serif;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul li {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; list-style-type: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #555;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-top: -10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul li a {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #444;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 11px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul li img {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0px 5px 0px 0px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 60px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; height: 60px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(3n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background1);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 100%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(4n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background2);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 95%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(5n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background3);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 90%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(6n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background4);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 85%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(7n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background5);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 80%;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cb\u003EStep 6.\u003C\/b\u003E Save the template.\u003Cbr \/\u003E\u003Cbr \/\u003ENow, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the \"Layout\" section of your Blogger dashboard and click on the \"Add a gadget\" link on the right side. From the pop-up window, scroll down the list and select the \"HTML\/JavaScript\" gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-Zc2SWHxGoro\/UxKtggDDdoI\/AAAAAAAAGYw\/HGTfkT8XV6c\/s1600\/add-a-gadget-or-page-element-html-javascript-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger html javascript gadget\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-Zc2SWHxGoro\/UxKtggDDdoI\/AAAAAAAAGYw\/HGTfkT8XV6c\/s1600\/add-a-gadget-or-page-element-html-javascript-blogger.png\" height=\"308\" title=\"Get a Most Commented Posts Widget For Blogger 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ECopy and paste this script inside the content box:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Efunction stripTags(s,n) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; return s.replace(\/\u0026lt;.*?\u0026gt;\/ig,\"\").split(\/\\s+\/).slice(0,n-1).join(\" \")\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction mostcommented(feed) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var i;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; for (i = 0; i \u0026lt; feed.count ; i++) {\u003Cbr \/\u003Evar postURL = \"'\" + feed.value.items[i].link + \"'\";\u003Cbr \/\u003Evar postTitle = feed.value.items[i].title;\u003Cbr \/\u003Evar postthumbnail = \"\u0026lt;img src=\"+feed.value.items[i].postthumbnail+\" \/\u0026gt;\";\u003Cbr \/\u003Evar postDescription = feed.value.items[i].postdescription;\u003Cbr \/\u003Evar postComments = feed.value.items[i].commentcount;\u003Cbr \/\u003Evar postList = '\u0026lt;div class=\"most-commented\"\u0026gt;\u0026lt;ul\u0026gt;\u0026lt;li\u0026gt;\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\" + postthumbnail + \"\u0026lt;a href=\"+ postURL + '\"\u0026gt;' + postTitle + \"\u0026lt;\/a\u0026gt;\"\u0026nbsp; + '\u0026lt;p\u0026gt;' +stripTags(postDescription,\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E)+'...\u0026lt;\/p\u0026gt;' + '\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003E\u0026nbsp;document.write(postList);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;}\u003Cbr \/\u003E\u0026nbsp;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/pipes.yahoo.com\/pipes\/pipe.run?\u003Cbr \/\u003EAddUrlHere=\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u0026amp;NumberofPosts=5\u003Cbr \/\u003E\u0026amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c\u003Cbr \/\u003E\u0026amp;_callback=mostcommented\u003Cbr \/\u003E\u0026amp;_render=json\"\u003Cbr \/\u003Etype=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;span style=\"font-size: 80%; float:left;\"\u0026gt;\u0026lt;a href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html\"\u0026gt;Add this widget\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003EHere, change \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E with your blog URL. If you want to add more characters to the description, modify the \"\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E\" value in red from \"postDescription,\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want a more simple look (without the thumbnails and post snippets), add this script instead:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Efunction stripTags(s,n)\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; return s.replace(\/\u0026lt;.*?\u0026gt;\/ig,\"\").split(\/\\s+\/).slice(0,n-1).join(\" \")\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction mostcommented(feed) {\u003Cbr \/\u003E\u0026nbsp;var i;\u003Cbr \/\u003E\u0026nbsp;for (i = 0; i \u0026lt; feed.count ; i++)\u003Cbr \/\u003E\u0026nbsp;{\u003Cbr \/\u003Evar postURL = \"'\" + feed.value.items[i].link + \"'\";\u003Cbr \/\u003Evar postTitle = feed.value.items[i].title;\u003Cbr \/\u003Evar postComments = feed.value.items[i].commentcount;\u003Cbr \/\u003Evar postList = '\u0026lt;div class=\"most-commented\"\u0026gt;\u0026lt;ul\u0026gt;\u0026lt;li style=\"margin-bottom: 10px\"\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\"\u003C\/span\u003E + \"\u0026lt;a href=\"+ postURL + '\"\u0026gt;' + postTitle + \"\u0026lt;\/a\u0026gt;\"\u0026nbsp; + '\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003E\u0026nbsp;document.write(postList);\u003Cbr \/\u003E\u0026nbsp;}\u003Cbr \/\u003E\u0026nbsp;}\u003Cbr \/\u003E\u0026nbsp;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/pipes.yahoo.com\/pipes\/pipe.run?\u003Cbr \/\u003E\u0026nbsp;AddUrlHere=\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u0026amp;NumberofPosts=5\u003Cbr \/\u003E\u0026amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c\u003Cbr \/\u003E\u0026amp;_callback=mostcommented\u003Cbr \/\u003E\u0026amp;_render=json\"\u003Cbr \/\u003Etype=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;span style=\"font-size: 80%; float:left;\"\u0026gt;\u0026lt;a href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html\"\u0026gt;Add this widget\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003E.... and replace \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/b\u003E\u003C\/span\u003E with your address.\u003Cbr \/\u003ETo add the \"comments\" text after the comments number, replace the line in red:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\"\u003C\/blockquote\u003Ewith:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \" comments\" + \"\u0026lt;\/div\u0026gt;\" \u003C\/blockquote\u003EOnce you have finished adding your own settings, press the \"Save\" button to enable the gadget in the sidebar of your blog. That's it! \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-cjBpQNPMQ60\/U_6G0isVF-I\/AAAAAAAAKUQ\/oqaazvKqA6U\/s1600\/add-blogger-gadget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"configure html javascript gadget\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-cjBpQNPMQ60\/U_6G0isVF-I\/AAAAAAAAKUQ\/oqaazvKqA6U\/s1600\/add-blogger-gadget.png\" height=\"316\" title=\"Get a Most Commented Posts Widget For Blogger 3\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ETo change the background colors of the most commented posts, go to \"Template\" \u0026gt; hit the \"Customize\" button and navigate to \"Advanced\" \u0026gt; \"Most Commented\" tab. Here you can pick 5 different colors by clicking on the color boxes: \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-4V_1aaQJEXo\/U_6DhzitBoI\/AAAAAAAAKUE\/Q2ajaX16Iek\/s1600\/most-commented-posts-blogger-widget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template designer\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-4V_1aaQJEXo\/U_6DhzitBoI\/AAAAAAAAKUE\/Q2ajaX16Iek\/s1600\/most-commented-posts-blogger-widget.png\" height=\"312\" title=\"Get a Most Commented Posts Widget For Blogger 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOnce you've selected your favorite color scheme, click the \"Apply to blog\" button to save the changes... and you're done.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EWhy Use the Most Commented Posts widget?\u003C\/h3\u003EThe basic psychology in every human is that they want to feel like they belong to a community. That's exactly what this customized widget will bring to your site. No matter what content drew a visitor to see your content, this widget will invite them to join the lively parts of your piece of the internet. This helps to build relationships, with you and with other visitors, and this relationship-building engagement is what you need to start having real value.\u003Cbr \/\u003E\u003Cbr \/\u003ETake the time to install this most commented posts widget on your site and you'll see for yourself why this is one of the most useful widgets that is available right now. Enjoy ;)"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/510798521604977025\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/510798521604977025"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/510798521604977025"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html","title":"How to Display Most Commented Posts in Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s72-c\/most-commented-posts-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4574405076888037797"},"published":{"$t":"2014-08-26T17:42:00.000-07:00"},"updated":{"$t":"2014-08-26T18:10:54.099-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"firebug"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"How Firebug Helps You Design Your Blogger Blog"},"content":{"type":"html","$t":"For most bloggers, the idea of adjusting the coding of their blog to improve the user experience is daunting at best and often quite frightening. HTML5, CSS, and other coding elements are their own virtual language and for the average Blogger user looking to update a personal blog, the automatic settings are about as good as it gets. What if there was a better way to code a blog, whether a beginner or a pro, that could be done within the browser itself?\u003Cbr \/\u003E\u003Cbr \/\u003EIf you're using Firefox or Chrome, then you should also be using Firebug. It allows you to code your website in real time, so you can maximize the UX of your blog in no time at all.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-BwT63xd7b4w\/U_0ompuEzHI\/AAAAAAAAKTU\/f-9nkWtTbgA\/s1600\/firebug-blogger-customization-made-easy.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-BwT63xd7b4w\/U_0ompuEzHI\/AAAAAAAAKTU\/f-9nkWtTbgA\/s1600\/firebug-blogger-customization-made-easy.png\" height=\"175\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EYou No Longer Need To Edit Through Blogger!\u003C\/h3\u003EIf you've ever tried to update a Blogger theme through the editing functions of the website, then you know how difficult it can be. You can preview your designs, but you can't save any changes to officially see what is going to happen with your site until you publish the edits. If you've missed just one line of code or forgotten one small element, you're going to have to go back into the editing matrix, find the error, update it again, and repeat until you have a responsive blog once again.\u003Cbr \/\u003E\u003Cbr \/\u003EWhat Firebug allows you to do is see all of those elements that make up a website in real time. Instead of editing and then publishing, you can edit in real time and see updates happen, all without affecting the user experiences of visitors that are coming to your site while you're editing. You can change the fonts, colors, or virtually anything else within the design of the site quickly and see the results of your work as it happens. Don't like it? Just undo your changes.\u003Cbr \/\u003E\u003Cbr \/\u003EIt's really that easy.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EUsing Firebug to Customize CSS in Blogger\u003C\/h2\u003EThis guide will show you how to modify the CSS code of a Blogger template. Usually, the Blogger Template CSS style declarations are editable through the style.css file, found between the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;b:skin\u0026gt;\u003C\/span\u003E and \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E tags.\u003Cbr \/\u003E\u003Cbr \/\u003ETo download Firebug and get more details regarding its powerful features, visit: \u003Ca href=\"https:\/\/getfirebug.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EFirebug\u003C\/a\u003E for Firefox, or if you are using Chrome, get the \u003Ca href=\"https:\/\/chrome.google.com\/webstore\/detail\/firebug-lite-for-google-c\/bmagokdooijbeehmkpknfglimnifench\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EFirebug Lite\u003C\/a\u003E app. I would recommend to use Firefox, which is more complete and quick, but, nevertheless, both work the same.\u003Cbr \/\u003E\u003Cbr \/\u003EOnce Firebug is installed, a small bug icon will be available in the upper right of your Web browser's address bar. Clicking it, a horizontally split screen will be shown at the bottom of the browser's window. The page will continue to show in the upper half, while the lower half will show the HTML of the current web page.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-_QEG9njmf_Q\/U_0Hledhz8I\/AAAAAAAAKR4\/kQNY_NCAu0M\/s1600\/inspect-blogger-element-with-firebug.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"firebug\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-_QEG9njmf_Q\/U_0Hledhz8I\/AAAAAAAAKR4\/kQNY_NCAu0M\/s1600\/inspect-blogger-element-with-firebug.png\" height=\"344\" title=\"How Firebug Helps You Design Your Blogger Blog 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ETo customize any web element from a Blogger template, just click either on the Firebug icon in the toolbar, or the \"Inspect Element with Firebug\" item in the context menu. Next, click the blue cursor button to Inspect and place the cursor right over the element to customize.\u003Cbr \/\u003E\u003Cbr \/\u003EFor example, let's say that we want to change the title of the \"Blog Archive\" gadget. After we clicked the inspect button, mouse over the \"Blog Archive\" title which will be highlighted as shown in the screenshot below. To change this element, click on it:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-320KM6sq5Rc\/U_0IXsFrBdI\/AAAAAAAAKSA\/UC4PM2N1hZY\/s1600\/inspect-blogger-with-firebug.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"inspect element using firebug\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-320KM6sq5Rc\/U_0IXsFrBdI\/AAAAAAAAKSA\/UC4PM2N1hZY\/s1600\/inspect-blogger-with-firebug.png\" height=\"312\" title=\"How Firebug Helps You Design Your Blogger Blog 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ENow that we decided which element we want to change, right click on the \"Style\" panel and select the \"Add rule\" option:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-l10GmBMnZXs\/U_0N04UawtI\/AAAAAAAAKSQ\/Z5230lRK6sI\/s1600\/firebug-add-rule-blogger-archive-gadget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add CSS rule in firebug\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-l10GmBMnZXs\/U_0N04UawtI\/AAAAAAAAKSQ\/Z5230lRK6sI\/s1600\/firebug-add-rule-blogger-archive-gadget.png\" height=\"260\" title=\"How Firebug Helps You Design Your Blogger Blog 3\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis will give the class or the id of the highlighted element - in our case, the heading of the Blog Archive (#BlogArchive1 \u0026gt; h2). To edit this rule that we just added, click anywhere near the left curly bracket that will open a text box, so that we can type a new CSS declaration:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-_nC6aJumw1o\/U_0RTnlhMvI\/AAAAAAAAKSc\/cAT04IC2Dek\/s1600\/edit-blogger-template-using-firebug.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"firebug css declaration \" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-_nC6aJumw1o\/U_0RTnlhMvI\/AAAAAAAAKSc\/cAT04IC2Dek\/s1600\/edit-blogger-template-using-firebug.png\" height=\"240\" title=\"How Firebug Helps You Design Your Blogger Blog 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EAnd here comes the fun part. Let's say that we want to make the title red. We will type \u003Cb\u003E\u003Cspan style=\"color: #6aa84f;\"\u003Ecolor\u003C\/span\u003E\u003C\/b\u003E and hit Enter, then we will type the color value or the \u003Cb\u003E\u003Cspan style=\"color: #674ea7;\"\u003Ered\u003C\/span\u003E\u003C\/b\u003E text and hit Enter. We will also set the set the font size to 20px, text alignment to center (text-align: center) and make the text underlined (text-decoration: underline):\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-NGwAyK04sis\/U_0ThdKVtBI\/AAAAAAAAKSo\/ujZbHP4NEpg\/s1600\/add-css-declarations-to-blogger-using-firebug.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"modify blogger css with firebug\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-NGwAyK04sis\/U_0ThdKVtBI\/AAAAAAAAKSo\/ujZbHP4NEpg\/s1600\/add-css-declarations-to-blogger-using-firebug.png\" height=\"266\" title=\"How Firebug Helps You Design Your Blogger Blog 5\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThe cool thing about Firebug is that when modifying any CSS property, you can see the results directly applied on the page. So, after adding these declarations, we'll see a big red underlined title for our Blog Archive gadget (see in the screenshot above).\u003Cbr \/\u003E\u003Cbr \/\u003ETo apply this CSS rule on a Blogger template, just select it beginning from the right curly bracket and to the #(id) or .(class) symbol, then right click it and Copy the CSS code.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-YF9beCIlomQ\/U_0YePNJNuI\/AAAAAAAAKS4\/EbAd-QIHdA4\/s1600\/copy-css-rule-from-firebug.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"copy firebug css rule\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-YF9beCIlomQ\/U_0YePNJNuI\/AAAAAAAAKS4\/EbAd-QIHdA4\/s1600\/copy-css-rule-from-firebug.png\" height=\"322\" title=\"How Firebug Helps You Design Your Blogger Blog 6\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EBefore making any change, it's highly recommended to make a backup of your current template. Go to \"Template\" and click the \"Backup\/Restore\" button on the upper right side. On the same \"Template\" location, click on the \"Customize\" button and navigate to \"Advanced\" \u0026gt; \"Add CSS\". Paste the CSS rule that you just copied into the CSS box:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-QgTkxCRjtA4\/U_0atFTwMfI\/AAAAAAAAKTE\/eJ0J2NESu_M\/s1600\/blogger-template-add-css-rule.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add firebug css to blogger template\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-QgTkxCRjtA4\/U_0atFTwMfI\/AAAAAAAAKTE\/eJ0J2NESu_M\/s1600\/blogger-template-add-css-rule.png\" height=\"226\" title=\"How Firebug Helps You Design Your Blogger Blog 7\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EClick the \"Apply to blog\" button on the upper right corner to save the changes and view your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EFirebug Also Gives You One Distinct Advantage...\u003C\/h3\u003EOne of the best reasons to install Firebug into Chrome or Firefox is that it allows you to emulate some of your favorite website designs quickly and easily. Instead of hiring a web designer to do the work, which could cost you thousands, you can simply start Firebug and see what the CSS styles are for your favorite site. This allows you to create a similar widget.\u003Cbr \/\u003E\u003Cbr \/\u003EFrom there, all you've got to do is change the coding to make the design elements work under the rules of your own custom.css. This means you can make easy design changes to your Blogger blog without having to go through all of the menus and editing functions so that your template can truly be your own. Do you have some work to do? Sure - but Firebug does all of the primary work for you.\u003Cbr \/\u003E\u003Cbr \/\u003EAll you've got to do is have a creative mind and a few minutes to make changes to the coding design. Whether you've been coding for years or are just starting your first blog, this is definitely the best way to make sure that your visitors have the best experience possible!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/4574405076888037797\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/how-firebug-helps-you-design-your.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4574405076888037797"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4574405076888037797"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/how-firebug-helps-you-design-your.html","title":"How Firebug Helps You Design Your Blogger Blog"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-BwT63xd7b4w\/U_0ompuEzHI\/AAAAAAAAKTU\/f-9nkWtTbgA\/s72-c\/firebug-blogger-customization-made-easy.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5139881597079136147"},"published":{"$t":"2014-08-25T20:56:00.003-07:00"},"updated":{"$t":"2014-08-26T11:03:28.868-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Image Effects"}],"title":{"type":"text","$t":"Add a Pinterest Pin It Mouseover Button on Blogger Images"},"content":{"type":"html","$t":"Images have always played a prominent role in \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/07\/blogger-seo-image-optimization.html\" target=\"_blank\"\u003Eattracting new visitors\u003C\/a\u003E through search engines like Google and Bing. But when Pinterest decided to enter the social media mix, it upped the ante in a big way.\u003Cbr \/\u003E\u003Cbr \/\u003EPinterest lets blog owners use their service to add a 'pin' to photos or content images on the site. When visitors of that site see a photo they like, they can choose to click on the red Pinterest button for Blogger, and add it to their Pinterest account.\u003Cbr \/\u003E\u003Cbr \/\u003EThe person who pressed your Pinterest button for Blogger can now see your photo on their dashboard, and share it with friends or followers on the service. They can also come across this photo when users add keywords or category tags to the image. More importantly, that photo links to your site when clicked on and will contain a description title of your blog name or post.\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-78zliOrI2_8\/U_wK8CEKbjI\/AAAAAAAAKRQ\/Hq2bLBR5iz8\/s1600\/pinit-button-pinterest-for-blogger.png\" imageanchor=\"1\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-78zliOrI2_8\/U_wK8CEKbjI\/AAAAAAAAKRQ\/Hq2bLBR5iz8\/s320\/pinit-button-pinterest-for-blogger.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ETherefore, adding the Pinterest button for Blogger will help you to benefit from tons of new traffic coming from Pinterest and people who had found your photos and post links using the service. Here are some steps to add your very own Pinterest button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E1. Access your Blogger Template\u003C\/h3\u003EThe first thing to do is to edit the code of your template so that it knows when to display this Pinterest Button for Blogger with the content. You can do this by logging into your Blogger Dashboard and finding your way to \"Template\" \u0026gt; \"Edit HTML\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-CsXclwABsPs\/U_vdRcLzStI\/AAAAAAAAKPQ\/4lnIlic6s0k\/s1600\/access-blogger-template-edit-html.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template html\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-CsXclwABsPs\/U_vdRcLzStI\/AAAAAAAAKPQ\/4lnIlic6s0k\/s1600\/access-blogger-template-edit-html.png\" height=\"291\" title=\"Add a Pinterest Pin It Mouseover Button on Blogger Images 1\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EWhen the editor opens up, it may look a bit foreign to you if you don't have much experience using HTML. Click anywhere inside the code area and search by pressing the CTRL + F keys for the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/body\u0026gt;\u003C\/span\u003E tag - hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/body\u0026gt;\u003C\/blockquote\u003EThe body tags makes up the general content in your webpage. Think of it like the settings panel of a website. If you were to delete everything in this section your site would turn into a blank white page.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E2. Add The Pinterest Pin it Script\u003C\/h3\u003EOnce you found the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/body\u0026gt;\u003C\/span\u003E tag, insert the following script just above it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Evar custom_pinit_button = \"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/4.bp.blogspot.com\/-3CPCJ031n9M\/U_vWZXUV1SI\/AAAAAAAAKPA\/8Q3N34ieaBw\/s1600\/pinit-button.png\u003C\/span\u003E\";\u003Cbr \/\u003Evar pinit_button_position = \"\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003Ecenter\u003C\/b\u003E\u003C\/span\u003E\";\u003Cbr \/\u003Evar pinit_button_before = \"\";\u003Cbr \/\u003Evar pinit_button_after = \"\";\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js' type='text\/javascript'\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script id='pinit-img-button' src='http:\/\/helplogger.googlecode.com\/svn\/trunk\/pinterest-button1.js' type='text\/javascript'\u0026gt; \u003Cbr \/\u003E\/\/ Visit helplogger.blogspot.com for more widgets and tricks.\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-R-Q0RtF13n0\/U_vf2j6jhGI\/AAAAAAAAKPc\/2PhrlZ1r2CE\/s1600\/pinterest-pin-it-script-to-blogger-template.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"adding pinterest script\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-R-Q0RtF13n0\/U_vf2j6jhGI\/AAAAAAAAKPc\/2PhrlZ1r2CE\/s1600\/pinterest-pin-it-script-to-blogger-template.png\" height=\"299\" title=\"Add a Pinterest Pin It Mouseover Button on Blogger Images 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003E3. Changing the Position of the Pin it! button\u003C\/h3\u003EThe cool thing about this code is that you have some freedom over where the Pinterest button for Blogger will go over the image. Take a look at the code that you just copied and pasted into the HTML for the word 'center'.\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Evar pinit_button_position = \"\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003Ecenter\u003C\/b\u003E\u003C\/span\u003E\";\u003C\/blockquote\u003ETo move the pin to a different area of the photo, replace \u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003Ecenter\u003C\/span\u003E\u003C\/b\u003E with one of these texts:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Etopleft\u003Cbr \/\u003Etopright\u003Cbr \/\u003Ebottomleft\u003Cbr \/\u003Ebottomright\u003C\/blockquote\u003EAnd to change the Pin it! button that appears on mouse over, replace the address in blue from above with your own:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Evar custom_pinit_button = \"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/4.bp.blogspot.com\/-3CPCJ031n9M\/U_vWZXUV1SI\/AAAAAAAAKPA\/8Q3N34ieaBw\/s1600\/pinit-button.png\u003C\/span\u003E\"; \u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-mF1R2Msk7iI\/U_viam4hBNI\/AAAAAAAAKPo\/KriI-94XPEc\/s1600\/custom-pinterest-pin-it-button-for-blogger-blogspot.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"pinit script\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-mF1R2Msk7iI\/U_viam4hBNI\/AAAAAAAAKPo\/KriI-94XPEc\/s1600\/custom-pinterest-pin-it-button-for-blogger-blogspot.png\" title=\"Add a Pinterest Pin It Mouseover Button on Blogger Images 3\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003E4. Save The Template\u003C\/h3\u003EMake sure that you added everything correctly, then save the template and navigate to a recent post that you made that contain images. Hover your mouse over the image and you should now see a red Pinterest button for Blogger displayed on the image. Test it out and see it how it works.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want to hide the pinit button from a specific image, when you create a post, switch to the HTML tab of your post editor and type \u003Cspan style=\"background-color: yellow;\"\u003Eclass=\"nopin\"\u003C\/span\u003E right before the closing slash and angle bracket of your image element, like this:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-QQRnkaDzDoI\/U_v8VN1zD0I\/AAAAAAAAKP4\/T3NhBXm1364\/s1600\/nopin-hide-pinterest-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"nopin pinterest\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-QQRnkaDzDoI\/U_v8VN1zD0I\/AAAAAAAAKP4\/T3NhBXm1364\/s1600\/nopin-hide-pinterest-blogger.png\" height=\"231\" title=\"Add a Pinterest Pin It Mouseover Button on Blogger Images 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThe only downside of this button is that it doesn't take the information from your custom image titles. It's automatically set to take the title of the blog post where the image is located. So, you'll need to pay closer attention to the title of the posts so that it fits closely with the images being shown.\u003Cbr \/\u003E\u003Cbr \/\u003ERemember that when you have this code activated, you have to label your titles so that they are relevant to the photos you are posting. This might sound obvious, but sometimes you create a post with an image as a joke that won't make sense in the context of viewing it on Pinterest.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you use \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/google-analytics-basics-for-beginners.html\" style=\"color: blue;\" target=\"_blank\"\u003EGoogle Analytics\u003C\/a\u003E, you can start to see traffic flooding into your site from Pinterest. You should also create your own Pinterest account so that you can manage the content and track how it's being shared. That's it. Enjoy and happy blogging!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/5139881597079136147\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/pinterest-pin-it-mouseover-button-for-blogger-images.html#comment-form","title":"5 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5139881597079136147"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5139881597079136147"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/pinterest-pin-it-mouseover-button-for-blogger-images.html","title":"Add a Pinterest Pin It Mouseover Button on Blogger Images"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-78zliOrI2_8\/U_wK8CEKbjI\/AAAAAAAAKRQ\/Hq2bLBR5iz8\/s72-c\/pinit-button-pinterest-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-6002268658626093045"},"published":{"$t":"2014-08-21T16:58:00.000-07:00"},"updated":{"$t":"2014-08-21T17:00:05.156-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"SEO"}],"title":{"type":"text","$t":"The Basics of Google Analytics for Beginners"},"content":{"type":"html","$t":"If you're a business owner or a member of a marketing team, you probably know that businesses depend upon data. Tracking trends and patterns is what allows you to get ahead of the dips in the market, and make informed decisions on the direction of your company.\u003Cbr \/\u003E\u003Cbr \/\u003EThose same rules that apply to business apply to owning a website. In order to deliver the best possible experience and ensure that customers from around the world are able to access your site, you need to understand from where traffic is coming from and how to leverage that information to your benefit.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-Z9H2_GXWhzk\/U_aHMw5n9VI\/AAAAAAAAKOg\/cUxJMJLJ7JM\/s1600\/google-analytics-basics-for-begginers.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-Z9H2_GXWhzk\/U_aHMw5n9VI\/AAAAAAAAKOg\/cUxJMJLJ7JM\/s1600\/google-analytics-basics-for-begginers.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003ESetting Your Site Up With A Tracking ID\u003C\/h3\u003EGoogle analytics won't start collecting data from your website until you've implemented a tracking code into your website's files. The tracking code is basically a block of JavaScript code that will collect data about the html that visitor used to get to your site, any cookies that the visitors has collected during their browsing history, and information about what type of browser the person is using.\u003Cbr \/\u003E\u003Cbr \/\u003EThe importance of this information provides you with information on how to conform your web-site to the target audience, especially in terms of design. If customers are visiting your website from an eCommerce directory, you may want to modify those links so that the customers arrive at a landing page instead of a home page. If more customers are using smartphones and tablets instead of laptop browsers, you may have to redesign the site so that it is responsive and can be easily read from a small screen.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-Nq_urZt6r9I\/U_aEqL30sQI\/AAAAAAAAKOY\/Pz-1j4rfAPU\/s1600\/google-analytics-tracking-code.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"google analytics tracking code\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-Nq_urZt6r9I\/U_aEqL30sQI\/AAAAAAAAKOY\/Pz-1j4rfAPU\/s1600\/google-analytics-tracking-code.png\" height=\"385\" title=\"The Basics of Google Analytics for Beginners 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIn order to track each individual page on the website, you will need to add a tracking code before the \u0026lt;\/head\u0026gt; code of your template. If you are using a site like WordPress or Joomla! that depends on templates, you may just have to add the tracking code on the main HTML index file. Keep in mind that it can take upwards of 24-hours for Google to begin collecting information and importing that data to your dashboard, so don't expect to see measurable results right away.\u003Cbr \/\u003E\u003Cbr \/\u003ETutorial: \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2013\/10\/add-google-analytics-to-blogger.html\" style=\"color: blue;\" target=\"_blank\"\u003EHow to Add Google Analytics to Blogger\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EResearching the Data\u003C\/h3\u003EOnce you insert the code into your site, it will begin tracking data from anyone who visits your site. This data is then sent back to the Google servers and stored in your Google Analytics profile. From there, you can determine what type of information that you want to look at.\u003Cbr \/\u003E\u003Cbr \/\u003EThe two features of Google Analytics that are often most useful to new users is the ability to track where customers are coming from, and the ability to see keywords that have been effective in drawing in audiences.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-HKZZt0i52Uo\/U_aBJ4KXqiI\/AAAAAAAAKOM\/AxHBPzFfWoY\/s1600\/google-analytics-audience-overview.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"google analytics overview\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-HKZZt0i52Uo\/U_aBJ4KXqiI\/AAAAAAAAKOM\/AxHBPzFfWoY\/s1600\/google-analytics-audience-overview.png\" height=\"276\" title=\"The Basics of Google Analytics for Beginners 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003ETraffic Origins\u003C\/h3\u003EOpen up your Google Analytics dashboard and click on '\u003Cb\u003EAcquisition\u003C\/b\u003E'. You should see a few options, but you want to pull '\u003Cb\u003EAll Referrals\u003C\/b\u003E' so that you can the entire list of visitors.\u003Cbr \/\u003E\u003Cbr \/\u003ENext to the referral path will show a few links with a number of how many people visited your site from that link. From here you can click on the link and find out the reason for the traffic. Maybe someone has written a review on the service, you can check to see if the advertisement campaign you are operating is producing results.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-cU1BnvUKp1w\/U_aAqmOCSUI\/AAAAAAAAKOE\/kH5yWGBCc20\/s1600\/acquisition-all-referrals-google-analytics.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"google analytics all referrals\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-cU1BnvUKp1w\/U_aAqmOCSUI\/AAAAAAAAKOE\/kH5yWGBCc20\/s1600\/acquisition-all-referrals-google-analytics.png\" title=\"The Basics of Google Analytics for Beginners 3\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EKeywords\u003C\/h3\u003EWithin the same '\u003Cb\u003EAcquisition\u003C\/b\u003E' directory is another option called '\u003Cb\u003ESearch Engine Optimization\u003C\/b\u003E'. Click on this link and then click on '\u003Cb\u003EQueries\u003C\/b\u003E' to look up a list of keywords being used to describe your site. The dashboard will display an overview of up to 1,000 words or phrases used on Google that brought new visitors to your site. You can use this information to modify your posts and producing content to increase the results of certain key phrases that you feel would benefit your customer outreach.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-Dq5ms_O4UX4\/U_Z-kBPhbrI\/AAAAAAAAKNs\/OnD4EdPlMq0\/s1600\/search-engine-optimization-queries-analytics.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"search engine optimization, ga queries\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-Dq5ms_O4UX4\/U_Z-kBPhbrI\/AAAAAAAAKNs\/OnD4EdPlMq0\/s1600\/search-engine-optimization-queries-analytics.png\" height=\"303\" title=\"The Basics of Google Analytics for Beginners 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EDemographics\u003C\/h3\u003EUnderneath the audience tab, you can also track demographics. This little option will allow you to view the age, gender, and interests of individual users and segments of your visiting population. Say for example you run a senior care facility for the retired and want to put together a A\/B split test to determine which advertising campaign works best. After adding the campaign to a landing page or section of your site, you can look back and find out if retired citizens are the ones responding to your ads, or if you are just bringing in traffic from younger generations who may not be interested in your services.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-nQvRydeeBok\/U_aAJx4d07I\/AAAAAAAAKN8\/imVrICYgTGs\/s1600\/search-engine-optimization-georgraphical-summary-google-analytics.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"google analytics, georgraphical summary\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-nQvRydeeBok\/U_aAJx4d07I\/AAAAAAAAKN8\/imVrICYgTGs\/s1600\/search-engine-optimization-georgraphical-summary-google-analytics.png\" height=\"266\" title=\"The Basics of Google Analytics for Beginners\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003ECustom Campaign Tagging\u003C\/h3\u003ECustom campaign tagging is more of an advanced feature, but once you get used to the Google Analytics interface, you can use this to separate your campaigns and easily filter through data. Maybe you just want to find out who is coming to your site from your email newsletters, and not from the general site. Google Analytics will allow you to post special links to your content on those channels of communication and then view these results under the acquisition tab and then campaigns.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EDetermining What Works, and What Doesn't\u003C\/h3\u003EUsing the tools that Google Analytics provides at your disposal allows you to really determine what type of experience you want to provide your customers. Within the first month of use, if start to see trends or patterns in data that you feel you feel you can improve upon, you can use this information as a guide to edit your sites design and layout.\u003Cbr \/\u003E\u003Cbr \/\u003EGetting used to the program might seem overwhelming at first, but once you jump right in and start playing around all the features, you'll get the hang of it in no time. Google Analytics really is an important tool that every website owner should have. "},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/6002268658626093045\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/google-analytics-basics-for-beginners.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6002268658626093045"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6002268658626093045"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/google-analytics-basics-for-beginners.html","title":"The Basics of Google Analytics for Beginners"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-Z9H2_GXWhzk\/U_aHMw5n9VI\/AAAAAAAAKOg\/cUxJMJLJ7JM\/s72-c\/google-analytics-basics-for-begginers.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-2818968329484136211"},"published":{"$t":"2014-08-14T06:30:00.001-07:00"},"updated":{"$t":"2014-08-14T06:42:22.333-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"css"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"How to Center the Blogger Header Image"},"content":{"type":"html","$t":"The header of a website is what distinguishes your blog; it's your identity or digital fingerprint. Whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine who you are and the type of content that they can expect to read. Therefore, it's important to develop a header that is both prominently placed and telling of your brand name.\u003Cbr \/\u003E\u003Cbr \/\u003EWhat would seem to be counterintuitive to that idea is the default Blogger settings for header positioning. Whenever you upload a header to the site, it will automatically be aligned to the left of the page. Some Blogger users may be okay with this setting, especially if they are using a header design that doesn't contain a background. Others may find that their background headers appear cut off, incomplete, or indistinguishable from the rest of their content.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you find yourself in the second category of users, there is a way to adjust the positioning of your header so that it is displayed as a center Blogger header. By centering your site header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It's hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003ECenter Header Image with Blogger Template Designer\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-oUy8RXLW01I\/U-wkQWuQqMI\/AAAAAAAAKGA\/uRBniBtqJ2A\/s1600\/center-blogger-header-image-title.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"center blogger header\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-oUy8RXLW01I\/U-wkQWuQqMI\/AAAAAAAAKGA\/uRBniBtqJ2A\/s1600\/center-blogger-header-image-title.png\" height=\"132\" title=\"How to Center the Blogger Header Image\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EMaking the change is relatively easy. You'll be able to make these adjustments on every page of your Blogger blog without having to change them individually. All you need to do is to modify the CSS of your blog that can be found directly through your Blogger dashboard. Even if you have little to no experience in web design or coding, you can center Blogger header by following these next few steps.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E\u003C\/span\u003E Log in your blogger account and select your blog, then go to \"Template\" and click the \"Customize\" button on the right side.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-n0CWYaRniQY\/U-yzgYjHvCI\/AAAAAAAAKIQ\/VioXHurBjSo\/s1600\/add-css-blogger-template-customize.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"center blogger header\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-n0CWYaRniQY\/U-yzgYjHvCI\/AAAAAAAAKIQ\/VioXHurBjSo\/s1600\/add-css-blogger-template-customize.png\" height=\"280\" title=\"How to Center the Blogger Header Image 1\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003EStep 2. \u003C\/b\u003E\u003C\/span\u003ENavigate to \"Advanced\" \u0026gt; \"Add CSS\" tab and paste the code in the empty box:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E#header-inner {\u003Cbr \/\u003Ebackground-position: center !important; \u003Cbr \/\u003Ewidth: 100% !important;\u003Cbr \/\u003Etext-align: center;\u003Cbr \/\u003E}\u003Cbr \/\u003E#header-inner img {\u003Cbr \/\u003Emargin: auto;\u003Cbr \/\u003E}\u003C\/blockquote\u003EIf you have a small image and you want it to become \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/blogger-header-footer-full-width.html\" style=\"color: blue;\" target=\"_blank\"\u003Efull width\u003C\/a\u003E, add this CSS instead:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E#header-inner {\u003Cbr \/\u003E\u0026nbsp;background-size: cover;\u003Cbr \/\u003E\u0026nbsp;width: 100% !important;\u003Cbr \/\u003E\u0026nbsp;text-align: center;\u003Cbr \/\u003E\u0026nbsp;}\u003Cbr \/\u003E\u0026nbsp;#header-inner img {\u003Cbr \/\u003E\u0026nbsp;width: 100%;\u003Cbr \/\u003E\u0026nbsp;height: 100%;\u003Cbr \/\u003E\u0026nbsp;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E\u003C\/span\u003E Hit the ENTER key after you paste the code snippet, then click the \"Apply to Blog\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-Qvkz-gXhOKo\/U-y0yxoNrmI\/AAAAAAAAKIc\/VI7-jiST2VI\/s1600\/advanced-add-css-header-inner-center-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger header centered\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-Qvkz-gXhOKo\/U-y0yxoNrmI\/AAAAAAAAKIc\/VI7-jiST2VI\/s1600\/advanced-add-css-header-inner-center-blogger.png\" height=\"120\" title=\"How to Center the Blogger Header Image 2\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EHere are some other aligning options for your headers:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EAlign Blogger Header Banner and Text Side by Side\u003C\/h3\u003E\u003Ch4\u003EImage on the right and title on the left\u003C\/h4\u003E\u003Cblockquote class=\"tr_bq\"\u003E#header-inner {\u003Cbr \/\u003Ebackground-position: right !important; \u003Cbr \/\u003Ewidth: 100% !important;\u003Cbr \/\u003E} \u003Cbr \/\u003E.titlewrapper, .descriptionwrapper {\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003Eclear: both;\u003Cbr \/\u003Emargin-left: 20px;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Ch4\u003EImage on the left and title on the right\u003C\/h4\u003E\u003Cblockquote class=\"tr_bq\"\u003E#header-inner {\u003Cbr \/\u003Ebackground-position: left !important; \u003Cbr \/\u003Ewidth: 100% !important;\u003Cbr \/\u003E} \u003Cbr \/\u003E.titlewrapper, .descriptionwrapper {\u003Cbr \/\u003Efloat: right;\u003Cbr \/\u003Eclear: both;\u003Cbr \/\u003Emargin-right: 20px;\u003Cbr \/\u003E} \u003C\/blockquote\u003E\u003Ci\u003ENote: for larger images, you may need to resize them in order to make them appear side by side with the text.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003EThat's it!\u003C\/h4\u003EAfter making the changes to the CSS and saving your modifications, you may navigate back to your homepage. Refresh the page and you'll notice that the header is now centered, instead of on the left. Click on a few of your page links and make sure that this modification has been made to every page or post on the blog.\u003Cbr \/\u003E\u003Cbr \/\u003EIf by chance you don't see the changes to the header, go back through the code that you modified and make sure that you have copied and pasted the information into the file exactly as instructed. Even minor modifications in the code, or a missing semicolon may fail to make the changes you are trying to achieve, or come away with different results than what's expected.\u003Cbr \/\u003E\u003Cbr \/\u003EThe great thing about CSS is that it is your site's central hub for all things design. From the CSS file, you can modify just about any appearance on your site to give the blog a custom look and feel. Once you're comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modifications."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/2818968329484136211\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/how-to-center-blogger-header-image.html#comment-form","title":"6 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2818968329484136211"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2818968329484136211"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/how-to-center-blogger-header-image.html","title":"How to Center the Blogger Header Image"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-oUy8RXLW01I\/U-wkQWuQqMI\/AAAAAAAAKGA\/uRBniBtqJ2A\/s72-c\/center-blogger-header-image-title.png","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-6839379202240375185"},"published":{"$t":"2014-08-06T15:13:00.002-07:00"},"updated":{"$t":"2014-08-06T17:05:49.200-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"css"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"Make Blogger Header, Navigation and Footer Full Width"},"content":{"type":"html","$t":"Blogger is a user-friendly service that provides a lot of really attractive looking default templates for those just starting out. Default templates come in handy, but the nice things about owning your own blog is that you have the chance to add your own personal touch. As a matter of fact, templates aren't made to restrict your freedom of design, but instead they're there to provide you a foundation to build from. With every default template available on Blogger, you can make changes to fit your style. \u003Cbr \/\u003E\u003Cbr \/\u003EOne of the most common requests out of the Blogger community when making alterations is how to change the look of some of the key sections like headers, navigation, and footers. Initially, these items are designed to fit within just 1\/3 of the page, surrounded by padding and margins on either side. These margins are used to give the page a slim fitting appearance, but could also cause your content to look compressed.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003EImportant: Backup your Template\u003C\/h4\u003EMaking the changes to a full screen Blogger navigation, footer, or header can be done and won't take you much time. Before you can make any changes, you should save extra copies of the template .xml file in case anything goes wrong. That way, if you don't like it or it doesn't come out looking like it should, you can reuse the contents of the original file to restore your blog to working condition.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-VaeBVCHk_SU\/U-KoUGNlp0I\/AAAAAAAAJ-k\/9N3M8_2q0kw\/s320\/make-blogger-header-full-width-2.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch4\u003EDemo\u003C\/h4\u003EHover your mouse over the image to see a before and after example:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/05\/create-rollover-image-effect-change.html\" target=\"_blank\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-cAoOXwI921o\/U-KkzMiWcOI\/AAAAAAAAJ-U\/l3VNtLbUREw\/s1600\/make-blogger-header-full-width.png\" onmouseout=\"this.src='http:\/\/4.bp.blogspot.com\/-cAoOXwI921o\/U-KkzMiWcOI\/AAAAAAAAJ-U\/l3VNtLbUREw\/s1600\/make-blogger-header-full-width.png'\" onmouseover=\"this.src='http:\/\/3.bp.blogspot.com\/-VowAub5VSHA\/U-LCwzaFWbI\/AAAAAAAAJ-0\/rHpaCIabKBQ\/s1600\/make-blogger-header-full-width-2.png'\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to Make Header, Navigation and Footer Full Width in Blogger\u003C\/h2\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #1: Access Your CSS File\u003C\/h3\u003EIf you've never opened up your CSS file before, log in to your Blogger account, select your blog and navigate to Template \u0026gt; Edit HTML. This will bring up the code of your template containing all your blog's internal files in one place.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #2: Modify the Background\u003C\/h3\u003EClick anywhere inside the code area \u0026gt; press CTRL + F keys and type the following line \u0026gt; hit Enter to find it (stop at the first occurrence of it):\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ebody {\u003C\/blockquote\u003EJust below \u003Cspan style=\"background-color: yellow;\"\u003Ebody {\u003C\/span\u003E you should see some lines that will look like this:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ebody {\u003Cbr \/\u003Efont: $(body.font);\u003Cbr \/\u003Ecolor: $(body.text.color);\u003Cbr \/\u003Ebackground: $(body.background);\u003Cbr \/\u003E\u003Cspan style=\"color: #cc0000;\"\u003Epadding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);\u003C\/span\u003E\u003Cbr \/\u003E$(body.background.override)\u003Cbr \/\u003E}\u003C\/blockquote\u003EWhere you see the highlighted line above in the code, remove the line and replace it with:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Epadding: 0px;\u003C\/blockquote\u003EDifferent templates will have minor variations, but you should still be able to find these lines within every template.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #3: Change the Content Section\u003C\/h3\u003ENext, search using the CTRL+F keys for this part:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.content-inner {\u003C\/blockquote\u003EJust below it, you will see this line: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.content-inner {\u003Cbr \/\u003E\u003Cspan style=\"color: #cc0000;\"\u003Epadding: $(content.padding) $(content.padding.horizontal);\u0026nbsp;\u003C\/span\u003E\u003Cbr \/\u003E}\u003C\/blockquote\u003ERemove the line in red and replace it with:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Epadding: 0px;\u003C\/blockquote\u003EThis will remove any of the padding around the inner content, so it won't leave any room on both sides.\u003Cbr \/\u003E\u003Cbr \/\u003ENow find this part:\u003Cbr \/\u003E\u003Cblockquote\u003E$(content.background.color.selector){\u003C\/blockquote\u003EJust below it you will see this line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E$(content.background.color.selector){\u003Cbr \/\u003E\u003Cspan style=\"color: #cc0000;\"\u003Ebackground-color: $(content.background.color);\u003C\/span\u003E\u003Cbr \/\u003E}\u003C\/blockquote\u003EReplace the line in red with:\u003Cbr \/\u003E\u003Cblockquote\u003Ebackground-color: $(body.background);\u003C\/blockquote\u003EFinally, search for this tag:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003EAnd just above it, add this CSS:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.main-outer {\u003Cbr \/\u003Ebackground: $(content.background.color);\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #4: Make the Content Outer Full Width\u003C\/h3\u003EContent is displayed differently between browsers, so you'll next want to fix this so that it alters the width across the board. This code can be found searching for:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.content-outer, .content-fauxcolumn-outer, .region-inner {\u003C\/blockquote\u003EAnd just below it you will see the following lines: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.content-outer, .content-fauxcolumn-outer, .region-inner {\u003Cbr \/\u003Emin-width: $(content.width);\u003Cbr \/\u003E\u003Cspan style=\"color: #cc0000;\"\u003Emax-width: $(content.width);\u003C\/span\u003E\u003Cbr \/\u003E_width: $(content.width);\u003Cbr \/\u003E}\u003C\/blockquote\u003EDelete the line in red and replace that line with:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Emax-width: 100%;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #5: Finish It Up\u003C\/h3\u003ENow you have just two more lines you need to change. Look for:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/b:template-skin\u0026gt;\u003C\/blockquote\u003EAnd click on the right arrow to expand the styles. Note: you will need to search for \u0026lt;\/b:template-skin\u0026gt; tag again, and just before it you'll see these symbols highlighted in yellow:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;\/b:template-skin\u0026gt;\u003C\/blockquote\u003EAbove this \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:template-skin\u0026gt;\u003C\/span\u003E section of code, add the following:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.main-outer {\u003Cbr \/\u003Emax-width: $(content.width);\u003Cbr \/\u003Emargin: 0 auto;\u003Cbr \/\u003E}\u003C\/blockquote\u003EThen run a search for:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003EAdd these lines of code just before\/above it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.tabs-inner {\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.section {\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.header-inner .widget {\u003Cbr \/\u003Emargin: 0px;\u003Cbr \/\u003E}\u003C\/blockquote\u003ESave the template and exit out of the editor.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003EFinished!\u003C\/h4\u003EFollowing along with this tutorial won't affect or alter the pictures you are using on the blog, just the design of the content area. If you have a logo that stretches across the screen and fits perfectly for 1\/3 page header, you will need to resize and re-upload this content so that it is able to work with the new adjustments."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/6839379202240375185\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/blogger-header-footer-full-width.html#comment-form","title":"11 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6839379202240375185"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6839379202240375185"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/blogger-header-footer-full-width.html","title":"Make Blogger Header, Navigation and Footer Full Width"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-VaeBVCHk_SU\/U-KoUGNlp0I\/AAAAAAAAJ-k\/9N3M8_2q0kw\/s72-c\/make-blogger-header-full-width-2.png","height":"72","width":"72"},"thr$total":{"$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-3511397754786522064"},"published":{"$t":"2014-08-03T07:26:00.000-07:00"},"updated":{"$t":"2014-08-03T07:36:10.843-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"css"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"Automatically Resize Blogger Images to Fit Blog Post Area"},"content":{"type":"html","$t":"\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-jgjceonqW5s\/U95Hj5sAT4I\/AAAAAAAAJ1U\/ae5Ml7FaMzI\/s1600\/blogger-image-size-resize.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"resize blogger images automatically\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-jgjceonqW5s\/U95Hj5sAT4I\/AAAAAAAAJ1U\/ae5Ml7FaMzI\/s1600\/blogger-image-size-resize.png\" style=\"border-radius: 10px;\" title=\"Automatically Resize Blogger Images to Fit Blog Post Area\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EBlogger offers most of the tools you would need to add and resize Blogger images quick and easy. You can upload photos directly on the platform and even change the dimensions based on the type of content that you are attempting to produce.\u003Cbr \/\u003E\u003Cbr \/\u003EIn order to do this, create a post and click on the small photo icon on the top toolbar next to the font style settings. A pop-up will show up on your screen asking you where you'd like to upload the image source. You have a choice between adding pictures from:\u003Cbr \/\u003E\u003Cbr \/\u003E- Your local computer\u003Cbr \/\u003E- Previously uploaded images on the blog\u003Cbr \/\u003E- Picasa Web Albums\u003Cbr \/\u003E- An image URL\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-7dWXUVxvyOo\/U94J-mWrP9I\/AAAAAAAAJzg\/JDuosf7eV3w\/s1600\/upload-blogger-images-and-resize-width.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"upload blogger image\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-7dWXUVxvyOo\/U94J-mWrP9I\/AAAAAAAAJzg\/JDuosf7eV3w\/s1600\/upload-blogger-images-and-resize-width.png\" title=\"Automatically Resize Blogger Images to Fit Blog Post Area 1\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOnce you select the image that you want to use, you'll see four image sizes to choose from - small, medium, large, and x-large; it also gives you the option to determine the alignment. If you find that the four preset dimensions aren't providing the outcome you desire, there are easy ways to resize Blogger images to custom dimensions in order to fit your blog post area.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #1: Retain the Image Quality\u003C\/h3\u003EIf you know that you are going to need to resize Blogger images once you post them to your blog, make sure that you start with a photo larger than the 640px dimensions of the x-large option. It's easy to bring an image down in size, but if you try to make a small image bigger, you'll lose some of the quality. Just make sure that you watch out for the \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/07\/blogger-seo-image-optimization.html\" style=\"color: blue;\" target=\"_blank\"\u003Efile size containing the image\u003C\/a\u003E; the larger the file, the slower it will load on your website.\u003Cbr \/\u003E\u003Cbr \/\u003EPhotoshop is a powerful image editor that can help you to resize Blogger images or modify your images before you post, but it is also an expensive investment. There are also many other freeware image editors that can perform the simple task of resizing the photo. Determine what size you'd like the photo to display on the page and manually resize Blogger images to those dimensions; other users have found that 700px is a pretty flexible width size that works well on posts.\u003Cbr \/\u003E\u003Cbr \/\u003EOnce you've got your photo resized and added to your post, click on it and choose the 'Original size' option. If your photos are going to exceed the post editor, it probably means that they are larger than the body of your post, so let's fix that and make them fit exactly. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-FStIjWvRqAU\/U94LOWnmt9I\/AAAAAAAAJzs\/lHGmqIUuo78\/s1600\/blogger-image-original-size-too-wide-big.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"set image to original size\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-FStIjWvRqAU\/U94LOWnmt9I\/AAAAAAAAJzs\/lHGmqIUuo78\/s1600\/blogger-image-original-size-too-wide-big.png\" title=\"Automatically Resize Blogger Images to Fit Blog Post Area 2\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #2: Modify The Site's CSS\u003C\/h3\u003ENext, you'll want to modify the CSS of your Blogger template to accommodate the adjustments. Don't worry; you won't need much coding experience to complete this task.\u003Cbr \/\u003E\u003Cbr \/\u003EOpen up the Blogger dashboard and go to 'Template' \u0026gt; 'Customize'. You'll see the option for 'Advanced', click on it and find your way to the 'Add CSS' tab... paste the following CSS code inside the empty box:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.post-body img {\u003Cbr \/\u003Emax-width: 100%;\u003Cbr \/\u003Emax-height: auto;\u003Cbr \/\u003Edisplay: block;\u003Cbr \/\u003Emargin: auto; \u003Cbr \/\u003E}\u003C\/blockquote\u003EAdding the code to this section, automatically adds it between the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;b:skin\u0026gt;....\u0026lt;b:skin\u0026gt;\u003C\/span\u003E tags of your Template (Template \u0026gt; Edit HTML, above the \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E tag). So, no matter whether you add it above ]]\u0026gt;\u0026lt;\/b:skin\u0026gt; or within the Add CSS box, the effect should be the same.\u003Cbr \/\u003E\u003Cbr \/\u003ERemember that when you make changes to the CSS of the blog's Template, these changes will affect every post previously added, using the \"Original size\" dimension option.\u003Cbr \/\u003E\u003Cbr \/\u003ETo spruce up the post even more, add the last three lines shown in green below:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.post-body img {\u003Cbr \/\u003Emax-width: 100%;\u003Cbr \/\u003Emax-height: auto;\u003Cbr \/\u003Edisplay: block;\u003Cbr \/\u003Emargin: auto; \u003Cbr \/\u003E\u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003Ebox-shadow: none;\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003Eborder: none;\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003Epadding: 0px; \u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cspan style=\"color: #0b5394;\"\u003EScreenshot\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-UtyXNcSDo_4\/U94j929HOYI\/AAAAAAAAJ00\/uIaqLRlZhLE\/s1600\/automatically-resize-blogger-photos-with-css.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"resize blogger pictures\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-UtyXNcSDo_4\/U94j929HOYI\/AAAAAAAAJ00\/uIaqLRlZhLE\/s1600\/automatically-resize-blogger-photos-with-css.png\" title=\"Automatically Resize Blogger Images to Fit Blog Post Area 3\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis code will get rid of any borders and padding around the image and give it a much more natural look within the post. Hit the \"Apply to Blog\" button once you've finished adding it.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003ENote: This will only change the images set to Original size. To resize images with different sizes and apply this change on ALL the pictures added to your posts, add this CSS instead:\u003C\/span\u003E\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"color: #674ea7;\"\u003E.post-body img {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003Ewidth:100%;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003Eheight:100%;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003Edisplay: block;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #674ea7;\"\u003E}\u003C\/span\u003E\u003C\/blockquote\u003E\u003Cspan style=\"color: #674ea7;\"\u003EPlease consider that, if you have posts with photos floating either on the right or left side of the content, they will automatically go full width.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep #3: Create A Post\u003C\/h3\u003EAfter making the adjustments to both file size and CSS, you may go back to the post editor and repeat the Step 1 to add an image. When you return to the screen that asks for size, click on the \"Original size\" option and confirm your choice. Your newly added image will then be displayed with the adjustments that you created, so that it fits nicely the width of the post area."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/3511397754786522064\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/automatically-resize-blogger-images.html#comment-form","title":"10 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3511397754786522064"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3511397754786522064"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/automatically-resize-blogger-images.html","title":"Automatically Resize Blogger Images to Fit Blog Post Area"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-jgjceonqW5s\/U95Hj5sAT4I\/AAAAAAAAJ1U\/ae5Ml7FaMzI\/s72-c\/blogger-image-size-resize.png","height":"72","width":"72"},"thr$total":{"$t":"10"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4134067620115401712"},"published":{"$t":"2014-07-29T16:28:00.001-07:00"},"updated":{"$t":"2014-07-30T11:40:42.611-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"google plus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Image Effects"}],"title":{"type":"text","$t":"How to Turn Off Auto Enhance for Blogger Photos"},"content":{"type":"html","$t":"When you go to upload photos on Blogger, look closely for changes between the picture you uploaded on your computer and how it looks on Blogger. If you notice any darkening of the pictures themselves, especially in light-colored areas of the photo, you are seeing the results of a Blogger auto-enhancing feature.\u003Cbr \/\u003E\u003Cbr \/\u003EThis Blogger auto-enhancing feature is packaged within the service and is intended to give your photos a more professional feel. It works by smoothing out fuzzy photos and removing any imperfections in personal photos, so that you see your best looking you. However, you may realize that not every picture that you upload needs to undergo this enhancement. In fact, it may even cause your site to look dull or outdated as it can turn white photos gray.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-SXshLJqcp9w\/U9gs84PHlhI\/AAAAAAAAJvo\/CSmQiyX3GXg\/s1600\/blogger-photos-with-google-auto-enhance-on-off.png\" imageanchor=\"1\" style=\"margin-left: 0px; margin-right: auto;\"\u003E\u003Cimg alt=\"auto enhance on off\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-SXshLJqcp9w\/U9gs84PHlhI\/AAAAAAAAJvo\/CSmQiyX3GXg\/s1600\/blogger-photos-with-google-auto-enhance-on-off.png\" height=\"321\" title=\"Turn Off Auto Enhance in Blogger Pictures 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003EThe second picture was auto-enhanced, while the first one was not\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003E\u003Ch2\u003ETurning Off Picture Auto-Enhancement on Google Plus\u003C\/h2\u003EFortunately, there is a way to adjust these settings so that you're able to turn them on and off at will. You may be surprised to know that the root cause of these changes actually lies with the Google uploader and your decision to link your Google+ and Blogger accounts together.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep 1: Access Your Google Account\u003C\/h3\u003EBlogger is just one of the many services that make up the Google network. When the company released Google+, this Blogger auto-enhancing feature came with it because adjustments were made to the Google uploading service. These same changes take place when you're adding pictures from your library in Picasa. The good thing about Google is that they allow you to make adjustments to your settings from one central location by navigating over to your Google account. \u003Cbr \/\u003E\u003Cbr \/\u003EIn order to turn the \"Auto Enhance\" feature off, go to your Blogger dashboard, and click your icon in the top right corner, then the blue \"View Profile\" button (if you are not using Google+, click the \"Account settings\" link). Now you'll be taken over to your Google+ profile or settings.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-sHJNdeK0LQY\/U9gkNvGLLoI\/AAAAAAAAJvM\/bYVehdTdhUg\/s1600\/google-plus-profile-blogger-account.png\" imageanchor=\"1\"\u003E\u003Cimg alt=\"google blogger profile\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-sHJNdeK0LQY\/U9gkNvGLLoI\/AAAAAAAAJvM\/bYVehdTdhUg\/s1600\/google-plus-profile-blogger-account.png\" height=\"229\" title=\"Turn Off Auto Enhance in Blogger Pictures 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep 2: Find The Enhancement Settings\u003C\/h3\u003EOnce opening your Google account, look for the tab on the top left corner of the page that says Profile \u0026gt; navigate to Settings - or if you are using a Blogger profile, click the \"Edit settings\" link under \"Google+ settings\". This will bring up a list with \"Photos and Videos\" options including \"Show geo location…\" and \"Allow viewers to download my photos...\". Look toward the bottom of the list for the 'Auto Enhance' heading and check the \"Off\" option to turn this feature off.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-OogP0feI6qs\/U9gm9vpYaeI\/AAAAAAAAJvY\/qI-iEH-VHGM\/s1600\/turn-off-auto-enhance-google-plus-feature.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"auto enhance off\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-OogP0feI6qs\/U9gm9vpYaeI\/AAAAAAAAJvY\/qI-iEH-VHGM\/s1600\/turn-off-auto-enhance-google-plus-feature.png\" height=\"435\" title=\"Turn Off Auto Enhance in Blogger Pictures 3\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EStep 3: Auto Enhance on Photos You've Already Uploaded\u003C\/h3\u003EAny picture that you upload from here on out will no longer be subject to this Blogger auto-enhancement feature; however, this will not revert any pictures that have already been uploaded. If you want to make any changes to photos that were uploaded during this period, do the following: from the same panel, click on the 'Photos' tab which it will take you to the albums for each blog \u0026gt; click on the blog where you wish to disable the auto enhance effect and press the down arrow \u0026gt; go to the \"Apply Auto Enhance\" option and choose 'Off'.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-krTdZ_lO_yg\/U9k2LxOASmI\/AAAAAAAAJw8\/bHavohSpMyE\/s1600\/apply-auto-enhance-on-all-picasa-photos.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"pictures auto enhancement\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-krTdZ_lO_yg\/U9k2LxOASmI\/AAAAAAAAJw8\/bHavohSpMyE\/s1600\/apply-auto-enhance-on-all-picasa-photos.png\" title=\"Turn Off Auto Enhance in Blogger Pictures 4\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003ENotice The Results?\u003C\/h3\u003ENow that the auto-enhancement feature is turned off, you may start to see different results when uploading. Remember that this change will affect all of your Google services across the board such as Google+ and YouTube. You may turn this feature back on, at any time, by repeating the steps list above and re-checking the account settings box. When you're done, just turn it back off. Understanding these changes gives you the power to decide for yourself which pictures you'd like enhanced, and which you don't."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/4134067620115401712\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/turn-off-auto-enhance-in-blogger-photos.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4134067620115401712"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4134067620115401712"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/turn-off-auto-enhance-in-blogger-photos.html","title":"How to Turn Off Auto Enhance for Blogger Photos"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-SXshLJqcp9w\/U9gs84PHlhI\/AAAAAAAAJvo\/CSmQiyX3GXg\/s72-c\/blogger-photos-with-google-auto-enhance-on-off.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-782191479649909685"},"published":{"$t":"2014-07-28T11:49:00.000-07:00"},"updated":{"$t":"2014-07-28T16:52:11.548-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"SEO"}],"title":{"type":"text","$t":"How to Optimize Images for Better Search Engine Rankings"},"content":{"type":"html","$t":"When search engines start indexing the pages on your site, they don't just focus on the writing. Web crawlers employed by services like Google and Bing shuffle through your site's structural code looking for any relevant information that they might offer to their customers. Some of the information includes things like backlinks, tags and even images.\u003Cbr \/\u003E\u003Cbr \/\u003EImages make up a big part of any website. They help to excite the visual senses of readers and offer a little extra entertainment value. What most blog owners don't realize is that all of the photos that they upload to their site aren't confined to their site alone. Crawlers make sure that these images also show up within their respective search engines sites.\u003Cbr \/\u003E\u003Cbr \/\u003EImage searches can have the effect of drawing in large numbers of new readers that were just looking through content in Google images. You can benefit from this traffic and increase your average subscriber by practicing image optimization.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/--k5q_rfFTe0\/U9ad-cBlMfI\/AAAAAAAAJuU\/P0U8zU_kWwU\/s1600\/seo-image-optimization-for-blogger.png\" imageanchor=\"1\" margin-left: 1em; margin: 1em;\"\u003E\u003Cimg alt=\"seo image optimization\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/--k5q_rfFTe0\/U9ad-cBlMfI\/AAAAAAAAJuU\/P0U8zU_kWwU\/s1600\/seo-image-optimization-for-blogger.png\" title=\"Optimize Images for SEO\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003EImage Optimization Tip #1: Alt Tags \u0026amp; File Names\u003C\/h2\u003EVisitors may love images, but computers don't. Computers are designed to do what you tell them without violating any of the parameters. When web crawlers come across images on a website, they really don't know what to do with it because they are made to collect information, not interpret it. The solution to this problem is to optimize images and appropriately label your alt tags so that they display the correct content when someone goes to look for it.\u003Cbr \/\u003E\u003Cbr \/\u003EFor example, let's say you upload a picture of your dog, and label the \"alt\" tag by the dog's name, 'Frank'. The web crawler is going to read the alt tag without ever realizing it's a picture of a dog; therefore, the crawler will come to the conclusion that it needs to display the image when someone run a search for 'Frank'. \u003Cbr \/\u003E\u003Cbr \/\u003EThe minor word choice mistakes may not affect the operations of your website, or how your image is displayed, but it will affect the search results of others and the traffic that comes into your website. Whereas you may have been able to attract the dog lovers in the world using image optimization of your dog tagged 'dog', you are now drawing in crowds searching for their uncle \"Frank\". \u003Cbr \/\u003E\u003Cbr \/\u003ETo include the alt tag, simply add \u003Cspan style=\"color: #0b5394;\"\u003Ealt=\"this is your alt text\"\u003C\/span\u003E to your image tag. Here's an example:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;img src=\"pug-dog.jpg\" \u003Cspan style=\"color: #0b5394;\"\u003Ealt=\"frank dog\"\u003C\/span\u003E \/\u0026gt;\u003C\/blockquote\u003EBut you don't have to touch the html code of the image. Once the picture is uploaded, click on it and you will see the \"Properties\" setting. Add the alt text inside the box and hit OK:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-hejrEYaSY0k\/U9aKSWyeMtI\/AAAAAAAAJs0\/z7xaiaJAVw8\/s1600\/frank-dog-seo-alt-tag-to-image.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"image alt tag\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-hejrEYaSY0k\/U9aKSWyeMtI\/AAAAAAAAJs0\/z7xaiaJAVw8\/s1600\/frank-dog-seo-alt-tag-to-image.png\" title=\"optimize image for seo\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis goes the same for file names on a website. You need to optimize images and file names on everything that you decide to save to your website directory so that this information can be appropriately indexed and be used as a search term. You could name the file of your dog Frank, \"pug-dog.jpg\", which would encourage the search engine to add Frank into searches being performed with the phrase 'pug dog'. Alt tags and file names play an important interpretation role between you and the machine that makes your blog possible.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EImage Optimization Tip #2: Add A Caption\u003C\/h2\u003EAfter uploading your images, you should always add a caption to the image, so that average browser understands what they're looking at. This gives your website a more professional appearance and will help to keep people on your page.\u003Cbr \/\u003E\u003Cbr \/\u003ENot everyone that comes across your picture using a Google Image search is looking for your blog. Maybe they just want to download the image, and that's all you'll ever get from them. The important thing is that they found your photo relevant to their search, and decided to navigate to your site in order to save it for their own use.\u003Cbr \/\u003E\u003Cbr \/\u003EThe longer those users stay on the site, the better it looks for you because it plays a role in the \"bounce rate\". Bounce rate refers to when someone clicks on a link, realizes it's not what they're looking for, and then immediately goes back to the search engine. If you can reduce the number of times that this happens by providing captions and intriguing content that will make people want to stick around, your SEO ranking will improve.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-sI4gciqxXVk\/U9afGM93PlI\/AAAAAAAAJug\/TG0j5gTtp-s\/s1600\/seo-blogger-image-caption.png\" imageanchor=\"1\" style=\"margin-left: auto; margin-right: auto;\"\u003E\u003Cimg alt=\"blogger image caption\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-sI4gciqxXVk\/U9afGM93PlI\/AAAAAAAAJug\/TG0j5gTtp-s\/s1600\/seo-blogger-image-caption.png\" title=\"optimize images for seo\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003EImage caption and SEO\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003E\u003Ch2\u003EImage Optimization Tip #3: File Size\u003C\/h2\u003EImproving your bounce rate can be tough because the attention span of the everyday Internet user is incredibly short. It may be as short as 8 seconds. High bounce back rates and slow loading sites can be the death of most blogs because no one wants to wait for the content to load. By the time your website finally loads with the content that you need, they could have easily visited two or more sites and found what they need from someone who was better prepared to handle their traffic.\u003Cbr \/\u003E\u003Cbr \/\u003EOptimize images so that you are able to keep the file size as small as possible while retaining the quality of the photo. Images taken from DSLR camera - although they may look great - can be up to 1.4 MB in size if you take them directly off your camera and upload them on your blog. This type of space is massive for any everyday blog, and will hurt your SEO ratings.\u003Cbr \/\u003E\u003Cbr \/\u003EUse Photoshop or one of many online services like Google Picasa to rescale your images or reduce the file size. Two services that can perform this ability for free and do a great job are \u003Ca href=\"http:\/\/www.smushit.com\/ysmush.it\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EYahoo's Smushit \u003C\/a\u003Eand \u003Ca href=\"https:\/\/kraken.io\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EKraken\u003C\/a\u003E. When you access either site, they will allow you to upload the picture on the site and download the new image optimization versions for use on your Blogger site.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EPutting It All Together\u003C\/h3\u003EAt the end of the day, the quality of your site and overall SEO ranking isn't just about what you have to say. It's the entire package of what you have to offer. Optimize images every chance you get and use the strategies discussed above. Now that you know that you might have been neglecting images all along, you can make necessary adjustments and start to see even better results from all your hard work."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/782191479649909685\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/blogger-seo-image-optimization.html#comment-form","title":"9 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/782191479649909685"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/782191479649909685"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/blogger-seo-image-optimization.html","title":"How to Optimize Images for Better Search Engine Rankings"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/--k5q_rfFTe0\/U9ad-cBlMfI\/AAAAAAAAJuU\/P0U8zU_kWwU\/s72-c\/seo-image-optimization-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4718429329139052514"},"published":{"$t":"2014-07-26T09:13:00.000-07:00"},"updated":{"$t":"2014-07-29T16:50:50.711-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"custom domain"}],"title":{"type":"text","$t":"Blogger vs WordPress: Which is Better for You?"},"content":{"type":"html","$t":"There are two big-name services in the world of blogging: Blogger vs WordPress. No matter where you go on the internet looking for advice, these two names are nearly impossible to avoid because they play such an important role within the online content community.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you're just starting out a new blog, or making some major changes to your current layout, you'll most likely be faced with the decision to choose between Blogger vs WordPress. Both are stellar services that are going to make your life as a blogger much easier, but ultimately, your decision must come down to one. So don't cross over, let's walk this path together and ensure that you don't get lost in the wonder world of web, looking for answers.\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-IuJ0yBqn2M0\/U9PUaYZealI\/AAAAAAAAJrQ\/0P49rIrEZ5I\/s1600\/blogger-vs-wordpress.png\" imageanchor=\"1\"\u003E\u003Cimg alt=\"blogger vs wordpress\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-IuJ0yBqn2M0\/U9PUaYZealI\/AAAAAAAAJrQ\/0P49rIrEZ5I\/s320\/blogger-vs-wordpress.png\" title=\"Blogger vs WordPress: Which is Better for You?\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch3\u003EBefore we start!\u003C\/h3\u003EWordPress as you might have noticed, comes in two different flavors, wordpress.org and wordpress.com. Seemingly same, but practically, not. Like in Blogger vs WordPress, hosting at wordpress.com is like renting a corporate apartment where the corporate is responsible for maintenance and facilitation of your place. While hosting at wordpress.org is similar to buying your own apartment, where you are responsible for your place's security,  maintenance and many others.\u003Cbr \/\u003E\u003Cbr \/\u003ESo, wherever in this post you see the word 'WordPress'; know that it refers to wordpress.org.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EUser-Friendliness\u003C\/h2\u003EWordPress is a clear front-runner in the blogging and web design community in terms of how many people actually use the platform. The founder of WordPress, Matt Mullenweg, provided eye-opening statistics that around 18.9% of the entire Internet runs on WordPress. Compared to a 2012 study done by Blogging.org, of all the actual blogs on the Internet, WordPress makes up 43%, Blogger 35%, and the remaining blogs are Tumblr or other less known services.\u003Cbr \/\u003E\u003Cbr \/\u003EHowever, just because something is used more often than another, it doesn't mean it's easier to use. The problem with WordPress is that it wasn't designed for beginners who just want to take up blogging as a side hobby. In order to set up your own WordPress blog, you have to have some previous knowledge of things like hosting, bandwidth, HTML and SEO practices. There are WordPress services out there that will help set up your site and get you online, but WordPress itself comes as a set of files that you are expected to download and configure to your own site.\u003Cbr \/\u003E\u003Cbr \/\u003ESome hosting companies have made the idea of using WordPress a little bit easier with things like one-click downloads; but it's still a pretty steep learning curve for new bloggers to overcome. You also have to deal with paying for the costs of hosting your site and acquiring the domain name. If you opt to use one of the many WordPress services instead of setting it up yourself, you'll be stuck with a URL such as 'yourwebsite.wordpress.com', which takes away from the professional image you may be trying to portray.\u003Cbr \/\u003E\u003Cbr \/\u003EBlogger is entirely based on Google and makes setting up a blog a breeze. With Blogger vs WordPress all you need to get started is to sign up for the service using your Google account, or make a new account like you would if you were setting up an email account. From there, Blogger takes responsibility for all your files, backing up the systems and the details associated with operating a content site like a database. Blogger is so much easier in terms of walking you through the steps, providing you with everything you need to be successful and it's at little-to-no cost to you.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EDesign \u0026amp; Customizability\u003C\/h2\u003EHosting at WordPress means stepping into the Disney world. With hundreds of featured rich-customizable design templates, you would find yourself literally lost in the WordPress arena, ensuring that your site looks unique, catchy and simply marvelous to visitors. The wide array of WordPress templates include customized designs for nearly every walk of life including fashion, entertainment, music, health, kitchen, etc.\u003Cbr \/\u003E\u003Cbr \/\u003EBlogger themes, some would say, are not responsive; but let me tell you a secret. With a little search online, you can find hundreds of free, highly customizable, responsive templates that you can easily integrate into your blog, so that you and your site visitors stay in touch with your blog through their handsets. For WordPress, however, you don't need to wander around. By default, it has rich and responsive native designs, making WordPress ideal for mobile bloggers.\u003Cbr \/\u003E\u003Cbr \/\u003EBoth platforms will allow you to make modifications to the theme and features of the site if you have experience or feel comfortable to use HTML and CSS. They also both provide helpful post areas for when you go to submit new content. These post areas will also include HTML and some basic functions to change the font style and the size of your text.\u003Cbr \/\u003E\u003Cbr \/\u003EOne design feature between the two that may tip the scale toward Blogger in the Blogger vs WordPress discussion is that Blogger is integrated with other Google services like Google Picasa. Picasa is a photo sharing site that will allow you to share all your personal photos, or the photos that you plan on using within your posts. These can then be accessed via the text editor when you are submitting content and can be easily included with the content. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EGadgets, Widgets \u0026amp; Plugins\u003C\/h2\u003ETalking of plugins, WordPress provides you with thousands of easy to integrate plugins from security to multimedia, enabling you to add any feature or functionality in your site, in a couple easy steps. Users of this platform have submitted thousands of independent plugins that you can install for just about anything you would need, from SEO to E-commerce. There are so many interesting plugins available, that blog owners often make the mistake of cluttering their site with too many and distracting their readers from the content.\u003Cbr \/\u003E\u003Cbr \/\u003EBlogger may not have as many plugins or widgets as WordPress, it does have enough to provide you with what you need. Blogger's simplicity in many ways provides it with an edge over WordPress because you are able to focus most of your time in producing great content, instead of seeing how many bells and whistles you can add on the site. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EThe SEO Question\u003C\/h2\u003ENot every person that starts a blog is looking to make money off the content; some people just like to write for the sake of writing. Whatever your goals are for starting the blog, search engine optimization - or SEO for short - is a key strategy in growing your readership, so others might enjoy what you have to share.\u003Cbr \/\u003E\u003Cbr \/\u003EOver 1 quadrillion searches are performed via Google each year. The goal of most SEO producers is to implement strategies that can appease Google so that their content will be ranked higher up in search query results. Blogger is a service created by Google, so it's obvious that they added their own formulas to the service to ensure that those blogs are doing what they need to do to be found.\u003Cbr \/\u003E\u003Cbr \/\u003ESticking to Blogger means Google would optimize your blog itself from a SEO perspective. All you need to do is check \/ uncheck a couple of options from your dashboard and Google will start crawling your site with just a click of a button. WordPress takes a hands-on approach that will require you to know a little bit more to modify your website design and content to meet these standards.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EAnd the Blogger vs WordPress Winner Is…\u003C\/h2\u003EIn terms of Blogger vs WordPress, both services might be worth trying out, but ultimately Blogger comes out as a winner in all four categories discussed above. For new or returning bloggers, it is a fantastic service that makes it easy to focus on what you love, regardless of all the add-ons and fancy additions of WordPress. Blogger's simplicity is perhaps one of it's greatest advantages and provides bloggers of all experience levels a chance to succeed."},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4718429329139052514"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4718429329139052514"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/blogger-vs-wordpress-which-is-better.html","title":"Blogger vs WordPress: Which is Better for You?"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-IuJ0yBqn2M0\/U9PUaYZealI\/AAAAAAAAJrQ\/0P49rIrEZ5I\/s72-c\/blogger-vs-wordpress.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-2095991192795884212"},"published":{"$t":"2014-07-21T18:57:00.001-07:00"},"updated":{"$t":"2014-07-25T15:20:13.221-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Templates"}],"title":{"type":"text","$t":"CustomizeMe Blogger Template (Helplogger Style)"},"content":{"type":"html","$t":"CustomizeMe is a highly customizable Blogger template and SEO optimized to index your blog faster. It has been designed in a way that it can be easily customized according to your needs without having to touch the code of your template. All you need to do is to hit the \"Customize\" button and you are ready to start customizing your blog. Just try the template settings and be creative with the theme fonts, colors and backgrounds.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-hXS47KxJca4\/U83LxiOMbEI\/AAAAAAAAJmg\/py5mPxkVPf8\/s1600\/customizeme-blogger-template.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-hXS47KxJca4\/U83LxiOMbEI\/AAAAAAAAJmg\/py5mPxkVPf8\/s1600\/customizeme-blogger-template.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003ESome of the Template Features include: \u003C\/h3\u003E- Both Flat and Grid Design\u003Cbr \/\u003E- Sticky\/Fixed Left  Navigation Menu Bar\u003Cbr \/\u003E- Customized Popular Post\u003Cbr \/\u003E- Recent Posts\u003Cbr \/\u003E- Recent Comments\u003Cbr \/\u003E- Page Numbering\u003Cbr \/\u003E- Expandable Search Bar\u003Cbr \/\u003E- Floating Social Bar Widget\u003Cbr \/\u003E- Author Bio with Image\u003Cbr \/\u003E- Related Posts with Thumbnails\u003Cbr \/\u003E- 404 Error Page \u003Cbr \/\u003E- Seo friendly\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/customizeme-template.blogspot.com\/\" rel=\"nofollow\" style=\"text-decoration: none\" target=\"_blank\"\u003EDEMO HERE \u003C\/a\u003E\u003Cbr \/\u003E\u003Ca class=\"demo-link\" href=\"https:\/\/app.box.com\/s\/c8bv03v55bgrhxe29yn2\" rel=\"nofollow\" style=\"text-decoration: none\" target=\"_blank\"\u003EDownload CustomizeMe Template\u003C\/a\u003E\u003Cbr \/\u003E\u003Ca class=\"demo-link\" href=\"https:\/\/app.box.com\/s\/94kte6rrlh2we2zod98m\" rel=\"nofollow\" style=\"text-decoration: none\" target=\"_blank\"\u003ETemplate with Grid Style Only\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to install the CustomizeMe Template \u003C\/h3\u003E1) Sign in to your Blogger blog and head to \"Template\"\u003Cbr \/\u003E2) Backup the current template by clicking the \"Backup \/ Restore\" button \u0026gt; \"Download full template\"\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-hBXCYJdozWA\/U82xgW0FdgI\/AAAAAAAAJlE\/wSQPBmkoS3o\/s1600\/backup-restore-blogger-template.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template backup\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-hBXCYJdozWA\/U82xgW0FdgI\/AAAAAAAAJlE\/wSQPBmkoS3o\/s1600\/backup-restore-blogger-template.png\" height=\"142\" title=\"CustomizeMe Blogger Template 1\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E3) Download and open the CustomizeMe.xml file with a Notepad\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-xQUB6uis9_4\/U82xu78FhcI\/AAAAAAAAJlM\/1LTALEebXF4\/s1600\/xml-file-open-with-notepad.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"open xml with notepad\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-xQUB6uis9_4\/U82xu78FhcI\/AAAAAAAAJlM\/1LTALEebXF4\/s1600\/xml-file-open-with-notepad.png\" height=\"183\" title=\"CustomizeMe Blogger Template\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E4) Select all the code and to copy it to clipboard\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-pMTzbh6RpXk\/U82x3d4nxtI\/AAAAAAAAJlU\/GTGEHsNjX8o\/s1600\/copy-xml-template-code.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"select all code in notepad\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-pMTzbh6RpXk\/U82x3d4nxtI\/AAAAAAAAJlU\/GTGEHsNjX8o\/s1600\/copy-xml-template-code.png\" height=\"293\" title=\"CustomizeMe Blogger Template\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E5) Go again to Template and click the \"Edit HTML\" button\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template, edit html\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" title=\"CustomizeMe Blogger Template\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E6) Select all the code of your current template and delete it, then paste the code that you just copied earlier\u003Cbr \/\u003E7) Preview your blog and if everything is ok, hit the 'Save Template' button.\u003Cbr \/\u003E\u003Cbr \/\u003EPlease note that this method might delete some of your widgets, so if you want to keep any of them, just Browse for the CustomizeMe.xml file (step 2) and click on the \"Upload\" button (ignore the rest of the steps).\u003Cbr \/\u003E\u003Cbr \/\u003EAnd that's it! Now you are ready to use the \u003Cb\u003ECustomizeMe Blogger template\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EAdding menu items\u003C\/h3\u003EGo to Template \u0026gt; Edit HTML, click anywhere inside the code area and press the CTRL + F keys. Inside the search box, type \"item 1\" and hit Enter to find it - see the screenshot below\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-rqZgYLy9Ymo\/U820UlwCbRI\/AAAAAAAAJlg\/BfTcAB5t4CE\/s1600\/fixed-sticky-menu-customize-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"change blogger template html\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-rqZgYLy9Ymo\/U820UlwCbRI\/AAAAAAAAJlg\/BfTcAB5t4CE\/s1600\/fixed-sticky-menu-customize-blogger.png\" height=\"182\" title=\"CustomizeMe Blogger Template\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EChange Item 1, 2, 3... with your page titles and replace \"add-url-here\" text with your url. Finally, click the \"Save template\" button to save the changes.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003ERecent Posts \u0026amp; Comments Widgets\u003C\/h3\u003ESearch (CTRL + F) for the following address and replace it with your own (you will find it twice and you must change it in both places):\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-H5lx6QZIwRU\/U821xqSWziI\/AAAAAAAAJls\/D4uQx91UMIU\/s1600\/blogger-template-edit-widgets.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template html\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-H5lx6QZIwRU\/U821xqSWziI\/AAAAAAAAJls\/D4uQx91UMIU\/s1600\/blogger-template-edit-widgets.png\" height=\"182\" title=\"CustomizeMe Blogger Template\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EPlease pay attention to not have two forward slashes at the end of your address, otherwise the scripts will not be able to read the blog's feeds. Save your template after you have made these changes.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EEnabling \"About the author\" profile\u003C\/h3\u003EGo to \"Layout\" and click the \"Edit\" link of the \"Blog posts\" element. In the pop-up window that appears, check the \"Show Author Profile Below Post\" option and hit Save.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-DMX0XSN1r2M\/U824iqiD3_I\/AAAAAAAAJl4\/d9gxVwRFU3U\/s1600\/show-author-below-posts.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger author profile\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-DMX0XSN1r2M\/U824iqiD3_I\/AAAAAAAAJl4\/d9gxVwRFU3U\/s1600\/show-author-below-posts.png\" height=\"307\" title=\"CustomizeMe Blogger Template\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EChanging colors and fonts in the CustomizeMe Template\u003C\/h3\u003EGo to Template \u0026gt; click the \"Customize\" button. Here you can do lots of cool stuff, like change all the default fonts, text and background colors - basically, anything you want.\u003Cbr \/\u003E\u003Cbr \/\u003ESome of the customizations that you can make:\u003Cbr \/\u003EAdd a Background image: \u003Cb\u003EBackground\u003C\/b\u003E \u0026gt; Upload Image \u0026gt; Browse and hit Done\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-AdCHEAWGQ_M\/U8252pYIv0I\/AAAAAAAAJmE\/AB6wtLLzb0k\/s1600\/blogger-template-designer-upload-background.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template designer, backgrounds\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-AdCHEAWGQ_M\/U8252pYIv0I\/AAAAAAAAJmE\/AB6wtLLzb0k\/s1600\/blogger-template-designer-upload-background.jpg\" height=\"196\" title=\"CustomizeMe Blogger Template\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EChange Fonts, Texts and Background Colors: go to \u003Cb\u003EAdvanced\u003C\/b\u003E \u0026gt; select the Element that you want to customize \u0026gt; select your favorite colors and fonts. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-NoxXmIjVlAQ\/U827RTu5xpI\/AAAAAAAAJmQ\/-rB3_s9xzKQ\/s1600\/blogger-template-designer-advanced.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger advanced designer\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-NoxXmIjVlAQ\/U827RTu5xpI\/AAAAAAAAJmQ\/-rB3_s9xzKQ\/s1600\/blogger-template-designer-advanced.png\" height=\"193\" title=\"CustomizeMe Blogger Template\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ETo remove a color, just type \"transparent\" inside the text box as you can see in the above screenshot (4).\u003Cbr \/\u003E\u003Cbr \/\u003EOnce you're satisfied with the result, hit the \"Apply to blog\" button and view your blog. That's it!\u003Cbr \/\u003EHave fun customizing it ;)"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/2095991192795884212\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/customize-me-blogger-template.html#comment-form","title":"56 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2095991192795884212"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2095991192795884212"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/customize-me-blogger-template.html","title":"CustomizeMe Blogger Template (Helplogger Style)"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-hXS47KxJca4\/U83LxiOMbEI\/AAAAAAAAJmg\/py5mPxkVPf8\/s72-c\/customizeme-blogger-template.png","height":"72","width":"72"},"thr$total":{"$t":"56"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-2261005356679902901"},"published":{"$t":"2014-07-10T15:02:00.000-07:00"},"updated":{"$t":"2014-07-28T12:22:52.932-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"custom domain"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"How To Set Up a Custom Domain in Blogger"},"content":{"type":"html","$t":"Our web today is a wonderful place. It's increasingly become a knowledge hub for strollers around the globe. And you know what the best part is? It does not have a religion, race or color, that's where perhaps its strength lies in. Point being, no matter what you are after, from details of products to how to use them, from fruit varieties to language origins, from how to hack Facebook account to how to set up a custom domain name in Blogger. Each and everything is there, in abundance and easily available. Now I know you are here to understand how you can setup\/host your custom domain on your Blogger account. So let's get on with it, without further delay. \u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-BQB8YMKkMVM\/U78rZjyWZYI\/AAAAAAAAJkU\/5cq8PbLzWRI\/s1600\/blogger-custom-domain-with-godaddy.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom domain, godaddy\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-BQB8YMKkMVM\/U78rZjyWZYI\/AAAAAAAAJkU\/5cq8PbLzWRI\/s1600\/blogger-custom-domain-with-godaddy.png\" height=\"251\" title=\"Set Up a Custom Domain in Blogger with Godaddy\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EBefore we start\u003C\/h3\u003EIt's important that you realize, it isn't difficult to add a custom domain into your blogger account. If you are a blogger, it's perfect if you already own your own blog, it shows your passion and love for blogging and provides you with freedom to move from one platform to another, when and if you need. Also from users perspective, it's much easier for them to remember and visit your blog at customized address like \u003Ci\u003Emyblog.com\u003C\/i\u003E than \u003Ci\u003Emyblog.blogspot.com\u003C\/i\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003EOne of the best things about Blogger is that it does not push you to host your site with blogger. It is entirely your own choice to choose from either of two hosting plans 'hosting on BlogSpot' with address myblog.blogspot.com, or going with a custom domain with address myblog.com.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003ESome Popular Web Hosting Sites:\u003C\/h3\u003EIf you don't already have purchased yourself a custom domain, these are the places that you should be looking for to get one:\u003Cbr \/\u003E\u003Cbr \/\u003E- EasyDNS\u003Cbr \/\u003E- 1and1\u003Cbr \/\u003E- GoDaddy.com\u003Cbr \/\u003E- Yahoo! Small Business\u003Cbr \/\u003E- No-IP\u003Cbr \/\u003E- ix web hosting\u003Cbr \/\u003E\u003Cbr \/\u003ESo now if you have bought yourself a domain, from either of these you would have an IP address and a name. Let's assume our is 'mynewdomain'.com.\u003Cbr \/\u003E\u003Cbr \/\u003EWell, it's time to start adding a custom domain to your blogger account.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003ERemember:\u003C\/h3\u003EHere we are using setup for \u003Ca href=\"http:\/\/godaddy.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EGoDaddy.com\u003C\/a\u003E, the most popular domain name provider. For custom domains from other sites, the steps are almost same, so don't vanish.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003ESetting Up Blogger Custom Domain\u003C\/h2\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1\u003C\/span\u003E\u003C\/b\u003E. Login to your Blogger account at \u003Ca href=\"http:\/\/www.blogger.com\/\" style=\"color: blue;\"\u003Ewww.blogger.com\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2\u003C\/span\u003E\u003C\/b\u003E. Click on your blog and then go to \"Settings\", choose \"Basic\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-C4u8hhvaDPg\/U77AF3kOGOI\/AAAAAAAAJgs\/p250cCwwAtY\/s1600\/set-up-custom-domain-in-blogger-or-third-party-url.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom domain\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-C4u8hhvaDPg\/U77AF3kOGOI\/AAAAAAAAJgs\/p250cCwwAtY\/s1600\/set-up-custom-domain-in-blogger-or-third-party-url.png\" height=\"187\" title=\"How To Set Up a Custom Domain in Blogger 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3\u003C\/span\u003E\u003C\/b\u003E. Under \"Publishing\" section, click \"+ Setup a 3rd party URL for your blog\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4\u003C\/span\u003E\u003C\/b\u003E. Under \"Third-party domain settings\" next to \"http:\/\/\" type your domain that you just purchased and make sure that you don't forget to add the \"www\" prefix to the domain name.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-kETxraUSwEk\/U77Dkwn7hcI\/AAAAAAAAJg4\/fE0gKqYPS6s\/s1600\/set-up-custom-domain-in-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"set up custom domain in blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-kETxraUSwEk\/U77Dkwn7hcI\/AAAAAAAAJg4\/fE0gKqYPS6s\/s1600\/set-up-custom-domain-in-blogger.png\" height=\"198\" title=\"How To Set Up a Custom Domain in Blogger 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 5\u003C\/span\u003E\u003C\/b\u003E. Click \"View settings instructions\" to get the blogger's official instructions. On the Blogger instruction page, choose the \"On a top-level domain (www.example.com)\" option.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-bWOuXxDUTP4\/U77FidxiNQI\/AAAAAAAAJhE\/IZrKG2tN3wk\/s1600\/on-a-top-level-domain-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom domain in blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-bWOuXxDUTP4\/U77FidxiNQI\/AAAAAAAAJhE\/IZrKG2tN3wk\/s1600\/on-a-top-level-domain-blogger.png\" height=\"179\" title=\"How To Set Up a Custom Domain in Blogger 3\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 6\u003C\/span\u003E\u003C\/b\u003E. Under the point 9 of instructions, 4 IP addresses will be given, copy and save all 4 of them.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 7\u003C\/span\u003E\u003C\/b\u003E. Go back to your Blogger Settings and press Save. It won't get saved and an error will appear saying 'We have not been able to verify your authority to this domain. Error 32.'\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-PBx5ojcX39Q\/U78Mo35NEoI\/AAAAAAAAJjY\/D9SPaA3NaJ4\/s1600\/setting-up-blogger-custom-domain.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"setting up blogger custom domain \" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-PBx5ojcX39Q\/U78Mo35NEoI\/AAAAAAAAJjY\/D9SPaA3NaJ4\/s1600\/setting-up-blogger-custom-domain.png\" height=\"274\" title=\"How To Set Up a Custom Domain in Blogger 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 8\u003C\/span\u003E\u003C\/b\u003E. Under the error, you will see two fields \"Name, Label or Host Field\" and \"Destination, target, or Points To\" field. Copy data of both rows from these fields.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 9\u003C\/span\u003E\u003C\/b\u003E. Now log in to your \u003Ca href=\"http:\/\/godaddy.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EGoDaddy.com\u003C\/a\u003E account and click on \"My account\" on the upper right corner \u0026gt; select \"Manage my Domains\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-OHvU3x8etII\/U77RDXebd3I\/AAAAAAAAJhg\/TprvpLOVhWI\/s1600\/godaddy-manage-my-domains-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"godaddy manage domains\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-OHvU3x8etII\/U77RDXebd3I\/AAAAAAAAJhg\/TprvpLOVhWI\/s1600\/godaddy-manage-my-domains-blogger.png\" height=\"214\" title=\"How To Set Up a Custom Domain in Blogger 5\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 10\u003C\/span\u003E\u003C\/b\u003E. Here you should see your purchased domain name \u0026gt; just click on your domain name.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-4IzKcaqN7Ko\/U77Ym5RZxrI\/AAAAAAAAJhw\/ej4GX17t52Y\/s1600\/godaddy-domains.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"godaddy domains\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-4IzKcaqN7Ko\/U77Ym5RZxrI\/AAAAAAAAJhw\/ej4GX17t52Y\/s1600\/godaddy-domains.png\" height=\"160\" title=\"How To Set Up a Custom Domain in Blogger 6\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 11\u003C\/b\u003E\u003C\/span\u003E. Click on the \"DNS Zone File\" tab next to Settings and choose \"Use Classic DNS Manager\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-I5CvqOfcoMo\/U77lk3MwwOI\/AAAAAAAAJiQ\/QMrS4MO7XLI\/s1600\/use-classic-dns-manager.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"use classic dns manager\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-I5CvqOfcoMo\/U77lk3MwwOI\/AAAAAAAAJiQ\/QMrS4MO7XLI\/s1600\/use-classic-dns-manager.png\" height=\"78\" title=\"How To Set Up a Custom Domain in Blogger 7\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 12\u003C\/b\u003E\u003C\/span\u003E. Next, click the \"Edit\" button to edit your DNS Zone File.\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-65BW3ShB4TU\/U78AcfZefSI\/AAAAAAAAJi4\/ucl38TMUwnU\/s1600\/DNS-zone-file.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom domain\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-65BW3ShB4TU\/U78AcfZefSI\/AAAAAAAAJi4\/ucl38TMUwnU\/s1600\/DNS-zone-file.png\" height=\"186\" title=\"How To Set Up a Custom Domain in Blogger 8\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 13\u003C\/span\u003E\u003C\/b\u003E. Under the \"CNAME (Alias)\" menu, click \"Quick Add\" button at the bottom of the screen (see image 1 in the below screnshoot).\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 14\u003C\/span\u003E\u003C\/b\u003E. In the Edit box that now appeared, enter \"www\" in the first box and \"ghs.google.com\" in the second.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-cZ5j2u7OTaw\/U776eV8mo7I\/AAAAAAAAJic\/DumWzJYmSDY\/s1600\/custom-domain-quick-add-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom domain\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-cZ5j2u7OTaw\/U776eV8mo7I\/AAAAAAAAJic\/DumWzJYmSDY\/s1600\/custom-domain-quick-add-blogger.png\" height=\"344\" title=\"How To Set Up a Custom Domain in Blogger 9\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 15\u003C\/b\u003E\u003C\/span\u003E. Click \"Quick Add\" again and enter details from second row of the data we saved in step 8.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 16\u003C\/b\u003E\u003C\/span\u003E. Under the \"A (Host)\" menu, again choose Quick Add (see the below image).\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 17\u003C\/b\u003E\u003C\/span\u003E. Host will be @ and the \"Points to\" value should be the one provided by Google IPs, saved in step 6 above. These are the Google IPs that you should get: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cbr \/\u003E216.239.32.21\u003Cbr \/\u003E216.239.34.21\u003Cbr \/\u003E216.239.36.21\u003Cbr \/\u003E216.239.38.21\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 18\u003C\/b\u003E\u003C\/span\u003E. Add all 4 of them one by one and delete old host as you won't need it anymore.\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/--IPEU63qIZ0\/U78YayjiDhI\/AAAAAAAAJjo\/fBQFvxoSvVw\/s1600\/set-up-custom-domain-in-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom domain in blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/--IPEU63qIZ0\/U78YayjiDhI\/AAAAAAAAJjo\/fBQFvxoSvVw\/s1600\/set-up-custom-domain-in-blogger.png\" height=\"158\" title=\"How To Set Up a Custom Domain in Blogger 10\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 19\u003C\/b\u003E\u003C\/span\u003E. At the top of the page, click on the \"Save Zone File\" button to save your setings.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 20\u003C\/b\u003E\u003C\/span\u003E. Now go back to Blogger and try to save settings again. The registration process takes 24-48 hours, so don't worry if you get an error again. Come again later to Blogger after 24-48 hours, repeat step 2 to 4, press Save and the error should be gone.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 21\u003C\/b\u003E\u003C\/span\u003E. After your URL starts working, click on the \"Edit\" link next to domain name on setting page.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 22\u003C\/b\u003E\u003C\/span\u003E. Check the \"Redirect... to...\" checkbox below your site address to ensure that even if the visitors will miss out the www part, they will still be able to reach your site.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-qlxRhIYk5yE\/U78FwQOO-WI\/AAAAAAAAJjI\/Y1xAQoL2j2Y\/s1600\/blogger-custom-domain.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom domain\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-qlxRhIYk5yE\/U78FwQOO-WI\/AAAAAAAAJjI\/Y1xAQoL2j2Y\/s1600\/blogger-custom-domain.png\" title=\"How To Set Up a Custom Domain in Blogger 11\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 23\u003C\/b\u003E\u003C\/span\u003E. And that's it. Enjoy your new URL!\u003Cbr \/\u003E\u003Cbr \/\u003ESo this was easy, right? Only a handful of steps and we have successfully completed our mission of adding our custom domain in our blogger account. In case you haven't yet, stay patient wait for 2 days and try again. Or repeat steps 1-22, and make sure you don't miss any. Otherwise your new URL is ready and all set to roam around the wonderful world of web. "},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/2261005356679902901\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/how-to-set-up-custom-domain-in-blogger.html#comment-form","title":"9 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2261005356679902901"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2261005356679902901"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/how-to-set-up-custom-domain-in-blogger.html","title":"How To Set Up a Custom Domain in Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-BQB8YMKkMVM\/U78rZjyWZYI\/AAAAAAAAJkU\/5cq8PbLzWRI\/s72-c\/blogger-custom-domain-with-godaddy.png","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-6091065397329066938"},"published":{"$t":"2014-07-09T17:44:00.003-07:00"},"updated":{"$t":"2014-07-27T12:18:41.059-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"robots"},{"scheme":"http://www.blogger.com/atom/ns#","term":"sitemap"}],"title":{"type":"text","$t":"Add Custom Robots.txt File in Blogger"},"content":{"type":"html","$t":"Are you one of modern day bloggers without much knowledge of technical details, looking to enhance your blog's ratings and audience but don't know how to and your blogger friend told you that you can get a hike into your site visitors via editing your Robots.txt file? Or maybe you don't want search engines spiders to crawl through your pages? Or you do have a technical background but don't want to risk making changes without expert's words on topic? Well in either case, this is the right place for you to be. In this tutorial, you will see how to add Custom Robots.txt file in Blogger in a few easy steps.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-oaCiha83lF4\/U73hto9PUBI\/AAAAAAAAJgc\/kxIJ8VHN6YI\/s1600\/add-custom-robots-txt-to-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom robots.txt\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-oaCiha83lF4\/U73hto9PUBI\/AAAAAAAAJgc\/kxIJ8VHN6YI\/s1600\/add-custom-robots-txt-to-blogger.png\" title=\"Add Custom Robots.txt File in Blogger\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EBut before we open and start working on Robots.txt, let's have a brief overview of its significance:\u003Cbr \/\u003E\u003Ci\u003E\u003Cspan style=\"color: red;\"\u003EWarning!\u003C\/span\u003E Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EWhat is Robots.txt?\u003C\/h3\u003EWith every blog that you create\/post on your site, a related Robots.txt file is auto-generated by Blogger. The purpose of this file is to inform incoming robots (spiders, crawlers etc. sent by search engines like Google, Yahoo) about your blog, its structure and to tell whether or not to crawl pages on your blog. You as a blogger would like certain pages of your site to be indexed and crawled by search engines, while others you might prefer not to be indexed, like a label page, demo page or any other irrelevant page.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow do they see Robots.txt?\u003C\/h3\u003EWell, Robots.txt is the first thing these spiders view as soon as they reach your site. Your Robots.txt is like a hour flight attendant, that directs you to your seat and keep checking that you don't enter private areas. Therefore, all the incoming spiders would only index files that Robots.txt would tell to, keeping others saved from indexing.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EWhere is Robots.txt located?\u003C\/h3\u003EYou can easily view your Robots.txt file either on your browser by adding \u003Ci\u003E\/robots.txt\u003C\/i\u003E to your blog address like \u003Ci\u003Ehttp:\/\/myblog.blogspot.com\/robots.txt\u003C\/i\u003E or by simply signing into your blog and choosing Settings \u0026gt; Search engine Preference \u0026gt; Crawlers and indexing and selecting Edit next to Custom robots.txt.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-uxL1vGFGO8M\/U72-wnIj-HI\/AAAAAAAAJfw\/T31-jdtOiLE\/s1600\/blogger-custom-robots-txt.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom robots\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-uxL1vGFGO8M\/U72-wnIj-HI\/AAAAAAAAJfw\/T31-jdtOiLE\/s1600\/blogger-custom-robots-txt.png\" height=\"190\" title=\"Add Custom Robots.txt File in Blogger\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow Robots.txt does looks like?\u003C\/h3\u003EIf you haven't touched your robots.txt file yet, it should look something like this:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"color: #cc0000;\"\u003EUser-agent: Mediapartners-Google\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #cc0000;\"\u003EDisallow:\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #38761d;\"\u003EUser-agent: *\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #38761d;\"\u003EDisallow: \/search\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #38761d;\"\u003EAllow: \/\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003ESitemap: http:\/\/myblog.blogspot.com\/feeds\/posts\/default?orderby=UPDATED\u003C\/span\u003E\u003C\/blockquote\u003EDon't worry if it isn't colored or there isn't any line breaks in code, I colored it and placed line breaks so that you may understand what these words mean.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003EUser-agent:Media partners-Google:\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003EMediapartners-Google is Google's AdSense robot that would often crawl your site looking for relevant ads to serve on your blog or site. If you disallow this option, they won't be able to see any ads on your specified posts or pages. Similarly, if you are not using Google AdSense ads on your site, simply remove both these lines.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003EUser-agent: *\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003EThose of you with little programming experience must have guessed the symbolic nature of character '*' (wildcard). For others, it specifies that this portion (and the lines beneath) is for all of you incoming spiders, robots, and crawlers.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003EDisallow: \/search\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003EKeyword \u003Cb\u003E\u003Ci\u003EDisallow\u003C\/i\u003E\u003C\/b\u003E, specifies the 'not to' do things for your blog. Add \u003Cb\u003E\u003Ci\u003E\/search\u003C\/i\u003E\u003C\/b\u003E next to it, and that means you are guiding robots not to crawl the search pages \u003Cb\u003E\u003Ci\u003E\/search\u003C\/i\u003E\u003C\/b\u003E results of your site. Therefore, a page result like \u003Ci\u003Ehttp:\/\/myblog.blogspot.com\/search\/label\/mylabel\u003C\/i\u003E will never be crawled and indexed.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003EAllow: \/\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003EKeyword \u003Cb\u003E\u003Ci\u003EAllow\u003C\/i\u003E\u003C\/b\u003E specifies 'to do' things for your blog. Adding '\/' means that the robot may crawl your homepage. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003ESitemap:\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003EKeyword \u003Cb\u003E\u003Ci\u003ESitemap\u003C\/i\u003E\u003C\/b\u003E refers to our blogs sitemap; the given code here tells robots to index every new post. By specifying it with a link, we are optimizing it for efficient crawling for incoming guests, through which incoming robots will find path to our entire blog posts links, ensuring none of our posted blog posts will be left out from the SEO perspective.\u003Cbr \/\u003E\u003Cbr \/\u003EHowever by default, the robot \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/02\/how-to-submit-your-blogger-sitemap-to.html\" target=\"_blank\"\u003Ewill index only 25 posts\u003C\/a\u003E, so if you want to increase the number of index files, then replace the sitemap link with this one:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"color: #3d85c6;\"\u003ESitemap: http:\/\/myblog.blogspot.com\/atom.xml?redirect=false\u0026amp;start-index=1\u0026amp;max-results=500\u003C\/span\u003E\u003C\/blockquote\u003EAnd if you have more than 500 published posts, then you can use these two sitemaps like below:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"color: #3d85c6;\"\u003ESitemap: http:\/\/myblog.blogspot.com\/atom.xml?redirect=false\u0026amp;start-index=1\u0026amp;max-results=500\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003ESitemap: http:\/\/myblog.blogspot.com\/atom.xml?redirect=false\u0026amp;start-index=500\u0026amp;max-results=1000 \u003C\/span\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to prevent posts\/pages from being indexed and crawled?\u003C\/h3\u003EIn case you haven't yet discovered yourself, here is how to stop spiders from crawling and indexing particular pages or posts:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EDisallow Particular Post \u003C\/b\u003E\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EDisallow: \/yyyy\/mm\/post-url.html\u003C\/blockquote\u003EThe \u003Cb\u003E\u003Ci\u003E\/yyy\/mm\u003C\/i\u003E\u003C\/b\u003E part specifies your blog posts publishing year and month and \u003Cb\u003E\u003Ci\u003E\/post-url.html\u003C\/i\u003E\u003C\/b\u003E is the page you want them not to crawl. To prevent a post from being indexed\/crawled simply copy the URL of your post that you want to exclude from indexing and remove the blog address from the beginning.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EDisallow Particular Page\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ETo disallow a particular page, you can use the same method as above. Just copy the page URL and remove your blog address from it, so that it will look something like this:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EDisallow: \/p\/page-url.html\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch2\u003EAdding Custom Robots.Txt to Blogger\u003C\/h2\u003ENow let's see how exactly you can \u003Cb\u003Eadd Custom Robots.txt file in Blogger\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cbr \/\u003E1. Sign in to you blogger account and click on your blog.\u003Cbr \/\u003E2. Go to Settings \u0026gt; Search Preferences\u0026nbsp; \u0026gt; Crawlers and indexing.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-uxL1vGFGO8M\/U72-wnIj-HI\/AAAAAAAAJf0\/wLn3i8HBtTo\/s1600\/blogger-custom-robots-txt.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom robots.txt\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-uxL1vGFGO8M\/U72-wnIj-HI\/AAAAAAAAJf0\/wLn3i8HBtTo\/s1600\/blogger-custom-robots-txt.png\" height=\"190\" title=\"Add Custom Robots.txt File in Blogger\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E3. Select 'Edit' next to Custom robots.txt and check the 'Yes' check box. \u003Cbr \/\u003E4. Paste your code or make changes as per your needs.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-cPntyBJK4sE\/U73NC4oyH3I\/AAAAAAAAJgA\/VyMgq9rKcOY\/s1600\/blogger-custom-robots-txt-2.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom robots.txt\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-cPntyBJK4sE\/U73NC4oyH3I\/AAAAAAAAJgA\/VyMgq9rKcOY\/s1600\/blogger-custom-robots-txt-2.png\" height=\"158\" title=\"Add Custom Robots.txt File in Blogger\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E5. Once you are done, press Save Changes button.\u003Cbr \/\u003E6. And congratulations, you are done!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to see if changes are being made to Robots.txt?\u003C\/h3\u003EAs explained above, simply type your blog address in the url bar of your browser and add \u003Cb\u003E\u003Ci\u003E\/robots.txt\u003C\/i\u003E\u003C\/b\u003E at the end of your url as you can see in this example below:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ehttp:\/\/helplogger.blogspot.com\u003Cb\u003E\u003Cspan style=\"background-color: yellow;\"\u003E\/robots.txt\u003C\/span\u003E \u003C\/b\u003E\u003C\/blockquote\u003EOnce you visit the robots.txt file, you will see the code which you are using in your custom robots.txt file. See the below screenshot:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-_QAG7ZpTGJ0\/U73QBBAXVuI\/AAAAAAAAJgM\/5qHFOaSh-Zo\/s1600\/robots-txt-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom robots\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-_QAG7ZpTGJ0\/U73QBBAXVuI\/AAAAAAAAJgM\/5qHFOaSh-Zo\/s1600\/robots-txt-blogger.png\" height=\"139\" title=\"Add Custom Robots.txt File in Blogger\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EFinal Words:\u003C\/h3\u003EAre we through then bloggers? Are you done adding the Custom Robots.txt in Blogger? It was easy, once you knew what those code words meant. If you couldn't get it for the first time, just go again through the tutorial and before long, you will be customizing your friends' robots.txt files.\u003Cbr \/\u003E\u003Cbr \/\u003EIn any case, from SEO and site ratings it's important to make that tiny bit of changes to your robots.txt file, so don't be a sloth. Learning is fun, as long as its free, isn't it?"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/6091065397329066938\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/add-custom-robots-txt-file-in-blogger.html#comment-form","title":"8 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6091065397329066938"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6091065397329066938"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/add-custom-robots-txt-file-in-blogger.html","title":"Add Custom Robots.txt File in Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-oaCiha83lF4\/U73hto9PUBI\/AAAAAAAAJgc\/kxIJ8VHN6YI\/s72-c\/add-custom-robots-txt-to-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-1285196704586866731"},"published":{"$t":"2014-07-01T18:53:00.003-07:00"},"updated":{"$t":"2014-07-01T18:59:16.964-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger pages"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"How To Set Custom Redirects in Blogger"},"content":{"type":"html","$t":"Over time, most blogs may go through many changes, like posts being added or deleted. In some occasions, you don't want people to \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2013\/10\/redirect-blogger-404-error-homepage.html\" style=\"color: blue;\" target=\"_blank\"\u003Eget 404 messages\u003C\/a\u003E when they surf to posts or pages that don't exist on your blog and instead, make all requests to a specific link to be redirected to another page. One of the best way to avoid broken links and keep your traffic flowing in the right direction is setting custom redirects via the\u0026nbsp;\u003Cb\u003EBlogger Custom Redirects\u003C\/b\u003E tool.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-nma4XzKH434\/U7NmwmiRPvI\/AAAAAAAAJaw\/Wx52ENYIVNQ\/s1600\/blogger-custom-redirects-redirect-old-url-to-new-url.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-nma4XzKH434\/U7NmwmiRPvI\/AAAAAAAAJaw\/Wx52ENYIVNQ\/s1600\/blogger-custom-redirects-redirect-old-url-to-new-url.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003EIn this post, we will see how to set custom redirects for Blogger posts and redirect an old URL to a new URL. But before redirecting any URL, you must know that there are two types of redirects:\u003Cbr \/\u003E\u003Cbr \/\u003EA \u003Ci\u003E\u003Cb\u003E302 redirect\u003C\/b\u003E\u003C\/i\u003E means that the page \u003Ci\u003E\u003Cb\u003Ehas moved temporarily\u003C\/b\u003E\u003C\/i\u003E. This redirect doesn't pass the URL value to the new location and instead, it will take the visitors to an appropriate location so that you aren't showing them a 404 page not found, or an error page. You can use a 302 redirect for coming soon pages or maintenance pages. \u003Cbr \/\u003E\u003Cbr \/\u003EA \u003Ci\u003E\u003Cb\u003E301 redirect\u003C\/b\u003E\u003C\/i\u003E means that a page \u003Ci\u003E\u003Cb\u003Ehas moved permanently\u003C\/b\u003E\u003C\/i\u003E to a new location. Use the 301 redirect when you deleted or changed the URL of your post. In most instances, the 301 redirects are always recommended for SEO because they will pass link juice (ranking power) to the redirected page and visitors will also benefit from this. However, 301s aren't suitable when you change your custom-domain, because it only supports redirection within the same blog, not to an external URL.\u003Cbr \/\u003E\u003Cbr \/\u003ENow that we've established which is which, let's see how to set custom redirects for Blogger posts.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to redirect old URL to new URL in Blogger\u003C\/h3\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E Login to you Blogger account with email and password.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E Click on your blog \u0026gt; go to Settings \\ Search Preferences and click \"Edit\" next to \"Custom Redirects.\"\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-brDx_7HqOoY\/U7M4xx3YWRI\/AAAAAAAAJZc\/6XqtWyQt5FE\/s1600\/search-preferences-custom-redirects-301-permanently-302-temporary-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"search preferences, custom redirects, 301, 302 redirect\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-brDx_7HqOoY\/U7M4xx3YWRI\/AAAAAAAAJZc\/6XqtWyQt5FE\/s1600\/search-preferences-custom-redirects-301-permanently-302-temporary-blogger.png\" height=\"172\" title=\"How To Set Custom Redirects for Blogger Post\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3.\u003C\/span\u003E\u003C\/b\u003E Enter the old URL in the \"From\" field, and the new URL in the \"To\" field including the forward slash \"\/\" (see the screenshot below)\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-6ELsFAALT_M\/U7M8IOZB-iI\/AAAAAAAAJZw\/kAYIhpZvnsk\/s1600\/custom-redirects-blogger-old-url-new-url.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"custom redirects, redirect old url to new url\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-6ELsFAALT_M\/U7M8IOZB-iI\/AAAAAAAAJZw\/kAYIhpZvnsk\/s1600\/custom-redirects-blogger-old-url-new-url.png\" height=\"152\" title=\"How To Set Custom Redirects in Blogger\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ci\u003ENote: Do not enter the full URL in these fields. Just omit the address of your blog and type only the rest of the link. Again, this works only if you wish to redirect within your blogger blog and not to any external links.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4.\u003C\/span\u003E\u003C\/b\u003E Click the \"Save\" link (1) and the \"Save changes\" button (2), and you're done!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-t0jjdix6nQM\/U7M_FvzbvTI\/AAAAAAAAJZ8\/Yt0L8B10vKU\/s1600\/custom-redirects-to-from-permanent-blogger-deleted-new-page.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom redirects\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-t0jjdix6nQM\/U7M_FvzbvTI\/AAAAAAAAJZ8\/Yt0L8B10vKU\/s1600\/custom-redirects-to-from-permanent-blogger-deleted-new-page.png\" height=\"110\" title=\"How To Set Custom Redirects in Blogger\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-lbBoZ0V4MF8\/U7M_HSsAb4I\/AAAAAAAAJaE\/3vVfl08d2zo\/s1600\/custom-redirects-to-from-permanent-blogger-save-changes.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger custom redirect\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-lbBoZ0V4MF8\/U7M_HSsAb4I\/AAAAAAAAJaE\/3vVfl08d2zo\/s1600\/custom-redirects-to-from-permanent-blogger-save-changes.png\" height=\"107\" title=\"How To Set Custom Redirects in Blogger\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIf you want to redirect more pages, just click the \"New redirect\" button.\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1285196704586866731"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1285196704586866731"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/07\/how-to-set-custom-redirects-for-blogger-post.html","title":"How To Set Custom Redirects in Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-nma4XzKH434\/U7NmwmiRPvI\/AAAAAAAAJaw\/Wx52ENYIVNQ\/s72-c\/blogger-custom-redirects-redirect-old-url-to-new-url.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4541370581711947603"},"published":{"$t":"2014-06-22T17:35:00.000-07:00"},"updated":{"$t":"2014-07-10T18:10:49.024-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"How to Add or Invite Multiple Authors on Blogger"},"content":{"type":"html","$t":"If you ever considered working on a blog with multiple authors and you'd like to add others to publish posts or moderate comments, you can \u003Cb\u003Einvite multiple authors on your Blogger blog\u003C\/b\u003E. These additional authors have blog posting rights and can be either a guest author or blog administrator.\u003Cbr \/\u003E\u003Col\u003E\u003Cli\u003EAn author can create and edit only his\/her own posts and have restricted access to some of the blog' Settings. There, he or she will be able to access the Posting options and Add a mobile device, or remove themselves from the blog membership.\u0026nbsp;\u003C\/li\u003E\u003Cli\u003EAn administrator, on the other hand, will have FULL access to the blog' settings and  template. Users with this privilege can edit or delete posts made by other  members of the blog, add\/remove other members or transfer the ownership of a blog.\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-ZCZ8sa5DnFQ\/U6m52-s1RRI\/AAAAAAAAJXA\/mQBm6UWAZ_c\/s1600\/how-to-invite-multiple-authors-on-a-blogger-blog.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"invite multiple authors on blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-ZCZ8sa5DnFQ\/U6m52-s1RRI\/AAAAAAAAJXA\/mQBm6UWAZ_c\/s1600\/how-to-invite-multiple-authors-on-a-blogger-blog.png\" title=\"How to Add or Invite Multiple Authors on Blogger\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003ERelated: \u003C\/b\u003E\u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/02\/show-author-profile-picture-name-in-multi-author-blogger-blog.html\" style=\"color: blue;\" target=\"_blank\"\u003EAdd Author's Profile Picture and Name in Multi Author Blog\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to Invite Authors on Blogger\u003C\/h2\u003E\u003Cbr \/\u003ETo invite multiple authors on a Blogger blog is really easy. Just follow the steps below:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1. \u003C\/span\u003E\u003C\/b\u003ELog into your blogger account at \u003Ca href=\"http:\/\/blogger.com\/\" style=\"color: blue;\"\u003Eblogger.com\u003C\/a\u003E and click the name of your blog\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E\u0026nbsp;Click \"Settings\" on the left side of the page and go to the \"Basic\" tab:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-lGCjxr1eA1Y\/U6dV5os9ENI\/AAAAAAAAJVQ\/pHyW7FG7jVo\/s1600\/how-to-add-invite-multiple-authors-on-blogger-blog.png\" imageanchor=\"1\" style=\"margin-left: auto; margin-right: auto;\"\u003E\u003Cimg alt=\"invite multiple authors on blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-lGCjxr1eA1Y\/U6dV5os9ENI\/AAAAAAAAJVQ\/pHyW7FG7jVo\/s1600\/how-to-add-invite-multiple-authors-on-blogger-blog.png\" height=\"201\" title=\"How to Add or Invite Multiple Authors on Blogger 1\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003EInvite multiple authors on Blogger\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3.\u003C\/span\u003E\u003C\/b\u003E Look for the Permissions\/Blog authors section and click on the \"Add authors\" link. Enter the email address for each author you would like to invite, separating each address with a comma.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4.\u003C\/span\u003E\u003C\/b\u003E Click \"Invite authors\" button at the bottom once you're done. And that's it!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EManaging Authors\u003C\/h3\u003E\u003Cbr \/\u003EThe invited Authors will be listed after the invitations have been sent. They will need to click the\u0026nbsp;\"Accept Invitation\" button in the  invitation email in order to get started. Authors which have yet to accept or decline the invite will be listed under 'open invitations'. To remove an author from the blog, simply click the Remove icon next to the author's email address:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-MBmbCgG26iQ\/U6djy-IB7iI\/AAAAAAAAJVg\/uBzoTDeROXE\/s1600\/how-to-remove-invite-multiple-authors-on-blogger-blog.png\" imageanchor=\"1\" style=\"margin-left: auto; margin-right: auto;\"\u003E\u003Cimg alt=\"invite multiple authors on blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-MBmbCgG26iQ\/U6djy-IB7iI\/AAAAAAAAJVg\/uBzoTDeROXE\/s1600\/how-to-remove-invite-multiple-authors-on-blogger-blog.png\" height=\"103\" title=\"How to Add or Invite Multiple Authors on Blogger 2\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003ECancel the invitation\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003EOnce the invited member accept your  invitation, they will be listed as an \"Author\" by default. To give a person full admin privileges, you can change the \"Author\" status in the \"Permissions\" section of the Settings \u0026gt; Basic tab to \"Admin\":\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-ApA0nONDj2U\/U6dmEmBVU-I\/AAAAAAAAJVs\/1GybSBDrtbc\/s1600\/how-to-make-author-admin-on-blogger-blog.png\" imageanchor=\"1\" style=\"margin-left: auto; margin-right: auto;\"\u003E\u003Cimg alt=\"add second admin on blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-ApA0nONDj2U\/U6dmEmBVU-I\/AAAAAAAAJVs\/1GybSBDrtbc\/s1600\/how-to-make-author-admin-on-blogger-blog.png\" height=\"105\" title=\"How to Add or Invite Multiple Authors on Blogger 3\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003EChanging an Author into an Admin in Blogger\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003E\u003Cdiv style=\"padding: 0px 80px 0px 60px;\"\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-_Ij6UbqykUA\/U6jgCW5NmtI\/AAAAAAAAJV8\/N0sDUCni1JM\/s1600\/warning-sign.png\" imageanchor=\"1\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-_Ij6UbqykUA\/U6jgCW5NmtI\/AAAAAAAAJV8\/N0sDUCni1JM\/s1600\/warning-sign.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ci\u003EPlease proceed with caution! Administrators have as much power over your blog as you do, including the ability to permanently delete it!\u003C\/i\u003E\u003C\/div\u003E\u003Cbr \/\u003ESo this is \u003Cb\u003Ehow you can invite multiple authors in blogger\u003C\/b\u003E. With this feature, everyone on your team can help create different engaging content for your readers to enjoy. "},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/4541370581711947603\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/06\/add-or-invite-multiple-authors-on-blogger.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4541370581711947603"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4541370581711947603"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/06\/add-or-invite-multiple-authors-on-blogger.html","title":"How to Add or Invite Multiple Authors on Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-ZCZ8sa5DnFQ\/U6m52-s1RRI\/AAAAAAAAJXA\/mQBm6UWAZ_c\/s72-c\/how-to-invite-multiple-authors-on-a-blogger-blog.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-8821897467642141439"},"published":{"$t":"2014-06-21T15:00:00.000-07:00"},"updated":{"$t":"2014-07-27T12:18:11.986-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"How to Delete a Blogger Blog Permanently"},"content":{"type":"html","$t":"So you really messed something up and need to \u003Cb\u003Edelete a Blogger blog\u003C\/b\u003E permanently, but don't know how? You might have encountered an error message you can't get rid of, or it might be something wrong with the appearance. Blogger lets us to create up to 100 blogs without worrying about bandwidth, but sometimes we just want to reduce the number of junk blogs from list to keep it short and simple. In this case, we may have decided that it is time to delete it. So \u003Cb\u003Ehow do you delete a blog on Blogger permanently\u003C\/b\u003E?\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-A1AlHjZXCXg\/U6nFOiwoK_I\/AAAAAAAAJXc\/33ZT-gKq53U\/s1600\/how-to-delete-a-blogger-blog-permanently.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"delete a blogger blog permanently\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-A1AlHjZXCXg\/U6nFOiwoK_I\/AAAAAAAAJXc\/33ZT-gKq53U\/s1600\/how-to-delete-a-blogger-blog-permanently.png\" title=\"How to Delete a Blogger Blog Permanently\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-_Ij6UbqykUA\/U6jgCW5NmtI\/AAAAAAAAJWA\/CF4gY4L0pDo\/s1600\/warning-sign.png\" \/\u003E\u0026nbsp; \u003Ci\u003EImportant: Removing or deleting your Blogger blog will also delete all of your blog data, including your existing blog posts. This means that your blog visitors won't be able to view your blog anymore, and that posts and pages associated with Blogger will be removed from your blog.\u0026nbsp;\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E1. If you are not already logged in, log into your Blogger account at \u003Ca href=\"http:\/\/blogger.com\/\" style=\"color: blue;\"\u003Ehttp:\/\/blogger.com\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E2. From the Dashboard (that's the area you see right after logging in that lists all your blogs) select the blog you want to delete. Make sure that you click on the right blog if you have more than one.\u003Cbr \/\u003E\u003Cbr \/\u003E3. Navigate to the \u003Cb\u003ESettings\u003C\/b\u003E tab and just below it the \u003Cb\u003EOther\u003C\/b\u003E option. Click on it.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-xNSvLSehTvU\/U6X3BTAbC4I\/AAAAAAAAJUk\/eJTc5KjAd6c\/s1600\/how-to-delete-a-blogger-blog-permanently.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger settings, delete blogger blog\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-xNSvLSehTvU\/U6X3BTAbC4I\/AAAAAAAAJUk\/eJTc5KjAd6c\/s1600\/how-to-delete-a-blogger-blog-permanently.png\" height=\"460\" title=\"How to Delete a Blogger Blog Permanently 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E5. On the right side is the \u003Cb\u003EBlog tools\u003C\/b\u003E section. To proceed with the deletion then click on the \u003Cb\u003EDelete blog\u003C\/b\u003E link.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you think you may want to come back to your blog or you've got posts that you want to keep, you can use the \u003Cb\u003EExport blog\u003C\/b\u003E tool to export your blog before you delete it. You can either download your blog posts to your desktop or export it in a format that can be imported into other popular blogging formats.\u003Cbr \/\u003E\u003Cbr \/\u003E6. Confirm that you want to delete it and you're done.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-Om2k4ZsrW0U\/U6X32PfQLbI\/AAAAAAAAJUw\/QwENbjx-5ok\/s1600\/confirm-delete-blogger-blog.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"how to delete blogger blog\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-Om2k4ZsrW0U\/U6X32PfQLbI\/AAAAAAAAJUw\/QwENbjx-5ok\/s1600\/confirm-delete-blogger-blog.png\" height=\"316\" title=\"How to Delete a Blogger Blog Permanently 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOnce you've pressed the \u003Cb\u003EDelete This Blog\u003C\/b\u003E button, you will be redirected to the Dashboard. Notice that your blog is no longer displayed in the list of blogs. If you want to view your deleted blog you can click on the \u003Cb\u003EDeleted blogs\u003C\/b\u003E link on the left side of your Blogger Dashboard to see your recently deleted blogs.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-3voY2cYMgKE\/U6X3_98xkGI\/AAAAAAAAJU4\/zjnBdDFtDIQ\/s1600\/deleted-blogger-blogs-how-to.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"deleted blogger blogs\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-3voY2cYMgKE\/U6X3_98xkGI\/AAAAAAAAJU4\/zjnBdDFtDIQ\/s1600\/deleted-blogger-blogs-how-to.png\" height=\"200\" title=\"How to Delete a Blogger Blog Permanently 3\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EHere you'll be able to see your deleted blog including details of its deletion date. To restore your blog, click on the \u003Cb\u003EUndelete\u003C\/b\u003E button. Please keep in mind that deleted blogs can be restored within 90 days. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-HOVAc2hJbXE\/U6X4FcfetdI\/AAAAAAAAJVA\/BbvpTe4-kJw\/s1600\/deleted-blogs-blogger-undelete.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"undelete blogger blog\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-HOVAc2hJbXE\/U6X4FcfetdI\/AAAAAAAAJVA\/BbvpTe4-kJw\/s1600\/deleted-blogs-blogger-undelete.png\" height=\"160\" title=\"How to Delete a Blogger Blog Permanently 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIn this tutorial, we have covered some basic reasons why we might want to \u003Cb\u003Edelete a Blogger blog permanently\u003C\/b\u003E and the steps involved in deleting a Blogger blog. Instead of deleting the blog, you also have the option of making your blog private. By making it private, the blog will be kept in your Blogger account but no one will be able to view the blog without your permission."},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8821897467642141439"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8821897467642141439"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/06\/how-to-delete-blogger-blog-permanently.html","title":"How to Delete a Blogger Blog Permanently"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-A1AlHjZXCXg\/U6nFOiwoK_I\/AAAAAAAAJXc\/33ZT-gKq53U\/s72-c\/how-to-delete-a-blogger-blog-permanently.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-7915699401439068963"},"published":{"$t":"2014-05-21T11:44:00.001-07:00"},"updated":{"$t":"2014-07-27T12:19:38.525-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"google plus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"}],"title":{"type":"text","$t":"How to Share Blogger Posts or Pages to Google+"},"content":{"type":"html","$t":"When you share Blogger posts\/pages to Google+, an entirely new group of people will be able to find and follow you. Right now, if you access your Blogger dashboard, you'll notice that there's a Google+ tab which can be used to connect your blogs with your Google+ profile or page. If your Blogger blogs haven't already been integrated with a Google+ profile, you can go anytime to the Google+ tab and click on the \u003Cb\u003EGet Started\u003C\/b\u003E button:\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-ez4zWOGgxBs\/U6oTIqxA7AI\/AAAAAAAAJYQ\/mUo4cVFFBeA\/s1600\/how-to-share-posts-or-pages-to-google-plus.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"share blogger posts or pages to google plus\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-ez4zWOGgxBs\/U6oTIqxA7AI\/AAAAAAAAJYQ\/mUo4cVFFBeA\/s1600\/how-to-share-posts-or-pages-to-google-plus.png\" title=\"How to Share Blogger Posts or Pages to Google+\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-cmgCvqSDNF0\/U3y8ktmwEEI\/AAAAAAAAJIY\/BuoR0ZZb4T0\/s1600\/google-plus-get-started-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"get started with google+\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-cmgCvqSDNF0\/U3y8ktmwEEI\/AAAAAAAAJIY\/BuoR0ZZb4T0\/s1600\/google-plus-get-started-blogger.png\" height=\"352\" title=\"How to Share Blogger Posts or Pages to Google+\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIt's important to note that once you've upgraded your blog to connect with Google+, the posts or pages published on your blog will be listed on your personal Google+ profile. However, you have the option to select whether your content will be shared on your Google+ Profile or Page and associate some blogs with a Google+ page, while keeping other blogs connected with your profile.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to associate your blog with a Google+ page\u003C\/h2\u003E\u003Cbr \/\u003EIn some cases, you may want to associate a blog with the Google+ Page for your brand, business or organisation, rather than your personal profile. For this, simply access your Blogger dashboard, visit the Google+ tab and there you can swap the Google+ connection from using your profile page to a Google+ page linked with your account:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-tZAKZ9bvEKU\/U3zVBgrc-NI\/AAAAAAAAJIo\/lhofBpvXWOM\/s1600\/google-plus-settings-blogger-share-posts-or-pages.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"share on google plus\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-tZAKZ9bvEKU\/U3zVBgrc-NI\/AAAAAAAAJIo\/lhofBpvXWOM\/s1600\/google-plus-settings-blogger-share-posts-or-pages.png\" height=\"292\" title=\"How to Share Blogger Posts or Pages to Google+\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOn the right, you'll have the following options:\u003Cbr \/\u003E\u003Cbr \/\u003E- \u003Cb\u003EAutomatically share after posting\u003C\/b\u003E: This option is enabled by default on all blogs linked to Google+. When you publish a blog post or page, a snippet will automatically be shared publicly on your Google+ page or profile. You can disable this setting just by unchecking this box.\u003Cbr \/\u003E- \u003Cb\u003EPromote to share after posting\u003C\/b\u003E: If you don't want your post to be published automatically, then you can check this option. This option will allow you to share only some blog posts, or share to specific circles.\u003Cbr \/\u003E- \u003Cb\u003EUse Google + comments on this blog\u003C\/b\u003E: This option enables the new Google + comment system on your blog. This is also a new feature provided by Google.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EShare Blogger posts or Pages on Google+\u003C\/h2\u003EIf you have the \u003Cb\u003EPrompt to share after posting option\u003C\/b\u003E checked, next time you publish a blog post, you'll see a share box inviting you to share your post with your Google+ followers. Note that the default circle is set to \"Public\" but you can modify your circles every time you choose to share.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-xBcSTmxDo44\/U3zYP1rvpLI\/AAAAAAAAJIw\/k9j32Ekykj0\/s1600\/share-blogger-post-page-on-google-plus.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"share post on google plus\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-xBcSTmxDo44\/U3zYP1rvpLI\/AAAAAAAAJIw\/k9j32Ekykj0\/s1600\/share-blogger-post-page-on-google-plus.png\" height=\"320\" title=\"How to Share Blogger Posts or Pages to Google+\" width=\"285\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOnce you click the \u003Cb\u003EShare\u003C\/b\u003E button, this post will appear on the profile or page to which you have connected your blog. Keep in mind that if you have posts scheduled to be published later, you will no longer be asked to publish to your Google+ stream. In this case, you can choose to Share your post\/page at any time by clicking the \u003Cb\u003EShare\u003C\/b\u003E link beneath a post or page.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-Cn-RIi88Uis\/U3zwTdG-FdI\/AAAAAAAAJJM\/D74X2HhfEbM\/s1600\/share-blogger-pages-or-posts-on-google-plus.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"share blogger posts on google+\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-Cn-RIi88Uis\/U3zwTdG-FdI\/AAAAAAAAJJM\/D74X2HhfEbM\/s1600\/share-blogger-pages-or-posts-on-google-plus.png\" height=\"155\" title=\"How to Share Blogger Posts or Pages to Google+\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EYou can also click on this option each time you want to share only certain posts, or if you want to retroactively share posts and you don't want to constantly change the setting. \u003Cbr \/\u003E\u003Cbr \/\u003EAs soon as you've chosen to use your Google+ profile on your blog, you can start sharing your content on Google+. If you haven't yet made the switch, click on \u003Ca href=\"http:\/\/blogger.com\/switch-profile.g\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Ethis link\u003C\/a\u003E to get started. "},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/7915699401439068963\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-share-blogger-posts-or-pages-to-google-plus.html#comment-form","title":"3 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7915699401439068963"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7915699401439068963"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-share-blogger-posts-or-pages-to-google-plus.html","title":"How to Share Blogger Posts or Pages to Google+"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-ez4zWOGgxBs\/U6oTIqxA7AI\/AAAAAAAAJYQ\/mUo4cVFFBeA\/s72-c\/how-to-share-posts-or-pages-to-google-plus.png","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-1261260899336154931"},"published":{"$t":"2014-05-18T12:35:00.001-07:00"},"updated":{"$t":"2014-08-07T18:29:05.939-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger pages"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"static pages"}],"title":{"type":"text","$t":"How to add Static Pages to a Blogger Blog (UPDATED)"},"content":{"type":"html","$t":"A few months ago, Blogger has completely redesigned the section of the Pages, which now, looks very similar to that of the Blogger Posts. Now we will be able to manage the pages with more flexibility. For example, we can publish, delete or change many of them to draft at the same time - which has just the same function as the old \u003Cb\u003EDon't show\u003C\/b\u003E option.\u003Cbr \/\u003E\u003Cbr \/\u003EAmong the options that we can find by hovering over a page and which we can see in the screenshot below are:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EEdit\u003C\/b\u003E: To access the editing panel and to edit its contents.\u003Cbr \/\u003E\u003Cb\u003EView\u003C\/b\u003E: Open a new tab with the actual page.\u003Cbr \/\u003E\u003Cb\u003EShare\u003C\/b\u003E: Share it on Google+ (which was not possible before)\u003Cbr \/\u003E\u003Cb\u003EDelete\u003C\/b\u003E: remove a page.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-IK8w7nDbOl8\/U6oYDrGoD2I\/AAAAAAAAJYg\/sa9sF2DL-5Y\/s1600\/how-to-add-static-pages-to-blogger-blog.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add static pages on blogger\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-IK8w7nDbOl8\/U6oYDrGoD2I\/AAAAAAAAJYg\/sa9sF2DL-5Y\/s1600\/how-to-add-static-pages-to-blogger-blog.png\" title=\"How to add Static Pages to a Blogger Blog (UPDATED)\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-gddX3T94kDM\/U3jsgoOgwaI\/AAAAAAAAJFA\/Ku0as9olNUw\/s1600\/blogger-pages-edit-vew-share-delete.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"static pages, blogger\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-gddX3T94kDM\/U3jsgoOgwaI\/AAAAAAAAJFA\/Ku0as9olNUw\/s1600\/blogger-pages-edit-vew-share-delete.png\" height=\"180\" title=\"How to add Static Pages to a Blogger Blog (UPDATED)\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIn order to create a page, we need to open the pages editor from the button that says \u003Cb\u003ENew Page\u003C\/b\u003E. Almost every option tells us its function.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to add a Web Address in the Pages widget\u003C\/h2\u003E\u003Cbr \/\u003EMany Blogger users wanted to know how can we add other web addresses, so that they display in the list of the Pages widget, since this option no longer appears in the \"Pages\" tab?\u003Cbr \/\u003E\u003Cbr \/\u003EWell, now we will have to open the settings of the Pages widget by going to \u003Cb\u003ELayout\u003C\/b\u003E, then click on the \u003Cb\u003EEdit\u003C\/b\u003E link in the widget \/ gadget for \u003Cb\u003EPages\u003C\/b\u003E (if you don't have the Pages gadget, just click on the \u003Cb\u003EAdd a gadget link\u003C\/b\u003E and select \"Pages\" from the pop-up window). And from there, we will find the option that says: \u003Cb\u003EAdd link page\u003C\/b\u003E and we will have to type the Web Address in the second field every time we want to add a new page from a specific address or URL (see the screenshot below).\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-Lg0OVvxgq34\/U3jrivK_QoI\/AAAAAAAAJEs\/TaU3xlfIUt0\/s1600\/blogger-pages-widget-how-to-add-a-web-adress.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add web address, blogger tutorial\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-Lg0OVvxgq34\/U3jrivK_QoI\/AAAAAAAAJEs\/TaU3xlfIUt0\/s1600\/blogger-pages-widget-how-to-add-a-web-adress.png\" height=\"223\" title=\"How to add Static Pages to a Blogger Blog (UPDATED)\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EAnother cool feature that has been built is that now it will be possible to add a search description, and in that field to add the text that we want to appear in search results. Until now, this option has been available only for blog posts.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-uvjwu2P8kXY\/U3jr01ZiC9I\/AAAAAAAAJE0\/JJNFyBxJbt0\/s1600\/blogger-page-search-description.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"search description for pages\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-uvjwu2P8kXY\/U3jr01ZiC9I\/AAAAAAAAJE0\/JJNFyBxJbt0\/s1600\/blogger-page-search-description.png\" height=\"284\" title=\"How to add Static Pages to a Blogger Blog (UPDATED)\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis option will appear once you enable the \u003Cb\u003EEnable search description?\u003C\/b\u003E option by choosing \u003Cb\u003EYes\u003C\/b\u003E. This will show up on \"\u003Cb\u003EMeta Tags\u003C\/b\u003E\" by accessing the preferences for the search engines: \u003Cb\u003ESettings\u003C\/b\u003E \u0026gt; \u003Cb\u003ESearch preferences\u003C\/b\u003E \u0026gt; \u003Cb\u003EMeta Tags\u003C\/b\u003E \u0026gt; \u003Cb\u003EEnable search description\u003C\/b\u003E?"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/1261260899336154931\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-add-static-pages-to-blogger-blog.html#comment-form","title":"11 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1261260899336154931"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1261260899336154931"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-add-static-pages-to-blogger-blog.html","title":"How to add Static Pages to a Blogger Blog (UPDATED)"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-IK8w7nDbOl8\/U6oYDrGoD2I\/AAAAAAAAJYg\/sa9sF2DL-5Y\/s72-c\/how-to-add-static-pages-to-blogger-blog.png","height":"72","width":"72"},"thr$total":{"$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-7266582666744642898"},"published":{"$t":"2014-05-12T14:26:00.005-07:00"},"updated":{"$t":"2014-06-24T12:22:31.328-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"css"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"}],"title":{"type":"text","$t":"Responsive CSS Timeline with 3D Effect for Blogger"},"content":{"type":"html","$t":"Here's another amazing way to display our Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogger Posts, we will have a responsive timeline-like structure of the most recent posts and their thumbnails, along with some cool CSS effects. When clicking on the associated radio input, the posts snippet\/summary will expand by changing their style and size and will rotate in 3D.  The main structure of this CSS timeline with 3D effect is an unordered list.\u003Cbr \/\u003E\u003Cbr \/\u003ETo get an idea of what it looks like, you can visit this \u003Ca href=\"http:\/\/life-famous-quotes.blogspot.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Edemo blog\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-2VK5LJOstKc\/U6mYRMe_rUI\/AAAAAAAAJWQ\/wU6Y9AoaT0M\/s1600\/responsive-css-timeline-effect-for-blogger-posts.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"responsive CSS timeline, customize blogger posts\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-2VK5LJOstKc\/U6mYRMe_rUI\/AAAAAAAAJWQ\/wU6Y9AoaT0M\/s1600\/responsive-css-timeline-effect-for-blogger-posts.png\" height=\"460\" title=\"Responsive CSS Timeline with 3D Effect for Blogger Posts\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Ch2\u003EHow to Add Responsive CSS Timeline View to Blogger Posts \u003C\/h2\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E\u003C\/span\u003E Go to \u003Ca href=\"http:\/\/www.blogger.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E \u0026gt; \u003Cb\u003ETemplate\u003C\/b\u003E \u0026gt; click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template, edit html\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" title=\"Responsive CSS Timeline with 3D Effect for Blogger Posts\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 2. \u003C\/b\u003E\u003C\/span\u003EClick anywhere inside the code area and press the CTRL + F keys to open the search box:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-5nCDW329k6I\/Us9kWq0wcqI\/AAAAAAAAF1I\/PIe9SpIdtjc\/s1600\/blogger-template-search-box.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger search box\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-5nCDW329k6I\/Us9kWq0wcqI\/AAAAAAAAF1I\/PIe9SpIdtjc\/s1600\/blogger-template-search-box.png\" height=\"105\" title=\"Responsive CSS Timeline with 3D Effect for Blogger Posts\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 3. \u003C\/b\u003E\u003C\/span\u003EType or paste the following tag inside the search box and hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E\u003C\/span\u003E Just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag, copy and paste the following style:\u003Cbr \/\u003E\u003Cdiv class=\"code1\"\u003E\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.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,\u003Cbr \/\u003E.BlogList .item-thumbnail img {padding: 0px; border: 0px;}\u003Cbr \/\u003E.post-footer {display: none;}\u003Cbr \/\u003E.post {margin-bottom: 50px; padding-bottom: 0px; background: none; border: none;}\u003Cbr \/\u003E.jump-link a {display: none;}\u003Cbr \/\u003E\u0026nbsp; h3.post-title a {display: none;}\u003Cbr \/\u003E\u0026nbsp;.date-header {display: none;}\u003Cbr \/\u003E*,\u003Cbr \/\u003E.timeline:after,\u003Cbr \/\u003E.timeline:before {box-sizing: border-box;padding: 0; margin: 0;}\u003Cbr \/\u003E.timeline {position: relative;padding: 30px 0 50px 0;font-family: Arial, sans-serif;}\u003Cbr \/\u003E.timeline:before {content: \u0026amp;#39;\u0026amp;#39;;position: absolute;width: 5px;height: 100%;margin:0px;top: 0;left: 200px;background: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP\/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);}\u003Cbr \/\u003E.event {position: relative;margin-bottom: 80px;padding-right: 40px;}\u003Cbr \/\u003E.thumb {position: absolute; width: 90px; height: 90px;box-shadow:\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; 0 0 0 8px #87939E,\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; 0 1px 1px rgba(255,255,255,0.5);background-repeat: no-repeat;border-radius: 50%;-webkit-transform: scale(0.8) translateX(24px);-moz-transform: scale(0.8) translateX(24px);-o-transform: scale(0.8) translateX(24px);-ms-transform: scale(0.8) translateX(24px);transform: scale(0.8) translateX(24px);}\u003Cbr \/\u003E.thumb:before {content: \u0026amp;#39;\u0026amp;#39;;background: transparent url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP\/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);position: absolute;height: 8px; z-index: -1; width: 50px;top: 42px; left: 100%;margin-left: 8px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.thumb span {color: #87939E;width: 100%;text-align: center;font-weight: 700;font-size: 15px;text-transform: uppercase;position: absolute;bottom: -30px;}\u003Cbr \/\u003E.event label,.event input[type=\u0026amp;quot;radio\u0026amp;quot;] {width: 24px;height: 24px;left: 158px;top: 36px;position: absolute;display: block;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;] {opacity: 0;z-index: 10;cursor: pointer;}\u003Cbr \/\u003E.event label:after{content: \u0026amp;quot;\\2713\u0026amp;quot;;background: #8995A1;border-radius: 50%;color: #fff;font-size: 20px;height: 100%;width: 100%;font-weight: bold;left: -2px;top: -3px;line-height: 24px;position: absolute;text-align: center;}\u003Cbr \/\u003E.content-perspective { margin-left: 230px;position: relative;perspective: 600px;-webkit-perspective: 600px;-moz-perspective: 600px;-o-perspective: 600px;-ms-perspective: 600px;}\u003Cbr \/\u003E.content-perspective:before { content: \u0026amp;#39;\u0026amp;#39;; width: 34px; left: -44px; top: 48px;position: absolute;height: 1px; z-index: -2;background: #fff;}\u003Cbr \/\u003E.post-content {transform: rotateY(10deg);transform-origin: 0 0;transform-style: preserve-3d;}\u003Cbr \/\u003E.blog-post-body {position: relative;padding: 20px;color: #333; border-left: 5px solid #8995A1;box-shadow: 0 4px 6px rgba(0,0,0,0.1);background: #F9F9F9;}\u003Cbr \/\u003E.blog-post-body h3 {border: none;margin: 0px;}\u003Cbr \/\u003E.blog-post-body h3 a{font-size: 21px;padding: 5px 0 5px 0;color: #86919D;margin: 0px;text-decoration: none;border: none;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body h3 a{color: #F26328;}\u003Cbr \/\u003E.blog-post-body p,.thumb span,.event label {-webkit-backface-visibility: hidden;}\u003Cbr \/\u003E.blog-post-body p {font-size: 15px;max-height: 0px; overflow: hidden; color: rgba(0,0,0,0);text-align: left;}\u003Cbr \/\u003E.blog-post-body:before {content: \u0026amp;#39;\\25c2\u0026amp;#39;;font-weight: normal; line-height: 86px; font-size: 86px;position: absolute;color: #8995A1; left: -41px;width: 100%;height: 100%; top: 3px;z-index: -1;}\u003Cbr \/\u003E.thumb,.thumb span,.blog-post-body h3 {transition: all 0.6s ease-in-out 0.2s;-webkit-transition: all 0.6s ease-in-out 0.2s;-moz-transition: all 0.6s ease-in-out 0.2s;-o-transition: all 0.6s ease-in-out 0.2s;-ms-transition: all 0.6s ease-in-out 0.2s;transition: all 0.6s ease-in-out 0.2s;}\u003Cbr \/\u003E.blog-post-body { transition: box-shadow 0.8s linear 0.2s;-webkit-transition: box-shadow 0.8s linear 0.2s;-moz-transition: box-shadow 0.8s linear 0.2s;-o-transition: box-shadow 0.8s linear\u0026nbsp; 0.2s;-ms-transition: box-shadow 0.8s linear 0.2s;}\u003Cbr \/\u003E.post-content {transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;}\u003Cbr \/\u003E.blog-post-body p { transition: max-height 0.5s linear, color 0.3s linear;-webkit-transition: max-height 0.5s linear, color 0.3s linear;-moz-transition: max-height 0.5s linear, color 0.3s linear;-o-transition: max-height 0.5s linear, color 0.3s linear;-ms-transition: max-height 0.5s linear, color 0.3s linear;} \u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked + label:after {content: \u0026amp;#39;\\2714\u0026amp;#39;;color: #fff;background: #F26328;box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective:before {background: #F26328;}\u003Cbr \/\u003E\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body h3 { color: #F26328;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .post-content {transform: rotateY(-5deg);-webkit-transform: rotateY(-5deg);-moz-transform: rotateY(-5deg);-o-transform: rotateY(-5deg);-ms-transform: rotateY(-5deg);}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body p {max-height: 460px; color: rgba(0,0,0,0.6); transition-delay: 0s, 0.6s;-webkit-transition-delay: 0s, 0.6s;-moz-transition-delay: 0s, 0.6s;-o-transition-delay: 0s, 0.6s;-ms-transition-delay: 0s, 0.6s;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body:before {color: #F26328;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb {transform: scale(1);box-shadow: 0 0 0 8px rgba(242,99,40,1), 0 1px 1px rgba(255,255,255,0.5); -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb span {color: #F26328;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb:before {\u003Cbr \/\u003Ebackground: transparent url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);}\u003Cbr \/\u003E@media screen and (max-width: 850px) {.blog-post-body h3 {font-size: 20px;}\u003Cbr \/\u003E\u0026nbsp;.blog-post-body p { font-size: 14px; text-align: justify; }\u003Cbr \/\u003E\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body p { max-height: 500px; }}\u003Cbr \/\u003E@media screen and (max-width: 540px) {.timeline:before { left: 50px;}\u003Cbr \/\u003E.event {padding-right: 0px; margin-bottom: 100px; }\u003Cbr \/\u003E\u0026nbsp;.thumb { transform: scale(0.8); -webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-ms-transform: scale(0.8);}\u003Cbr \/\u003E\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;] { width: 100px;height: 100px;left: 0px;top: 0px; }\u003Cbr \/\u003E.thumb:before,.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .thumb:before {background: none;width: 0;}\u003Cbr \/\u003E\u0026nbsp;.event label {display: none;}\u003Cbr \/\u003E\u0026nbsp;.content-perspective {margin-left: 0px;top: 80px;}\u003Cbr \/\u003E\u0026nbsp;.content-perspective:before {height: 0px; }\u003Cbr \/\u003E\u0026nbsp;.post-content { transform: rotateX(-10deg);-webkit-transform: rotateX(-10deg);-moz-transform: rotateX(-10deg);-o-transform: rotateX(-10deg);-ms-transform: rotateX(-10deg);}\u003Cbr \/\u003E\u0026nbsp;.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .post-content { transform: rotateX(10deg);-webkit-transform: rotateX(10deg);-moz-transform: rotateX(10deg);-o-transform: rotateX(10deg);-ms-transform: rotateX(10deg);}\u003Cbr \/\u003E.blog-post-body {border-left: none;border-top: 5px solid #8995A1;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);}\u003Cbr \/\u003E.blog-post-body:before {content: \u0026amp;#39;\\25b4\u0026amp;#39;;left: 33px; top: -32px;}\u003Cbr \/\u003E.event input[type=\u0026amp;quot;radio\u0026amp;quot;]:checked ~ .content-perspective .blog-post-body p {max-height:300px; }}\u003Cbr \/\u003Eul.timeline {list-style-type: none;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt; \u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 5. \u003C\/b\u003E\u003C\/span\u003ESearch for the SECOND instance of this code below (hit Enter two times):\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003ENote:\u003C\/b\u003E depending on the template you are using, you could find more lines like this one above. Therefore, if you don't see any changes after saving the template, try to replace the last one, as well.\u003Cbr \/\u003E\u003Cbr \/\u003EAlso, please note that if you are using the Read more function, you may need to remove it in order to make it work.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 6.\u003C\/b\u003E\u003C\/span\u003E After you found \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/span\u003E - replace it this code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\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;ul class='timeline'\u0026gt;\u0026lt;li class='event'\u0026gt;\u0026lt;input checked='checked' name='tl-group' type='radio'\/\u0026gt;\u0026lt;label\/\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:post.thumbnailUrl'\u0026gt;\u0026lt;img class='thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;div class='thumb'\u0026gt;\u0026lt;b:if cond='data:post.dateHeader'\u0026gt;\u0026lt;span\u0026gt;\u0026lt;data:post.dateHeader\/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='content-perspective'\u0026gt;\u0026lt;div class='post-content'\u0026gt;\u0026lt;div class='blog-post-body'\u0026gt;\u0026lt;h3\u0026gt;\u0026lt;b:if cond='data:post.link'\u0026gt;\u0026lt;a expr:href='data:post.link'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;b:else\/\u0026gt;\u0026lt;b:if cond='data:post.url'\u0026gt;\u0026lt;b:if cond='data:blog.url != data:post.url'\u0026gt;\u0026lt;a expr:href='data:post.url'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;b:else\/\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;b:else\/\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/h3\u0026gt;\u0026lt;p\u0026gt;\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u0026lt;data:post.snippet\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/p\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 7.\u003C\/b\u003E \u003C\/span\u003EFinally, click on the \u003Cb\u003ESave template\u003C\/b\u003E button to save the changes.\u003Cbr \/\u003E\u003Cbr \/\u003ENow, we will need to make some small adjustments in order to make the posts date appear correctly:\u003Cbr \/\u003EGo to \u003Cb\u003ELayout\u003C\/b\u003E and click on the \u003Cb\u003EEdit\u003C\/b\u003E link just below the Blog posts area. When the pop-up window appears, check the date option and choose to display the date in the following order (date\/month\/year):\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-diaKlrIouqA\/U3E0cjW8uAI\/AAAAAAAAJEA\/MTVbP9ZK5BA\/s1600\/configure-blog-posts-on-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-diaKlrIouqA\/U3E0cjW8uAI\/AAAAAAAAJEA\/MTVbP9ZK5BA\/s1600\/configure-blog-posts-on-blogger.png\" height=\"226\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ENote that you can also hide the posts date by unchecking this option.\u003Cbr \/\u003EFinally, click on the \u003Cb\u003ESave\u003C\/b\u003E button and that's it! View your blog and enjoy this Responsive Timeline view with 3D Effect on Blogger posts. If you need more help, please leave a comment below.\u003Cbr \/\u003E\u003Cbr \/\u003ECredit: \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2012\/11\/19\/responsive-css-timeline-with-3d-effect\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Etympanus.net\u003C\/a\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/7266582666744642898\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/responsive-css-timeline-with-3d-effect-for-blogger-posts.html#comment-form","title":"7 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7266582666744642898"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7266582666744642898"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/responsive-css-timeline-with-3d-effect-for-blogger-posts.html","title":"Responsive CSS Timeline with 3D Effect for Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-2VK5LJOstKc\/U6mYRMe_rUI\/AAAAAAAAJWQ\/wU6Y9AoaT0M\/s72-c\/responsive-css-timeline-effect-for-blogger-posts.png","height":"72","width":"72"},"thr$total":{"$t":"7"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-3281876907361775925"},"published":{"$t":"2014-05-02T11:25:00.000-07:00"},"updated":{"$t":"2014-06-24T17:06:19.288-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"google plus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"threaded comments"}],"title":{"type":"text","$t":"How to Enable Google Plus Comments in Blogger"},"content":{"type":"html","$t":"\u003Ch2\u003EHow to Enable Google Plus Comments in Blogger\u003C\/h2\u003ELong time ago, Google proudly announced their new integrated commenting system which is now available for users who have created a Google+ profile and connected it with their Blogspot blogs. This way, Blogger users will be able to use Google+ as a commenting system for their blogs, while comments from Google+ will automatically appear on their blogs. \u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-x9LdH_hd9Jo\/U6oSXCerb6I\/AAAAAAAAJYE\/bipARNMzias\/s1600\/google-plus-commenting-system-on-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"google plus commenting system on blogger\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-x9LdH_hd9Jo\/U6oSXCerb6I\/AAAAAAAAJYE\/bipARNMzias\/s1600\/google-plus-commenting-system-on-blogger.png\" title=\"How to Enable Google Plus Comments in Blogger\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EFor those who haven't yet upgraded the Blogger profile to a Google+ profile, here's a tutorial on \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-share-blogger-posts-or-pages-to-google-plus.html\" style=\"color: blue;\" target=\"_blank\"\u003Ehow to associate a blog to a Google plus page\u003C\/a\u003E. Once you have connected a blog to a Google+ profile, you'll have a new \"\u003Cb\u003EUse Google+ Comments on this blog\u003C\/b\u003E\" setting on the Google+ tab of your blog. To enable the Google plus commenting system, just check the box next to this setting:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-iqr0I_rkZV0\/U5Hs-hAMK7I\/AAAAAAAAJN8\/rVcLCggzoEY\/s1600\/google-plus-comments-on-this-blog-blogger-settings.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"use google+ comments on this blog, blogger tutorial\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-iqr0I_rkZV0\/U5Hs-hAMK7I\/AAAAAAAAJN8\/rVcLCggzoEY\/s1600\/google-plus-comments-on-this-blog-blogger-settings.png\" height=\"294\" title=\"How to Enable Google Plus Comments in Blogger\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EAs soon as you've enabled the feature through your Blogger Dashboard, you'll have the following features:\u003Cbr \/\u003E\u003Cbr \/\u003E- \u003Cb\u003EThreaded commenting system\u003C\/b\u003E: the threaded system will allow a reader to reply to other comments on that post, thus the conversations will become much easier, more effective and more enjoyable\u003Cbr \/\u003E- \u003Cb\u003EPublic and private comments\u003C\/b\u003E: this ensures a better privacy for your visitors which can make their comments either public or private\u003Cbr \/\u003E- \u003Cb\u003EEdit or delete comments\u003C\/b\u003E: your visitors will be able to edit any comments that they wrote even after publishing, so they don't have to write another comment  explaining the correction\u003Cbr \/\u003E- \u003Cb\u003EGoogle Plus One (+1) button in comments\u003C\/b\u003E: we can up-vote any comment by clicking this button. This is a great feature which could also help you to get some traffic from Google+\u003Cbr \/\u003E- \u003Cb\u003E\"Also share on Google+\" check box\u003C\/b\u003E: with this option which is right below the comment editor, we will be able to share a specific comment on Google+ and thus get more traffic!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EThings to consider before adding the Google Plus Comments in Blogger:\u003C\/h3\u003E- the Google Plus commenting system won't work for private and adult blogs\u003Cbr \/\u003E- If you are using a third-party commenting system like Disqus, your comments might not be retained when you enable Google+ Comments\u003Cbr \/\u003E- If you change domain name, comments will be gone. Therefore, it would be highly recommended to implement the Google Plus commenting system only after you've decided to use a custom domain name \u003Cbr \/\u003E- If you choose to allow comments pending moderation, you will have to visit the post in order to  approve, hide or delete comments before they are publicly visible\u003Cbr \/\u003E- Only registered Google+ users can comment, this means that visitors who don't have a Google+ account will not be able to comment on your blog\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to Enable Google Plus on Custom Blogger Templates\u003C\/h2\u003E\u003Cbr \/\u003EIf you are using a custom blogger template, the comments might not show up after checking the \"\u003Cb\u003EUse Google+ Comments on this blog\u003C\/b\u003E\" setting. In this case, we will need to apply the following trick in order to enable it on custom templates:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 1. \u003C\/b\u003E\u003C\/span\u003EFrom the \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EBlogger Dashboard\u003C\/a\u003E, go to \u003Cb\u003ETemplate\u003C\/b\u003E and click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 2.\u003C\/b\u003E\u003C\/span\u003E Click anywhere inside the code area and press the Ctrl + F keys to open the Blogger search box.\u003Cbr \/\u003EType or paste the following line inside the search box and hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E\u003C\/span\u003E Just below it, paste this code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'\/\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E\u003C\/span\u003E Click on the \u003Cb\u003ESave template\u003C\/b\u003E button to save the changes... and that's it. Now we should be able to enjoy the Google Plus comments in our Blogspot blogs.\u003Cbr \/\u003E\u003Cbr \/\u003EHappy commenting!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/3281876907361775925\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-enable-google-plus-comments-in-blogger.html#comment-form","title":"2 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3281876907361775925"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3281876907361775925"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-enable-google-plus-comments-in-blogger.html","title":"How to Enable Google Plus Comments in Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-x9LdH_hd9Jo\/U6oSXCerb6I\/AAAAAAAAJYE\/bipARNMzias\/s72-c\/google-plus-commenting-system-on-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-7143305168507237850"},"published":{"$t":"2014-05-02T03:51:00.000-07:00"},"updated":{"$t":"2014-07-05T10:53:21.090-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"}],"title":{"type":"text","$t":"Display Blogger Posts in Grid View with Thumbnails"},"content":{"type":"html","$t":"Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with a large image which takes up too much space and requires too much scrolling, now you could have a clean page that displays a gallery grid, with thumbnails and post titles, linking back to the source post for that thumbnail. Let's take a look at what it could look like in this \u003Ca href=\"http:\/\/helploggergridview.blogspot.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Edemo blog\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-ASpDaGzrtCQ\/U2N3uKcbt_I\/AAAAAAAAIfw\/Lz48lKTHHUY\/s1600\/display-blogger-posts-in-grid-or-gallery-view-with-thumbnails.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"grid view on blogger posts\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-ASpDaGzrtCQ\/U2N3uKcbt_I\/AAAAAAAAIfw\/Lz48lKTHHUY\/s1600\/display-blogger-posts-in-grid-or-gallery-view-with-thumbnails.png\" height=\"272\" title=\"display blogger posts in grid view with thumbnails\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIf you have a wallpaper or photo blog that would benefit from displaying a thumbnail grid style layout, look no further. Here's how you can add Grid (gallery) View to Blogger posts.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EAdding Grid (Gallery) View to Blogger Posts\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E\u003C\/span\u003E Log in to your Blogger account and go to \u003Cb\u003ETemplate\u003C\/b\u003E \u0026gt; click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template html\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" title=\"display blogger posts in grid view with thumbnails \" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 2.\u003C\/b\u003E\u003C\/span\u003E Click anywhere inside the code area and press the CTRL + F keys to open the search box\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-5nCDW329k6I\/Us9kWq0wcqI\/AAAAAAAAF1I\/PIe9SpIdtjc\/s1600\/blogger-template-search-box.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-5nCDW329k6I\/Us9kWq0wcqI\/AAAAAAAAF1I\/PIe9SpIdtjc\/s1600\/blogger-template-search-box.png\" height=\"105\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E\u003C\/span\u003E Type \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E inside the search box and hit Enter to find it.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E\u003C\/span\u003E Just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag, add the following script and style:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"color: #6aa84f;\"\u003E\u003Cb\u003E\u0026lt;script src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/code.jquery.com\/jquery-migrate-1.1.0.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;index\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E$(document).ready(function() {\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var width = \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003E200\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var height = \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003E170\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var placeholder = '\u003Cspan style=\"color: #cc0000;\"\u003Ehttp:\/\/3.bp.blogspot.com\/-7Ie-cUwxWB4\/U2KIRWgvpNI\/AAAAAAAAIfU\/Mj6qpg5S2fk\/s1600\/no-thumb.png\u003C\/span\u003E';\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var margins = \"0px 0px 10px 10px\";\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var fitThumb = 1;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var titleTopPadding = 5;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var titleBottomPadding = 8;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var titleLeftRightPadding = 5;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; $('.post-body').each(function(n, wrapper) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var wrapper = $(wrapper);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var image = $(wrapper).find('img').first();\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var link = wrapper.parent().find('h3 a');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var linkURL = link.attr('href');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var linkTitle = link.text();\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; $(link).remove();\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; wrapper.empty();\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if (image.attr('src')) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var thumbHeight = image.attr('height');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var thumbWidth = image.attr('width');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var thumbParent = $(image).parent();\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; wrapper.append(thumbParent);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if (fitThumb) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; image.attr({\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; src: image.attr('src').replace(\/s\\B\\d{3,4}\/, 's' + width + '-c')\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; });\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; image.attr('width', width).attr('height', height);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; image.attr({\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; src: image.attr('src').replace(\/s\\B\\d{3,4}\/, 's' + width)\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; });\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; image.attr('width', width);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var changeHeight = (thumbHeight \/ thumbWidth * width).toFixed(0);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; image.attr('height', changeHeight);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var image = $('\u0026lt;img\u0026gt;').attr('src', placeholder).attr('height', height).attr('width', width);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var thumbParent = $('\u0026lt;a\u0026gt;').append(image).appendTo(wrapper);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right', '0').addClass('postThumbnail');\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var thumbTitle = $('\u0026lt;div\u0026gt;').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter', 'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var ptitleHeight = thumbTitle.height();\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; thumbTitle.css('margin-top', '-' + summary + 'px');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; });\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; $('#blog-pager').css('clear', 'both');\u003Cbr \/\u003E});\u003Cbr \/\u003E\u003Cbr \/\u003Efunction hideLightbox() {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var images = document.getElementsByTagName('img');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; for (var i = 0; i \u0026lt; images.length;++i) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; images[i].onmouseover = function() {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var html = this.parentNode.innerHTML;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; this.parentNode.innerHTML = html;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; this.onmouseover = null;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Eif (window.addEventListener) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; window.addEventListener('load', hideLightbox, undefined);\u003Cbr \/\u003E} else {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; window.attachEvent('onload', hideLightbox);\u003Cbr \/\u003E}\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003E.post {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border-bottom: 0 dotted #E6E6E6;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-bottom: 0;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding-bottom: 0;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Eh2,.post-footer {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; display: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Ea.postThumbnail div {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #fff;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 12px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-transform: capitalize;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: rgb(125,126,125);\u003Cbr \/\u003E\u0026nbsp;\/* Old browsers *\/\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: -moz-linear-gradient(top,\u0026nbsp; rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));\u003Cbr \/\u003E\u0026nbsp;\/* Chrome,Safari4+ *\/\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: -webkit-linear-gradient(top,\u0026nbsp; rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: -o-linear-gradient(top,\u0026nbsp; rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: -ms-linear-gradient(top,\u0026nbsp; rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: linear-gradient(to bottom,\u0026nbsp; rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\u0026amp;#39;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; #7d7e7d\u0026amp;#39;, endColorstr=\u0026amp;#39;#0e0e0e\u0026amp;#39;,GradientType=0 );\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Ea.postThumbnail:hover div {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; display: block;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.post-body img {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: transparent;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border: 1px solid transparent;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; -webkit-border-radius: 12px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; -moz-border-radius: 12px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border-radius: 12px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; opacity: 1;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; transition: opacity .25s ease-in-out;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; -moz-transition: opacity .25s ease-in-out;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; -webkit-transition: opacity .25s ease-in-out;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.post-body img:hover {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; -ms-filter: \u0026amp;quot;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; progid: DXImageTransform.Microsoft.Alpha(Opacity=70)\u0026amp;quot;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; ;\u003Cbr \/\u003E\u003Cbr \/\u003Efilter: alpha(opacity=70);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; -moz-opacity: 0.7;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; -khtml-opacity: 0.7;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; opacity: 0.7;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt; \u003C\/blockquote\u003E\u003Cb\u003ENote:\u003C\/b\u003E\u003Cbr \/\u003E- If you want to make the post thumbnails larger, modify the \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003E200\u003C\/b\u003E\u003C\/span\u003E (width) and \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003E170\u003C\/b\u003E\u003C\/span\u003E (height) values in blue\u003Cbr \/\u003E- To change the default thumbnail for when there are no images, replace the URL in red with your own.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 5.\u003C\/b\u003E\u003C\/span\u003E Click on the \u003Cb\u003ESave template\u003C\/b\u003E button to save the changes and View your blog. Now you should have a nice grid view on your Blogger posts. Enjoy!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/7143305168507237850\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/display-blogger-posts-in-grid-view-with-thumbnails.html#comment-form","title":"43 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7143305168507237850"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7143305168507237850"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/05\/display-blogger-posts-in-grid-view-with-thumbnails.html","title":"Display Blogger Posts in Grid View with Thumbnails"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-ASpDaGzrtCQ\/U2N3uKcbt_I\/AAAAAAAAIfw\/Lz48lKTHHUY\/s72-c\/display-blogger-posts-in-grid-or-gallery-view-with-thumbnails.png","height":"72","width":"72"},"thr$total":{"$t":"43"}}]}});