Make a Blog for Earning Money Online

Tutorial # 47 - Free Blogger Backgrounds and Textures

noreply@blogger.com (Anonymous) — Wed, 25 Nov 2015 16:04:00 +0000

Blogger is a place for everyone. Thanks to the overwhelming support of the Blogger and creative communities, there are plenty of free to use resources out there to make your site look great and keep you focused on what you love best. Here are some of the best sites for acquiring blogger backgrounds that won't cost you even a single penny and will look incredible.

Shabby Blogs
Shabby blogs offers some unique texture and graphic rendered Blogger backgrounds to choose from. All of the designs that they have are created to be standard width so you don't get a lot of flexibility to choose from; however, there are guides out there that can teach you how to extend the sidebars, header, and footer of your screen if you find one you love and this is something important to you. In addition to offering Blogger backgrounds Shabby blogs also has a section for cute little buttons that you can add to your site to give it an extra special touch.

Hot Bliggity Blog
Aside from having one of the coolest and creative names to say out loud, Hot Bliggity Blog has a wide selection of patterned-based blogs for your site. You can choose between different color schemes, and they also offer three different sizes to pick from, standard, widened, and full width. Best of all, they are really easy to install. All you have to do is click on the install link underneath the image. From there it will copy the code for you into your clipboard and give you instructions on where to paste it.

Dotty Dot Dot
Dotty Dot is the place to go if you like geometric type backgrounds that are heavy on squares, plaid, circles, and of course dots. The website is a little bit hard to navigate, but they have a sidebar with a bunch of tags to help you sort through all the available templates and find something you like. Just about every color you can imagine is available if you plan on matching your Blogger backgrounds to your favorite color or font style. The widths of the most of the templates vary so some have heavy padded sidebars, whereas some are very skinny.

LeeLou Blogs
Lee Lou Blogs offers Blogger backgrounds that look a lot like you would find in a scrapbook with a heavy dependency on small pictures and vector graphics. These free templates would go great with any home improvement blog or DIY arts and crafts writer. Most of the free backgrounds are standard size with the high padded sides, but like anything you can get access to more templates if you want to take advantage of any of his premium designs.

CgTextures
If you just want something basic real basic that won't distract customers from your content, you can head over to CgTextures. Their site is full of photos and textures that could be added as a background image with a reduced transparency. The blog would still look great and you wouldn't have to worry as much about trying to match your font style and color so that it fits in with the background. Instead you can draw more focus on what's important and less on the site's bells and whistles.

Every Stock Photo
Bloggers that want less of an 'artsy' look to their site and instead more of a serious appeal can get a picture from Every Stock Photo to use as the background image. You can also benefit by using some of the pictures offered through this site within your blog posts so that you aren't stuck buying things from premium image providers. There search bar and navigation panel makes it easy to find exactly what you are looking for to see a unique feel to every page.

Shizoo-Design
Shizoo-Design is a German based design firm with about 554 different patterns to choose from. You can find everything from conservative shapes to abstract rainbows and splashes of color. All of the textures are provided in a range of size, anywhere from 1000x700 pixels to 1300x600 pixels so that they will comfortably fit your entire site's background and work with most browsers and computer screen sizes. Brushes and custom icons are also available from the site, free of charge.

Patterns of Change
Patterns of Changes offers Blogger backgrounds that are cartoon oriented and that can best be tiled across the screen. The site is perhaps one of the easiest to use compared to all the others on the screen, providing a simple navigation bar where you can choose what color you'd like the pattern to be. When you select one of the colors provided, it will come up with a bunch of different patterns usually associated with that color. For instance, when the color brown is selected, one of the choices ia brown cake. Blogger backgrounds for this site might not be the best choice for business professionals, but they certainly are fun.

Add a Background Image using the Blogger Template Designer

Step 1: First you need to download a Background from either the above given links or some other source

Step 2: Go to Template, press the Customize button on the right side

Step 3: Once the Blogger template designer has opened, you'll see the "Background" option on the left - click on it. Now click on the box below the Background image title and it will open a window from where we can select a default background image. On the upper left side of this window, click Upload Image and select the image you would like to use from a location on your computer.

Note that you should use a JPG, GIF, or PNG image that is no more than 300k in size. If your image is too large, then you can use the Kraken.io image optimizer to make the file smaller.

Step 4
After you've uploaded your image, click 'Done' and you'll be taken back to the background menu. Here you will see additional options like: Alignment, Tile and Scroll with page:

