Open top menu
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
Tutorial # 24 - Introduction to Blogger Widgets/Gadgets

If you go to Layout > Add a Gadget, there are various gadgets available as shown in the image below. Almost all the gadgets/widgets are quite easy to understand, so we are not going to waste any time in such widgets. You may add a custom widget to Blogger you want to add a widget which is not available in the blogger list of gadgets/widgets. The HTML and JavaScript widget within Blogger is a blank widget that allows you to add or paste third-party functionality or other code to your blog.
We can also insert various plugins and widgets/gadgets using HTML mode in the blog posts and pages.
Read more
Tutorial # 23 - How to advertise your site/blog through facebook


Step 1: Log in your account in facebook, if you don't have your facebook page, create a one. Then click on "Promote" at the right top corner.


Step 2: You will get different options regarding advertisement as shown below.


Step 3: You may either give ads in facebook for either your website or facebook page. By clicking any of the above, you may get various options regarding your ad design and target audience.
Read more
Subscribe to: Posts (Atom)