Search Engine Land

How To Remove Blogger Navbar

in: Blogger

How to remove blogger Navbar - this tutorial is old but Blogger officially offered a way to remove the navigation bar of your blog.

So, it is very simple to Remove Navbar in blogger.

Here are the steps to Remove Blogger Navbar:

Go to Layout > Click Edit Button.

After pop-up window, Click on Off Button.

Click the Save button.
Finish, You are Done.

How To Add Contact Us Form In Blogger

in: Blogger Gadgets

After the announcement of the new gadget, it is now possible to add Contact us form in blogger. A basic option on any blog, Blogger but refused to put it for years. He had to go through external services. To integrate this Blogger contact form, simply go to Layout / Widget / More Gadget.

This will show a very basic form in your sidebar of your Blogger/Blogspot Blog.

Adsense Ad Code Converter For Blogger

in: Adsense Ad Code Converter Blogger

This handy tool automatically converts JavaScript ad code into the correct format so you can embed it directly into your new XML Blogger template. It’s perfect for converting AdSense, AdBrite, Chitika or any other JavaScript ad code you may have.

Google Adsense Ad Code Converter For Blogger

Instructions :

Enter the Adsense/other Code in the Box
Click on “Convert”.
Next, Sign into Blogger Dashboard » Layout » Edit html and Paste the code wherever you want the ad to be displayed.

How To Add YouTube Subscribe Widget For Blogger

in: Blogger Gadgets

Add the official YouTube Subscribe widget for blogger on your blog to promote your YT channel.

users can directly subscribe to your channel without leaving website.

Your user name, the logo, the number of videos and the number of subscribers will be displayed on the widget.

You can also change the width and height of the gadget.

Here is YouTube Subscribe widget.

Configuration For Gadget

Enter the name of your YouTube channel and the desired width of the blue widget:

The widget code to copy:

<Iframe id = "en" src = "https://www.youtube.com/subscribe_widget?p=YOUR-YOUTUBE-USERNAME" style = "overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling = "no" frameBorder = "0"> </ iframe>

Add YouTube Subscribe widget to Blogger

The widget can be placed above or below each article of your blog or in an HTML / JavaScript gadget:

Place the code in an HTML / JavaScript gadget

Go to the "Page Layout" ► "Add Gadget" ► In the list proposed by Blogger, choose the gadget "HTML / JavaScript", paste the widget code and click "Save"

Place the widget in the articles pages

Go to "Template" ► "Edit HTML" ► check the "Expand Widget Templates"

Paste the code just after the following line to show the widget in the Start of articles,

<Div class = 'post-header-line-1'>

or after one of the following lines to display at the end of articles.

6 Different Style Search Boxes For Blogger

in: Blogger Gadgets

The search box on the blog or website is the most important thing, so why not change it to the different style According to template design.

I will explain how to add stylish search box in blogger.

How to add search box in blogger

Nothing is complicated just copy and paste the code.

Layout >> Add a Gadget >> HTML / Javascript.

Just copy the code of search box that suits you and past it into >> HTML / Javascript.

1 - The Black button and Search Symbol on box.

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxofRH8m1bAag56Goy9NEnVB91FyH5HXxIqnRg-Nyi2rNjW1f9_-Qi3obGa2pS5IQBGNnEtWN3Sv6_2JsaL08jnqTm43s-9fJ1PJpg4p8ePwUeJIELFKJtc0fItLSz-EycMuCUskbS8yKd/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

2 - The Black Arrow Shaped Search Button.

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxofRH8m1bAag56Goy9NEnVB91FyH5HXxIqnRg-Nyi2rNjW1f9_-Qi3obGa2pS5IQBGNnEtWN3Sv6_2JsaL08jnqTm43s-9fJ1PJpg4p8ePwUeJIELFKJtc0fItLSz-EycMuCUskbS8yKd/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINg8U2_OMhKFf1GBEY2eiBvXd19ppVFArLNiv_Okh6LeU0ffPSWCPQgqydk7adyl6N5320iiSYPuiXq0TEDPtD5RzSc-Saaalm4uK7arDsAS8pyOoWCaIPoONT5fNu8AjOGB63iCgPO0P/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

