Open top menu
Tutorial # 29 - Custom Search Boxes for Blogger

Step 1. Go to Layout > click on the 'Add a gadget' link on the left side

Step 2. Choose HTML/JavaScript from the pop-up window > paste any of the codes of the search box given below inside the empty box

Step 3. Press Save


These are the following Codes for Search Boxes along with their designs:
Formal 1

Formal 2


Fancy 1



Fancy 2


Fancy 3


Fancy 4


Read more
Tutorial # 28 - Omega: jQuery Image Slider Plugin For Blogger

In Tutorial # 25 we have learnt how to make simple image slider as shown in our home page. Now we are moving forward to next level as in this tutorial we will be having a beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider is known as Omega Image Slider.

It is a lightweight jQuery plugin that will display multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the slideshow, we have some small bullet icons indicating the current image that we are viewing and, on the upper right side, is the pause option and a timer letting us know when the next image will be displayed.

Step 1: Go to Layout Template, click on Edit HTML


Step 2: Click anywhere in the code area and press Ctrl-F to open blogger's search box

Step 3: Then search for: 

and just above it add the following code:


Step 4: Then search for:

and just above it add the following code:



Step 5: Click on the "Save template" button to save the changes



Step 6: Use the HTML/JavaScript Gadget to include the slideshow wherever you want

Now we have the option to add the slider either inside one of our posts/pages, or display it as a gadget on the blog' sidebar or below the header. If you choose to add it inside one of your posts, switch to the HTML tab and paste the code below inside HTML box of your post. If you want to add it in the blog sidebar/below the header, go to "Layout", click on the "Add a gadget link" > choose "HTML/JavaScript" from the pop-up window and paste the following html code inside the box:


Step 7
This code contains the images, links and descriptions for each image. The URLs of the links and images that you need to replace with your own. Inside the HTML code of each image, you have the size of each picture that can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red.

If you want to add more pictures, add this HTML before the tag:

Notice that each image and description has an unique identifier (id) and shouldn't be repeated. For instance, in the description text of the first image, we have the id="photo1" and within the image code is the "rel" attribute with the name of the id, that is rel="photo1".


Step 8: After you added your images, click the "Save" or "Publish" button and that's it Now you can enjoy this cool Omega Image Slider for Blogger
Read more
Tutorial # 27 - How to Center the Blogger Header Image

Without any doubt, header is the most important part of your blog as it describes your blog. The header is also the identity of your blog. By adjusting the positioning of your header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It's hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.

Step 1. Go to "Template" and click the "Customize" button on the right side



Step 2. Navigate to "Advanced" > "Add CSS" tab and paste the code in the empty box
Paste the following code over there:
#header-inner {
background-position: center !important; 
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

Step 3. Then click the "Apply to Blog" button and you'll see the effect as shown below


Here are some other aligning options for your headers; you copy any of the following codes according to your needs:

1. Image on the right and title on the left
#header-inner {
background-position: right !important; 
width: 100% !important;

.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}


2. Image on the left and title on the right
#header-inner {
background-position: left !important; 
width: 100% !important;

.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Read more
Tutorial # 26 - Facebook Pop-up Like Widget


Facebook is the No. 1 social media service on the Internet hosting to over 1.3 billion users; of those, 800 million login to their timelines at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.

For E-marketing, you must take advantage of social media by doing things like integrating Facebook on Blogger. Sharing site content using a Facebook Like Box is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. Adding a Facebook Like Box actually makes the users more likely to like your blog page.

How to Add the Facebook Popup Like Box Widget
Step 1: Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side

Step 2: Once the popup window is open, select the HTML/JavaScript gadget from the list

Step 3: Copy and paste the following code inside the empty box



Step 4: Customization
After adding the code, replace the address in Line # , https://www.facebook.com/earningonlineviablog/ with your site's facebook page URL.
The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:
.delay(5000)
By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:

Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:
<b:if cond='data:page.type == "index"'>ADD THE FACEBOOK WIDGET CODE HERE </b:if>

After saving your work, you can test out your new feature by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's facebook page.

If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.


Step 5: Press the 'Save' button to add the widget to your blog. That's it!
Read more
Tutorial # 25 - Slideshow Widget

There is the code of the slideshow as displayed on our home/landing page.
This is a slideshow widget which needs to be amended a bit according to your requirements. This can be included in either the HTML/JavaScript widget or a post. You need to upload those images which you want to appear them in the slideshow provided the size of the images should be 640px  x  350px (See line # 8). You also need to copy the image links by inserting them and then press right click on them one by one and click on "Copy image address" and paste the links in the lines # 133 - 138. You may add/remove images by adding/removing the links. After doing all this remove the images.



You may make multiple changes in the slideshow like size(ln 8), pause time(ln 104), transition time(ln 105), etc. Try to understand and interpret the HTML code! See Tutorial # 12 - How to write Privacy Policy, Disclaimer, and Terms & Conditions for your site

Read more