// API callback
related_results_labels_thumbs({"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\/-\/posts?alt=json-in-script\u0026max-results=5"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/search\/label\/posts"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/posts\/-\/posts?alt=json-in-script\u0026start-index=6\u0026max-results=5"}],"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":"25"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"5"},"entry":[{"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-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-5792628529032057267"},"published":{"$t":"2014-02-07T14:19:00.002-08:00"},"updated":{"$t":"2014-09-28T04:36:50.521-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Advanced Random posts widget for Blogger with image thumbnails and snippets"},"content":{"type":"html","$t":"When your blog has too many posts, visitors don't always have the time or desire to go through all the posts written there in order to make an idea of the blog's content. Thus, a random posts widget that will allow visitors to find content more easily could be really useful. This tutorial will show you how to add a random posts widget to display a list of posts in a random order with thumbnails and excerpts.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-yzRIhtJLWY0\/UvVaySdVcgI\/AAAAAAAAGB4\/v9x1FtzsIU8\/s1600\/display-blogger-random-posts-with-snippets-thumbnails.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-yzRIhtJLWY0\/UvVaySdVcgI\/AAAAAAAAGB4\/v9x1FtzsIU8\/s1600\/display-blogger-random-posts-with-snippets-thumbnails.png\" height=\"302\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-8TsMOyBNBBY\/U7fjGMCXTWI\/AAAAAAAAJcU\/nlwX2drEI8s\/s1600\/advanced-random-posts-widget-for-blogger-blogspot.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"random posts widget for blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-8TsMOyBNBBY\/U7fjGMCXTWI\/AAAAAAAAJcU\/nlwX2drEI8s\/s1600\/advanced-random-posts-widget-for-blogger-blogspot.png\" title=\"Advanced Random posts widget for Blogger with image thumbnails and snippets\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/demo-blog761.blogspot.com\/\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EAdding Random Posts with Thumbnails and Posts Summary on Blogger\u003C\/h3\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E Login to your blogger account, select your blog and go to \u003Cb\u003ELayout\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E Add new widget by clicking on the \u003Cb\u003EAdd a gadget\u003C\/b\u003E link and select \u003Cb\u003EHtml\/JavaScript\u003C\/b\u003E from the popup window.\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"html javascript widget, blogger gadgets\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" height=\"195\" title=\"random posts widget with image thumbnails and snippets for blogger\" 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 After adding the HTML\/JavaScript you need to copy the following script and paste it in the Content box.\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003E#random-posts img {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border-radius: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-right: 5px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E75px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; height: \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E75px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #F5F5F5;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 3px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; transition: all 0.2s linear 0s;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#random-posts img:hover {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; opacity: 0.6;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Eul#random-posts {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; list-style-type: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#random-posts a {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E12px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-transform: uppercase;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px auto 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#random-posts a:hover {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.random-summary {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E11px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 5px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-right: 8px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#random-posts li {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-bottom: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border-bottom: 1px solid #EEEEEE;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 4px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;ul id='random-posts'\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javaScript'\u0026gt;\u003Cbr \/\u003Evar randomposts_number = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E5\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003Evar randomposts_chars = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E110\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003Evar randomposts_details = '\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003Eyes\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003Evar randomposts_comments = 'Comments';\u003Cbr \/\u003Evar randomposts_commentsd = 'Comments Disabled';\u003Cbr \/\u003Evar randomposts_current = [];\u003Cbr \/\u003Evar total_randomposts = 0;\u003Cbr \/\u003Evar randomposts_current = new Array(randomposts_number);\u003Cbr \/\u003E\u003Cbr \/\u003Efunction randomposts(json) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; total_randomposts = json.feed.openSearch$totalResults.$t\u003Cbr \/\u003E}\u003Cbr \/\u003Edocument.write('\u0026lt;script type=\\\"text\/javascript\\\" src=\\\"\/feeds\/posts\/default?alt=json-in-script\u0026amp;max-results=0\u0026amp;callback=randomposts\\\"\u0026gt;\u0026lt;\\\/script\u0026gt;');\u003Cbr \/\u003E\u003Cbr \/\u003Efunction getvalue() {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; for (var i = 0; i \u0026lt; randomposts_number; i++) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var found = false;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var rndValue = get_random();\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; for (var j = 0; j \u0026lt; randomposts_current.length; j++) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if (randomposts_current[j] == rndValue) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; found = true;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; break\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if (found) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; i--\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; randomposts_current[i] = rndValue\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E};\u003Cbr \/\u003E\u003Cbr \/\u003Efunction get_random() {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; return ranNum\u003Cbr \/\u003E};\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javaScript'\u0026gt; \u003Cbr \/\u003Efunction random_posts(json) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; for (var i = 0; i \u0026lt; randomposts_number; i++) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var entry = json.feed.entry[i];\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randompoststitle = entry.title.$t;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if ('content' in entry) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randompostsnippet = entry.content.$t\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if ('summary' in entry) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randompostsnippet = entry.summary.$t\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; var randompostsnippet = \"\";\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; randompostsnippet = randompostsnippet.replace(\/\u0026lt;[^\u0026gt;]*\u0026gt;\/g, \"\");\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if (randompostsnippet.length \u0026lt; randomposts_chars) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randomposts_snippet = randompostsnippet\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; randompostsnippet = randompostsnippet.substring(0, randomposts_chars);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var whitespace = randompostsnippet.lastIndexOf(\" \");\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; randomposts_snippet = randompostsnippet.substring(0, whitespace) + \"\u0026amp;#133;\";\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; for (var j = 0; j \u0026lt; entry.link.length; j++) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if ('thr$total' in entry) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments\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; randomposts_commentsnum = randomposts_commentsd\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }; if (entry.link[j].rel == 'alternate') {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randompostsurl = entry.link[j].href;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randomposts_date = entry.published.$t;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if ('media$thumbnail' in entry) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var randompoststhumb = entry.media$thumbnail.url\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\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;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; randompoststhumb = \"http:\/\/3.bp.blogspot.com\/-5SoVe1K6JSk\/Utl0OOmucAI\/AAAAAAAAF6E\/hQghgD_EJdQ\/s1600\/no_thumb.png\"\u003Cbr \/\u003E\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; }\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;li\u0026gt;');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;a href=\"' + randompostsurl + '\" rel=\"nofollow\"\u0026gt;\u0026lt;img alt=\"' + randompoststitle + '\" src=\"' + randompoststhumb + '\"\/\u0026gt;\u0026lt;\/a\u0026gt;');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;div\u0026gt;\u0026lt;a href=\"' + randompostsurl + '\" rel=\"nofollow\"\u0026gt;' + randompoststitle + '\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;');\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if (randomposts_details == 'yes') {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;span\u0026gt;\u0026lt;div\u0026nbsp; class=\"random-info\"\u0026gt;' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '\u0026lt;\/div\u0026gt;\u0026lt;\/span\u0026gt;'\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;br\/\u0026gt;\u0026lt;div class=\"random-summary\"\u0026gt;' + randomposts_snippet + '\u0026lt;\/div\u0026gt;\u0026lt;div style=\"clear:both\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;')\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E};\u003Cbr \/\u003Egetvalue();\u003Cbr \/\u003Efor (var i = 0; i \u0026lt; randomposts_number; i++) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;script type=\\\"text\/javascript\\\" src=\\\"\/feeds\/posts\/default?alt=json-in-script\u0026amp;start-index=' + randomposts_current[i] + '\u0026amp;max-results=1\u0026amp;callback=random_posts\\\"\u0026gt;\u0026lt;\\\/script\u0026gt;')\u003Cbr \/\u003E};\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003ERandom Posts Options\u003C\/h3\u003E\u003Cb\u003E- Thumbnail dimensions:\u003C\/b\u003E to change the size of the thumbnails in pixels, replace the \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E75px\u003C\/b\u003E\u003C\/span\u003E value.\u003Cbr \/\u003E\u003Cb\u003E- Summary length:\u003C\/b\u003E you can control the the length of the summary (in characters) by changing the \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E110\u003C\/b\u003E\u003C\/span\u003E value from \u003Cb\u003E\u003Ci\u003Evar \u003C\/i\u003E\u003C\/b\u003E\u003Cb\u003E\u003Ci\u003Erandomposts_chars=\u003Cspan style=\"color: red;\"\u003E110\u003C\/span\u003E; \u003C\/i\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u003Cb\u003E- Post info\u003C\/b\u003E: if you want to hide the post date and comment count change '\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003Eyes\u003C\/b\u003E\u003C\/span\u003E' from \u003Ci\u003E\u003Cb\u003Evar \u003C\/b\u003E\u003C\/i\u003E\u003Ci\u003E\u003Cb\u003Erandomposts_details='\u003Cspan style=\"color: red;\"\u003Eyes\u003C\/span\u003E';\u003C\/b\u003E\u003C\/i\u003E to '\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003Eno\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003E\u003Cb\u003E- Font Size for Posts Titles and Summary: \u003C\/b\u003Eto modify the font size for the post snippet modify the \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E11px\u003C\/span\u003E\u003C\/b\u003E value and for the posts title, the \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E12px\u003C\/b\u003E\u003C\/span\u003E value;\u003Cbr \/\u003E\u003Cbr \/\u003EClick on the \u003Cb\u003ESave\u003C\/b\u003E button and View your blog. The sidebar will display a random posts widget on each of your blog pages."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/5792628529032057267\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/random-posts-widget-with-thumbnails-and-summary-for-blogger.html#comment-form","title":"43 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5792628529032057267"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5792628529032057267"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/random-posts-widget-with-thumbnails-and-summary-for-blogger.html","title":"Advanced Random posts widget for Blogger with image thumbnails and snippets"}],"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\/-yzRIhtJLWY0\/UvVaySdVcgI\/AAAAAAAAGB4\/v9x1FtzsIU8\/s72-c\/display-blogger-random-posts-with-snippets-thumbnails.png","height":"72","width":"72"},"thr$total":{"$t":"43"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-8801210471242709164"},"published":{"$t":"2014-01-02T10:04:00.000-08:00"},"updated":{"$t":"2014-08-23T15:22:06.102-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"How to Create Magazine Style with Post Summaries and Thumbnails on Blogger"},"content":{"type":"html","$t":"The \u003Cb\u003Emagazine or newspaper style templates\u003C\/b\u003E are those that display the \u003Cb\u003Eposts summaries\u003C\/b\u003E in the homepage by stacking the columns on top of each other. This kind of templates is very popular nowadays, and whether it is a news or technology blog, everyone needs a fresh \u003Cb\u003Emagazine style layout\u003C\/b\u003E for their blogs.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-F9X-cmqt8hc\/UsBffAhB0CI\/AAAAAAAAFyI\/dmKlGnLx5a0\/s1600\/magazine-style-blogger-template-automatic-posts-with-summary-thumbnails.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger tricks, blogger widgets, blogger templates\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-F9X-cmqt8hc\/UsBffAhB0CI\/AAAAAAAAFyI\/dmKlGnLx5a0\/s320\/magazine-style-blogger-template-automatic-posts-with-summary-thumbnails.png\" height=\"252\" title=\"how to create magazine style with posts summary and thumbnails on blogger\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EThere are several ways to make posts appear this way. An option would be to use the \u003Ca href=\"http:\/\/helplogger.blogspot.ro\/2012\/03\/auto-read-more-with-thumbnail-for.html\" style=\"color: blue;\"\u003E\u003Cb\u003ERead more\u003C\/b\u003E script to display a summary of the posts\u003C\/a\u003E\u0026nbsp;and\u0026nbsp;add a conditional tag and a different style to the first post so that it will have a larger width than the older posts. So, this tutorial will show you\u0026nbsp;\u003Cb\u003Ehow to create a magazine style for a Blogger Template\u003C\/b\u003E. By following this tutorial, you can transform your boring and simple Blogger template to have an attractive and stylish  \u003Cb\u003Emagazine style layout\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C!-- adsense --\u003E To see how it looks like, please visit \u003Ca href=\"http:\/\/helploggertestblog.blogspot.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Ethis demo blog\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EAdding the Magazine\/Newspaper style to a Blogger Template\u003C\/h3\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E\u003C\/span\u003E\u0026nbsp;Before anything please make a backup of your current template to make sure that you won't lose anything important - just log in on your \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003EBlogger Dashboard\u003C\/a\u003E and go to \u003Cb\u003ETemplate\u003C\/b\u003E, then click on the Backup\/Restore button. After you've got a copy of the xml template, click on the\u0026nbsp;\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 edit html template\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s320\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" title=\"create magazine style with posts summary and thumbnails on blogger\" 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 search by using CTRL + F keys for this line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/blockquote\u003E\u003Ci\u003ENote: You'll find it more than once, but stop to the second one in order to see the changes.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E\u003C\/span\u003E Remove that line and instead it add this code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\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;\u003Cbr \/\u003E\u0026nbsp;\u0026lt;span class='post-comment-link'\u0026gt;\u0026lt;b:if cond='data:blog.pageType  != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u0026lt;b:if  cond='data:post.allowComments'\u0026gt;\u0026lt;a class='comment-link'  expr:href='data:post.addCommentUrl'  expr:onclick='data:post.addCommentOnclick'\u0026gt;\u0026lt;data:post.numComments\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;div expr:id='\u0026amp;quot;summary\u0026amp;quot; + data:post.id'\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;createSummaryAndThumb(\u0026amp;quot;summary\u0026lt;data:post.id\/\u0026gt;\u0026amp;quot;);\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;span class='readmorebutton' style='float:right'\u0026gt;\u0026lt;a expr:href='data:post.url'\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003ERead More \u0026amp;#187;\u003C\/b\u003E\u003C\/span\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/span\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\u003Ci\u003ENote: you can replace the \u003Cb\u003ERead More\u003C\/b\u003E text, by changing the code in red\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E\u003C\/span\u003E Now find (CTRL + F) this line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:include data='post' name='post'\/\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 5.\u003C\/b\u003E\u003C\/span\u003E Remove this as well and instead of it add this:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:post.isFirstPost'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.homepageUrl == data:blog.url'\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='first'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:post.title'\u0026gt;\u003Cbr \/\u003E\u0026lt;h3 class='post-title entry-title'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:post.link'\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:post.link'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:post.url'\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:post.url'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;data:post.title\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/h3\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='first-body'\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\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;\u003Cbr \/\u003E\u0026lt;div expr:id='\u0026amp;quot;summary1\u0026amp;quot; + data:post.id'\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;createSummaryAndThumb1(\u0026amp;quot;summary1\u0026lt;data:post.id\/\u0026gt;\u0026amp;quot;);\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;span class='post-comment-link'\u0026gt;\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u0026lt;b:if cond='data:post.allowComments'\u0026gt;\u0026lt;a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'\u0026gt;\u0026lt;data:post.numComments\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;span class='readmorebutton' style='float:right'\u0026gt;\u0026lt;a expr:href='data:post.url'\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003ERead More \u0026amp;#187;\u003C\/b\u003E\u003C\/span\u003E\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\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;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;b:include data='post' name='post'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;b:include data='post' name='post'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Ci\u003ENote: you can change the \u003Cb\u003ERead More\u003C\/b\u003E text here also, just replace the code in red with the text that you want to show.\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 6.\u003C\/b\u003E\u003C\/span\u003E Now find the \u003Cb\u003E\u0026lt;\/head\u0026gt;\u003C\/b\u003E tag and paste the following script before\/above it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp;\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003Eposts_no_thumb_sum = 290;\u003Cbr \/\u003Eposts_thumb_sum = 240;\u003Cbr \/\u003Eimg_thumb_height = 80;\u003Cbr \/\u003Eimg_thumb_width = 80;\u003Cbr \/\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003Efirst_no_thumb_sum = 580;\u003Cbr \/\u003Efirst_thumb_sum = 450;\u003Cbr \/\u003Eimg_thumb_height1 = 145;\u003Cbr \/\u003Eimg_thumb_width1 = 165;\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Efunction removeHtmlTag(strx,chop){\u003Cbr \/\u003Eif(strx.indexOf(\"\u0026lt;\")!=-1)\u003Cbr \/\u003E{\u003Cbr \/\u003Evar s = strx.split(\"\u0026lt;\");\u003Cbr \/\u003Efor(var i=0;i\u0026lt;s.length;i++){\u003Cbr \/\u003Eif(s[i].indexOf(\"\u0026gt;\")!=-1){\u003Cbr \/\u003Es[i] = s[i].substring(s[i].indexOf(\"\u0026gt;\")+1,s[i].length);\u003Cbr \/\u003E}\u003Cbr \/\u003E}\u003Cbr \/\u003Estrx = s.join(\"\");\u003Cbr \/\u003E}\u003Cbr \/\u003Echop = (chop \u0026lt; strx.length-1) ? chop : strx.length-2;\u003Cbr \/\u003Ewhile(strx.charAt(chop-1)!=' ' \u0026amp;\u0026amp; strx.indexOf(' ',chop)!=-1) chop++;\u003Cbr \/\u003Estrx = strx.substring(0,chop-1);\u003Cbr \/\u003Ereturn strx+'...';\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Efunction createSummaryAndThumb(pID){\u003Cbr \/\u003Evar div = document.getElementById(pID);\u003Cbr \/\u003Evar imgtag = \"\";\u003Cbr \/\u003Evar img = div.getElementsByTagName(\"img\");\u003Cbr \/\u003Evar summ = posts_no_thumb_sum;\u003Cbr \/\u003Eif(img.length\u0026gt;=1) {\u003Cbr \/\u003Eimgtag = '\u0026lt;span class=\"posts-thumb\" style=\"float:left;\"\u0026gt;\u0026lt;img src=\"'+img[0].src+'\" width=\"'+img_thumb_width+'px\" height=\"'+img_thumb_height+'px\"\/\u0026gt;\u0026lt;\/span\u0026gt;';\u003Cbr \/\u003Esumm = posts_thumb_sum;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; var summary = imgtag + '\u0026lt;div class=\"summary\"\u0026gt;' + removeHtmlTag(div.innerHTML,summ) + '\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003Ediv.innerHTML = summary;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Efunction createSummaryAndThumb1(pID){\u003Cbr \/\u003Evar div = document.getElementById(pID);\u003Cbr \/\u003Evar imgtag = \"\";\u003Cbr \/\u003Evar img = div.getElementsByTagName(\"img\");\u003Cbr \/\u003Evar summ = first_no_thumb_sum;\u003Cbr \/\u003Eif(img.length\u0026gt;=1) {\u003Cbr \/\u003Eimgtag = '\u0026lt;span class=\"first-post-thumb\" style=\"float:left;\"\u0026gt;\u0026lt;img src=\"'+img[0].src+'\" width=\"'+img_thumb_width1+'px\" height=\"'+img_thumb_height1+'px\"\/\u0026gt;\u0026lt;\/span\u0026gt;';\u003Cbr \/\u003Esumm = first_thumb_sum;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Evar summary1 = imgtag + '\u0026lt;div class=\"summary\"\u0026gt;' + removeHtmlTag(div.innerHTML,summ) + '\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003Ediv.innerHTML = summary1;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 7.\u003C\/b\u003E\u003C\/span\u003E And below the script above add these CSS styles:\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;style type='text\/css'\u0026gt;\u003Cbr \/\u003E.first-post-thumb {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-right: 10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.summary {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; height: 100%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#first {\u003Cspan style=\"color: #6aa84f;\"\u003E \/* Styles for the First Post Container *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003Eauto\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; height: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E250px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-bottom: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background-color: #F4F4F4; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* background color for the first post *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border: 1px solid #E5E5E5; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* border for the first post *\/\u003C\/span\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.first-body { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Style for the First Post summary *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #545454;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 13px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-align: justify;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 5px 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; line-height: 1.5em;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#first h3 a, #first h3 a:visited { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Style for the First Post Title*\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border-bottom: 2px solid #DFDFDF;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #515151;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 20px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; display: block;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 10px auto;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 95%;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 20px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px 0px 4px 0px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-align: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; line-height: 1.4em;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#first h3 a:hover { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Color on mouseover for the First Post Title *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #1061A1;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.post { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Styles for the small posts container *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0px 6px 2% 5px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E46%\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; height: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E230px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px 5px 5px 5px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: #FCFCFC; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* background color for the small posts *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border: 1px solid #E5E5E5; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* border for the small posts *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; overflow: hidden;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.posts-thumb { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Style for the small posts thumbnails *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-right: 10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; box-shadow: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Eh3.post-title a{\u003Cspan style=\"color: #6aa84f;\"\u003E \/* Style for the small posts titles *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 14px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #747474;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-transform: uppercase;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Eh2.date-header { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Hide the post date *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; display: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.post-footer {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; display: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Eh3.post-title {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.readmorebutton {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-top: 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.readmorebutton a { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Styles for the Read More link *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #767676;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border: 1px solid #E1E1E1;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: #EAEAEA; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Background color for the Read More link *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 3px 5px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 11px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: right;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; position: relative;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.post-comment-link { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Style for the comment bubble of posts below *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; position: absolute;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; top: -35px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; right: -10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; display: block;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; border: 1px solid #E1E1E1; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* border for the comment bubble *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: #EAEAEA;\u003Cspan style=\"color: #6aa84f;\"\u003E \/* background color for the comment bubble *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 11px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; position: absolute;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#first .post-comment-link { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Style for the comment bubble of first post *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; position: absolute;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; top: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; right: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.post-comment-link a { \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Link color for the comments bubble*\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #6A6A6A;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#blog-pager {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; clear: both;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt; \u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003E\u003Cspan style=\"font-size: large;\"\u003ECustomization:\u003C\/span\u003E\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E1) At the beginning of the script from step 6, we have this section:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Eposts_no_thumb_sum = 290;\u003Cbr \/\u003Eposts_thumb_sum = 240;\u003Cbr \/\u003Eimg_thumb_height = 80;\u003Cbr \/\u003Eimg_thumb_width = 80;\u003Cbr \/\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003Efirst_no_thumb_sum = 580;\u003Cbr \/\u003Efirst_thumb_sum = 450;\u003Cbr \/\u003Eimg_thumb_height1 = 145;\u003Cbr \/\u003Eimg_thumb_width1 = 165;\u003C\/span\u003E\u003C\/blockquote\u003E- the first number is the number of characters that will show for the small posts when there will be no image available\u003Cbr \/\u003E- the 2nd number is the number of characters that will show when the small posts will have an image\u003Cbr \/\u003E- the 3rd and the 4th line is for the height and width of the small posts thumbnails (images).\u003Cbr \/\u003E- the same goes for what is in blue, but this configuration affects only the first post. Since the first post is wider, it may contain a larger number of characters and we'll be able to make the thumbnail size larger.\u003Cbr \/\u003E\u003Cbr \/\u003E2) And finally, we have the CSS styles. That last thing we added is a code that determines how the posts are going to look on the homepage (and archive pages as well, except for the first post).\u003Cbr \/\u003E\u003Cbr \/\u003ETo change the width an height, respectively the size for the first post container, look for these lines:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ewidth: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003Eauto\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003Eheight: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E250px\u003C\/b\u003E\u003C\/span\u003E;\u003C\/blockquote\u003EUnderneath the first post are the values for the other posts, just look for this part: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003Ewidth: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E46%\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003Eheight: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E230px\u003C\/b\u003E\u003C\/span\u003E;\u003C\/blockquote\u003EThe width will ocuppy 46% of the main column width and height is set to 230px. Here you may need to experiment a bit with the sizes in order to make them appear correctly.\u003Cbr \/\u003E\u003Cbr \/\u003EFinally, set the number of posts to show on the homepage, so that there won't be any empty space. Go to \u003Cb\u003ESettings\u003C\/b\u003E \u0026gt;\u0026gt; \u003Cb\u003EPosts and comments \u003C\/b\u003E\u0026gt;\u0026gt; \u003Cb\u003E\u003Cspan class=\"GHUY-LPPI\"\u003EShow at most\u003C\/span\u003E \u003C\/b\u003Eand select the number of posts that you want to appear."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/8801210471242709164\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/01\/create-magazine-style-layout-for-blogger-posts.html#comment-form","title":"63 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8801210471242709164"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8801210471242709164"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/01\/create-magazine-style-layout-for-blogger-posts.html","title":"How to Create Magazine Style with Post Summaries and Thumbnails 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:\/\/2.bp.blogspot.com\/-F9X-cmqt8hc\/UsBffAhB0CI\/AAAAAAAAFyI\/dmKlGnLx5a0\/s72-c\/magazine-style-blogger-template-automatic-posts-with-summary-thumbnails.png","height":"72","width":"72"},"thr$total":{"$t":"63"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-7718896474692894801"},"published":{"$t":"2013-12-21T16:39:00.001-08:00"},"updated":{"$t":"2014-01-16T20:39:20.692-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"How to Create a Sitemap or Table of Contents in Blogger"},"content":{"type":"html","$t":"One of the limitations of a blog is that it doesn't have an index or sitemap of the site that could make it easier for readers to find content that they are searching for.\u003Cbr \/\u003EWhile the blog archive and labels have all the information about the published post, these do not appear on a single page completely, so searching for more posts is not always easy.\u003Cbr \/\u003E\u003Cbr \/\u003ELuckily, this gadget will help you to \u003Cb\u003Eadd a table of contents or sitemap on Blogger showing the index of all posts\u003C\/b\u003E separated by categories that have been published. It will also show the latest posts with a text saying New!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-YG3bV6r7Z0M\/UrYzqtLTLCI\/AAAAAAAAFjA\/gKvto1hZGps\/s1600\/add-sitemap-with-a-list-of-published-posts-to-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"table of contents, sitemap, blogger\" border=\"0\" height=\"225\" src=\"http:\/\/2.bp.blogspot.com\/-YG3bV6r7Z0M\/UrYzqtLTLCI\/AAAAAAAAFjA\/gKvto1hZGps\/s320\/add-sitemap-with-a-list-of-published-posts-to-blogger.png\" title=\"how to create a sitemap or table of contents in Blogger\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EDemo\u003C\/b\u003E\u003C\/span\u003E: You can see it working by clicking \u003Ca href=\"http:\/\/helplogger.blogspot.com\/p\/var-numposts-100-var-standardstyling.html\" rel=\"nofollow\"\u003Ehere\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow To Add a Sitemap with a List of Posts to Blogger\u003C\/h3\u003E\u003Cbr \/\u003ETo implement it on your blog, follow the steps below:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E Login to your \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\"\u003EBlogger Dashboard\u003C\/a\u003E and select your blog\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2\u003C\/span\u003E\u003C\/b\u003E. Go to \u003Cb\u003EPages\u003C\/b\u003E \u0026gt; click the \u003Cb\u003ENew Page\u003C\/b\u003E button and select \u003Cb\u003EBlank page\u003C\/b\u003E \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-79lOLxgpMtw\/UrYt9ev80sI\/AAAAAAAAFig\/33WvINYjZsI\/s1600\/blogger-pages-add-page.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"129\" src=\"http:\/\/2.bp.blogspot.com\/-79lOLxgpMtw\/UrYt9ev80sI\/AAAAAAAAFig\/33WvINYjZsI\/s320\/blogger-pages-add-page.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3\u003C\/span\u003E\u003C\/b\u003E.\u0026nbsp; Click on the \u003Cb\u003EHTML\u003C\/b\u003E tab and paste the following code inside the empty box:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003Ep.labels a{color: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E#242424\u003C\/b\u003E\u003C\/span\u003E; text-transform: uppercase;font-size: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E15px\u003C\/b\u003E\u003C\/span\u003E;}\u003Cbr \/\u003Ea.post-titles {color: \u003Cspan style=\"color: #6aa84f;\"\u003E\u003Cb\u003E#0000FF\u003C\/b\u003E\u003C\/span\u003E;}\u003Cbr \/\u003Eol li{list-style-type:decimal;line-height:25px;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;script\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Evar postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy=\"titleasc\";var tocLoaded=false;var numChars=250;var postFilter=\"\";var numberfeed=0;function bloggersitemap(a){function b(){if(\"entry\" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h\u0026lt;d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g\u0026lt;n.link.length;g++){if(n.link[g].rel==\"alternate\"){j=n.link[g].href;break}}var o=\"\";for(var g=0;g\u0026lt;n.link.length;g++){if(n.link[g].rel==\"enclosure\"){o=n.link[g].href;break}}var c=\"\";if(\"category\" in n){for(var g=0;g\u0026lt;n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(\";\");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h\u0026lt;10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy=\"titleasc\";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('\u0026lt;\/br\u0026gt;\u0026lt;div class=\"sitemap-link\"\u0026gt;\u0026lt;a href=\"http:\/\/helplogger.blogspot.com\/2013\/12\/add-sitemap-table-of-contents-to-blogger.html\" style=\"font-size: 10px; text-decoration:none; color: #5146CD;\"\u0026gt;Get This Widget\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter=\"\";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b\u0026lt;postTitle.length-1;b++){for(var a=b+1;a\u0026lt;postTitle.length;a++){if(d==\"titleasc\"){if(postTitle[b]\u0026gt;postTitle[a]){c(b,a)}}if(d==\"titledesc\"){if(postTitle[b]\u0026lt;postTitle[a]){c(b,a)}}if(d==\"dateoldest\"){if(postDate[b]\u0026gt;postDate[a]){c(b,a)}}if(d==\"datenewest\"){if(postDate[b]\u0026lt;postDate[a]){c(b,a)}}if(d==\"orderlabel\"){if(postLabels[b]\u0026gt;postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy=\"orderlabel\";sortPosts(sortBy);var a=0;var b=0;while(b\u0026lt;postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b\u0026gt;postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b\u0026lt;c-1;b++){for(var a=b+1;a\u0026lt;c;a++){if(postTitle[b]\u0026gt;postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h=\"\";var e=\"Post Title\";var m=\"Click to sort by title\";var d=\"Date\";var k=\"Click to sort by date\";var c=\"Category\";var j=\"\";if(sortBy==\"titleasc\"){m+=\" (descending)\";k+=\" (newest first)\"}if(sortBy==\"titledesc\"){m+=\" (ascending)\";k+=\" (newest first)\"}if(sortBy==\"dateoldest\"){m+=\" (ascending)\";k+=\" (newest first)\"}if(sortBy==\"datenewest\"){m+=\" (ascending)\";k+=\" (oldest first)\"}if(postFilter!=\"\"){j=\"Click to view all\"}h+=\"\u0026lt;table\u0026gt;\";h+=\"\u0026lt;tr\u0026gt;\";h+='\u0026lt;td class=\"header1\"\u0026gt;';h+='\u0026lt;a href=\"javascript:toggleTitleSort();\" title=\"'+m+'\"\u0026gt;'+e+\"\u0026lt;\/a\u0026gt;\";h+=\"\u0026lt;\/td\u0026gt;\";h+='\u0026lt;td class=\"header2\"\u0026gt;';h+='\u0026lt;a href=\"javascript:toggleDateSort();\" title=\"'+k+'\"\u0026gt;'+d+\"\u0026lt;\/a\u0026gt;\";h+=\"\u0026lt;\/td\u0026gt;\";h+='\u0026lt;td class=\"header3\"\u0026gt;';h+='\u0026lt;a href=\"javascript:allPosts();\" title=\"'+j+'\"\u0026gt;'+c+\"\u0026lt;\/a\u0026gt;\";h+=\"\u0026lt;\/td\u0026gt;\";h+='\u0026lt;td class=\"header4\"\u0026gt;';h+=\"Read all\";h+=\"\u0026lt;\/td\u0026gt;\";h+=\"\u0026lt;\/tr\u0026gt;\";for(var g=0;g\u0026lt;postTitle.length;g++){if(a==\"\"){h+='\u0026lt;tr\u0026gt;\u0026lt;td class=\"entry1\"\u0026gt;\u0026lt;a href=\"'+postUrl[g]+'\"\u0026gt;'+postTitle[g]+'\u0026lt;\/a\u0026gt;\u0026lt;\/td\u0026gt;\u0026lt;td class=\"entry2\"\u0026gt;'+postDate[g]+'\u0026lt;\/td\u0026gt;\u0026lt;td class=\"entry3\"\u0026gt;'+postLabels[g]+'\u0026lt;\/td\u0026gt;\u0026lt;td class=\"entry4\"\u0026gt;\u0026lt;a href=\"'+postPublished[g]+'\"\u0026gt;Read\u0026lt;\/a\u0026gt;\u0026lt;\/td\u0026gt;\u0026lt;\/tr\u0026gt;';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='\u0026lt;tr\u0026gt;\u0026lt;td class=\"entry1\"\u0026gt;\u0026lt;a href=\"'+postUrl[g]+'\"\u0026gt;'+postTitle[g]+'\u0026lt;\/a\u0026gt;\u0026lt;\/td\u0026gt;\u0026lt;td class=\"entry2\"\u0026gt;'+postDate[g]+'\u0026lt;\/td\u0026gt;\u0026lt;td class=\"entry3\"\u0026gt;'+postLabels[g]+'\u0026lt;\/td\u0026gt;\u0026lt;td class=\"entry4\"\u0026gt;\u0026lt;a href=\"'+postPublished[g]+'\"\u0026gt;Read\u0026lt;\/a\u0026gt;\u0026lt;\/td\u0026gt;\u0026lt;\/tr\u0026gt;';l++}}}h+=\"\u0026lt;\/table\u0026gt;\";if(l==postTitle.length){var f='\u0026lt;span class=\"toc-note\"\u0026gt;Show All '+postTitle.length+\" Posts\u0026lt;br\/\u0026gt;\u0026lt;\/span\u0026gt;\"}else{var f='\u0026lt;span class=\"toc-note\"\u0026gt;Show '+l+\" posts by category '\";f+=postFilter+\"' the \"+postTitle.length+\" Total Posts\u0026lt;br\/\u0026gt;\u0026lt;\/span\u0026gt;\"}var b=document.getElementById(\"toc\");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b\u0026lt;postTitle.length){temp1=postLabels[b];document.write(\"\u0026lt;p\/\u0026gt;\");document.write('\u0026lt;p class=\"labels\"\u0026gt;\u0026lt;a href=\"\/search\/label\/'+temp1+'\"\u0026gt;'+temp1+\"\u0026lt;\/a\u0026gt;\u0026lt;\/p\u0026gt;\u0026lt;ol\u0026gt;\");firsti=a;do{document.write(\"\u0026lt;li\u0026gt;\");document.write('\u0026lt;a class=\"post-titles\" href=\"'+postUrl[a]+'\"\u0026gt;'+postTitle[a]+\"\u0026lt;\/a\u0026gt;\");if(postRecent[a]==true){document.write(' - \u0026lt;strong\u0026gt;\u0026lt;span style=\"color: rgb(255, 0, 0);\"\u0026gt;New!\u0026lt;\/span\u0026gt;\u0026lt;\/strong\u0026gt;')}document.write(\"\u0026lt;\/li\u0026gt;\");a=a+1}while(postLabels[a]==temp1);b=a;document.write(\"\u0026lt;\/ol\u0026gt;\");sortPosts2(firsti,a);if(b\u0026gt;postTitle.length){break}}}function toggleTitleSort(){if(sortBy==\"titleasc\"){sortBy=\"titledesc\"}else{sortBy=\"titleasc\"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy==\"datenewest\"){sortBy=\"dateoldest\"}else{sortBy=\"datenewest\"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById(\"toclink\")}else{alert(\"Just wait... TOC is loading\")}}function hideToc(){var a=document.getElementById(\"toc\");a.innerHTML=\"\";var b=document.getElementById(\"toclink\");b.innerHTML='\u0026lt;a href=\"#\" onclick=\"scroll(0,0); showToc(); Effect.toggle(\\'toc-result\\',\\'blind\\');\"\u0026gt;?? Display Table of Contents\u0026lt;\/a\u0026gt; \u0026lt;img src=\"http:\/\/1.bp.blogspot.com\/-_VZwBpHw_SI\/UrXvLbFxacI\/AAAAAAAAFiQ\/ZGqWZUZesCI\/s1600\/new_icon.gif\"\/\u0026gt;'}function looptemp2(){for(var a=0;a\u0026lt;numberfeed;a++){document.write(\"\u0026lt;br\u0026gt;\");document.write('Post Link : \u0026lt;a href=\"'+postUrl[a]+'\"\u0026gt;'+postTitle[a]+\"\u0026lt;\/a\u0026gt;\u0026lt;br\u0026gt;\");document.write('Read all : \u0026lt;a href=\"'+postPublished[a]+'\"\u0026gt;'+postTitle[a]+\"\u0026lt;\/a\u0026gt;\u0026lt;br\u0026gt;\");document.write(\"\u0026lt;br\u0026gt;\")}};\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\/feeds\/posts\/default?max-results=9999\u0026amp;amp;alt=json-in-script\u0026amp;amp;callback=bloggersitemap\"\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003EAfter adding the above code, replace \u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E with the address of your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003ECustomization:\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E- to change the color and font size of categories title, replace the values in red\u003Cbr \/\u003E- to change the color of the links, replace the value in green\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4\u003C\/span\u003E\u003C\/b\u003E. Click \u003Cb\u003EOptions\u003C\/b\u003E on the right side and select \u003Cb\u003EDon't allow\u003C\/b\u003E (hide existing) for the reader's comments\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 5\u003C\/span\u003E\u003C\/b\u003E. Finally, click the \u003Cb\u003EPublish\u003C\/b\u003E button and View the page.\u003Cbr \/\u003E\u003Cbr \/\u003EThat's all!\u003Cbr \/\u003E\u003C!-- adsense --\u003EThe index of the posts is sorted alphabetically and is updated automatically each time a new post is published."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/7718896474692894801\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2013\/12\/add-sitemap-table-of-contents-to-blogger.html#comment-form","title":"27 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7718896474692894801"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/7718896474692894801"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2013\/12\/add-sitemap-table-of-contents-to-blogger.html","title":"How to Create a Sitemap or Table of Contents 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\/-YG3bV6r7Z0M\/UrYzqtLTLCI\/AAAAAAAAFjA\/gKvto1hZGps\/s72-c\/add-sitemap-with-a-list-of-published-posts-to-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"27"}}]}});