3 - The Blue button with rounded ends.

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7d0XG6PudIi57XAMJTHgobsxdH0Xz32BTRVm_SGkfc9ZIPirObmfKEEwzHG42di2mZvHsKJZaiOB-Bc3ErBTDPmnlM102cn3K0PYy4vkBXlGFBckJff_RCPd5cVD_FYAc2aZw5_Sa4WP/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCB044R0iLc6tUTnRa7mi75aQjzzYuCbm6Ijy1YNJmLYefgNkC9kcTRs2LHYj-nf4n0GphXQcHHnu-I9ScF_wN0pECpDgsdFp20Hi54N8nJnedcKZhqjsB_xA0IPF8EVLC7RTEeaYOVF7U/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSugDRNevBNHbQJWli89PyqftGsC_o1ezhZxZ8EEgycIlU_8kExoenMVmTeHKza0DrZQ_y-pP9JfGmgdS2QFGdk9DXXQWbAXDYJZBbgc_swHVNScJUnZ-hgiaBkTX3OPxhsyBakG-F6-3W/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSugDRNevBNHbQJWli89PyqftGsC_o1ezhZxZ8EEgycIlU_8kExoenMVmTeHKza0DrZQ_y-pP9JfGmgdS2QFGdk9DXXQWbAXDYJZBbgc_swHVNScJUnZ-hgiaBkTX3OPxhsyBakG-F6-3W/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form>

4 - The Green button with rounded ends.

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-fEiHEXEmNOhK6aHGWeXdlXGGWdicy52pvrsWLlIhUTihuNY93EJx4L6dW_x5yE-_Qf2LoAD-r6nUerE3DQueTVxSKrn_YUe7kSpBb2xLTChmexWPSSQvILSmN_8FZeTZrqY4Jv6J3sMn/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbeDt53Qj0ztmDhDkF-GwaSHygV1WUqyr1ePhUo-kD9RTZH0olcc7IqvpprqXNtU1Kr4VI-D-Xlk6a22tCQyKQ6vUNjty6Ql8Rt69vCaU237Cm7tAy7JR6A7kBYMs1OTUl5K75HcDmOG-U/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlv6lkeDToZChGjicaSFBgrp7xVV-kjJEljRyw4m6pUkKz0NVmkRJKc9hT5G5Ux0ywdwxjBqIDWoqCBsiU1G5jlZCYagKGaiXijBSY1TT6wBnouswUPzyhJvvL2Gn1V3JYtIuAC4OVF8T/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

5 - The Black improper style search box.

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuAexIzE41VJFe2LTVneJ-EfrQM-y9DQGWI2Nfz__KS0-LDdfKynKr_UUEpDkC1MizGeWd9GJnm3DXVzmTDrkazIYxR06tsUOL1_IA5jVeHa2NkBVx5aTz-atFc5Afe_TCOjeqqKCkvvcg/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0ke1L87SCMSpw6jLhMbUgFNWE907ik7Kzt8eb7_K9ZM1nGJOVc67NhET71iaC0bcO9PpPf_m9p-W7oQklCIigd3YTV8kxW_UR8jEevG9SLXDY5bz2OG7ZlNeBnSkFLSfoSaIBEMWZE8s/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiath4qrPBcTibJRCwg738L0pZPvOduAeHoCNWdsslZlHW82etInFqoHyzO_iohp4i_4juawrXmrM-zH0B9BfU6fU57Q7J2vS1Mmt45PfYPjNiquWJoRQjO0L8h61SrTCOOzxRuY8NZ7Wjc/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiath4qrPBcTibJRCwg738L0pZPvOduAeHoCNWdsslZlHW82etInFqoHyzO_iohp4i_4juawrXmrM-zH0B9BfU6fU57Q7J2vS1Mmt45PfYPjNiquWJoRQjO0L8h61SrTCOOzxRuY8NZ7Wjc/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>

