// API callback
related_results_labels({"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-6425918883307327859"},"updated":{"$t":"2023-10-05T17:13:24.432-07:00"},"category":[{"term":"Blogger Hack"},{"term":"blogger tutorials"},{"term":"Blogger widget"},{"term":"Blogger Template"},{"term":"3 column templates"},{"term":"Adsense"},{"term":"CSS"},{"term":"Education"},{"term":"Engineering Colleges"},{"term":"web design"},{"term":"2 column template"},{"term":"Jquery"},{"term":"Latest News"},{"term":"PhotoShop"},{"term":"Premium Templates"},{"term":"Video Tutorials"},{"term":"Wordpress"},{"term":"fonts"},{"term":"javascript"},{"term":"main content"},{"term":"related posts widget"},{"term":"wordpress plugins"}],"title":{"type":"text","$t":"Blogger Dummies"},"subtitle":{"type":"html","$t":"Blogger Dummies is a resource for those who want all latest technology and software news. Smashingtips will provide design related resources and PC tips."},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/rias-techno-wizard.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/-\/Blogger+Hack?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/search\/label\/Blogger%20Hack"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/-\/Blogger+Hack\/-\/Blogger+Hack?alt=json-in-script\u0026start-index=7\u0026max-results=6"}],"author":[{"name":{"$t":"Mohamed Rias"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08249617985127266873"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"21","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhhsGMxv3l8fiUotao-1TnOHPWSfkZtraGnsQ_eZPEdCKTf8VZ4xSfZeQVoFTA0gpJe5hTBJjHWr_PslrfM76bGOwqs7sv-Dp5uwDmT8GxLfCdEtX_9L3ZhdgUjDLUaLS0\/s220\/10151658472293468.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"24"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-6425918883307327859.post-4237840726316230397"},"published":{"$t":"2009-08-11T10:21:00.000-07:00"},"updated":{"$t":"2009-08-14T18:03:49.139-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger Hack"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Screen resolution CSS hack for web designers"},"content":{"type":"html","$t":"Most of us might have noticed that our sites may look different in different screen resolutions. Though I have already posted one article on making website layout \u003Ca href=\"http:\/\/rias-techno-wizard.blogspot.com\/2009\/01\/create-compatible-css-for-firefox-ie6.html\" target=\"_blank\"\u003Ecross browser compatible\u003C\/a\u003E , but its also necessary to make your site compatible for different screen resolutions. The visitors of your site will not have same screen resolution your are using. So it's mandatory to make your site compatible for different screen resolutions.  For example, In lower screen resolutions like 800x600 px the website layout will be perfect. But when you look at your site at a higher screen resolution like 1024x768 px or even higher , the website header or sidebar may be aligned to either right or left. It's all because the designer might have designed the site for a particular screen resolution. In the screen resolution he was working , the site may look perfect. But when it comes to higher screen resolution , the theme may be misaligned.\u003Cbr \/\u003E\u003Ch3\u003E\u003C\/h3\u003E\u003Cbr \/\u003E\u003Ch1\u003Ewhat is the best screen resolution settings?\u003C\/h1\u003E\u003Cbr \/\u003E  One can't design a website for a particular screen resolution, because visitors will have different screen resolutions. According to me , the best screen resolution on which the designer should be concentrating on should be higher than 1024px. For example if you take techieblogger's last month stats , most of my visitors are using higher screen resolution.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/www.techieblogger.com\/2009\/08\/screen-resolution-javascript-css.html\/screen-resolution-compatible-2\" rel=\"attachment wp-att-896\" target=\"_blank\"\u003E\u003Cimg src=\"http:\/\/www.techieblogger.com\/wp-content\/uploads\/2009\/08\/screen-resolution-compatible1.jpg\" alt=\"screen resolution compatibility\" title=\"screen resolution compatibility\" class=\"aligncenter size-full wp-image-896\" width=\"553\" height=\"258\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ESome of the web designers use JavaScript to control the screen resolution compatibility. But it will reduce the site loading time.Instead of using JavaScript , I will explain how to make your site higher screen resolution compatible by making changes in CSS codes.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E\u003C\/h3\u003E\u003Cbr \/\u003E\u003Ch1\u003ECSS controlling the alignment of the layout\u003C\/h1\u003E\u003Cbr \/\u003EBefore explaining the original hack, first let me describe about the css code which controls the layout alignment.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003Emargin: auto;\u003C\/div\u003E\u003Cbr \/\u003EThe simple margin tag in CSS controls the alignment of the site layout in different screen resolutions. I have selected auto to change the layout alignment in accordance with the visitors screen resolution.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch1\u003EScreen resolution compatible CSS - Blogger users\u003C\/h1\u003EIn order to make changes to your CSS code in blogger blogs , follow the below steps.\u003Cbr \/\u003E\u003Cbr \/\u003Estep 1 : First go to Layout section of your blog.\u003Cbr \/\u003Estep2 :  Then navigate to EDIT HTML page\u003Cbr \/\u003E\u003Cbr \/\u003ENow add the margin: auto; tag in the css codes of the following sections.\u003Cbr \/\u003E\u003Cul\u003E\u003Cli\u003EHeader\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003EOuter wrapper\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003Econtent wrapper\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003Ewrapper\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003EFooter\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EIf one more sections are missing in your style sheet , then insert that code in the respective div sections used in your blogger template.\u003Cbr \/\u003E\u003Ch3\u003E\u003C\/h3\u003E\u003Cbr \/\u003E\u003Ch1\u003EScreen resolution compatible CSS - Wordpress Users\u003C\/h1\u003E\u003Cbr \/\u003ETo edit the css code in your wordpress blogs, follow the below steps.\u003Cbr \/\u003E\u003Cbr \/\u003Efirst go to appearance option in your wordpress dashboard. Then go to EDITOR page. In that page , add the css code margin: auto; in the following css sections.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cul\u003E\u003Cli\u003EHeader\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003EOuter wrapper\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003Econtent wrapper\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003Ewrapper\u003C\/li\u003E\u003Cbr \/\u003E\u003Cli\u003Esingle entry\u003C\/li\u003E\u003Cli\u003E\u003Cbr \/\u003E\u003C\/li\u003E\u003Cli\u003EFooter\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Ch3\u003E\u003C\/h3\u003E\u003Cbr \/\u003E\u003Ch1\u003Ehow to change screen resolution\u003C\/h1\u003E\u003Cbr \/\u003EFor checking your site compatibility with different screen resolutions do any one of the below steps.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch1\u003Ehow to get a higher screen resolution on windows vista\/XP\u003C\/h1\u003E\u003Cbr \/\u003ETo change the screen resolution of your PC , do the following steps.Right click on your desktop , then click the option \"Properties\" there.A new window will open. Now navigate to \"settings \" tab. There  you can see a slider to change the screen resolution. With that slider you can either increase or decrease. After you chose a particular screen resolution , click apply. It will give you a warning message click \"ok\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/www.techieblogger.com\/2009\/08\/screen-resolution-javascript-css.html\/properties-window\" rel=\"attachment wp-att-909\"\u003E\u003Cimg src=\"http:\/\/www.techieblogger.com\/wp-content\/uploads\/2009\/08\/properties-window.jpg\" alt=\"properties window\" title=\"properties window\" class=\"aligncenter size-full wp-image-909\" width=\"404\" height=\"202\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow open the browser and visit your site for compatibility.\u003Cbr \/\u003E\u003Ch3\u003E\u003C\/h3\u003E\u003Cbr \/\u003E\u003Ch1\u003Ehow to set screen resolution using keyboard hotkey\u003C\/h1\u003E\u003Cbr \/\u003EYou can also check the compatibility of your site with different screen resolutions with simple keyboard short keys.\u003Cbr \/\u003EFirst go to your blog and do the following :\u003Cbr \/\u003ETo reduce the screen resolution , press \"ctrl\" and scroll down the mouse roller.\u003Cbr \/\u003EOr\u003Cbr \/\u003Epress \" ctrl \" button and press \"-\" button.\u003Cbr \/\u003E\u003Cbr \/\u003ETo increase the screen resolution, click \"ctrl\" and \"+\" button or else press \" ctrl \" and scroll up the mouse roller.\u003Cbr \/\u003E\u003Cbr \/\u003EWith the above keyboards hotkeys , you can check the screen resolution compatibility of your site.\u003Cbr \/\u003E\u003Ch3\u003E\u003C\/h3\u003E\u003Cbr \/\u003EHope this article will be useful for all web designers who want to create wordpress themes or blogger templates which are higher screen resolution compatible. If you have any problem with your website layout alignment, then please email me about the issue."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/rias-techno-wizard.blogspot.com\/feeds\/4237840726316230397\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/08\/screen-resolution-javascript-css.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/4237840726316230397"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/4237840726316230397"},{"rel":"alternate","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/08\/screen-resolution-javascript-css.html","title":"Screen resolution CSS hack for web designers"}],"author":[{"name":{"$t":"Mohamed Rias"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08249617985127266873"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"21","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhhsGMxv3l8fiUotao-1TnOHPWSfkZtraGnsQ_eZPEdCKTf8VZ4xSfZeQVoFTA0gpJe5hTBJjHWr_PslrfM76bGOwqs7sv-Dp5uwDmT8GxLfCdEtX_9L3ZhdgUjDLUaLS0\/s220\/10151658472293468.jpg"}}],"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-6425918883307327859.post-703701201955504892"},"published":{"$t":"2009-05-16T06:07:00.000-07:00"},"updated":{"$t":"2009-05-30T12:22:32.471-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Adsense"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger Hack"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"}],"title":{"type":"text","$t":"Show Adsense ads below post title"},"content":{"type":"html","$t":"In this tutorial I will explain how to place Adsense ads below post title in Blogger Blogs with lots of customization tips. You might have noticed that most of the bloggers show Google adsense ads below title to increase their Click through rate and earnings.\u003Cbr \/\u003E\u003Cbr \/\u003EAccording to Google adsense help pages \" \u003Ca href=\"https:\/\/www.google.com\/adsense\/support\/bin\/answer.py?answer=17954\"\u003EWhere to place adsense ads ?\u003C\/a\u003E\". Placing adsense ads below title and above article content can bring high ctr and performance.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg style=\"width: 472px; height: 402px;\" src=\"http:\/\/www.google.com\/images\/adsense\/en_us\/support\/general_en.jpg\" alt=\"Adsense ads Below post title\" \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis \"heat map\" illustrates the ideal placing on a sample page layout. The colors fade from dark orange (strongest performance) to light yellow (weakest performance). So it's clear from the heat map that the adsense ads below post title can bring high ctr.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E How to add Adsense ads below post title ?\u003C\/h3\u003EIt's really very easy to add adsense ads below post title in blogger. Inorder to add adsense ads below post title ,just follow the below steps.\u003Cbr \/\u003E\u003Cbr \/\u003EBefore adding the adsense ads to blogger templates , we need to encode our adsense ads code.If you add the adsense code without encoding then you can't see any adsense ads below post title.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EEncoding Adsense Ad Code ?\u003C\/h3\u003ETo encode adsense ads, first create an adsense ad and then visit \u003Ca style=\"color: rgb(255, 0, 0);\" href=\"http:\/\/centricle.com\/tools\/html-entities\/\" target=\"_blank\"\u003Ecentricle\u003C\/a\u003E website to encode. In centricle web page , you need to paste your adsense code in the text area and then click \" \u003Cspan style=\"color: rgb(255, 0, 0);\"\u003EEncode\u003C\/span\u003E \". Copy the encoded code. Now your adsense code is ready to be added to blogger template.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E Adding adsense ad code to blogger template\u003C\/h3\u003E step 1 : Go to layout section of your blogger template and then navigate to EDIT HTML sub tab. There check the \"Expand Widget Templates \".\u003Cbr \/\u003E\u003Cbr \/\u003Estep2 : Look up the following tag : \u003Cspan style=\"color: rgb(204, 0, 0);\"\u003E\u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\u003C\/span\u003E and paste the encoded adsense ad code above that tag.\u003Cbr \/\u003E\u003Cbr \/\u003EThen click save. That's it Now we have added the adsense ad code below the post title in blogger blog successfully.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E Customizing Adsense ads\u003C\/h3\u003EHere are the few customization tips , which you can apply to increase your CTR.You might have seen that most of the bloggers will show more than Three posts in home page \/ labels page \/ archives page. But as per adsense TOS we can show only  Three ads per page. So due to this we will see some blank spaces between post title and content , when the three adsense ads are already loaded.In order to avoid this error , we can show adsense ads only in Post pages i.e pages containing articles.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E Showing adsense Ad only in Post pages \u003C\/h3\u003EIn order to implement this hack in your blogger template. you need to change the encoded adsense ad code to this.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003EEncoded Adsense code here\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow paste this code above \u003Cspan style=\"color: rgb(204, 0, 0);\"\u003E\u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\u003C\/span\u003E\u003Ch3\u003EMaking adsense ads to Float\u003C\/h3\u003EAfter adding the adsense ad code to your templates , you can see that by default the adsense ad code will not allow any text to be shown nearby it.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/3.bp.blogspot.com\/_aVtbdMo1J34\/Sg7TDYYZQQI\/AAAAAAAABb8\/R7usxLBVq5s\/s1600-h\/adsense+ads.jpg\"\u003E\u003Cimg style=\"margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 256px;\" src=\"http:\/\/3.bp.blogspot.com\/_aVtbdMo1J34\/Sg7TDYYZQQI\/AAAAAAAABb8\/R7usxLBVq5s\/s400\/adsense+ads.jpg\" alt=\"\" id=\"BLOGGER_PHOTO_ID_5336434663518454018\" border=\"0\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003ESo in order to overcome this error , we need to add some CSS codes to make adsense ad code to float either left or right.\u003Cbr \/\u003E\u003Cbr \/\u003EFor this we just need to modify the encoded adsense code to be added in step 2.\u003Cbr \/\u003E\u003Cbr \/\u003Ereplace that encoded code with this one :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;div style=\"float:\u003Cspan style=\"color: rgb(255, 0, 0);\"\u003Eleft\u003C\/span\u003E;padding:\u003Cspan style=\"color: rgb(204, 0, 0);\"\u003E5px\u003C\/span\u003E;\"\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003Eencoded adsense ad code here\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EChange the text in red to make adsense ad to float either to left or right.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EMy suggestion \u003C\/h3\u003E\u003Cbr \/\u003EAccording to me , instead of showing adsense ads in all pages ( home page , archives page and labels page ) ,  we can show adsense ads only in post pages to increase our ctr. If you are using the \" \u003Ca href=\"http:\/\/www.techieblogger.com\/2009\/05\/read-more-hack-for-blogger-with.html\"\u003ERead More hack for Blogger with automatic Thumbnail creator script\u003C\/a\u003E \" then it's advisable to show adsense ads only in post pages.\u003Cbr \/\u003E\u003Cbr \/\u003EHope you guys will like this hack. If you need any more customization , then give me your suggestions via comments."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/rias-techno-wizard.blogspot.com\/feeds\/703701201955504892\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/05\/show-adsense-ads-below-post-title.html#comment-form","title":"13 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/703701201955504892"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/703701201955504892"},{"rel":"alternate","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/05\/show-adsense-ads-below-post-title.html","title":"Show Adsense ads below post title"}],"author":[{"name":{"$t":"Mohamed Rias"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08249617985127266873"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"21","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhhsGMxv3l8fiUotao-1TnOHPWSfkZtraGnsQ_eZPEdCKTf8VZ4xSfZeQVoFTA0gpJe5hTBJjHWr_PslrfM76bGOwqs7sv-Dp5uwDmT8GxLfCdEtX_9L3ZhdgUjDLUaLS0\/s220\/10151658472293468.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_aVtbdMo1J34\/Sg7TDYYZQQI\/AAAAAAAABb8\/R7usxLBVq5s\/s72-c\/adsense+ads.jpg","height":"72","width":"72"},"thr$total":{"$t":"13"}},{"id":{"$t":"tag:blogger.com,1999:blog-6425918883307327859.post-7998489932664298253"},"published":{"$t":"2009-05-14T01:39:00.001-07:00"},"updated":{"$t":"2009-05-14T10:55:59.745-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger Hack"},{"scheme":"http://www.blogger.com/atom/ns#","term":"main content"}],"title":{"type":"text","$t":"Read More hack for Blogger with automatic Thumbnail creator script"},"content":{"type":"html","$t":"You might have noticed that since few weeks I have been using a strange script which enables us to summarize content and show only the summary with a thumbnail in Home Page , Archives page and Labels page.\u003Cbr \/\u003E\u003Cbr \/\u003ESince some of my readers requested this hack in \u003Ca href=\"gtalk:chat?jid=mohamedrias1103@gmail.com\"\u003Egtalk\u003C\/a\u003E  , so I am going to explain How to add this hack to your blogger template.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/4.bp.blogspot.com\/_ecj_-xaKLE0\/SYRf0tjDWiI\/AAAAAAAABVE\/D77J2tT-IEA\/s400\/resumo.jpg\"\u003E\u003Cimg style=\"margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 360px; height: 318px;\" src=\"http:\/\/4.bp.blogspot.com\/_ecj_-xaKLE0\/SYRf0tjDWiI\/AAAAAAAABVE\/D77J2tT-IEA\/s400\/resumo.jpg\" alt=\"\" border=\"0\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EBefore going into this , I would like to mention the previous versions of this created by some of my fellow Bloggers.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cul\u003E \u003Cli\u003E \u003Ca href=\"http:\/\/www.eblogtemplates.com\/how-to-add-the-blogger-read-more-expandable-posts-link\/\"\u003EEblog Templates\u003C\/a\u003E \u003C\/li\u003E\u003Cli\u003E \u003Ca href=\"http:\/\/hackosphere.blogspot.com\/2006\/09\/expandable-posts-with-peekaboo-view.html\"\u003EHackosphere\u003C\/a\u003E \u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EBut these versions had some disadvantages like :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E1. It can't automatically create summaries.\u003C\/h3\u003E\u003Cbr \/\u003EWe need to add the following tag in all post pages while writing new posts\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: left; color: rgb(255, 0, 0);\"\u003EType your summary here\u003Cbr \/\u003E\u0026lt;span id=\"fullpost\"\u0026gt;\u003Cbr \/\u003EType rest of the post here\u003Cbr \/\u003E\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E2. This feature can be available only for future posts.\u003C\/h3\u003E That is if you already have 50 posts in your blog and then after that you are adding this hack to your template then you need to add the above tag in each and every previous 50 posts to make this hack working. But it's a tedious process.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E3. Can't create Thumbnails automatically \u003C\/h3\u003E\u003Cbr \/\u003EThis hack can't create automatic thumbnails for posts.\u003Cbr \/\u003E\u003Cbr \/\u003ENow a new version has been developed by my blogger friends. I would like to share that new version of read more hack with you all.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E Read More hack with automatic Thumbnail creator script \u003C\/h3\u003E\u003Cbr \/\u003EThis hack has overcome all the drawbacks of the previous version of read more hack. This hack is developed by \u003Ca href=\"http:\/\/www.bloggersphera.com\/2009\/01\/resumo-do-post-hack-leia-mais.html\"\u003EBlogsphera \u003C\/a\u003E . ( \u003Ca href=\"http:\/\/translate.google.com\/translate?u=http%3A\/\/www.bloggersphera.com\/2009\/01\/resumo-do-post-hack-leia-mais.html\u0026amp;hl=en\u0026amp;langpair=auto%7Cen\u0026amp;tbb=1\u0026amp;ie=UTF-8\"\u003ETranslated version \u003C\/a\u003E).\u003Cbr \/\u003E\u003Cbr \/\u003ELet's see the installation instructions :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E Adding the Javascript in the header \u003C\/h3\u003ETo add the javascript files to the header , first login to your blogger account. Then navigate to Layout section of your blog and then move to \u003Cspan style=\"color: rgb(255, 0, 0);\"\u003EEDIT HTML\u003C\/span\u003E sub tab.\u003Cbr \/\u003E\u003Cbr \/\u003EThere search for this tag : \u003Cspan style=\"color: rgb(204, 0, 0);\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow place the follwing code above that tag \u0026lt;\/head\u0026gt; :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E\u0026lt;SCRIPT type='text\/javascript'\u0026gt; var thumbnail_mode = \u0026amp;quot;no-float\u0026amp;quot; ; summary_noimg =\u003Cspan style=\"color: rgb(204, 0, 0);\"\u003E 500\u003C\/span\u003E; summary_img = \u003Cspan style=\"color: rgb(255, 0, 0);\"\u003E400\u003C\/span\u003E; img_thumb_height = \u003Cspan style=\"color: rgb(255, 0, 0);\"\u003E130\u003C\/span\u003E; img_thumb_width =\u003Cspan style=\"color: rgb(255, 0, 0);\"\u003E 281\u003C\/span\u003E; \u0026lt;\/SCRIPT\u0026gt; \u0026lt;SCRIPT src='http:\/\/www.smashingtips.com\/wp-content\/uploads\/2009\/05\/read-more.js' type='text\/javascript'\/\u0026gt; \u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Ethen save your template.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E Final step : ADD the code in post body \u003C\/h3\u003ENow check \" Expand Widget Templates \" option in the edit html page. And then search for this tag\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center; color: rgb(255, 0, 0);\"\u003E\u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow replace that whole tag with the code below :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u0026lt;DIV expr:id='\u0026amp;quot;summary\u0026amp;quot; + data:post.id'\u0026gt;\u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\u0026lt;\/DIV\u0026gt; \u0026lt;SCRIPT type='text\/javascript'\u0026gt;createSummaryAndThumb(\u0026amp;quot;summary\u0026lt;data:post.id\/\u0026gt;\u0026amp;quot;);\u0026lt;\/SCRIPT\u0026gt;  \u0026lt;div style='clear: both;'\/\u0026gt; \u0026lt;div style='border:0px;padding-top:5px;;float:right;text-align:right;'\u0026gt;\u0026lt;span class='readon'\u0026gt;\u0026lt;a expr:href='data:post.url' rel='bookmark'\u0026gt;\u0026lt;img src='\u003Cspan style=\"color: rgb(255, 0, 0);\"\u003Ehttp:\/\/i422.photobucket.com\/albums\/pp302\/bloggeracs\/ReadMore.png\u003C\/span\u003E'\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EYou can now preview your template and then save it.\u003Cbr \/\u003E\u003Cbr \/\u003Eit will look like this :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/1.bp.blogspot.com\/_aVtbdMo1J34\/SgvqQi69QfI\/AAAAAAAABbU\/bwKU2nJacBw\/s1600-h\/read-more-hack.jpg\"\u003E\u003Cimg style=\"margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 500px; height: 222px;\" src=\"http:\/\/1.bp.blogspot.com\/_aVtbdMo1J34\/SgvqQi69QfI\/AAAAAAAABbU\/bwKU2nJacBw\/s320\/read-more-hack.jpg\" alt=\"\" id=\"BLOGGER_PHOTO_ID_5335615753523380722\" border=\"0\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E \u003Cspan style=\"color: rgb(255, 0, 0);\"\u003ECustomizing The code \u003C\/span\u003E\u003C\/h3\u003ENow let us see how to customize the code to suit your style :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cul\u003E\u003Cli\u003Evar thumbnail_mode = \"no-float\";\u003C\/li\u003EBy default i have selected no-float. That the image will be unformatted. If you want the thumbnail to be shown only on left use the option \" float \" instead of \"no-float\".\u003Cbr \/\u003E\u003Cli\u003Esummary_noimg = 500 ;\u003C\/li\u003EThis code will decide how much characters must be shown in the post if that post doesn't contain any images. I have selected 500 characters.. you can customize it to suit ur template.\u003Cli\u003Esummary_img = 400 ;\u003C\/li\u003E\u003Cbr \/\u003EIf the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.\u003Cbr \/\u003E\u003Cli\u003Eimg_thumb_height = 130; \u003C\/li\u003EThis tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.\u003Cbr \/\u003E\u003Cli\u003E img_thumb_width = 281 ; \u003C\/li\u003EThis tag decides the width of the Thumbnail image to be shown.\u003Cbr \/\u003E\u003Ch3\u003E Adding read more image \u003C\/h3\u003EThe author of this hack haven't included any read more buttons in this hack. But I have modified the code and have included a image to link to the full post.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Ehttp:\/\/i422.photobucket.com\/albums\/pp302\/bloggeracs\/ReadMore.png\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want to change the image then replace the url of the image with your own image\u003Cbr \/\u003E\u003Cbr \/\u003Eor if you don't need any read more button , then replace the code in final step to this one :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E\u0026lt;b:if cond='data:blog.pageType == \"item\"'\u0026gt;\u003Cbr \/\u003E\u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u0026lt;DIV expr:id='\"summary\" + data:post.id'\u0026gt;\u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\u0026lt;\/DIV\u0026gt; \u0026lt;SCRIPT type='text\/javascript'\u0026gt;createSummaryAndThumb(\"summary\u0026lt;data:post.id\/\u0026gt;\");\u0026lt;\/SCRIPT\u0026gt; \u0026lt;div style='clear: both;'\/\u0026gt;\u0026lt;div style='border:0px;padding-top:5px;;float:right;text-align:right;'\u0026gt;\u0026lt;span class='readon'\u0026gt;\u0026lt;a expr:href='data:post.url' rel='bookmark'\u0026gt;Read More...\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003Echange the tag in red to suit your style.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EHope I have explained everything in this script. if you need any other modification or help please feel free to add to \u003Ca href=\"gtalk:chat?jid=mohamedrias1103@gmail.com\"\u003Egtalk\u003C\/a\u003E. I love to help you guys."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/rias-techno-wizard.blogspot.com\/feeds\/7998489932664298253\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/05\/read-more-hack-for-blogger-with.html#comment-form","title":"12 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/7998489932664298253"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/7998489932664298253"},{"rel":"alternate","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/05\/read-more-hack-for-blogger-with.html","title":"Read More hack for Blogger with automatic Thumbnail creator script"}],"author":[{"name":{"$t":"Mohamed Rias"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08249617985127266873"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"21","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhhsGMxv3l8fiUotao-1TnOHPWSfkZtraGnsQ_eZPEdCKTf8VZ4xSfZeQVoFTA0gpJe5hTBJjHWr_PslrfM76bGOwqs7sv-Dp5uwDmT8GxLfCdEtX_9L3ZhdgUjDLUaLS0\/s220\/10151658472293468.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_ecj_-xaKLE0\/SYRf0tjDWiI\/AAAAAAAABVE\/D77J2tT-IEA\/s72-c\/resumo.jpg","height":"72","width":"72"},"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-6425918883307327859.post-8606549846277824029"},"published":{"$t":"2009-01-31T16:48:00.000-08:00"},"updated":{"$t":"2009-04-06T06:54:01.687-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger Hack"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc"},"content":{"type":"html","$t":"Learn How to create Compatible CSS for Various Browsers like Internet Explorer 6 , IE7 , IE8 , Opera , Firefox , etc..\u003Cbr \/\u003E\u003Cbr \/\u003EWeb-designers create blogger template for Hours using one particular browser say Firefox , They don't know that the CSS code they use is compatible only for the browser they are working at present. Especially in IE6 , there are many Compatible issues.\u003Cbr \/\u003E\u003Cbr \/\u003Efor Example : the sidebar may appear below main content wrapper or there would be more gap between each widget , content wrapper and sidebar may overlap ,etc.\u003Cbr \/\u003E\u003Cbr \/\u003ESo in this Post I will tell you How to create CSS code which is compatible for almost all browsers. For this you need to have two browsers Internet Explorer 6 and Firefox .\u003Cbr \/\u003E\u003Cspan class=\"fullpost\"\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EI have chose IE6 because it is one of the most common browsers which windows have.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"TEXT-ALIGN: center\"\u003E\u003Cimg title=\"Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc\" style=\"BORDER-RIGHT: rgb(206,207,208) 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: rgb(206,207,208) 1px solid; PADDING-LEFT: 10px; BACKGROUND: rgb(240,240,240); PADDING-BOTTOM: 10px; BORDER-LEFT: rgb(206,207,208) 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: rgb(206,207,208) 1px solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial\" alt=\"Incompatibility issues in IE6 and Firefox\" src=\"http:\/\/i422.photobucket.com\/albums\/pp302\/bloggeracs\/csscode.gif\" \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EFirst let's check is our current Blogger template is compatible with all browsers or not.\u003Cbr \/\u003E\u003Cbr \/\u003EFor this visit this website : \u003Ca href=\"http:\/\/www.browsershots.org\/\"\u003EBrowser Screen shots\u003C\/a\u003E\u003Cbr \/\u003EEnter your Blog URL and check the images there to know How your blog looks in various Browsers.\u003Cbr \/\u003E\u003Cbr \/\u003Estep 2 : If you find any incompatibility issues then you need to modify your CSS code to suit browsers.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cp class=\"notes\"\u003ELet's us see an Example \u003C\/p\u003E\u003C!-- adsense --\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EGenerally the css we use if of this form :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E#example {\u003Cbr \/\u003Efloat : left;\u003Cbr \/\u003Ewidth : 170px;\u003Cbr \/\u003Emargin-left : 5px;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EIn this assume that this particular div is incompatible with Internet Explorer version x.\u003Cbr \/\u003E\u003Cbr \/\u003Ethen we need to modify the above css code as\u003Cbr \/\u003E\u003Cbr \/\u003E#example {\u003Cbr \/\u003Efloat : left;\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Ewidth : 170px;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Emargin-left : 5px;\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E#example {\u003Cbr \/\u003Efloat : left;\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Ewidth : 185px;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Emargin-left : 3px;\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Ein this first css code is for all versions of Internet Explorer and the second css code is for other browsers like firefox , opera , dillo , sea monkey , etc\u003Cbr \/\u003E\u003Cbr \/\u003Ebut it will be confusing for you to edit.. so now we are going to add different CSS rules to IE, we can use the child selector command which IE can't understand. The child selector command involves two elements, one of which is the child of the other. So, html\u003Ebody refers to the child, body, contained within the parent, html.\u003Cbr \/\u003E\u003Cbr \/\u003EAfter introducing Child selector command , the css code must look like this\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote\u003E\u003Cspan style=\"COLOR: rgb(0,102,0)\"\u003E#example\u003C\/span\u003E {\u003Cbr \/\u003Efloat : left;\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Ewidth : 170px;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Emargin-left : 5px;\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(255,0,0)\"\u003Ehtml \u003E body #example\u003C\/span\u003E {\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Ewidth : 185px;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(0,0,153)\"\u003Emargin-left : 3px;\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003Ein this the green colored code is for IE versions and the red Colored code is for other browsers.\u003Cbr \/\u003E\u003Cbr \/\u003ESo with simple child selector command we can make our css code compatible for all browsers. Every time when I create a New template , I use to check whether it is compatible with other browsers or not. And I use to change the CSS code to suit that browser.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you are unable to modify the CSS code then please mail me your template and explain the problem , I will rectify those errors and mail you back.\u003C\/span\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/rias-techno-wizard.blogspot.com\/feeds\/8606549846277824029\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/01\/create-compatible-css-for-firefox-ie6.html#comment-form","title":"23 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/8606549846277824029"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/8606549846277824029"},{"rel":"alternate","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2009\/01\/create-compatible-css-for-firefox-ie6.html","title":"Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc"}],"author":[{"name":{"$t":"Mohamed Rias"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08249617985127266873"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"21","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhhsGMxv3l8fiUotao-1TnOHPWSfkZtraGnsQ_eZPEdCKTf8VZ4xSfZeQVoFTA0gpJe5hTBJjHWr_PslrfM76bGOwqs7sv-Dp5uwDmT8GxLfCdEtX_9L3ZhdgUjDLUaLS0\/s220\/10151658472293468.jpg"}}],"thr$total":{"$t":"23"}},{"id":{"$t":"tag:blogger.com,1999:blog-6425918883307327859.post-2304414131667826043"},"published":{"$t":"2008-10-04T22:28:00.000-07:00"},"updated":{"$t":"2009-04-06T06:55:03.625-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger Hack"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"}],"title":{"type":"text","$t":"Add 125 x 125 ad section to Blogger"},"content":{"type":"html","$t":"Learn How to add an extra B:section in your Blog template and also learn to add 125x125 ad banners !\u003Cbr \/\u003E\u003Cbr \/\u003EI noticed that most of my readers are asking me How to add 125 x 125 ads section in Blogger templates. We know that to add a widget we need b:section with add page elements function enabled. So in this post I will tell you how to add b:section in your Blogger template and how to add CSS code to suit that b:section.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ESo with this hack you can add any widget you want. And I will also make a note on Adding 125 x 125 Page Element.\u003Cbr \/\u003E\u003Cspan class=\"fullpost\"\u003E\u003Cbr \/\u003ELets start :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-size:130%;\"\u003E\u003Cspan style=\"font-family:georgia;\"\u003EAdding b:section to Blog sidebar :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-size:100%;\"\u003EStep 1 : Sign in to Your Blogger account and got to Layout section of your Blog. Then Navigate to Edit HTML sub tab. \u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan class=\"fullpost\"\u003E\u003Cspan style=\"font-size:130%;\"\u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cspan style=\"font-size:100%;\"\u003E\u003C!-- adsense --\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EStep 2 : If your template possess two Columns in Right sidebar and if you want to add an Subscription form or 125 x 125 ad section above those two columns then do this step.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"fullpost\"\u003E\u003Cspan style=\"font-size:130%;\"\u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cspan style=\"font-size:100%;\"\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cdiv style=\"TEXT-ALIGN: center\"\u003E\u003Cspan style=\"font-size:130%;\"\u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cspan style=\"font-size:100%;\"\u003E\u003Cimg title=\"  This is how the template will look before\" alt=\" If you have a sidebar like this then add a b:section above the 2 columns to add more widgets\" src=\"http:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/Before.jpg\" \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cspan style=\"font-size:130%;\"\u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cspan style=\"font-size:100%;\"\u003E\u003Cbr \/\u003ESearch this tag or similar\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cdiv style=\"TEXT-ALIGN: center\"\u003E\u003Cspan style=\"COLOR: rgb(255,0,0);font-size:130%;\" \u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cspan style=\"font-size:100%;\"\u003E\u0026lt;div id='sidebar-right'\u0026gt;\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E \u003Cspan style=\"COLOR: rgb(255,0,0);font-size:130%;\" \u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cspan style=\"font-size:100%;\"\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cspan style=\"COLOR: rgb(255,0,0);font-size:130%;\" \u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cspan style=\"font-size:100%;\"\u003E\u0026lt;b:section class='sidebar-right' id='sidebar-right' preferred='yes'\u0026gt;\u003C\/span\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cspan style=\"font-size:130%;\"\u003E\u003Cspan style=\"font-family:georgia;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003EThe id can be different , so please paste the following code just above the sidebar section of your Blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cdiv class=\"codeview\"\u003E\u0026lt;div id='sidebar2'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:section class='sidebar2' id='sidebar2' preferred='yes'\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:section\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ESo Now we have added the b:section code needed to add more widgets. Then we need to add css code for that b:section\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E#sidebar2 {\u003Cbr \/\u003Efloat : right;\u003Cbr \/\u003Emargin-left:4px; \u003Cspan style=\"COLOR: rgb(0,102,0)\"\u003Ewidth : 415px;\u003C\/span\u003E \u003Cspan style=\"COLOR: rgb(0,102,0)\"\u003Ebackground:#ffffff;\u003C\/span\u003E\u003Cbr \/\u003Efont : 11px Verdana;\u003Cbr \/\u003E}\u003Cbr \/\u003E#sidebar2 .widget {\u003Cbr \/\u003Elist-style-type : none;\u003Cbr \/\u003Emargin : 5px 0 5px 0;\u003Cbr \/\u003Epadding : 0;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#sidebar2 .widget h2, #sidebar2 h2 {padding-left: 10px;\u003Cbr \/\u003Etext-align:center;padding-left: 18px;\u003Cbr \/\u003Efont: 12px\/34px \"Georgia\", Verdana;\u003Cbr \/\u003Etext-transform: uppercase;\u003Cbr \/\u003Ecolor: #ffffff;\u003Cbr \/\u003Ebackground: url(\"\u003Cspan style=\"COLOR: rgb(0,102,0)\"\u003Ehttp:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/sidebar_title-2.gif\u003C\/span\u003E\") repeat;font-weight:bold;\u003Cbr \/\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#sidebar2 a {\u003Cbr \/\u003Ecolor: #969696;\u003Cbr \/\u003Efont-size : 12px;\u003Cbr \/\u003Etext-decoration : none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#sidebar2 a:hover {\u003Cbr \/\u003Ecolor: #969696;\u003Cbr \/\u003Etext-decoration : none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#sidebar2 ul {\u003Cbr \/\u003Eborder : medium none;\u003Cbr \/\u003Emargin : 7px;\u003Cbr \/\u003Epadding : 0;\u003Cbr \/\u003E}\u003Cbr \/\u003E#sidebar2 ul li {\u003Cbr \/\u003Elist-style-type : none;\u003Cbr \/\u003Eborder-bottom : 1px dotted #87581f;\u003Cbr \/\u003Emargin : 0;\u003Cbr \/\u003Ebackground-position : 0% 100%;\u003Cbr \/\u003Epadding-left : 8px;\u003Cbr \/\u003Epadding-right : 10px;\u003Cbr \/\u003Eline-height : 15px;\u003Cbr \/\u003Epadding-top : 5px;\u003Cbr \/\u003Epadding-bottom : 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#sidebar2 ul li a {\u003Cbr \/\u003Etext-decoration: none; background: url(\u003Cspan style=\"COLOR: rgb(0,102,0)\"\u003Ehttp:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/side_li_bullet.gif\u003C\/span\u003E) no-repeat; padding:0 0 0 12px;color: #87581f;\u003Cbr \/\u003E}\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Eplease edit the text in green to suit your Blogger template.\u003Cbr \/\u003E\u003Cbr \/\u003ESo we have successfully added the b:section and css codings required.\u003Cbr \/\u003E\u003Cbr \/\u003ENow navigate to Layout section of your blog and there you will see a new \" Add page Elements \" link just above the sidebar.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you are planning to add 125 x 125 ad section then click add page element link. there select add HTML\/ JAVASCRIPT page widget and insert the below code over there.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E\u0026lt;div class=\"sidebar-ads\"\u0026gt;\u003Cbr \/\u003E\u0026lt;div class=\"sidebar-banner\"\u0026gt;\u0026lt;a href=\"\u003Cspan style=\"COLOR: rgb(204,0,0)\"\u003E#\u003C\/span\u003E\"\u0026gt;\u003Cbr \/\u003E\u0026lt;img border=\"0\" src=\"http:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/banner_125x125.jpg \"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;div class=\"sidebar-banner\"\u0026gt;\u0026lt;a style=\"text-decoration: none;\" href=\"\u003Cspan style=\"COLOR: rgb(255,0,0)\"\u003E#\"\u003C\/span\u003E\u0026gt;\u0026lt;img border=\"0\" src=\"http:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/banner_125x125.jpg\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;div class=\"sidebar-banner\"\u0026gt;\u0026lt;a style=\"text-decoration: none;\" href=\"\u003Cspan style=\"COLOR: rgb(255,0,0)\"\u003E#\u003C\/span\u003E\"\u0026gt;\u0026lt;img border=\"0\" src=\"http:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/banner_125x125.jpg\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;div class=\"clear\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;p\u0026gt;\u0026lt;a href=\"mailto:your email id\" title=\"Advertise Here\"\u0026gt;Advertise Here\u0026lt;\/a\u0026gt;\u0026lt;\/p\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EAfter adding the code , click save widget. Then navigate to Edit HTML sub tab to add the necessary CSS code needed for this ad section\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E\/* Sidebar - Ads *\/\u003Cbr \/\u003E\u003Cbr \/\u003E.sidebar-ads {\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(204,0,0)\"\u003Ewidth: 410px;margin-left:5px;\u003C\/span\u003E\u003Cbr \/\u003Emargin-bottom: 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.sidebar-banner {\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(204,0,0)\"\u003Epadding: 5px;\u003C\/span\u003E\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E#sidebar2 p { background:url(http:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/adsdotdot-1.gif) no-repeat center left; margin-top:5px;text-align:right;padding-right:10px;}\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EEdit the test in red to suit your template.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"TEXT-ALIGN: center\"\u003E\u003Cimg title=\" After adding the code this is how it will look in the template\" style=\"WIDTH: 431px; HEIGHT: 372px\" alt=\" After adding the CSS code this is how it will look\" src=\"http:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/After.jpg\" \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003ESo we have successfully added the 125 x 125 ad section.\u003Cimg class=\"emoticon\" src=\"http:\/\/us.i1.yimg.com\/us.yimg.com\/i\/mesg\/emoticons7\/36.gif\" \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cp class=\"alert\"\u003E\u003Cspan style=\"font-family:georgia;font-size:130%;\"\u003EAdding b:section below or above posts ( content)\u003C\/span\u003E\u003C\/p\u003E\u003Cbr \/\u003EMost wish to add two column b:section below main container ( posts ) . I will write about this hack soon. (Its a continuation of this hack )\u003Cbr \/\u003E\u003Cbr \/\u003EIf you guys need any help , please feel free to contact me mohamedrias1103@gmail.com . See you soon with new Blogger hacks.\u003C\/span\u003E\u003Cbr \/\u003E\u003C\/span\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/rias-techno-wizard.blogspot.com\/feeds\/2304414131667826043\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2008\/10\/add-additional-bsection-to-blogger.html#comment-form","title":"18 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/2304414131667826043"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/2304414131667826043"},{"rel":"alternate","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2008\/10\/add-additional-bsection-to-blogger.html","title":"Add 125 x 125 ad section to Blogger"}],"author":[{"name":{"$t":"Mohamed Rias"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08249617985127266873"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"21","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhhsGMxv3l8fiUotao-1TnOHPWSfkZtraGnsQ_eZPEdCKTf8VZ4xSfZeQVoFTA0gpJe5hTBJjHWr_PslrfM76bGOwqs7sv-Dp5uwDmT8GxLfCdEtX_9L3ZhdgUjDLUaLS0\/s220\/10151658472293468.jpg"}}],"thr$total":{"$t":"18"}},{"id":{"$t":"tag:blogger.com,1999:blog-6425918883307327859.post-1334746788419519754"},"published":{"$t":"2008-08-25T05:16:00.000-07:00"},"updated":{"$t":"2009-04-06T06:57:38.485-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger Hack"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"}],"title":{"type":"text","$t":"Show Labels containing specific number of Posts"},"content":{"type":"html","$t":"I have already written \" How to show only specific number of posts on Labels Page \". Today I am going to tell How to Show Only Labels with specific number of posts. This hack is very useful for those who have plenty of Labels in their Blog. It's a very simple hack , just follow the below steps to implement this hack in your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EStep 1 : Login to your Blogger Account and go to Layout section of your Blog.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you don't have any Labels widget then add it by clicking \u003Cspan style=\"COLOR: rgb(255,102,102)\"\u003EADD Page ELEMENT\u003C\/span\u003E link in the Page. Then navigate to \u003Cspan style=\"COLOR: rgb(255,0,0)\"\u003EEDIT HTML\u003C\/span\u003E subtab and Check \u003Cspan style=\"COLOR: rgb(255,0,0)\"\u003EEXPAND WIDGETS\u003C\/span\u003E box.\u003Cbr \/\u003E\u003Cspan class=\"fullpost\"\u003E\u003Cbr \/\u003EStep 2 :\u003Cbr \/\u003E\u003Cbr \/\u003ENow search for this Line.\u003Cbr \/\u003E\u003C!-- adsense --\u003E\u003Cbr \/\u003E\u003Cspan style=\"COLOR: rgb(255,0,0)\"\u003E\u0026lt;b:widget id='Label1' locked='false' title='Labels' type='Label'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow below this line , you will find this code\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E\u003Cbr \/\u003E\u0026lt;b:loop values='data:labels' var='label'\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.url == data:label.url'\u0026gt;\u003Cbr \/\u003E\u0026lt;data:label.name\/\u0026gt;\u003Cbr \/\u003E\u0026lt;b:else\/\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='data:label.url'\u0026gt;\u0026lt;data:label.name\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E(\u0026lt;data:label.count\/\u0026gt;)\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow replace the above code with the following code.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"codeview\"\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003Evar labelnum = 0;\u003Cbr \/\u003E\u0026lt;b:loop values='data:labels' var='label'\u0026gt;\u003Cbr \/\u003Eif (\u0026lt;data:label.count\/\u0026gt; \u0026amp;gt; \u003Cspan style=\"COLOR: rgb(0,102,0)\"\u003E2\u003C\/span\u003E) {\u003Cbr \/\u003Edocument.write(\u0026amp;quot;\u0026lt;li\u0026gt;\u0026lt;a expr:href='data:label.url + \"?max-results=\u003Cspan style=\"COLOR: rgb(255,0,0)\"\u003E5\u003C\/span\u003E\"'\u003Cbr \/\u003Erel='nofollow'\u0026gt;\u0026lt;span\u0026gt;\u0026lt;data:label.name\/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;(\u0026lt;data:label.count\/\u0026gt;)\u0026lt;\/li\u0026gt;\u0026amp;quot;);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EIt should look like this\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"TEXT-ALIGN: center\"\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cimg title=\"Show Labels containing only specific number of posts in Blogger\" style=\"WIDTH: 450px\" alt=\"Show only Labels with specific number of posts\" src=\"http:\/\/i263.photobucket.com\/albums\/ii150\/mohamedrias\/ShowonlyLabelswithspecificnumber-2.jpg\" \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EIn the above script edit the text in green to show Labels which contains more than text in Green.\u003Cbr \/\u003E\u003Cbr \/\u003Efor example : I have chosen number 2 , then Labels which contains more than 2 posts will be shown and other labels will be hidden.\u003Cbr \/\u003E\u003Cbr \/\u003EEdit the text in red to show only specific number of posts in Labels Page.\u003Cbr \/\u003E\u003Cbr \/\u003EThat's it , you have successfully implemented the \"Show Labels with specific number of Posts \" hack in your blog.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you have any problem , let me know.\u003C\/span\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/rias-techno-wizard.blogspot.com\/feeds\/1334746788419519754\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2008\/08\/show-labels-containing-specific-number.html#comment-form","title":"11 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/1334746788419519754"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6425918883307327859\/posts\/default\/1334746788419519754"},{"rel":"alternate","type":"text/html","href":"http:\/\/rias-techno-wizard.blogspot.com\/2008\/08\/show-labels-containing-specific-number.html","title":"Show Labels containing specific number of Posts"}],"author":[{"name":{"$t":"Mohamed Rias"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08249617985127266873"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"21","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhhsGMxv3l8fiUotao-1TnOHPWSfkZtraGnsQ_eZPEdCKTf8VZ4xSfZeQVoFTA0gpJe5hTBJjHWr_PslrfM76bGOwqs7sv-Dp5uwDmT8GxLfCdEtX_9L3ZhdgUjDLUaLS0\/s220\/10151658472293468.jpg"}}],"thr$total":{"$t":"11"}}]}});