// API callback
relatedposts({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243"},"updated":{"$t":"2023-12-15T03:10:29.561-08:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"posts"},{"term":"css"},{"term":"Comments"},{"term":"adsense"},{"term":"SEO"},{"term":"jQuery"},{"term":"social media"},{"term":"Image Effects"},{"term":"beginner's guide"},{"term":"blogger posts"},{"term":"Navigation"},{"term":"make money online"},{"term":"javascript"},{"term":"adsense optimization"},{"term":"menus"},{"term":"Facebook"},{"term":"adsense tips"},{"term":"social media plugins"},{"term":"popular posts"},{"term":"blogger"},{"term":"blogger pages"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"threaded comments"},{"term":"google plus"},{"term":"related posts"},{"term":"blogging tips"},{"term":"recent comments"},{"term":"slideshows"},{"term":"static pages"},{"term":"tools"},{"term":"Templates"},{"term":"backlinks"},{"term":"custom domain"},{"term":"emoticons"},{"term":"instagram"},{"term":"labels"},{"term":"sitemap"},{"term":"RSS"},{"term":"click bombing"},{"term":"feedburner"},{"term":"firebug"},{"term":"font awesome"},{"term":"google analytics"},{"term":"homepage"},{"term":"invalid clicks"},{"term":"robots"},{"term":"statcounter"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Widgets?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/search\/label\/Widgets"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Widgets\/-\/Widgets?alt=json-in-script\u0026start-index=7\u0026max-results=6"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"67"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-3942136804036706568"},"published":{"$t":"2016-11-25T03:04:00.000-08:00"},"updated":{"$t":"2020-04-17T08:51:53.148-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"5 Best Custom Blogger Contact Form Widgets"},"content":{"type":"html","$t":"In the past, adding a custom contact form for Blogger was quite a complex process, and many bloggers were forced to use third party websites. However, even after \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2013\/05\/new-blogger-widget-contact-form-change.html\"\u003EBlogger launched its own contact form gadget\u003C\/a\u003E, it was still considered as highly inadequate. This is because the official gadget would only be implemented on the footer the sidebar. Most bloggers preferred having a separate blogger contact form placed on its own page to make their blogs appear well arranged and more professional as well.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHaving a well laid-out \u003Cb\u003EBlogger contact form\u003C\/b\u003E is very important. This is the tool that visitors, companies, and brands can use to contact you and it is simply a must-have feature for every blogger. If you are not comfortable with sharing your main email address directly on your blog, then a custom Blogger contact form offers an effective way in which people can easily reach you.\u003Cbr \/\u003E\n\u003Cdiv class=\"hidden-image\"\u003E\u003Cimg alt=\"5 Best Custom Blogger Contact Form Widgets\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-AMDVyOgeKsM\/XpnQcc4rAYI\/AAAAAAAAMPE\/WM8WItxRXLw6LGrMR4ZRETgwwUWlXjVvwCLcBGAsYHQ\/s1600\/custom-blogger-contact-form.jpg\" title=\"5 Best Custom Blogger Contact Form Widgets\"\/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Ch3\u003E\nWhy you should use a Blogger Contact Form?\u003C\/h3\u003E\nIf you are still stuck on third party providers, you should definitely consider switching to the official custom contact form for Blogger since it has various unique benefits, like:\u003Cbr \/\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cb\u003EMessages are delivered immediately\u003C\/b\u003E - As the blog administrator, you will receive a message immediately the visitor clicks send.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EReliable\u003C\/b\u003E - It is the official form developed by Blogger, which makes it more trustworthy and reliable way to initiate contact as compared to using third-party services.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EQuestions\u003C\/b\u003E - The contact form offers a platform for your visitors to ask specific questions that they might have regarding the blog you wrote or your business in general. It can be an excellent way of capturing leads and even lead to conversions if you are selling a certain product or service.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EFeedback\u003C\/b\u003E - Visitors can easily comment on your blog by leaving their feedback through your contact form. This feedback can help you determine which post to do next or what areas to address based on the visitors' comments.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EInformation or service request\u003C\/b\u003E - For those who are using the blog as a way of marketing a product or service, potential clients can use the custom contact form for Blogger to reach out and request additional information.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Ch2\u003E\nHow to Add Blogger Contact Form Gadget \u003C\/h2\u003E\nBefore adding a custom Blogger contact form to a static page, we need to add the default contact form in the blog's sidebar to make it functional:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n1. Log into your Blogger dashboard and go to \"Layout\" \u0026gt; click on the \"Add a gadget\" link on the page elements area.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n2. Select \"More Gadgets\" below the \"Basics\" tab and click the \"+\" button to add the Contact Form Gadget.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"blogger contact form\" border=\"0\" height=\"390\" src=\"https:\/\/1.bp.blogspot.com\/-y_zg56kQdAo\/WC9n0A2z-iI\/AAAAAAAAL7k\/ZMeIWhs4YKUg07l9r0s7p28kD6qZXTQSQCLcB\/s640\/add-blogger-contact-form-gadget.png\" title=\"How to add Blogger contact form\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003E\nHiding Blogger Contact Form from the Sidebar\u003C\/h2\u003E\nOnce the contact form has been added, next step is to hide it so that it will appear only in the static page. \u003Cbr \/\u003E\n\u003Cbr \/\u003E\n1. Go to \"Template\" and press the \"Edit HTML\" button. Once the code editor opens, click anywhere inside the code area and press CTRL + F keys (or Command + F for mac) to open the search box.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n2. Type or paste the following tag inside the search box and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\n3. Just above the ]]\u0026gt;\u0026lt;\/b:skin\u0026gt; tag, add this CSS code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E#ContactForm1{display: none !important;}\u003C\/blockquote\u003E\n4. Click the \"Save template\" button on the upper left side and view your blog. The contact form widget should be gone.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003E\nAdding Custom Blogger Contact Form in a Static Page\u003C\/h2\u003E\nFinally, now that we enabled the functionality of the contact form, let's add a custom contact form in our Blogger blog...\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n1. Go to \"Pages\" and click the \"New page\" button. If you already have a Contact us page, just click the \"Edit\" link below the page title.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n2. Once the Page editor opens, fill up the page title with Contact\/Contact Us or any title you want to show. It is recommended doing this before anything in order to make the permalink SEO friendly.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n3. Click on the HTML tab as there we will add the code to make the custom Blogger contact form work. On the right site, change the Page settings to hide (\"Don't allow\" or \"Don't allow, hide existing\") the reader comments, then click the \"Done\" button:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"contact static page\" border=\"0\" height=\"452\" src=\"https:\/\/3.bp.blogspot.com\/-yYW9LScAolk\/WC9xw82yLkI\/AAAAAAAAL74\/ryDupHqH9Hoief-udCEFJ-NR2J49koA2ACLcB\/s640\/blogger-contact-form-page.png\" title=\"Adding contact form for Blogger in a static page\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n4. Below are 5 custom Blogger contact form styles. Pick your favorite and copy the code provided, then paste the code inside the HTML box of your page editor:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align: center;\"\u003E\nSimple Contact Form\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"custom blogger contact form\" border=\"0\" height=\"354\" src=\"https:\/\/2.bp.blogspot.com\/-21BHcpPbMmE\/WC90i4dWMJI\/AAAAAAAAL8A\/665FLORxtEg-JcBS_HwWN_V2v_0cW4kCgCLcB\/s640\/simple-blogger-contact-form.png\" title=\"Simple Custom Blogger contact form\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;div class=\"widget ContactForm\" id=\"ContactForm22\"\u0026gt;\u0026lt;div class=\"contact-form-widget\"\u0026gt;\u0026lt;div class=\"form\"\u0026gt;\u0026lt;form name=\"contact-form\"\u0026gt;\u0026lt;div class=\"contactf-name\"\u0026gt;\u0026lt;input class=\"contact-form-name\" id=\"ContactForm1_contact-form-name\" name=\"name\" size=\"30\" type=\"text\" value=\"NAME\" onblur='if (this.value == \"\") {this.value = \"NAME\";}' onfocus='if (this.value == \"NAME\") {this.value = \"\";}'\u0026nbsp; \/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-email\"\u0026gt;\u0026lt;input class=\"contact-form-email\" id=\"ContactForm1_contact-form-email\" name=\"email\" size=\"30\" type=\"text\" value=\"EMAIL\" onblur='if (this.value == \"\") {this.value = \"EMAIL\";}' onfocus='if (this.value == \"EMAIL\") {this.value = \"\";}'\/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div style=\"clear:both\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-message\"\u0026gt;\u0026lt;textarea class=\"contact-form-email-message\" cols=\"25\" id=\"ContactForm1_contact-form-email-message\" name=\"email-message\" rows=\"5\" value=\"MESSAGE\" onblur='if (this.value == \"\") {this.value = \"MESSAGE\";}' onfocus='if (this.value == \"MESSAGE\") {this.value = \"\";}'\u0026gt;\u0026lt;\/textarea\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;input class=\"contact-form-button contact-form-button-submit\" id=\"ContactForm1_contact-form-submit\" type=\"button\" value=\"SEND\" \/\u0026gt;\u0026lt;div class=\"contact-form-error-message\" id=\"ContactForm1_contact-form-error-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contact-form-success-message\" id=\"ContactForm1_contact-form-success-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/form\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align: center;\"\u003E\nContact form with CSS rainbow divider\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"colorful contact form for Blogger\" border=\"0\" height=\"314\" src=\"https:\/\/1.bp.blogspot.com\/-yJjBOL2206Y\/WC91GDOhLuI\/AAAAAAAAL8E\/Ll5Gy5-Nb2QA8Wmpf0OXnj2J6l1nzPHiwCLcB\/s640\/rainbow-blogger-contact-form.png\" title=\"Colorful Contact form for Blogger\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:\"\";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;div class=\"widget ContactForm\" id=\"ContactForm22\"\u0026gt;\u0026lt;div class=\"contact-form-widget\"\u0026gt;\u0026lt;hr\u0026gt;\u0026lt;div class=\"form\"\u0026gt;\u0026lt;form name=\"contact-form\"\u0026gt;\u0026lt;div class=\"contactf-name\"\u0026gt;\u0026lt;input class=\"contact-form-name\" id=\"ContactForm1_contact-form-name\" name=\"Name\" size=\"30\" type=\"text\" value=\"Name\" onblur='if (this.value == \"\") {this.value = \"Name\";}' onfocus='if (this.value == \"Name\") {this.value = \"\";}'\/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-email\"\u0026gt;\u0026lt;input class=\"contact-form-email\" id=\"ContactForm1_contact-form-email\" name=\"E-mail address\" size=\"30\" type=\"text\" value=\"E-mail address\" onblur='if (this.value == \"\") {this.value = \"E-mail address\";}' onfocus='if (this.value == \"E-mail address\") {this.value = \"\";}'\/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div style=\"clear:both\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-message\"\u0026gt;\u0026lt;textarea class=\"contact-form-email-message\" cols=\"25\" id=\"ContactForm1_contact-form-email-message\" name=\"Type your message here...\" rows=\"5\" type=\"text\" value=\"Type your message here...\" onblur='if (this.value == \"\") {this.value = \"Type your message here...\";}' onfocus='if (this.value == \"Type your message here...\") {this.value = \"\";}'\u0026gt;\u0026lt;\/textarea\u0026gt;\u0026lt;input class=\"contact-form-button contact-form-button-submit\" id=\"ContactForm1_contact-form-submit\" type=\"button\" value=\"Send Message\" \/\u0026gt;\u0026lt;div class=\"contact-form-error-message\" id=\"ContactForm1_contact-form-error-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contact-form-success-message\" id=\"ContactForm1_contact-form-success-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/form\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align: center;\"\u003E\nBlogger Contact Form with CSS Ribbon \u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"contact form with ribbon\" border=\"0\" height=\"486\" src=\"https:\/\/3.bp.blogspot.com\/-Crtnvw9NESg\/WC9115cXvmI\/AAAAAAAAL8I\/j594b5eTeCo893u6Z0VGODfeRbT-nGv_wCLcB\/s640\/ribbon-blogger-contact-form.png\" title=\"Blogger Contact form with Ribbon\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:\"\";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:\"\";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;div class=\"widget ContactForm\" id=\"ContactForm22\"\u0026gt;\u0026lt;div class=\"contact-form-widget\"\u0026gt;\u0026lt;h2 class=\"ribbon\"\u0026gt;\u0026lt;strong class=\"ribbon-content\"\u0026gt;Shoot Me an Email\u0026lt;\/strong\u0026gt;\u0026lt;\/h2\u0026gt;\u0026lt;div class=\"form\"\u0026gt;\u0026lt;form name=\"contact-form\"\u0026gt;\u0026lt;div class=\"contactf-name\"\u0026gt;Your name:\u0026lt;input class=\"contact-form-name\" id=\"ContactForm1_contact-form-name\" name=\"Name\" size=\"30\" type=\"text\" value=\"Name\" onblur='if (this.value == \"\") {this.value = \"Name\";}' onfocus='if (this.value == \"Name\") {this.value = \"\";}'\u0026nbsp; \/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-email\"\u0026gt;E-mail address *:\u0026lt;input class=\"contact-form-email\" id=\"ContactForm1_contact-form-email\" name=\"E-mail address\" size=\"30\" type=\"text\" value=\"E-mail address\" onblur='if (this.value == \"\") {this.value = \"E-mail address\";}' onfocus='if (this.value == \"E-mail address\") {this.value = \"\";}'\/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div style=\"clear:both\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-message\"\u0026gt;Message *:\u0026lt;textarea class=\"contact-form-email-message\" cols=\"25\" id=\"ContactForm1_contact-form-email-message\" name=\"Type your message here...\" rows=\"5\" value=\"\" placeholder=\"Type your message here...\" value=\"Type your message here...\" onblur='if (this.value == \"\") {this.value = \"Type your message here...\";}' onfocus='if (this.value == \"Type your message here...\") {this.value = \"\";}'\u0026gt;\u0026lt;\/textarea\u0026gt;\u0026lt;input class=\"contact-form-button contact-form-button-submit\" id=\"ContactForm1_contact-form-submit\" type=\"button\" value=\"SEND MESSAGE\" \/\u0026gt;\u0026lt;div class=\"contact-form-error-message\" id=\"ContactForm1_contact-form-error-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contact-form-success-message\" id=\"ContactForm1_contact-form-success-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/form\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align: center;\"\u003E\nMinimal Contact Form\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"minimal contact form for Blogger\" border=\"0\" height=\"414\" src=\"https:\/\/1.bp.blogspot.com\/-Wfdi5RQ07iQ\/WC92TM-51hI\/AAAAAAAAL8Q\/y1_Swl81icwJfvSyhj0E9R3n5NoLknzNwCLcB\/s640\/minimal-blogger-contact-form-style.png\" title=\"Minimal contact form for Blogger\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px \"Lucida Grande\";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;div class=\"widget ContactForm\" id=\"ContactForm22\"\u0026gt;\u0026lt;div class=\"contact-form-widget\"\u0026gt;\u0026lt;h2 class=\"contact-title\"\u0026gt;Get in touch.\u0026lt;\/h2\u0026gt;\u0026lt;div class=\"form\"\u0026gt;\u0026lt;form name=\"contact-form\"\u0026gt;\u0026lt;div class=\"contactf-name\"\u0026gt;\u0026lt;div class=\"name-icon\"\u0026gt;\u0026lt;img src=\"https:\/\/3.bp.blogspot.com\/-TgreeOjV9hc\/WC8lF19LbaI\/AAAAAAAABq4\/E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB\/s1600\/avatar%25281%2529.png\" width=\"16\" height=\"16\" \/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;input class=\"contact-form-name\" id=\"ContactForm1_contact-form-name\" name=\"Name\" size=\"30\" type=\"text\" value=\"Name\" onblur='if (this.value == \"\") {this.value = \"Name\";}' onfocus='if (this.value == \"Name\") {this.value = \"\";}'\u0026nbsp; \/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-email\"\u0026gt;\u0026lt;div class=\"email-icon\"\u0026gt;\u0026lt;img src=\"https:\/\/4.bp.blogspot.com\/-AuOlsNet-oA\/WC8lCTFCY_I\/AAAAAAAABq0\/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB\/s1600\/envelope%25281%2529.png\" width=\"16\" height=\"16\" \/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;input class=\"contact-form-email\" id=\"ContactForm1_contact-form-email\" name=\"E-mail address\" size=\"30\" type=\"text\" value=\"E-mail address\" onblur='if (this.value == \"\") {this.value = \"E-mail address\";}' onfocus='if (this.value == \"E-mail address\") {this.value = \"\";}'\/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div style=\"clear:both\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-message\"\u0026gt;\u0026lt;textarea class=\"contact-form-email-message\" cols=\"25\" id=\"ContactForm1_contact-form-email-message\" name=\"Type your message here...\" rows=\"5\" value=\"Type your message here...\" onblur='if (this.value == \"\") {this.value = \"Type your message here...\";}' onfocus='if (this.value == \"Type your message here...\") {this.value = \"\";}'\u0026gt;\u0026lt;\/textarea\u0026gt;\u0026lt;input class=\"contact-form-button contact-form-button-submit\" id=\"ContactForm1_contact-form-submit\" type=\"button\" value=\"SEND\" \/\u0026gt;\u0026lt;div class=\"contact-form-error-message\" id=\"ContactForm1_contact-form-error-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contact-form-success-message\" id=\"ContactForm1_contact-form-success-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/form\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align: center;\"\u003E\nContact form with speech bubble\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg border=\"0\" height=\"270\" src=\"https:\/\/4.bp.blogspot.com\/-0LtPT7HsP4U\/WC93VmSD8lI\/AAAAAAAAL8Y\/Nk6m809v314G5kxWUbzwTAPUPcmYlp_HwCLcB\/s640\/cool-blogger-contact-form.png\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0%,#397fd0 100%);font:bold 16px \"Helvetica Neue\",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,0.3) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;div class=\"widget ContactForm\" id=\"ContactForm22\"\u0026gt;\u0026lt;div class=\"contact-form-widget\"\u0026gt;\u0026lt;div class=\"form\"\u0026gt;\u0026lt;form name=\"contact-form\"\u0026gt;\u0026lt;div class=\"contactf-message\"\u0026gt;\u0026lt;textarea class=\"contact-form-email-message\" cols=\"25\" id=\"ContactForm1_contact-form-email-message\" name=\"Message\" rows=\"5\" value=\"Message\" onblur='if (this.value == \"\") {this.value = \"Message\";}' onfocus='if (this.value == \"Message\") {this.value = \"\";}'\u0026gt;\u0026lt;\/textarea\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"cbluebutton\"\u0026gt;\u0026lt;span\u0026gt;\u0026lt;input class=\"contact-form-button contact-form-button-submit\" id=\"ContactForm1_contact-form-submit\" type=\"button\" value=\"Send\" \/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-name\"\u0026gt;\u0026lt;input class=\"contact-form-name\" id=\"ContactForm1_contact-form-name\" name=\"name\" size=\"30\" type=\"text\" value=\"Name\" onblur='if (this.value == \"\") {this.value = \"Name\";}' onfocus='if (this.value == \"Name\") {this.value = \"\";}'\u0026nbsp; \/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contactf-email\"\u0026gt;\u0026lt;input class=\"contact-form-email\" id=\"ContactForm1_contact-form-email\" name=\"email\" size=\"30\" type=\"text\" value=\"E-mail\" onblur='if (this.value == \"\") {this.value = \"E-mail\";}' onfocus='if (this.value == \"E-mail\") {this.value = \"\";}'\/\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div style=\"clear:both\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contact-form-error-message\" id=\"ContactForm1_contact-form-error-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"contact-form-success-message\" id=\"ContactForm1_contact-form-success-message\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/form\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n5. After you added the code, click the \"Publish\" button on the upper right side. Now you should be able to see the Blogger contact form live on your static page. To ensure that everything works fine, you can send a message as a test. The message should be delivered to your inbox in a matter of seconds, just make sure that you're checking the email that you're using with your Blogger account.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch3\u003E\nFrequently Asked Questions about the Custom Contact Form for Blogger\u003C\/h3\u003E\n\u003Ch4\u003E\nWhere do the messages go?\u003C\/h4\u003E\nOnce a visitor asks a question or sends feedback through the \u003Cb\u003EBlogger contact form\u003C\/b\u003E, it is instantly delivered to the email associated with your Blogger account. If a blog has several administrators, then all the individual administrators will receive the comments or questions asked by the visitor.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch4\u003E\nWhat is the benefit of using a separate \"Contact Us\" page?\u003C\/h4\u003E\nEven though it all comes down to your personal preferences, your blog will look more professional if it has a separate page for the custom contact form for Blogger. It gives you credibility and also offers you the chance to add a specific call to action in the new \"Contact Us\" page.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch4\u003E\nIs it possible to add extra fields?\u003C\/h4\u003E\nUnfortunately, no. You can't add custom fields such as website, phone number or mailing address since Blogger uses special tags in order to transfer data. In any case, the default fields are well laid-out and will help you to get the basic information you need about your visitors.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch4\u003E\nI have installed the Blogger contact form, but it is not working. What could be the problem?\u003C\/h4\u003E\nThere are several reasons why you may be having trouble setting up your contact form. The simplest way to troubleshoot is to countercheck the email you linked to the blog and also reinstall the form again.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUltimately, by using the \u003Cb\u003Ecustom Blogger contact form\u003C\/b\u003E you gain from consistency in the type of information you request and also reduce spam since you will not have to display your email directly on the blog."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/3942136804036706568\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/11\/custom-blogger-contact-form-widgets.html#comment-form","title":"12 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3942136804036706568"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3942136804036706568"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/11\/custom-blogger-contact-form-widgets.html","title":"5 Best Custom Blogger Contact Form Widgets"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-AMDVyOgeKsM\/XpnQcc4rAYI\/AAAAAAAAMPE\/WM8WItxRXLw6LGrMR4ZRETgwwUWlXjVvwCLcBGAsYHQ\/s72-c\/custom-blogger-contact-form.jpg","height":"72","width":"72"},"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-1780330582935793345"},"published":{"$t":"2016-05-29T10:05:00.002-07:00"},"updated":{"$t":"2016-10-28T08:50:42.941-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Automatic Featured Posts Slider Widget for Blogger"},"content":{"type":"html","$t":"Anyone with a blog wants readers to stay rather than move on to another. It's not being selfish but after someone has read one post, you'd definitely want them to read another, right? After all, isn't it one of the tenets of \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/07\/7-seo-tips-for-bloggers.html\"\u003ESEO\u003C\/a\u003E to make people stay longer on your blog if it has to have a fighting chance at the rankings game?\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe question now is: how exactly do you entice them to read a few more of your blog posts?\u003Cbr \/\u003E\u003Cbr \/\u003E\nFirst off, you don't know exactly what brought a reader to your site. Well, you sort of do, if you have \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/google-analytics-basics-for-beginners.html\"\u003EGoogle Analytics\u003C\/a\u003E and all that. But that's beside the point. It wouldn't be productive for you to stare at GA the entire day hoping that it will tell you that yes, someone has been perusing your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHow exactly do you do that?\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EThe Tactics of Persuading Users to Stay\u003C\/h4\u003E\nBloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2015\/09\/5-popular-posts-widget-for-blogger.html\"\u003EPopular Posts\u003C\/a\u003E, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention.\u003Cbr \/\u003E\u003Cbr \/\u003E\nThankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"318\" src=\"https:\/\/1.bp.blogspot.com\/-pDeiizrWG80\/V0skAGpdhMI\/AAAAAAAALns\/1_mD0w6iTM0HLD3HPU7lzHPtaRJX2ICkgCLcB\/s320\/featured-post-slider-for-blogger.png\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/helplogger-blog.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Add Featured Posts Slider Widget in Blogger\u003C\/h3\u003E\n1. Go to 'Layout' \u0026gt; click the 'Add a gadget' link in the sidebar area and select 'HTML\/JavaScript' gadget from the pop-up window.\u003Cbr \/\u003E\u003Cbr \/\u003E\n2. Add the code below inside the empty box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https:\/\/3.bp.blogspot.com\/-1_Vnfz23h0E\/V0m7kzHpgiI\/AAAAAAAALlU\/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB\/s400\/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}\u003Cbr \/\u003E\n.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:\"\";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}\u003Cbr \/\u003E\n.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id=\"featuredbwidget\"\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Abel' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.0\/jquery.min.js\" type=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nfeaturedbwidget({\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003ElistURL\u003C\/span\u003E:\"https:\/\/helplogger.blogspot.com\/\",\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003EfeaturedNum\u003C\/span\u003E:9,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003ElistbyLabel\u003C\/span\u003E:false,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003EfeathumbSize\u003C\/span\u003E:350,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003Einterval\u003C\/span\u003E:3000,\u003Cbr \/\u003E\n\u003Cspan style=\"color: red;\"\u003Eautoplay\u003C\/span\u003E:true,\u003Cbr \/\u003E\nfeaturedID:\"#featuredbwidget\"\u003Cbr \/\u003E\n});\u003Cbr \/\u003E\nfunction featuredbwidget(a){(function(e){var h={listURL:\"\",featuredNum:3,featuredID:\"\",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:\"nextfeatured\",pBlank:\"https:\/\/3.bp.blogspot.com\/-EOu4Rrgcryo\/V0m8dV7MU1I\/AAAAAAAALlg\/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB\/s500\/no-image.png\",byMonth:[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('\u0026lt;div class=\"featslider\"\u0026gt;\u0026lt;ul class=\"featured-widget-list\"\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;div class=\"feat-buttons\"\u0026gt;\u0026lt;a href=\"#\" class=\"feat-prev\"\u0026gt;Prev\u0026lt;\/a\u0026gt;\u0026lt;a href=\"#\" class=\"feat-next\"\u0026gt;Next\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;');var f=function(w){var q,k,m,u,x,p,t,v,r,l=\"\",s=w.feed.entry;for(var o=0;o\u0026lt;s.length;o++){for(var n=0;n\u0026lt;s[o].link.length;n++){if(s[o].link[n].rel==\"alternate\"){q=s[o].link[n].href;break}}if(\"media$thumbnail\" in s[o]){u=s[o].media$thumbnail.url.replace(\/\\\/s[0-9]+\\-c\/g,\"\/s\"+h.feathumbSize+\"-c\")}else{u=h.pBlank.replace(\/\\\/s[0-9]+(\\-c|\\\/)\/,\"\/s\"+h.feathumbSize+\"$1\")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+q+'\"\u0026gt;\u0026lt;div class=\"featuredbg\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;img class=\"featuredthumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;h5\u0026gt;'+k+'\u0026lt;\/h5\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"featured-meta\"\u0026gt;\u0026lt;span class=\"fdate\"\u0026gt;\u0026lt;span class=\"fday\"\u0026gt;'+t+'\u0026lt;\/span\u0026gt; \u0026lt;span class=\"fmonth\"\u0026gt;'+v+'\u0026lt;\/span\u0026gt; \u0026lt;span class=\"fyear\"\u0026gt;'+x+'\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt; - \u0026lt;span class=\"fauthor\"\u0026gt;'+m+\"\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\"}e(\"ul\",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+\" .feat-next\").click()};var b=function(){e.get((h.listURL===\"\"?window.location.protocol+\"\/\/\"+window.location.host:h.listURL)+\"\/feeds\/posts\/summary\"+(h.listbyLabel===false?\"\":\"\/-\/\"+h.listbyLabel)+\"?max-results=\"+h.featuredNum+\"\u0026amp;orderby=published\u0026amp;alt=json-in-script\",f,\"jsonp\");setTimeout(function(){e(h.featuredID+\" .feat-prev\").click(function(){e(h.featuredID+\" .featslider li:first\").before(e(h.featuredID+\" .featslider li:last\"));return false});e(h.featuredID+\" .feat-next\").click(function(){e(h.featuredID+\" .featslider li:last\").after(e(h.featuredID+\" .featslider li:first\"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+\" .featslider li:first\").before(e(h.featuredID+\" .featslider li:last\"));e(h.featuredID+\" .featslider\").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e(\"ul\",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4\u003EAutomatic Featured Posts Slider Settings\u003C\/h4\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003ElistURL\u003C\/span\u003E - replace \"https:\/\/helplogger.blogspot.com\/\" with your blog URL\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003EfeaturedNum\u003C\/span\u003E - add the number of posts to display in the slider\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003ElistbyLabel\u003C\/span\u003E - if you want to display posts by category \/ label, such as the tag \u003Cb\u003Efashion\u003C\/b\u003E, it will be written as \u003Cb\u003ElistbyLabel: \"fashion\"\u003C\/b\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003EfeathumbSize\u003C\/span\u003E - the size or dimension of the image in pixels\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003Einterval\u003C\/span\u003E - time taken to change the slides position in milliseconds\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: red;\"\u003Eautoplay\u003C\/span\u003E - replace \u003Cb\u003Etrue\u003C\/b\u003E with \u003Cb\u003Efalse\u003C\/b\u003E if you don't want the slides to change automatically.\u003C\/li\u003E\u003C\/ul\u003E\n3. Once you are done with the settings, click the 'Save' button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, this code is for a slider widget which means that instead of just a random list of Featured Posts, you get to display them with images (if they have one) and you can include effects too. You can also control how many slides should be shown because it just wouldn't be prudent to feature your entire oeuvre, right?\u003Cbr \/\u003E\u003Cbr \/\u003E\nPlus, being a slider widget, it adds a nice little visual to your site. And we all know how visuals are important in enticing people to stay, don't we?"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/1780330582935793345\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/05\/featured-posts-slider-widget-blogger.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1780330582935793345"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1780330582935793345"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/05\/featured-posts-slider-widget-blogger.html","title":"Automatic Featured Posts Slider Widget for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-pDeiizrWG80\/V0skAGpdhMI\/AAAAAAAALns\/1_mD0w6iTM0HLD3HPU7lzHPtaRJX2ICkgCLcB\/s72-c\/featured-post-slider-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-2908642462844148586"},"published":{"$t":"2015-09-22T12:46:00.004-07:00"},"updated":{"$t":"2017-07-21T12:47:13.212-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"popular posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"5 Best Popular Posts Widgets for Blogger"},"content":{"type":"html","$t":"If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nFortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.\u003Cbr \/\u003E\n\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"popular posts widget for blogger\" border=\"0\" height=\"296\" src=\"https:\/\/1.bp.blogspot.com\/-6kYWNTa-60I\/VgGvmae3C3I\/AAAAAAAALa8\/7z1hZ5dwgSE\/s320\/top-popular-posts-widget-for-blogger.png\" title=\"popular posts widgets for blogger\" width=\"320\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003EAdding the Popular Posts Widget for Blogger\u003C\/h2\u003E\nJust click on your blog title, access the \"Layout\" menu, click \"Add a Gadget\" and choose \"Popular Posts\". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and\/or the snippet. (Remember that each widget style has different requirements, so follow the styles and instructions carefully to find out if you need the snippet and image thumbnail or not).\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"Configuring Popular Posts Widget for Blogger\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-lGCvJZMmpbc\/VgGVKPHocrI\/AAAAAAAALac\/HlkMURz7h2g\/s1600\/popular-posts-widget-for-blogger.png\" title=\"Configuring Popular Posts Widget for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nOnce you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it. You can choose from the following styles - see the demo blog:\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\n\u003Ca class=\"demo-link\" href=\"http:\/\/popular-posts-blogger-widget.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDemo blog\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Ch3\u003E\nPopular Posts Style 1 - Box within a box\u003C\/h3\u003E\nThis is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"popular posts widget for blogger\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-O2x5p4y0Uds\/VgFp25g8wnI\/AAAAAAAALZs\/YxeO5AHFr9M\/s1600\/popular-posts-blogger-widget-transparent-background.png\" title=\"Popular Posts Widget for Blogger With Tumbnails Style 1\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ECSS code:\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;}\u003Cbr \/\u003E\n.sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch3\u003E\nPopular Posts Style 2 - Large thumbnails with small post titles underneath \u003C\/h3\u003E\nThis uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"popular posts widget for blogger\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-MvDZ5EX5tHU\/VgFp-5CZ3wI\/AAAAAAAALZ0\/tzgPjMTmjs8\/s1600\/minimal-popular-posts-blogger-widget.png\" title=\"Popular Posts Widget for Blogger With Tumbnails Style 2\" \/\u003E\u003C\/div\u003E\n\u003Cb\u003ECSS code:\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:\u0026amp;quot;\u0026amp;quot;;height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px \u0026amp;quot;Times New Roman\u0026amp;quot;,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px \u0026amp;#39;Oswald\u0026amp;#39;, sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px \u0026amp;quot;Times New Roman\u0026amp;quot;,Times,FreeSerif,serif;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt; \u003C\/blockquote\u003E\n\u003Ch3\u003E\nPopular Posts Style 3 - Colorful boxes\u003C\/h3\u003E\nIf your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"popular posts widget for blogger\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-TOpGuYUcL8U\/VgFqEDlKzAI\/AAAAAAAALZ8\/ll1NlCMLlSs\/s1600\/colorful-popular-posts-blogger-widget.png\" title=\"Popular Posts Widget for Blogger With Tumbnails Style 3\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ECSS code:\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px \u0026amp;#39;Oswald\u0026amp;#39;, sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px \u0026amp;quot;Times New Roman\u0026amp;quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch3\u003EPopular Posts Style 4 - Grid layout\u003C\/h3\u003E\nJust like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"popular posts widget for blogger\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-DsNZ2mAzZ1U\/VgFqKSwQAxI\/AAAAAAAALaE\/ZKuoOKrDzfY\/s1600\/popular-posts-blogger-widget-grid-thumbnails.png\" title=\"Popular Posts Widget for Blogger With Tumbnails Style 4\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ECSS code: \u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px \u0026amp;#39;Oswald\u0026amp;#39;, sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch3\u003EPopular Posts Style 5 - Numbered posts\u003C\/h3\u003E\nIf you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg alt=\"popular posts widget for blogger \" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-c52Z9zQ-4-M\/VgFqVn9HZ2I\/AAAAAAAALaM\/CSOnQNKz07I\/s1600\/numbered-popular-posts-widget-for-blogger.png\" title=\"Popular Posts Widget for Blogger With Tumbnails Style 5\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ECSS code:\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px \u0026amp;#39;Oswald\u0026amp;#39;, sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:\u0026amp;quot;\u0026amp;quot;;height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px \u0026amp;#39;Oswald\u0026amp;#39;, sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px \u0026amp;quot;Times New Roman\u0026amp;quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\nThese are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click \"Theme\" on the left side and select \"Edit HTML\" under the template preview.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nThese next codes need to be pasted above the \"\u0026lt;\/head\u0026gt;\" or \"\u0026lt;\/body\u0026gt;\" tags, so check the instruction to know exactly where you need to put the code.\u003Cbr \/\u003E\n\u003Ch4\u003EAdding the CSS\u003C\/h4\u003E\nWhen the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E\nJust ABOVE the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag, copy-paste the CSS code of one of the styles above.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Cimg border=\"0\" height=\"185\" src=\"https:\/\/1.bp.blogspot.com\/-jgHIQzFDObA\/VgGiZTDOroI\/AAAAAAAALas\/OIhXHmoK3ys\/s640\/popular-post-css-style-for-blogger.png\" width=\"640\" \/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nImportant: If the Popular Posts widget is located in the footer of your blog, remove the \u003Cb\u003E.sidebar\u003C\/b\u003E class found in the CSS code in order to make it work.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPlease note that most of the styles are using the 'Oswald' font which you need to add to your template's code as well.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSo, search for this tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;head\u0026gt;\u003C\/blockquote\u003E\n... and just BELOW it, add this line:\u003Cbr \/\u003E\n\u003Cblockquote\u003E\u0026lt;link href='https:\/\/fonts.googleapis.com\/css?family=Oswald:400,700' rel='stylesheet' type='text\/css'\/\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4\u003EAdding the JavaScript\u003C\/h4\u003E\nThese styles also require using a script in order to resize the popular posts image \/ thumbnail and trim the post snippet and title. To add the JavaScript code, search the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/body\u0026gt;\u003C\/span\u003E tag and paste the following script just above it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u003Cspan style=\"color: red;\"\u003E\u0026lt;script src='\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js'\/\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E$(\".popular-posts img\").attr(\"src\",function(t,s){return s.replace(\"\/w72-h72-p-k-no-nu\/\",\"\/s350-c\/\")}),$(\".popular-posts ul li .item-snippet\").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(\" \");s\u0026gt;10\u0026amp;\u0026amp;$(this).text(t.substr(0,s).replace(\/[?,!\\.-:;]*$\/,\"...\"))}),$(\".popular-posts ul li .item-content a\").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(\" \");s\u0026gt;=6\u0026amp;\u0026amp;$(this).text(t.substr(0,s).replace(\/[?,!\\.-:;]*$\/,\"...\"))});\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\nNote: if you have already the jQuery library in your template, remove the line in red.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAfter you have added all the codes in the right place, press the \"Save theme\" button to save the changes.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003EThat's it!\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nThe five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/2908642462844148586\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/09\/5-popular-posts-widget-for-blogger.html#comment-form","title":"46 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2908642462844148586"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2908642462844148586"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2015\/09\/5-popular-posts-widget-for-blogger.html","title":"5 Best Popular Posts Widgets for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-6kYWNTa-60I\/VgGvmae3C3I\/AAAAAAAALa8\/7z1hZ5dwgSE\/s72-c\/top-popular-posts-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"46"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4632448463431636814"},"published":{"$t":"2014-12-15T08:43:00.001-08:00"},"updated":{"$t":"2016-10-28T20:19:11.984-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"google plus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Show\/Hide Blogger and Google+ Comments System With Toggle"},"content":{"type":"html","$t":"Many Blogger site owners received the new Google+ Comment System pretty negatively because it forced all commenting users to create their own Google+ account before they were able to write a comment. The Google+ Comment System on Blogger was convenient to writers, but discouraged many users from continuing to comment on blogs because they simply didn't want to use Google+. For those that did use Google+ to make a comment, Blogger would never email you and notify you that someone left a comment; you could go days or weeks without ever realizing that you never responded to a reader.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIn addition to frustrating your audience, the Google+ Comment System on Blogger depended upon the URL of your blog post. By changing your URLs or moving around your blog posts internally, you run the risk of losing every one of your comments that was placed using Google+.\u003Cbr \/\u003E\u003Cbr \/\u003E\nPreviously, the only way to solve this problem was to disable the comment system through your account settings, thus giving up your ability to use their Google+ account. Now, there's an easy new way to have the best of both worlds. Allowing fans of Google+ as well as everyday blog readers to access all same features, you’ll be able to engage every visitor equally. You can respond to comments while still being able to communicate with other Google+ users outside of your site and take advantage of the Google+ Comment System on Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"google plus comments, blogger\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-97693gKGuck\/VI8K6OA7ASI\/AAAAAAAAKuc\/DTR0td3e9bY\/s1600\/use-google-plus-blogger-comments-together-with-toggle.png\" height=\"256\" title=\"Show\/Hide Blogger and Google+ Comments System With Toggle\" width=\"320\" \/\u003E\u003C\/div\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/helploggertestblog.blogspot.com\/2013\/12\/lorem-ipsum-viii.html\" rel=\"nofollow\" target=\"_blank\"\u003EDEMO\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Integrate Blogger and Google Plus Comments\u003C\/h3\u003E\nTo make the installation as simple as possible, I used inline jQuery and CSS, but who wants can change this code later. Also, the most accessible place I found to add it would be just after \u003Cb\u003E\u0026lt;b:include data='post' name='post'\/\u0026gt;\u003C\/b\u003E. So, let's start adding it:\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 1. Log into your Blogger account and select your blog \u0026gt; go to 'Template' and press the 'Edit HTML' button on the right side.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press CTRL + F keys to open the editor's search box and search for the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:include data='post' name='post'\/\u0026gt;\u003C\/blockquote\u003E\nStep 3. Just after \u0026lt;b:include data='post' name='post'\/\u0026gt; add the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style\u0026gt;#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(http:\/\/2.bp.blogspot.com\/--CsmnKc1FSA\/VI8FyLYdw7I\/AAAAAAAAAwE\/erSHV85Pg_Q\/s1600\/speech-bubble.png) no-repeat; font-size: 20px; font-family: \u0026amp;quot;Arial Narrow\u0026amp;quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='comments-icons'\u0026gt;\u003Cbr \/\u003E\nShow Comments: \u0026lt;a class='show-hide-comments' href='javascript:void();' onclick='$(\u0026amp;quot;#gplus-comments-visibility\u0026amp;quot;).slideToggle();$(\u0026amp;quot;#comments\u0026amp;quot;).hide();'\u0026gt;\u0026lt;img class='gplus-icon' height='35' src='http:\/\/1.bp.blogspot.com\/-i1zpfechOuY\/VI763hqxlHI\/AAAAAAAAAvs\/dz4sWUQW-xU\/s1600\/google-plus-logo.png' width='35'\/\u0026gt;\u0026lt;\/a\u0026gt; OR \u0026lt;a class='show-hide-comments' href='javascript:void();' onclick='$(\u0026amp;quot;#comments\u0026amp;quot;).slideToggle();$(\u0026amp;quot;#gplus-comments-visibility\u0026amp;quot;).hide();'\u0026gt;\u0026lt;img class='blogger-icon' height='35' src='http:\/\/3.bp.blogspot.com\/-4N-YlJvoxdA\/VI763udxlHI\/AAAAAAAAAvw\/0dY2Ys0zz2k\/s1600\/blogger-logo.png' width='35'\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='gplus-comments-visibility'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' \u003Cspan style=\"color: #cc0000;\"\u003Edata-width='550'\u003C\/span\u003E expr:data-href='data:post.url'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nNote: \u003Cspan style=\"color: #cc0000;\"\u003Edata-width\u003C\/span\u003E is for setting the width of the comment box, so the number (550) indicated there can be changed according to the design of your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 4. Press the \"Save Template\" button located at the top of the editor and view your blog to see if you have successfully added Google+ commenting system to Blogger. \u003Cbr \/\u003E\u003Cbr \/\u003E\nPlease note that in order to make this work, you need to make sure that you are using a version of jQuery in your site. Otherwise, add this line just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag using the HTML template editor: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script src='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.4\/jquery.min.js' type='text\/javascript'\/\u0026gt;\u003C\/blockquote\u003E\n\u003Ch5\u003EThat's it!\u003C\/h5\u003E\nFrom now on, any reader that views your post has the option of making a comment using their Google+ account, or the native Blogger comments. Your readers will enjoy the flexibility that your site provides and you will also benefit from the inclusive services offered by Google."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/4632448463431636814\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/12\/blogger-and-google-comments-system-with-toggle.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4632448463431636814"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4632448463431636814"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/12\/blogger-and-google-comments-system-with-toggle.html","title":"Show\/Hide Blogger and Google+ Comments System With Toggle"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-97693gKGuck\/VI8K6OA7ASI\/AAAAAAAAKuc\/DTR0td3e9bY\/s72-c\/use-google-plus-blogger-comments-together-with-toggle.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-6453595500642148683"},"published":{"$t":"2014-12-03T04:43:00.001-08:00"},"updated":{"$t":"2016-10-28T20:46:09.651-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"social media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"social media plugins"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Facebook Popup Like Box Widget For Blogger"},"content":{"type":"html","$t":"Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIn order to produce an effective digital campaign, you absolutely must take advantage of social media by doing things like integrating \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2016\/09\/how-to-share-blogger-post-to-facebook.html\"\u003EFacebook on Blogger\u003C\/a\u003E. Email marketing can be useful, but it comes with restrictions that could limit your blog's potential. Perhaps the most significant problem is that emails don't come with a face or personality like Facebook does.\u003Cbr \/\u003E\u003Cbr \/\u003E\nThink of a time when you received an email in you inbox from someone you didn't know. Where you inclined to open it or did you send it right to the junk folder? If it's your first introduction to new consumer, they simply don't know who you are, what you want, and how you got their email. This sets off an initial breakdown of any type of trust that might have developed. The reputation of email marketing is further deteriorated with a study done by Kaspersky Lab, an Internet research firm. They estimate that around 70% of all the emails sent in the world are spam.\u003Cbr \/\u003E\u003Cbr \/\u003E\nSharing site content using a \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/how-to-add-facebook-likefan-box-to.html\"\u003EFacebook Like Box\u003C\/a\u003E is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/add-static-facebook-pop-out-like-box.html\"\u003EAdding a Facebook Like Box\u003C\/a\u003E to your site helps to reduces your individual workload, and instead distributes that ability equally among your readers.\u003Cbr \/\u003E\u003Cbr \/\u003E\nWhen someone reads your content and appreciates the kind of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a 'Like Box' to your Blogger site so that you can began taking advantage of these great opportunities.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"232\" src=\"https:\/\/2.bp.blogspot.com\/--LOOo2AI5xk\/VH8DuZ0PCWI\/AAAAAAAAKt8\/tvdSmBNMi7k\/s1600\/facebook-popup-like-box-widget-for-blogger.png\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ccenter\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/popular-posts-blogger-widget.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EClick here for a DEMO\u003C\/a\u003E\u003C\/center\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add the Facebook Popup Like Box Widget\u003C\/h2\u003E\n1. Log into your Blogger account and select your blog \u0026gt; go to 'Layout' \u0026amp; click the 'Add a Gadget' link on the right side.\u003Cbr \/\u003E\n2. Once the popup window is open, select the HTML\/JavaScript gadget from the list:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"198\" src=\"https:\/\/2.bp.blogspot.com\/-pJWeUlhQv9E\/VD1bzt1qKoI\/AAAAAAAAKpU\/buuG48cCec4\/s1600\/add-html-javascript-gadget-blogger.png\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n3. Copy and paste the following code inside the empty box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js' type='text\/javascript'\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:\"CLOSE\";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003EjQuery.cookie=function(a,b,c){if(arguments.length\u0026gt;1\u0026amp;\u0026amp;\"[object Object]\"!==String(b)){if(c=jQuery.extend({},c),null!==b\u0026amp;\u0026amp;void 0!==b||(c.expires=-1),\"number\"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),\"=\",c.raw?b:encodeURIComponent(b),c.expires?\"; expires=\"+c.expires.toUTCString():\"\",c.path?\"; path=\"+c.path:\"\",c.domain?\"; domain=\"+c.domain:\"\",c.secure?\"; secure\":\"\"].join(\"\")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp(\"(?:^|; )\"+encodeURIComponent(a)+\"=([^;]*)\").exec(document.cookie))?g(f[1]):null};\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003EjQuery(document).ready(function($){\u003Cbr \/\u003Eif($.cookie('popup_facebook_box') != 'yes'){\u003Cbr \/\u003E$('#fbox-background')\u003Cspan style=\"color: red;\"\u003E.delay(5000)\u003C\/span\u003E.fadeIn('medium');\u003Cbr \/\u003E$('#fbox-button, #fbox-close').click(function(){\u003Cbr \/\u003E$('#fbox-background').stop().fadeOut('medium');\u003Cbr \/\u003E});\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cspan style=\"color: #6aa84f;\"\u003E$.cookie('popup_facebook_box', 'yes', { path: '\/', expires: 7 });\u003C\/span\u003E\u003Cbr \/\u003E});\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='fbox-background'\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='fbox-close'\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='fbox-display'\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='fbox-button'\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;iframe allowtransparency='true' frameborder='0' scrolling='no' src='\/\/www.facebook.com\/plugins\/likebox.php?\u003Cbr \/\u003Ehref=\u003Cspan style=\"color: blue;\"\u003Ehttps:\/\/www.facebook.com\/pages\/Helplogger\/120574614736021\u003C\/span\u003E\u0026amp;width=339\u0026amp;height=255\u0026amp;colorscheme=light\u0026amp;show_faces=true\u0026amp;show_border=false\u0026amp;stream=false\u0026amp;header=false'\u003Cbr \/\u003Estyle='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'\u0026gt;\u0026lt;\/iframe\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"fbox-link\"\u0026gt;Powered by \u0026lt;a style=\"padding-left: 0px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/12\/facebook-popup-like-box-blogger-widget.html\" rel=\"nofollow\"\u0026gt;Helplogger\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n4. Press the 'Save' button to add the widget to your blog. That's it!\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EFacebook Popup Like Box Customization\u003C\/h3\u003E\nAfter adding the code, replace the address in blue \u003Cspan style=\"color: blue;\"\u003Ehttps:\/\/www.facebook.com\/pages\/Helplogger\/120574614736021\u003C\/span\u003E with your site's facebook page URL.\u003Cbr \/\u003E\u003Cbr \/\u003E\nThe widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"color: red;\"\u003E.delay(5000)\u003C\/span\u003E\u003C\/blockquote\u003E\nBy default, the like box only shows up the first time the user visits your page.\u0026nbsp; If you would like the Facebook box to popup every time the page loads, then remove this line of code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"color: #6aa84f;\"\u003E$.cookie('popup_facebook_box', 'yes', { path: '\/', expires: 7 });\u003C\/span\u003E\u003C\/blockquote\u003E\nIf you want to display only when user visits your homepage, go to 'Template' \u0026gt; hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/body\u0026gt;\u003C\/blockquote\u003E\nPaste the facebook popup widget right above the body tag and make sure to include the conditional tags below:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:page.type == \"index\"'\u0026gt;\u003Cspan style=\"color: #3d85c6;\"\u003EADD THE FACEBOOK WIDGET CODE HERE \u003C\/span\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\nAfter saving this widget, you can test it out by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's Facebook page.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/how-to-create-facebook-fan-page-for.html\"\u003EFacebook fans\u003C\/a\u003E."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/6453595500642148683\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/12\/facebook-popup-like-box-blogger-widget.html#comment-form","title":"2 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6453595500642148683"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6453595500642148683"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/12\/facebook-popup-like-box-blogger-widget.html","title":"Facebook Popup Like Box Widget For Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/--LOOo2AI5xk\/VH8DuZ0PCWI\/AAAAAAAAKt8\/tvdSmBNMi7k\/s72-c\/facebook-popup-like-box-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-8736368861274781333"},"published":{"$t":"2014-11-15T12:55:00.001-08:00"},"updated":{"$t":"2020-04-17T10:12:06.261-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"5 Cool Recent Post Widgets for Blogger"},"content":{"type":"html","$t":"For bloggers that pride themselves on always staying up-to-date with new content, a \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/05\/recent-posts-widget-with-thumbnails-for.html\"\u003Erecent post widget for Blogger\u003C\/a\u003E can be an invaluable tool. A recent posts widget for blogger is in many ways similar to a 'breaking news alert' that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"hidden-image\"\u003E\u003Cimg alt=\"recent posts for blogger\" src=\"https:\/\/1.bp.blogspot.com\/-CsF_3elyJOQ\/Xpng-xaL3nI\/AAAAAAAAMQk\/ULq7cErTOAg8F-PHDWiKYNBtxKRIZZp2gCLcBGAsYHQ\/s1600\/recent-posts-gadget-blogger.jpg\" title=\"5 Cool Recent Post Widgets for Blogger\"\/\u003E\u003C\/div\u003E\nAdding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don't have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what's often referred to as the 'Twitter effect' where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they'll leave the site and hurt your bounce rate.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"blogger recent posts widgets\" src=\"https:\/\/1.bp.blogspot.com\/-bFHYZD-Fdec\/XpnjMfXMWnI\/AAAAAAAAMQ0\/k1jb7DzVciMWzoDwohC-NyoOJenUrxflgCLcBGAsYHQ\/s1600\/recent-posts-widget-for-blogger.jpg\" title=\"5 Cool Recent Post Widgets for Blogger\"\/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nOnce you've managed to attract visitors to one of your posts using the \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html\"\u003Erecent post widget for Blogger\u003C\/a\u003E, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you'd rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.\u003Cbr \/\u003E\u003Cbr \/\u003E\nApart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you're interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #1\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"rainbow widget, recent posts\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-EWNUyAP_D5Q\/VGe8VQE8bqI\/AAAAAAAAKsg\/dnZV8lo50vo\/s1600\/rainbow-colorful-recent-posts-widget-for-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]=\"Jan\",w[2]=\"Feb\",w[3]=\"Mar\",w[4]=\"Apr\",w[5]=\"May\",w[6]=\"Jun\",w[7]=\"Jul\",w[8]=\"Aug\",w[9]=\"Sep\",w[10]=\"Oct\",w[11]=\"Nov\",w[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\"),\"content\"in n)var A=n.content.$t;else if(\"summary\"in n)var A=n.summary.$t;else var A=\"\";var k=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(A=A.replace(k,\"\"),1==post_summary)if(A.length\u0026lt;summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(\" \");A=A.substring(0,y),document.write(A+\"...\")}var _=\"\",$=0;document.write('\u0026lt;br\u0026gt;\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;(_=_+w[parseInt(g,10)]+\" \"+v+\" \"+f,$=1),1==readmorelink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" | \"),_=_+'\u0026lt;a href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',$=1),1==showcommentslink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",_+=l,$=1),document.write(_),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = false;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\nvar post_summary = true;\u003Cbr \/\u003E\nvar summary_chars = 70;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Ubuntu+Condensed' rel='stylesheet' type='text\/css' \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}\u003Cbr \/\u003E\nul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover { color: #222;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}\u003Cbr \/\u003E\n.recent-post-title {padding: 6px 0px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #222;}\u003Cbr \/\u003E\n.recent-posts-details {padding: 5px 0px 5px; }\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #2\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts widget for blogger\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-lo0g9x57zfM\/VGdGdgukhuI\/AAAAAAAAKrM\/01hWV5z4SSc\/s1600\/recent-posts-widget-for-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div class=\"recentpoststyle\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestposts(e){for(var t=0;t\u0026lt;posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a\u0026lt;s.link.length;a++)if(\"alternate\"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i=\"... read more\";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]=\"Jan\",m[2]=\"Feb\",m[3]=\"Mar\",m[4]=\"Apr\",m[5]=\"May\",m[6]=\"Jun\",m[7]=\"Jul\",m[8]=\"Aug\",m[9]=\"Sep\",m[10]=\"Oct\",m[11]=\"Nov\",m[12]=\"Dec\",\"content\"in s)var d=s.content.$t;else if(\"summary\"in s)var d=s.summary.$t;else var d=\"\";var v=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(d=d.replace(v,\"\"),document.write('\u0026lt;li class=\"recent-post-title\"\u0026gt;'),document.write(n),document.write('\u0026lt;\/li\u0026gt;\u0026lt;div class=\"recent-post-summ\"\u0026gt;'),1==post_summary)if(d.length\u0026lt;summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(\" \");d=d.substring(0,f),document.write(d+\" \"+i)}document.write(\"\u0026lt;\/div\u0026gt;\"),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+m[parseInt(u,10)]+\" \"+c+\" \"+o+\"\u0026lt;\/div\u0026gt;\")}}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;amp;alt=json-in-script\u0026amp;amp;callback=showlatestposts\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u0026lt;a style=\"font-size: 9px; color: #CECECE;margin-top:10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\n.recentpoststyle {counter-reset: countposts;list-style-type: none;}\u003Cbr \/\u003E\n.recentpoststyle a {text-decoration: none;color: #49A8D1;}\u003Cbr \/\u003E\n.recentpoststyle a:hover {color: #000;}\u003Cbr \/\u003E\n.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}\u003Cbr \/\u003E\n.recent-post-title a {color: #444;text-decoration: none;font: bold 13px \"Avant Garde\",Avantgarde,\"Century Gothic\",CenturyGothic,AppleGothic,sans-serif;}\u003Cbr \/\u003E\n.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}\u003Cbr \/\u003E\n.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,\"Baskerville Old Face\",\"Hoefler Text\",\"Times New Roman\",serif;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #3\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts gadget\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-ovCSmmV2cRA\/VGd60NhBCiI\/AAAAAAAAKrc\/uIEiW2SZdUE\/s1600\/recent-posts-widget-with-comments-count.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"https:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]=\"Jan\",w[2]=\"Feb\",w[3]=\"Mar\",w[4]=\"Apr\",w[5]=\"May\",w[6]=\"Jun\",w[7]=\"Jul\",w[8]=\"Aug\",w[9]=\"Sep\",w[10]=\"Oct\",w[11]=\"Nov\",w[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\"),\"content\"in n)var A=n.content.$t;else if(\"summary\"in n)var A=n.summary.$t;else var A=\"\";var k=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(A=A.replace(k,\"\"),1==post_summary)if(A.length\u0026lt;summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(\" \");A=A.substring(0,y),document.write(A+\"...\")}var _=\"\",$=0;document.write('\u0026lt;br\u0026gt;\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;(_=_+w[parseInt(g,10)]+\" \"+v+\" \"+f,$=1),1==readmorelink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" | \"),_=_+'\u0026lt;a href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',$=1),1==showcommentslink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",_+=l,$=1),document.write(_),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\nvar post_summary = true;\u003Cbr \/\u003E\nvar summary_chars = 40;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}\u003Cbr \/\u003E\n.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}\u003Cbr \/\u003E\n.recent-posts-container a{text-decoration:none;}\u003Cbr \/\u003E\n.recent-post-title {margin-bottom:5px;}\u003Cbr \/\u003E\n.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}\u003Cbr \/\u003E\n.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}\u003Cbr \/\u003E\n.recent-posts-details a{color: #777;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #4\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts for blogger, cool widgets\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-l7--Ewqgibs\/VGeaBc6EXrI\/AAAAAAAAKrs\/iKLxdHqU3gA\/s1600\/recent-posts-gadget-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]=\"Jan\",A[2]=\"Feb\",A[3]=\"Mar\",A[4]=\"Apr\",A[5]=\"May\",A[6]=\"Jun\",A[7]=\"Jul\",A[8]=\"Aug\",A[9]=\"Sep\",A[10]=\"Oct\",A[11]=\"Nov\",A[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+A[parseInt(w,10)]+\" \"+v+\" \"+f+\"\u0026lt;\/div\u0026gt;\"),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\");var g=\"\",k=0;document.write('\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==showcommentslink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",g+=l,k=1),1==readmorelink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" | \"),g=g+'\u0026lt;a class=\"readmorelink\" href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',k=1),document.write(g),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = false;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}\u003Cbr \/\u003E\n.recent-posts-container {font-family: 'Oswald', sans-serif;\u0026nbsp; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type: none;}\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover{color: #4DACE3;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}\u003Cbr \/\u003E\n.recent-post-title { margin: 5px 0px; }\u003Cbr \/\u003E\n.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #888;}\u003Cbr \/\u003E\na.readmorelink {color: #4DACE3;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Post Style #5\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts, blogger gadget\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-NP0YePnPRAg\/VGeofTBkflI\/AAAAAAAAKsI\/_QwawiCLWaA\/s1600\/recent-posts-widget-blogger-count.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"text\/html\"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if(\"alternate\"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]=\"Jan\",A[2]=\"Feb\",A[3]=\"Mar\",A[4]=\"Apr\",A[5]=\"May\",A[6]=\"Jun\",A[7]=\"Jul\",A[8]=\"Aug\",A[9]=\"Sep\",A[10]=\"Oct\",A[11]=\"Nov\",A[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+A[parseInt(w,10)]+\" \"+v+\" \"+f+\"\u0026lt;\/div\u0026gt;\"),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\");var g=\"\",k=0;document.write('\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==showcommentslink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",g+=l,k=1),1==readmorelink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" | \"),g=g+'\u0026lt;a class=\"readmorelink\" href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',k=1),document.write(g),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\" rel=\"nofollow\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text\/css' \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}\u003Cbr \/\u003E\n.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;\u0026nbsp; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;\u0026nbsp; border-top: 2px solid #FCD6CB;}\u003Cbr \/\u003E\nul.recent-posts-container {border: 2px solid #FCD6CB; }\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover { color: #222;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 14px;color: #616662;}\u003Cbr \/\u003E\n.recent-post-title {padding: 6px 0px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #888;}\u003Cbr \/\u003E\n.recent-posts-details {padding-bottom: 5px;}\u003Cbr \/\u003E\na.readmorelink {color: #4DACE3;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add Recent Posts Widget on Blogger\u003C\/h2\u003E\nWant to add one of the styles above? Just follow the following steps below:\u003Cbr \/\u003E\n\u003Col\u003E\u003Cli\u003ELog into your Blogger dashboard and click on your blog.\u003C\/li\u003E\n\u003Cli\u003EGo to \"Layout\" and click the \"Add a gadget\" link on the right side.\u003C\/li\u003E\n\u003Cli\u003EFrom the pop-up window, scroll down and select the \"HTML\/JavaScript\" gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"316\" src=\"https:\/\/3.bp.blogspot.com\/-pJWeUlhQv9E\/VD1bzt1qKoI\/AAAAAAAAKpQ\/OlBnyqkUI1k\/s1600\/add-html-javascript-gadget-blogger.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli\u003EPaste the code of the chosen widget found below it.\u003C\/li\u003E\n\u003Cli\u003EHit the \"Save\" button and you're done!\u003C\/li\u003E\u003C\/ol\u003E\n\u003Ch3\u003EKeep Your Blog Updated\u003C\/h3\u003E\nUsing a recent post widget for Blogger can truly benefit you and improve your skill as a blogger. As you can see, these designs can look great on Blogger sites, but they do act a little bit like a progress report for the author. If you start to fall behind, the dates on your recent post widget will definitely give you away.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/helplogger.blogspot.com\/2016\/09\/how-to-hide-posts-from-blogger-homepage.html\"\u003ESet a schedule\u003C\/a\u003E and make sure that you are making regular posts on the blog. These posts will be automatically updated on your widget and readers can view this information whenever they want. Add your recent post widget for Blogger on the every page of the blog or in your template so that these posts can encourage others to continue reading, thus increasing the total time spent on your site."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/8736368861274781333\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html#comment-form","title":"23 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8736368861274781333"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8736368861274781333"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html","title":"5 Cool Recent Post Widgets for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-CsF_3elyJOQ\/Xpng-xaL3nI\/AAAAAAAAMQk\/ULq7cErTOAg8F-PHDWiKYNBtxKRIZZp2gCLcBGAsYHQ\/s72-c\/recent-posts-gadget-blogger.jpg","height":"72","width":"72"},"thr$total":{"$t":"23"}}]}});