Audrino

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks. This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want. How to add the scrolling social bookmarking bar Step 1. Log in to your Blogger Dashboard , select your blog and go to Layout  Step 2. Click on Add A Gadget link Step 3. From the pop-up window, scroll down and select HTML/Javascript   Step 4. Copy the code below and paste it inside the empty box. Step 5.   Save the gadget. The code to copy-paste (updated!): <style type="text/css"> #social-buttons { position:fixed; bottom: 15% ;  margin-left: -721px ; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-bord...

The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional. Demo: Place your mouse over the image below to see the rollover effect: Making Rollover Effect Image You have the following code: <a href=" URL ADDRESS "><img src=" URL OF THE FIRST IMAGE GOES HERE " onmouseover="this.src=' URL OF THE SECOND IMAGE GOES HERE '" onmouseout="this.src=' URL OF THE FIRST IMAGE GOES HERE '" /></a> Change the colored texts as follows: 1. URL ADDRESS This is the address where somebody will be sent when clicks on the image. Example, my blog address: http://www.helplogger.blogspot.com 2. URL OF THE ...

Here are some amazingly funny emoticons that you can add in your Blogger comments, both for flat (without reply function) and threaded commenting system (with replies)! To get an idea of how these cool emoticons or smiley faces look like, please visit the demo blog: Demo blog Want to add Facemoods emoticons in Blogger comments ? Then, follow the steps below: How to Add Facemoods Emoticons in Blogger Comments Step 1. From your Blogger Dashboard, go to "Template" and click the "Edit HTML" button: Step 2. Click anywhere inside the code area and press CTRL + F to open the search box: Step 3. Type or paste one of the below lines inside the search box, then hit 'Enter' to find it: For flat commenting system: <h4 id='comment-post-message'><data:postCommentMsg/></h4> For threaded comments: <div class='post-footer-line post-footer-line-3'> Step 4. Add the following code just BEFORE the line that you just found: Note: for thread...

Earlier, you've seen  how you can change the size of the avatars in blogger comments  and now I will show you how to change or customize the default avatar of anonymous commenters or Blogger users with no picture on their profiles. While Blogger announced the new threaded commenting system, we can still customize it by adding a jQuery plugin to our template and then replace the default anonymous avatar that can be found on this address:  http://img1.blogblog.com/img/anon36.png  and the one for blogger users:  http://img2.blogblog.com/img/b36-rounded.png  ...with our own. Replace the Default Anonymous Avatar on Blogger Comments Step 1.   Go to Dashboard - Template - click on the Edit HTML button ...click anywhere inside the code area and open the template search box by pressing the CTRL + F keys Step 2. Type or paste this code in the search box, then hit Enter to find it: </body> Step 3. Just above the </body>  tag, add th...

This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that a lot of sites these days are using much larger avatars. To change the style and size of avatars is very easy - you just need to add the CSS code in your Blogger template that will make size of avatars to have width and height of 64px. Step 1.  Go to Dashboard - Template - click on the Edit HTML button ...click anywhere inside the code area and press CTRL + F to open the blogger' search box Step 2. Type or paste this tag inside the search box and hit Enter to find it: ]]></b:skin> Note: you may need to click on the arrow next to it and then search this tag again Step 3. Depending on which comment system you use (with reply/no reply), copy and paste one of the following codes just above it: [Works in Blogger threaded comment system] .comments .avatar-image-container{ background-color: rgb(34, 34, 34); border:1px solid #ccc; margin: ...

When visitors are searching for content on your blog, you have three options to display the search results: opening the results in the same window, in a new window or within your own site using an iframe. The best option would be, however, to display the search results within your own site/blog, mainly because you are not sending people off your blog when they are taken to a new page of search results which could be confusing for many because it doesn't look anything like your site or Google. Therefore, displaying the search results within your site, could make it look much more professional and may also increase the page views and the revenue from the ads on the search page. A problem that many bloggers are facing is that the page which displays the AdSense for search results must be at least of 800 px wide, so the posting area must be of minimum 800px and there's nothing like this in most of the blogs. So, what we will do in this tutorial is to set up the search results to be...

Here's a really easy trick that will make a Blogger image show only in homepage and hide it in Blogger posts. In order to make images appear only on homepage, we need to add a simple CSS code snippet in the template and then use the hidepic class each time we want to hide an image. Hide Image in Blogger Post and Show it Only on Homepage Step 1. First, log into your Blogger account and click on your blog. Then go to "Template" and press the "Edit HTML" button. Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box: Step 3. Type or paste the following tag inside the search box and hit Enter to find it: ]]></b:skin> Step 4. Once you found the tag, paste the following CSS code just BELOW it. <b:if cond='data:blog.pageType != &quot;index&quot;'> <style>.hidepic{display: none;}</style> </b:if> Step 5. Now that we added the CSS code to hide (display:none;) the images with hidepic ...

For any default Blogger layout, the " Showing posts with label " message will show up above the blog posts each time you click on a label link. Since this message is pretty useless and annoying for many bloggers, they prefer to have it removed. If that's your wish, then follow the steps below: Removing "Showing post with label...show all posts" Step 1. From your Dashboard, go to "Template" and hit the "Edit HTML" button. Step 2. Click anywhere inside the template code, then search using CTRL+F for this line of code (press Enter to find it): <b:includable id='status-message'> After you found it, click on the sideways arrow next to it that will expand the rest of the code. Step 3. You should see a similar code that you need to remove along with the first one as well:      <b:includable id= 'status-message' >       <b:if cond='data:navMessage'>       <div class='status-msg-wrap'>   ...

We have already posted a tutorial on how to add a simple recent posts widget that shows a list with the most recent posts if you'd prefer a more minimalist look. This tutorial will show you a different way of displaying the Recent Posts on Blogger . This is specially for users who want to show more info like recent posts excerpt or summary and the posts thumbnails. To add the Recent Posts widget with thumbnails in Blogger is very easy. Just follow these steps below: How to Add the Recent Posts Widget to Blogger Step 1. From your Blogger Dashboard, go to Layout > click on Add a Gadget link Step 2. Once the pop-up window appears, scroll down and choose HTML/JavaScript Step 3. Inside the empty box, add the following code: <div class="eggTray"> <script src="https://googledrive.com/host/0B4n9GL3eVuV-bFc4a1RjZ2Zhbjg">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list", "pipe_params":{"U...