Audrino

Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect for blogs dedicated to music or if you just want to show off the music that you love. So, what we will do in this tutorial is to take an image for our album cover, add some fancy CSS3 transitions and transforms that, on hover, will slide out a pure CSS vinyl record behind it. Finally, we will add some basic HTML to our post or page where we need to apply this amazing effect. Demo: hover over the album cover and see how CSS reveals further information: The Wall is the eleventh studio album by the English progressive rock group Pink Floyd. How to Apply The Animated Vinyl Record on Blogger Images Step 1. From your Blogger's Dashboard , 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 search box: Step 3. Type or paste inside the search b...

If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually an HTML entity to get that speech bubble look on your comments. You can see a demo here . To have this style in your comments, all you need to do is to paste the below code inside the CSS part of the template, which is between the <b:skin> and </b:skin> tags. Styling Simple Nested Comments with CSS Step 1. From the Blogger Dashboard , 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. Paste or type the following tag inside the search box and hit Enter to find it ]]></b:skin> Step 4. Just above ]]></b:skin> add this CSS: .comments .comment-block { background: #F9F9F9 ; color: #555 ; bo...

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page. However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again. In this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as: access to the Blogger's Homepage create a New Page or Post view all your posts read your comments access the Blog's layout to add or rearrange gadgets edit the HTML of your Template refresh...

In a previous post, we saw how and where we can place Adsense ads on our blog ; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of it. But what if we want to display an AdSense ad in the middle of a post? We can manipulate the location of the ads to be displayed by adding a script inside the template and using a tag inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc. Related: Insert AdSense inside posts after the first paragraph Manually inserting AdSense ads in the middle of posts in Blogger is pretty easy, just follow these steps below: Adding Adsense Ads In the Middle or Anywhere inside Blogger Posts Before proceeding, it is recommended to backup your template: go to "Template" and click on the "Backup/rest...

An event is something that happens when we do something. In CSS, the most common is the hover selector which helps us to select elements when we mouse over them and then an event is executed automatically. There is one way to avoid this since in modern browsers there is a property called pointer-events which allows us to disable them. For instance, if we have a link and we set the pointer-events property value to none , it would simply not work: <a href="page-url" style="pointer-events: none;"> Click here </a> Many use :target to make it work, however, this is not always the best choice if we consider its jumping behavior - click on the link below to see what happens: Link with target Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices fa...

Image galleries/sliders are particularly useful for photoblogs, but they could also be useful for users who occasionally need a gadget like this. We already posted a tutorial on how to add Thumbnail Image / Photo Gallery in Blogger with a big thumbnail at the top and smaller thumbs at the bottom which were enlarged each time an image was selected. The difference is that we had to click on the image in order to make it larger and that was acquired with JavaScript . This time, however, we will use only hover and CSS . To see how it works, please visit the demo blog: Demo blog How to Add CSS Image Slider with Thumbnails in Blogger Step 1. Log into your Blogger Dashboard and go to "Template" > press 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. Paste the </head> tag inside the search box and hit Enter to find it. Step 4. Just above the </head> tag, add the CSS cod...

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the chosen picture, thus making it easier for you to pick different images on mouse click. With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height and width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>. Related: Image Slider with Mouse Hover Effect using CSS only Demo blog How to Add Image Gallery with Thumbnails to Blogger Step 1. Log in to your Blogger account , select your blog and go to "Template", press the "Edit HTML" button. Step 2. Click anywhere inside the code area and press the CT...