- Alignment: change the position of the background image to start either horizontal (left, center, right) or vertical (top and bottom);
- Tile (Repeat): if you want a small background image to fill the page, choose to repeat (tile) horizontally and/or vertically;
- Scroll with page: the box is checked by default, this means that the background scroll along with the page contents. If you want the background picture to not move as the page is scrolled and stay exactly where it is, uncheck this box.

Step 5: For a background image with plain color in the middle for content, you might want to remove the main and header background. Navigate to Advanced > Backgrounds and type the word "transparent" inside the Main Background and Header Background box

If the background is smaller than the content area, we can fix this using CSS. Scroll down and click on the Add CSS option, then paste this CSS code inside the box:

body {
background-size: 200%;
}

.body-fauxcolumn-outer .cap-top {
background: none;
}

Note: To change the size of the background, modify the 200% value.

Step 6: Press the 'Apply to Blog' button!

How to Change Background in a Custom Blogger Template
Sometimes the above options might not appear in some custom Blogger templates if the body.background variable hasn't been defined. In this case, we will need to go to HTML of the template

Step 1: Go to Dashboard > Template, Click on "Edit HTML"

Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste ]]></b:skin> inside the search box and hit Enter to find it

Step 3: Just above the ]]></b:skin> tag, add one of the following codes:

For a large background image:

body {
background-image: url(IMAGE-URL.png) !important;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
}

If using a repeating pattern, add this CSS code instead:

body {
background-image: url(IMAGE-URL.png) !important;
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
}

Step 4: Replace the text "IMAGE-URL.png" from above with your image URL

Step 5: Finally, preview the template to ensure that the background image appears as you want, and press the "Save Template" button to save your changes. And you're done!

Tutorial # 46 - Add an Instagram Widget in Blogger

noreply@blogger.com (Anonymous) — Wed, 25 Nov 2015 06:31:00 +0000

Nowadays Instagram is quite popular and has become one of the most prominent photo sharing apps on the market. It is a photo-sharing network that can be downloaded to your smart phone as an app. Think of it as Facebook with only photo sharing.

By adding the Instagram on Blogger as a widget, you may fulfill the statement, "A picture paints a thousand words" as you can have a new visual aspect of that site and allow visitors to go beyond just words on a page. With the convenience to carry the application around on your smartphone wherever you go, you can snap pictures, apply filters, and upload that content to your profile. From the profile, a widget specially designed for Instagram on Blogger would translate that data and display the image on your site. Even those visitors that aren't members of Instagram could benefit from such a service.

This guide will explain how to add an Instagram widget to your site with step-by-step instructions. This Instagram widget is entirely customizable and will allow you to modify the background color, font, and how the widget is actually displayed on the site.

Step 1: To get the Instagram widget, Log onto http://www.intagme.com/

Step 2: Type in your Username > select Grid or Slideshow:

Step 3: Select the Thumbnail size of your images (100px is the default) and choose if you want a border around your Photos or not

Step 4: To change the Background Color of the widget, simply click on the empty box and pick your favorite color

Step 5: If you want to show the Sharing buttons on your widget, select 'Yes', otherwise, click 'No'.

Step 6: Once you're satisfied with the widget, press the "Get Code" button and copy your code.

Step 7: Go to Layout and click on the "Add a Gadget" link on the right side.

Step 8: In the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:

Step 9: Paste the code that you got from the Intagme website into the content section and press the 'Save' button to save the widget.

Step 10: Click and drag your widget if you want to change its position and press the "Save Arrangement" button on the upper right side. And you're done!

Tutorial # 45 - How to Create a Sitemap or Table of Contents in Blogger

noreply@blogger.com (Anonymous) — Tue, 24 Nov 2015 12:03:00 +0000

Sitemap makes the readers easy to find content that they are searching for. While the blog archive and labels have all the information about the published post, these do not appear on a single page completely, so searching for more posts is not always an easy job.

Quite fortunately, this tutorial will help you to add a table of contents or sitemap on Blogger showing the index of all posts separated by categories that have been published. It will also show the latest posts with a text saying "New!".

Step 1: Go to Pages > click the New Page button

Step 2: Click on the HTML tab and paste the following code inside it:

Step 3: Customization
- Replace http://earningviablog.blogspot.com in line # 11 with the address of your blog.
- To change the color and font size of categories title, replace the values in line # 2.
- To change the color of the links, replace the value in line # 3.

Step 4: Click Options on the right sidebar and select Don't allow (hide existing) for the reader's comments

Step 5: Finally, click the Publish button and View the page

Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot

noreply@blogger.com (Anonymous) — Mon, 23 Nov 2015 18:06:00 +0000

