Audrino

There are several tutorials quite old in which you have seen different methods for displaying related posts in Blogger like the related posts widget with thumbnails and simple related posts with post titles only . This tutorial, however, will show you how to implement a really awesome Related Posts widget with thumbnails and posts snippets that will appear in the footer of all your blog posts. If you want to get an idea of how it looks like, please visit this demo blog . Now let's see how to add the related posts widget with thumbnails and summary in Blogger : Adding Related Posts Widget with Snippets to Blogger Posts Step 1. From your Blogger Dashboard , go to Template and click on Edit HTML Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box Step 3. Type or paste this tag inside the search box and hit enter to find it: </head> After you found it, paste this script just above it: <script type='text/javascript'> /...

In the previous post I have mentioned that we will learn about how to create rounded images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply it on some pictures. What we will do in this tutorial is to upload an image (HTML) and then add some rules in the stylesheet that will transform the outer shape to look like a circle... or, at least, to appear round. This will depend on the proportions of that picture we will use. In fact, we can apply this effect to any picture, to a specific part of our blog or to all the pictures found in our blog. This depends on your tastes. Marking up HTML Obviously, the first thing we need to do in order to set a rounded border around an image is to get a picture and upload it to get the html structure. The code could be a little bit more complicated, but an image is built within the img tag, which basically, looks like this: <img src=" image_URL "/> Screens...

This tutorial will explain how to change the outside border of any image by using some simple CSS rules to make it round, but this is so easy doing this, that I'm finally going to make this post for other purposes. The trick today that I'm going to publish in two parts is to help you to understand, at least, a little of what CSS (Cascading Style Sheets) is. For those who would like to learn more, please take a look at this link and for those who really want to learn thoroughly, I recommend to visit this site . Introduction and terminology Style sheets aim to help sort out what is the structure of a website and which is its format or appearance. So, the CSS box model is, basically, a box that wraps around HTML elements, and determines how those boxes are presented in terms of colors, fonts, width, backgrounds etc. The advantage is that, anytime we decide to change something, we don't have to change all the pages one by one, but simply, change the properties from the style s...

In this post, we'll talk about the 10 most common places in a site or blog where we can add AdSense ads and how we can implement these. Also, we'll get to know which are the most suitable formats based on those available in our AdSense account. AdSense Advertisements In the Sidebar How to implement This is one of the most accessible places to put AdSense. Just go to the Page Elements ( Layout ), click on the " Add a Gadget " link, then add a HTML/JavaScript widget with your ad code inside it or add directly an AdSense widget. Recommended formats : 125 � 125, 120 � 600 and 160 � 600, 300 x 600 Between posts Implementation: You can add AdSense ads between your posts by going to Layout , click on the " Edit " link below the Blog Posts section, then check the " Show Ads Between Posts " option. Recommended formats: 468 � 60, 300 � 250 and 336 � 280 Under the header Implementation: Before anything, you need to convert your AdSense ad code - you can use...

A few days ago, Mrpolie asked if there's a way to hide the author comments in the Recent Comments widget so that we would be able to see only readers' comments and our replies to be hidden. So, in this post I'll be sharing with you the Recent Comments widget that comes with this function. If you want to show just blog readers' comments rather than yours, you have just to change "Blogger User" text with the surname under which you are posting. The main features of this recent comments widget: - You'll be able to hide your comments - Change the avatar size - Set the number of comments to display - Set the length of comment for the widget to display Recent Comments Widget with Hide Author Function Step 1. From your Blogger Dashboard, go to Layout and click on Add a Gadget link Step 2. In the pop-up window, choose the HTML/JavaScript widget Step 3. Copy-paste the following code: Recent Comments Widget with Round Avatars:  Click to see the code <style t...

In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything that makes them stand out from the others. To achieve this, we need to add a code in the Blogger's template and to modify the style according to our preferences.     How to highlight author comments in Blogger: Step 1. Go to Template, click on Edit HTML Step 2. Click anywhere inside the code area and try to find - using CTRL + F keys - this tag: </body> Screenshot: Step 3. Just above it, paste the following code: <script src='http://code.jquery.com/jquery-latest.js'/> <script> $(function() { function highlight(){ $('.user.blog-author').closest('.comment-block') .css('border', ' 1px solid #FFA500 ') .css('background',' #F1F1F2 url(" http://www.blogblog.com/1kt/transparent/white80.png ")') .css('color', ' #444444 ') .css('font-size', ...

The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat. To put our comments in order, we should make each comment easy to identify, so that we'll know from where it begins and to where it ends, otherwise it becomes a jumble of letters and our visitors could run away. Here are some methods to make some order by separating each comment. - Add a Separator To Blogger Comments - Add a Divider Below Comments in Blogger - Fully Customize Your Blogger Comments By Changing The Background Color and Border The first method is the easiest: we'll separate our comments by adding a border below each of them. How to Add a Separator/Border To Blogger Comments Step 1. To add a simple separator go to Template > Edit HTML and click on the small arrow on the left of <b:skin>...</b:skin> Step 2. Click anywhere insid...

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog. Demo You can see a live demo on my blog, the buttons are located on the right side. How to put Go Up and Go Down buttons using the jQuery slide effect Step 1.  Go to Template, click on the Edit HTML button Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box Step 3. Copy and paste the following piece of code inside the search box in order to find it: ]]></b:skin> Step 4. Just above ]]></b:skin> paste this one: /* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distanc...