Adding Fancy CSS3 & JQuery Lavalamp Menu For Blogger

In my previous tutorial, I shared to you how to add drop down menu and it is useful especially if you have many clutters that disturb the eyes of your readers. Today , I'm going to share a menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by In side signs and Helperblogger made it bloggerized to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog. How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger Step 1. Adding the Script A. Go to your Blogger Dashboard >> Template Click B. Hit the Edit HTML button C. Find or Control F the code below in your template </head> D....

How to change the image of the header in blogger

As you scroll over on different blogs, you simply captivated with their different and stylistic designs specially on the header section. So what comes into your mind, a change of your own, or a sort of modification of what you have placed on it.If you really have the zest and intention to enhance your header. Go! Bear in mind, new become an apple of the eyes. So let's do the process. Change The Image of The Header In Blogger  Note. You have to prepare you new image and text design before you can jump to its modification. You can use Photoshop or Microsoft Power Point. Step 1. Go to Blogger Dashboard Step 2. Click Layout  Step 3. Look for the header and click " edit " Step 4. Click remove and then click " choose file " Step 5. Click the desired image for your header from the folder where you saved it. Step 6. Click " Have description placed after the image ". Step 6. Click " Save " Step...

How to Add Expandable Recent Comments Widget In Blogger

Building blocks frame your house, while finishing makes it more appealing. Today, I will share to you another trick on how to make your recent comments more attractive and professional look. I would say that the code that I am going to share with you is abstracted from helplogger and I made some changes in order to present it in a more fascinating manner. This Expandable Recent Comments widget is a very accessible for it can be collapsed or expanded through your user's interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment. The expanding content of the comment can be shown or hidden by clicking on the plus/minus icon or by hitting the "Show all" or "Hide all" button at run time. Adding The Expandable Recent Comments Widget to Blogger Step 1. Log in to your Blogger dashboard Step 2. Hit the Layout button Step 3. Click on "Add a Gadget" link Step 4....

How to add media sharing buttons below every post title

For an easy way of sharing your desired information to the internet community. It is then necessary to put media sharing widget on your blog. A widget today is an enhance version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button and will add blog title inside it. You can easily customize it to change the background colors and widget overall look. It can be added to both Blogger and Wordpress. It has a big impact in accumulating blog traffic through the shares made by these buttons which will circulate in social media and help you enjoy a long lasting referenced traffic. Lets start adding these valuable buttons to your blog. Add Social Sharing Buttons Below Post Titles Here is the method for blogspot blogs. If you are using Wordpress...

How to add widgets on both sidesof Blogger header

Another tricks in blogging is observable in some professional blogs where there are more than one widget found in the header section. In this particular application of css codes pushed some newbe to ask how to put it in their blog header. Or some readers asked how to add a widget on each side of the header as pictured below, while others asked how to place multiple widgets on the right side of the header. This tutorial will cater those questions. It will  show you how to add your desired number of widgets in the header area, and arrange them in such a way that it's done horizontally. It’s an improved version of my previous tutorial on similar customization: Add banner, Adsense or search box in header, as it doesn’t require the addition of a new widget container i.e. section. 1. Please unlock the header section Maybe you've been through a lot of testings on how to apply this trick. However you cannot add widgets to the...

How to change the image and color of the blockquote

It was said that common are obsolete.The very reason why people travel to different places to look for new. In the blogger world, it seems to be parallel to this concept because readers consider new as something that is helpful, in terms of ideas and implementations. As we consider this, we also need to look at in a more vivid horizon which we always consider that our patience and hard work will very soon turn into money. Like applying an advertising company, specifically the adsense, considers new as one of their bases for your application's approval. This tutorial will show you how to change the color and background of your blockquote. So, let's do it. Changing the Background Image and Color of a Blockquote Step 1. Go to Blogger > Layout > Edit HTML Step 2. Backup your template Step 3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this, .post-body...

How to Get Approved by Google Adsense for Newbie

Turning blogging into entrepreneur is not like looking for a book page.It is a combination of patience and hard work. But the question is, after you mixed all the spices of your blog, how can you convert them into money as a sort of reward of your long-determined endeavor. Friends! It's the Adsense. As the top placer among the internet advertising companies. For this reason, many bloggers want to be its ads publishers. And to win the heart of the Adsense team who will manually evaluate you and your blog, you should follow some basic rules. Below, I will share to you the basic tips/rules which I believe can help you achieve your goal. Publish Quality plus Original Content As per experienced as a newbie blogger, it is quiet hard to make such kind of content. You don’t know how start and end a certain post. But as a newbie blogger you should spend a lot of time in conducting a research studies in the web in order to power...

How To Add Different Hover Effects To Images In Blogger Post

Changing colors or texts while the mouse points at a certain image in a blog is amazing display of one's hard work and creativity. I have already seen and read many tutorials regarding on how to add hover effects on images uploaded in our post editor pages and all of them have put CSS code in the template editor's page which has a the same effect to all of our images. But there are some instances that the hover effect that we want to appear will be different in some of our posts. Have a your mouse hover at the image below as an example. DEMO HERE: Steps in Applying this tweak in your Blog Step 1. Copy and paste the code below in your Blogger Post Editor page <img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJYh1x758ETxL5-4-PMGXQxAiFRQmw7zldSLz3gArpAMbJz1aR8SBqEG0ENjZaknwXRN6pKigsLb74XSQLcGegPUZdD3aEH3UTMr3QtFpaY5-lfzEUC68N8EqbhFmkGm_FQhky1B0fHMs/s1600/MY+FAMILY.jpg'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzP2bFngP0tNNIYTt6mvWqvcdYaRRUexfGzrmd5mk_pkp3RTTHn8J-b6TqqMwQhxtIK6FgYv6_1XzKOwyZt5PHtx1zvCEYBcUm33vtR_aJjLwpUQDBcIvcOdAakdm595oPiVQYjy5h1g/s1600/KATES.jpg'"...

Adding Translate Widget With Flags Or Banner In Blogger

Putting a translate widget in Blogger seems to be old but still have a big impact on your user's experience once they read your contents. I believe others prefer to read content online with their own language and today I'm so glad to share to you on how to add this widget in a simple way. Let us now start with the process. How to Add Translate Widget with Flags or Banner in Blogger You can install this widget directly to your sidebar by clicking this link Step 1. Go to Blogger Dashboard Step 2. Click Lay- out Step 3. Hit the Add a Gadget button Step 4. Scroll down and select HTML/Javascript button Step 5.Copy the code below and paste it inside the blank page in your HTML/Javascript button <style type="text/css">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="w2bgft"><!--Google Flag Translator by  Bloggingtipsandtrix.blogspot.com--><form...

How To Add Go Up And Go Down Buttons Using The JQuery Slide Effect

At the right corner of this page, you can see that there is an Up and Down Button. It is very essential to have an Up and Down buttons in order to scroll your page content easily, specially on the main page of your blog wherein there are many articles or when an article has too many comments from your vivid readers. Further, these buttons have a fade in and fade out effect, it means that it will fade slightly when you scroll it to the top or to the bottom of the page in your blog. How To Add Go Up and Go Down Buttons Using The JQuery Slide Effect Step 1. Go to Template, click on the Edit HTML button Step 2. Select the "Expand Widget Templates" box Step Step 3. Search (using (CTRL + F) for this piece of code ]]></b:skin> Step 4. Just above ]]></b:skin>, paste the next code: /* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distance...