In the previous tutorial, Tutorial # 43 - Simple Recent Posts Widget for Blogger/Blogspot, we have learnt to create a Recent Posts Widget. In this post, you will see a different way of displaying the Recent Posts on Blogger - this is specially for those who want to show the post thumbnails as well.

Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript

Step 2: Paste the code from one of the options below in the empty box of HTML/JavaScript:

Step 3: Customization
- Replace YOUR-BLOG in line # 3 with the URL of your site/blog (ex: http://earningviablog.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of the URL.
- To disable the scroll bar, remove the number 500 in line # 4.
- By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 in line # 4 with the number of posts that you want to appear
- If you want only the posts titles, change true to none and "0" from padding-top:0px with 10 in lines # 10 and 9 respectively.

Step 4: Save your widget. And you're done!

Tutorial # 43 - Simple Recent Posts Widget for Blogger/Blogspot

noreply@blogger.com (Anonymous) — Mon, 23 Nov 2015 17:25:00 +0000

Blogger itself contain many widgets related to "posts" like "Popular Posts" but unfortunately there is absence of a Recent Posts widget. If still you want such a widget, this tutorial will guide you to create your own.

This Recent Post widget has two variations, you can have it with both the title and snippets of post, or with post titles only. To make it fit your own design, you will need to modify the CSS style in order to make the following changes:-
- Display post titles only
- Change the number of posts
- Change the number of characters of the post snippet/excerpt
- Change the link or background color, the size and color of text/links.
- Show/hide the post dates

However there is the absence of thumbnails of the posts. If you want such thumbnails as well, see our next tutorial, Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot

Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript

Step 2: Paste the code from one of the options below in the empty box of HTML/JavaScript:

Option 1: Recent Posts Widget with Snippets:

Option 2: Recent Posts Widget Showing Post Titles Only:

Step 3: Customization:
- Change 5 (option 1 in line # 5) and 10 (option 2 in line # 3) with the number of posts that you want to display.
- Change false to true in line # 3 if you want the posts dates to appear
- Change 100 (option 1 in line # 5) if you want more characters to be displayed.
- To change the color and font size of the links, modify the values in line # 11 in option 1 and in line # 7 in option 2 (links) and line # 11 and in line # 7 in option 2 (font-size) respectively
- To change the style of posts summary, modify the values in green (color) and orange (font size)
- Replace the http://blog-address.com text with your URL

Step 4. Save your widget. And that's it! Enjoy!

Tutorial # 42 - Google Translate Widget with Flags For Blogger

noreply@blogger.com (Anonymous) — Mon, 23 Nov 2015 12:57:00 +0000

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language. This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese.

Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3: Paste the code below in the empty box:

Step 4: Now click on Save

Tutorial # 41 - How to Remove "Showing Posts With Label" in Blogger

noreply@blogger.com (Anonymous) — Mon, 23 Nov 2015 06:53:00 +0000

As a default, whenever we click on a label link the "Showing posts with label" message appears above the posts as shown below.

For many of us, it is quite annoying and useless. If this is the case with you, you may remove it just by following the steps below.

Step 1: Go to Dashboard > Template, Click on "Edit HTML"

Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste <b:includable id='status-message'> inside the search box and hit Enter to find it

Step 3: After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Step 4: Replace the code with the one given below

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 5: Save the template. Now view your blog and click on some label....there should be no box anymore.

Tutorial # 40 - How to Change Default Anonymous Avatar in Blogger Comments

noreply@blogger.com (Anonymous) — Sun, 22 Nov 2015 17:46:00 +0000

In the previous tutorial (Tutorial # 39), we have learnt how to amend the size of the avatars in the blogger comments. Now we are going to learn how to change or customize the default avatar of anonymous commenters or Blogger users with no picture on their profiles.

Step 1: Go to Dashboard > Template, Click on "Edit HTML"

Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste </body> inside the search box and hit Enter to find it

Step 3. Just above the </body> tag, add the following code:

For Anonymous users: Replace the URL in line # 4 with your image address

For Blogger users: Replace the URL in line # 10 with your own.

Step 4. Save the changes by clicking on the Save Template button

You can choose an avatar from here and then copy the URL of it:

1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNFYSoDBwGVdFIh3QosrKarL0XeCaccoTKcVV8G4883jZEUuOG6Qh6XLsgkBOskffBQAZ-vNxlqSw64t5fNtXLzqwJXNDFohm9BX7fSBsIq5VZN-nlzLQzbQNKBt9i_kbf6TWmVdgAms/s200/default_avatar.gif

2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJsiGFDxYMLGKKmGkIpoNjd4RhkXlflmJ1cmPEefeNvTq-NNjWcBDbiJ6OBQAi-n3qipvgLI98F6BC87635Suc1UFX2fBeSRYpjasHb_HDUwi-hJRcFPRkDl5jCvJhWVqZnyEFpDyh2qQ/s1600/facebook.gif

3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXVDcE7dx-fDQf_C6Z10KoZ37dCnveTORNhJ5BPR60EvM3YoJQc3m2J2nEZJ7TeJ6gAzyLQreK4T597DYwXAPNl54Qp1V9k5O0NYZ3qYCYLzCwwsbpWNEsB5Q11YFI1fw8ii2OS88bd3U/s1600/anonymous3.png

4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRtV51MSnXTt7uuNYRxIKdDtl8Yp1T6dbkyToxbDV703Q8mRNJ1yN00v9G7v1lFTyeOUEaA3ifjUQcvCVg3H3llJ-9c05uQIbehq-I-doF7rVNV_XzrXR6lgGFv_i7dpDeqpjhmgWKesOV/s1600/blogger-user.png

Tutorial # 39 - How To Change Avatar Size In Blogger Comments

noreply@blogger.com (Anonymous) — Sun, 22 Nov 2015 17:29:00 +0000

This tutorial will help you modify the avatars size in Blogger comments whose default size is of 36px. To do so, you just need to add the CSS code in your Blogger template that will make size of avatars to have width and height of 64px.

Step 1: Go to Dashboard > Template, Click on "Edit HTML"

Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste this tag inside the search box and hit Enter to find ]]></b:skin>
Note: you may need to click on the arrow next to it and then search this tag again.

Step 3. Depending on which comment system you use (with reply/no reply OR threaded/non-threaded), copy and paste one of the following codes just above the code ]]></b:skin>:

[Works in Blogger threaded comment system]
.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

[for old blogger commenting system]
.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSw9NmYTpHGetAlQe-WsYsOpjMk1mX74ZvHWMx0q18ORAabnxOQwkiujCnmDZlbTDzFHClDvOscwnLmsbvNxECVI6ODGDqHNM6o1yPM-wnXFqCee4agtWggjPFa0TMLXVJFbw1c8jXREM/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}

Note: For bigger/smaller avatars, change the values in width, max-height, max-width, height; and height, min-height, width, min-width, width, min-width, height, min-height.
To change the anonymous avatar, replace the URL with your own. (works only for the old commenting system i.e. that has no reply option)

Step 4: Click on the Save template button, and you're done. Now the avatars should look bigger.

Tutorial # 38 - Add Facemoods Emoticons To Your Blogger Comments

noreply@blogger.com (Anonymous) — Sun, 22 Nov 2015 06:41:00 +0000

An emoticon is a metacommunicative pictorial representation of a facial expression that, in the absence of body language and prosody, serves to draw a receiver's attention to the tenor or temper of a sender's nominal non-verbal communication, changing and improving its interpretation. It expresses — usually by means of punctuation marks (though it can include numbers and letters) — a person's feelings or mood, though as emoticons have become more popular, some devices have provided stylized pictures that do not use punctuation.

Crazy!

As social media has become widespread, emoticons have played a significant role in communication through technology. They offer another range of "tone" and feeling through texting that portrays specific emotions through facial gestures while in the midst of text-based cyber communication.