6 - The Black rough style search box.

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW77ZJtfy1mXzEXu-8yoK_a1TZjDlfq2am8R-1npJArvvndJHVLNg4nT_f9Ma6iQQ08oSzQAi1EUkvD-VIWUXt44VZFdTVSQGKgJZDvQ4s8s2-JmTG1k9oOV2etlUWRXNKL3EV2s06pVIY/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjygrv6Kd0WRamcWRfUWcvgINPgnk6jNE1zTs5JrNitXupF0wrnqMKYhgVl3N_kMVGMBdWtkaOmSDKzWeF7t9JSEzLFBOEH214A4ntS4yYiPKLiONpEwcCFsaLjq7GaNMRY6Vc3Dmqxs3bn/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzmgf2JiiOBpOyb0pgHEl_o3t2o2LNDfvaFlUAzytR8kdBTW27gpDUeLiWalQmAsC5zEXMLgnIHJd58hF0fj2YIRYsr5yxB6Wa-Ut7MbHVVyHOSdg6Vlgpnq7QeLdzoZuqE-E1NtoVvCbT/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Add Animated Share Button On Blogger

in: Blogger

I present the animated share button, it floats in the left corner of your blog and when a user rolls the mouse over the icons of social media appear.

How to Add Animated Share Button On Blogger?

Go to Blogger Dashboard> Template
Make a backup of your Template.
Now find the following code By Pressing CTRL+F.

</body>

Add the following code just before the code above.

<!-- Start Animation Share button HTML (searchengineland.tk)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Animation Share button HTML (searchengineland.tk) -->
<!-- START Animation Share button -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- Fin Bouton de partage animation -->
<!-- Depart Bouton de partage animation script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- END Animation Share button script (searchengineland.tk) -->

Now save your template and you're done

I hope you like this gadget.

5 New Style Recent Post Widget For Blogger With Thumbnails

in: Blogger Gadgets

For bloggers who are proud to publish new content regularly, a new gadget that display Recent post can be a nice tool.

Adding a recent post widget for blogger with thumbnails force visitors to come back to take a look at the new posts using this gadget with a New Style.

Style #1

rainbow colorful recent posts widget for blogger with thumbnails

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.leblogger.fr/2014/12/5-gadgets-articles-recents-pour-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Style #2

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.leblogger.fr/2014/12/5-gadgets-articles-recents-pour-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Style #3

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.leblogger.fr/" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Style #4

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.leblogger.fr/">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.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;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Style #5

recent posts widget blogger comments count

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.leblogger.fr/2014/12/5-gadgets-articles-recents-pour-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.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;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

How To Add Recent Post Widget In Blogger

Want to add one of the styles above? Just follow the following steps below:

Step 1. Log in to your Blogger Dashboard and click your blog

Step 2. Go to "Layout" and click the "Add a Gadget" on the right side

Step 3. In the pop-up window, scroll and select the gadget "HTML / JavaScript"

Step 4. Paste the code of the selected widget from above.

Step 5. Click the "Save" button ... and that's it!

Using a recent post widget for Blogger can really improve the design of your blog. As you can see in the pictures above.

Search Engine Land

How To Remove Blogger Navbar

How To Add Contact Us Form In Blogger

Adsense Ad Code Converter For Blogger

Google Adsense Ad Code Converter For Blogger

Instructions :

How To Add YouTube Subscribe Widget For Blogger

6 Different Style Search Boxes For Blogger

How to add search box in blogger

1 - The Black button and Search Symbol on box.

2 - The Black Arrow Shaped Search Button.

3 - The Blue button with rounded ends.

4 - The Green button with rounded ends.

5 - The Black improper style search box.

6 - The Black rough style search box.

Add Animated Share Button On Blogger

How to Add Animated Share Button On Blogger?

5 New Style Recent Post Widget For Blogger With Thumbnails

Style #1

Style #2

Style #3

Style #4

Style #5

How To Add Recent Post Widget In Blogger

Categories

Popular Posts

Contact us

Alexa Rank