Here are some amazing emoticons compatible with your Blogger comments - also with threaded commenting system (See Tutorial # 35)! If you want to know how to add them, just follow the steps given below.

Step 1: Blogger Dashboard > Template and click on "Edit HTML" button

Step 2: Click anywhere inside the code area and press CTRL + F to open the search box:

Step 3: Type or paste the below line inside the search box, then hit Enter in order to find it:

<div class='post-footer-line post-footer-line-3'>

And add the below code just after it:
<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LCTw6jNkdfVOMh41M-5_B4LuFrU8W4XOMCjTH21oFjlSQLqDofAIZdioE34t-b7jyd_lDNmwxeFUS0eWCS4lf47NE0aS8O2OU9pmST9ltBaafXZvj70bjAs707u5KTQ-ddeG3cmUTzw/s1600/earningviablog.blogspot.com+%25281%2529.gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1DcybTNS50zTBDaeoDXmxdI9FuoKSVDFKiB0NvOiUMz8TwE9BZvcThFHhxjmvz_gQzJk5UsjA7QAN37YuPsop0ShTXxhCVg5TL25rH41CwpXAaXhWplUftwUeG8QhmXTxcetY0_dwtY/s1600/earningviablog.blogspot.com+%25282%2529.gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwc8hIaWiA9kwhzW2vmTQ6ng7bC10vHaO7tQw6WaqmP3z2kUPagB_hYVc7jDK2UfDTke0M9zWIad6kNXXXrCgHYSHHLOaCvu6VuCGkl4z4C8piG-Yxh6C1a0uiViwP6Z0aMsvJsuwbmU/s1600/earningviablog.blogspot.com%25283%2529.gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_s1XMhEUACIHMtEHJ1nxCywUSV6zZ0Waqdicb9wYZqeBCCk3rDpfZSeV0dH4_d_j5AGlqh1cwBIRklGwbSSoP9aW7fxZANwK1zNoeH1cs-RMDsXGjIC0oIDj62UAxmx9T13k7hfjvh14/s1600/earningviablog.blogspot.com%25284%2529.gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh37eL6uJPrEASpeH4i1x88hnUOmZkm3D-uB30xwWdg_TvK7MM-NKUdxbydaJh9Mjb3TswOi7NU1ISmlBY1H2_o0CjRGYQxaJVzo__8cq3E-HdnVHVbzHLiYVEJHSoMt-jpbmcupp0OjgI/s1600/earningviablog.blogspot.com%25285%2529.gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjHT2M7SkUsDPVKYD2-4ot1FX4-6l6E5HuUIXIiKhg4nfI9RwUtKXdLZBj3gh7gcZh5d0nKzf6znNudSSfxJFtdXNWILJk3AnwZ_2ZOsFBfKXjALQV_EnmqQadcEkB0GQQBtzBOzIvSg/s1600/earningviablog.blogspot.com%25286%2529.gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfzH0uvznCkg6wFq1Y_w8Nv7AVaDYtLWljLAyYwu3nmcumP1B06yXxJ4y-4mf9bHCBvVjJ6iUJjK6lJaTngFlTxuyYku_zXQsnlDCy4h3sJsKwO7dmVOsCgXiuPBmn8XvPswILRbgnWM/s1600/earningviablog.blogspot.com%25287%2529.gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_M2sNiUFMCaAN4-Er0HkXZUCx6My59yUBEppZn_fPoCBAnZVUw_8GQYVo1vMWUq0UlU5daQhVs6c0zb7Fkvw3FSsvtJNtVI3KsTJ4U6hFra025sY_xeEuffhci9dYz4aLEc_Dk-OnpP4/s1600/earningviablog.blogspot.com%25288%2529.gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGMg_0myC7e28Qg7l1EZ7aFFZiHs0QqOWd7f5gKSU0ZI0hFjkMZbW4o3KURNBTIFVxhU7MY4vZUYbe6Qaua9jYZBSjuuIFkQhOe9mskcW7TPtgMnBj7TNVja7HoTHLYKi865drK1akVt4/s1600/earningviablog.blogspot.com%25289%2529.gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIAl84Nid4dYGaFvsAKkET3XlVelc5L2LR_z-04EEiY-cbqMMKRheghfoBhP5NZPEC4hhoeoD0t3Vwt4TVpG9WZEhCcsWwssBM6YQbFzWB0vxAMuaMzhZ59bxtd15cdPvB2bpnHEBagw/s1600/earningviablog.blogspot.com%252810%2529.gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWi9VgpNFff7B02MfPDhIoD4Ixj8hFTcdyk8Tiff30xfU3BFNTBwl9Vuc6AftT2xqvahvfapGX_u1CtV57gZXQnqkBjuY4gXCxUP6TxI1iTN1vFIkPJ69TZ3oMAIxfUjtZL3QxL2XzPxg/s1600/earningviablog.blogspot.com%252811%2529.gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQPfp6NAp2ZLn3s7OdA_r1Z4EDpSRArXB1ImP4uMHhKf4L28Jln0A4_2TpOm58JRSZaF3p4O8fPPFOdKF2VRFMxRfcq2Nqxd-3q5yQMMXdaoTHcCaqEYFMSkqDZl13YnW_cZDFz_ivbI/s1600/earningviablog.blogspot.com%252812%2529.gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVqFHPJLB0Z1LHFpx0er5IfZ4PuAJlQzFukx8R80ZvudG9DYSyGhxZJ53HGUy5VEeeo5qfgID0S5XSGgfk_S_i8RvKPKKPKFDxdO-UA5a1N-atbYMaJlkJTlH-sx5WCB8AgIETkGr-uc/s1600/earningviablog.blogspot.com%252813%2529.gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnVVzxlWQ-6X9Pdpvy1Dqnn0IMu6OreOE94rKrGj2yfV8P8NvW4Oq6Amfs_AG_TNcNvn2JCk7vgO-lafmzl_QP6BhYvRaRpuK7vcwipFlkC_XeaZMDAbPXo1LI_MYqB-EewZILAbIR0w/s1600/earningviablog.blogspot.com%252814%2529.gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpZ51VnmWURL-YuyQzUs5EchDkFCDLpHIxgD74k9H_OBuAB-fOwRmL7dLnF7R7JypzJupN6BChDiLN8hj6MWW3iWL7FhRHBzVzO25u4BUgdtXMhGot6_1q4uJPe0D5YZ-c298Axjqh2k/s1600/earningviablog.blogspot.com%252815%2529.gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8eaoST8CwsSgSOYvwZkgvrB54-L9_kz4DA2YC1NE_jbB1gWAMp1X45BAtD2WVFg_ree3d5-Y84l4YSpzjmYvO-8xF3U5mCsocJ4BZIJE0zeAVWWLjF8VhBXtHwShMSFxUwq85H8O02h4/s1600/earningviablog.blogspot.com%252816%2529.gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBLYNLQv1KDqbjsgM1P_xm-CrGgZ2j0Sg4pMhk5FN8DBU2JxgM9RFO3DIpwJT1Z973kWp3xWj_13gEo1PlF2fFboCDnelYwUp48Dg2N9ARKf8ISu-2wPT35SYPW572Q255zoavn0n-fA/s1600/earningviablog.blogspot.com%252817%2529.gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwhGsEfikZn2iR2EJSZuFRXVUkPOy40-opN9zQHt9MaBU1jE1uKtRcY5KvvnWAjQoAo0B5lochOBlR3oTCKxYowH9XtYYumXT8vLzlr3XokRXXg_Bog3OvSo1FvyYcYjoVYgU_ClU8mI/s1600/earningviablog.blogspot.com%252818%2529.gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbO18wXJl7-AWAyTWgQ9DHLEyKrWDFlkdzvc2AIYmAOeCUPHCHqp9XIfTYct06Q_4ylopNafar1fvShA2rdeuDisAXz9DMJe9hGxzzRpGROXRoQegXZ9cHvTk8FxoenAHXI9xAVu3aeI/s1600/earningviablog.blogspot.com%252819%2529.gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCdWLcKmhUZMgI602tms86DW_q3mVM14I_VKcUHRpkoWa43XdvHcmyBwnGCGi1vWMOOe9C3RmWshdcED-QStHftJvnXozXtpEewoqTcIDQqfQLhYh9DZMHs2usc7HfmnOLaMwnfwhdftw/s1600/earningviablog.blogspot.com%252820%2529.gif'/> :t <a href='http://earningviablog.blogspot.com/2015/11/tutorial-38-add-facemoods-emoticons-to.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

Step 4: Now search for this piece of code:
</body>

Step 5: And add the following code immediately above it:

Step 6: Save the Template and hopefully, now you can enjoy commenting by adding these cool and crazy emoticons!

Tutorial # 37 - Fancy E-mail Subscription Form of Blogger

noreply@blogger.com (Anonymous) — Sat, 21 Nov 2015 17:47:00 +0000

If you want a simple E-mail Subscription Form, see the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot. However if you want to make it a little bit fancy, this tutorial will help you in making so.

Step 1: Follow the Steps 1-6 of the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot.

Step 2: Now copy and paste the following code into any webpage or HTML JavaScript widget (by going to Blogger Dashboard > Layout) and make the changes given below.

Customization
- Replace the URL address in line # 3 to change the email icon

- To change the width or the text area, increase/decrease the 190px value in line # 36

- Replace http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog with your Feedburner Email Feed link in line # 40. You can get it by visiting your feedburner account then navigate to "Publicize" and then to "Email Subscriptions".

- In line # 42, replace EarningViaBlog with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog.

Step 3: Now Save your widget and you're done. Check and Enjoy!

Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot

noreply@blogger.com (Anonymous) — Sat, 21 Nov 2015 13:26:00 +0000

Before you add Email Subscription Form to your blog, you need to "Burn" Blogger RSS Feeds at Feedburner.

What is RSS

A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have an RSS feed built in. Whenever you start publishing posts, your latest posts will be updated in the RSS feed. Visitors to your website can subscribe to your blog’s RSS feed.

What is Feedburner

Feedburner is a free web service which enhances bloggers ability to manage their RSS feeds and track usage of their subscribers.

The following steps show you how to Burn Blogger RSS Feeds:

Step 1: Go to Feedburner and sign in to Feedburner with your Google Account (create a Google Account first if you don’t have one).

Step 2: To set up your RSS feed with Feedburner, simply copy the URL of your RSS feed and paste it into the “Burn a feed right this instant” box. Then click Next >>

Step 3: On the next screen, choose the second options - RSS

Step 4: On the next screen you will be given your RSS feed’s new URL on Feedburner. You will want to use this URL anywhere you reference your RSS feed on your blog. Change the feed title and address with your own.

Step 5: At this stage, just click on "Skip directly to feed management".

Step 6: Now you can change the default "Communication Preferences" if you want. This is basically the format of the E-mails which are to be sent to the subscribers.

Step 7: Now copy and paste the code (See screenshot below) into any webpage or HTML JavaScript widget. Your subscription form will be automatically. From there readers can subscribe to receive daily email regarding your newest content.

Now you're done. If you want a fancy type of Subscription Form, see the next tutorial - Tutorial # 37 - Fancy E-mail Subscription Form of Blogger

Step 8: Redirecting All Your Blog Feed To Feedburner - (Optional)
Unless you redirect all your blog feed to Feedburner you won’t get accurate subscriber numbers because some of your readers subscribe using your original blog feed.

To do this:

1. Go to Settings > Site Feed in your blog dashboard

2. Add your Feedburner address to Post Feed Redirect URL and click Save Changes.

3. Now all your feeds is automatically redirected through FeedBurner and you’ll be able to track subscribers. And now newest content will be automatically sent to your subscribers. Enjoy! You may check it by subscribing your E-mail. After subscribing you will receive an E-mail for confirmation which needs to be confirmed before getting daily updates of the newest content of your blog.

Tutorial # 35 - Numbered Comments on Threaded Comments for Blogger/Blogspot

noreply@blogger.com (Anonymous) — Thu, 19 Nov 2015 17:19:00 +0000

This tutorial helps you to understand how to add numbered comments with comment bubbles on the threaded comments as shown in the picture below:

This will help you to specify any comment using its 'reference' number.

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger's search box. Type ]]></b:skin> inside the search box then hit Enter to find it.

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3: Just above ]]></b:skin>, add the following CSS code:

- If you want to have no bubble icon, remove lines # 12-18.

- To change the comment bubble, replace the URL with the URL address of your own icon. [URL address of bubble/icon will be made by inserting it somewhere in your blog and then right-click on it and click on "Copy image address". Then the address will be saved in your clipboard which can be used to replace the URL in line # 14 of the above CSS code. After doing so, you may remove the picture inserted.]

- To change the position of comments count, increase/decrease the values (10 & 3) from padding-left and padding-top in lines # 12 and 13 respectively

- To change the position of comments bubble/icon, change the values (7 & 10) from margin-top and margin-left in lines # 15 and 16 respectively.

- To change the font and color of the comments count, change the values in lines # 10, 11 and lines # 27, 28.

Step 4: Now Save the Template and you're finished!

Tutorial # 34 - How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

noreply@blogger.com (Anonymous) — Thu, 19 Nov 2015 16:14:00 +0000

This tutorial will help you to enlarge the first letter of posts and comments which stretches down three or four lines with the text wrapped around. That letter is called as "Drop Cap" The drop cap letter can also use a different font and have a different color from the rest of the text. This style can be often seen in newspapers, and magazines.

For Posts

Step 1: From your Blogger Dashboard, go to Template and 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. Type ]]></b:skin> inside the search box then hit Enter to find it.

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3: Just above ]]></b:skin>, add the following CSS code:

Font size and color can be edited by amending the lines # 5 and 6 respectively.

Step 4: Now search for this code: <data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below: <div class='capital'><data:post.body/></div>

Step 6. Save the changes by clicking on the Save template button

Note: If the above code is not working, add one of following codes from this example: <p class="capital"><data:post.body/></p> OR try this instead: <span class="capital"><data:post.body/></span>

For Comments

Step 1: Follow the above Step 1, 2 & 3 (if you have already added the CSS code, skip above Step 2 & 3)

Step 2: Then Search for this piece of code:<data:comment.body/>

Step 3: Add <p class="capital"> before and add </p> after the above searched code

Step 4: Save your Template

Tutorial # 33 - How to add Calender Dates Next to Blogger Posts

noreply@blogger.com (Anonymous) — Thu, 19 Nov 2015 13:05:00 +0000

If you want to have a calendar style dates next to your Blogger posts, you need to look no further than this blog. In this tutorial, we'll learn how to create a calendar style for your Blogger posts date!

Step 1: Go to "Settings" > "Language and Formatting" - "Date Header Format" and change the date format as you can see in this example below (first add day, month and then year)

Step 2: Go to Template > click the "Edit HTML" button

Step 3: Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 4. Type or paste the following line inside the search box and hit Enter to find it:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Step 5. In case you find it twice, replace it twice with this code:
<div id='Date'>
<script>changeDate('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate('');</script>
</div>

Step 6. Now type this tag inside the search box and hit Enter to find it:
</head>

Step 7: Just above the </head> tag, paste this code:

Before saving the Template, here we can make some changes:

- To change the calendar style, replace the url in line # 22 with yours;
- If the calendar doesn't appear as it should, change -108 line # 27 with 0;
- Lines # 38, 46, 53 where you can change the color of the dates

Step 8: Now Preview your Template and if everything looks ok, hit the Save Template button.

Tutorial # 32 - Add Social Media Icons to Blogger Header

noreply@blogger.com (Anonymous) — Tue, 17 Nov 2015 11:58:00 +0000

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. The icons will rotate when you hover over them.

Step 1: Go to Blogger dashboard > Template > Edit HTML

Step 2
To expand the style, click on the small arrow on the left of <b:skin>...</b:skin>,

Then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag

And then add the following code just above it

Step 3: Now search for this line

Step 4: And just above it, add this code

Step 5: Following changes shall be made by you
- Change usernames at lines 4, 6, 8, 10 with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in the above mentioned lines with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want with a Link URL and Image URL:

Step 6: Finally, Save the Template to apply the changes.

Tutorial # 31 - Social Media Sharing Widget using AddThis

noreply@blogger.com (Anonymous) — Sun, 15 Nov 2015 17:58:00 +0000

Without any doubt "Sharing is Caring", those who care and like you posts intent to share them to their social media profiles. This widget helps them to share your content and to make it available to other people. This in turn will promote your blog.

There are many ways to add the social media sharing widget in your blog. However we are using "AddThis" to add different types of social sharing widgets in your blog.

Step 1: Visit the https://www.addthis.com/get/sharing page & Click on "SIGN UP FOR ADDTHIS"

Step 2: Create an account in AddThis. You may also log in through Google, Facebook or Twitter accounts

Step 3: Click on "TOOLS"

Step 4: This will provide you with a number of different types of social sharing buttons. We're going to have Floating Sharing Sidebar

Step 5: You will have some settings regarding your social sharing buttons
Changing the settings doesn't affect the code given below. Before pressing the button "Activate" you need to copy the code and paste it just above <div class='post-footer'> in Template > Edit HTML.

If you want to edit or change the settings of the widget, you just need to your account and amend the setting without making any changes in your blog.

Related Tutoriols
Tutorial # :
Tutorial # :
Tutorial # :

Tutorial # 30 - Custom Numbered Page Navigation Widgets for Blogger

noreply@blogger.com (Anonymous) — Fri, 13 Nov 2015 12:06:00 +0000

You may have a customized Numbered Page Navigation Widgets. In this tutorial we are providing you various types of page navigation. These can be inserted in your blog by following the steps given below.

Step 1: Go to Blogger Dashboard > 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. Then search for the following tag

Step 3: Now choose one of the numbered page navigation styles given below and copy the code and paste it just above the code.

These are the following codes for page navigation widgets along with their designs:

Step 4: Now find (CTRL + F) this tag:

Step 5: Add the following script just above it:

After installing, you might want to change these default settings:

1) perPage: how many posts will be shown in each page (7). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to "Settings" > "Formatting" and type it in the "Show at most" field, then click on the "Save Settings" button.
2) numPages: how many pages will be shown in the page navigation (6)

3) to replace the 'First', 'Last', "« Previous" and "Next »" texts, just type your own within the quotes.

Step 6: Click on the Save Template button and you're done.

Tutorial # 29 - Custom Search Boxes for Blogger

noreply@blogger.com (Anonymous) — Thu, 12 Nov 2015 19:01:00 +0000

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

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

noreply@blogger.com (Anonymous) — Thu, 12 Nov 2015 11:23:00 +0000

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

Tutorial # 27 - How to Center the Blogger Header Image

noreply@blogger.com (Anonymous) — Wed, 11 Nov 2015 20:07:00 +0000

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;
}

Tutorial # 26 - Facebook Pop-up Like Widget

noreply@blogger.com (Anonymous) — Wed, 11 Nov 2015 05:56:00 +0000

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!

Tutorial # 25 - Slideshow Widget

noreply@blogger.com (Anonymous) — Tue, 10 Nov 2015 06:47:00 +0000

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

Tutorial # 24 - Introduction to Blogger Widgets/Gadgets

noreply@blogger.com (Anonymous) — Sat, 07 Nov 2015 11:22:00 +0000

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.

Tutorial # 23 - How to advertise your site/blog through facebook

noreply@blogger.com (Anonymous) — Sat, 07 Nov 2015 11:20:00 +0000

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.