Showing posts with label Advanced Blogger Tutorial. Show all posts

How To Add Google News Widget To Blogger

BestSellers July 01, 2019 0

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

Now you are done.Look at the example below.

Put the Title of the Post in front of the Blog Title to make it more SEO

Blogger Tutorial

BestSellers March 03, 2019 0

Put the Title of the Post in front of the Blog Title to make it more SEO

Putting the title of the post / article is in front of the blog title on the Google search search results so that it is more SEO friendly, is one method / SEO tips that are usually done by most blog owners to improve the SERP position. Because the value of the article title is above the blog title in the eyes of the search engine. So if the target audience for the sampean blog is from the article title query, then this method is powerful enough to improve the SERP. On the other hand, for a very well-known website or blog whose ads often travel on TV or other mass media, I don't think this method needs to be applied. Because most visitors come from the query results of the blog name.

Most of the external templates, free or premium, usually have implemented this method, but there are still some templates that still put the blog title / name in front of the article title, especially the default template from Blogger. Where this will cause a long article title to be cut off on the search engine index results. Surely this is very detrimental right?

To change the post title in front of the blog name in the search engine index results, please follow the steps below:

1. Login to Blogger >> select blog >> click Template >> click edit html.
2. Look for the code line as below

<title><data:blog.pageTitle/>
</title>

3. Delete the code, then replace it with the code below

<b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title>
        <data:blog.pageTitle/>
      </title>
      <b:else/>
          <title>
            <data:blog.pageName/> ~ <data:blog.title/>
          </title>
</b:if>

4. Save the template

The ~ sign is the delimiter between the title of the article and the blog title in the search engine index results. Please change it according to your taste, with a sign | or >>.

Note: Changes to the search index results will not be immediately visible to old articles / posts, it can take 1 day or 1 week or more, to speed up changes can be by resending the article url (submit url / take as google).

Also read the article How to delete blog widgets that cannot be deleted

So many tutorials on how to place the article title in front of the blog title. Sorry if there is something wrong in this paper. Hopefully useful and good luck.

How To Embed a Web Page on Another Site

HTML

BestSellers March 02, 2019 0

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

Note : Remember to replace URL OF WEB PAGE,with the url you want to embed into your site.You can change height,width.

Look at the example below.

Now you are done.

How To Add Google News Widget To Blogger

HTML

BestSellers March 01, 2019 0

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

Now you are done.Look at the example below.

How To Add Feeds For LABELS in Blogger

HTML

BestSellers March 01, 2019 0

How To Add Feeds For LABELS in Blogger

If you want to add feeds for labels in your blog read this post.For easy explanation I use my blogspot url.If you have a Blogspot blog:

URL Address : http://YOURBLOG.blogspot.com/

example :- http://bloggertipandtrick.blogspot.com/

FEED Address: http://YOURBLOG.blogspot.com/feeds/posts/default

example :- http://bloggertipandtrick.blogspot.com/feeds/posts/default

LABEL Address : http://YOURBLOG.blogspot.com/search/label/labelname

example :- http://bloggertipandtrick.blogspot.com/search/label/Templates

To Add a feed for your label your, feed address should like this :

http://YOURBLOG.blogspot.com/feeds/posts/default/-/labelname

example :- http://bloggertipandtrick.blogspot.com/feeds/posts/default/-/Templates

If you have spaces in your label, your feed address should like this :

example :- http://bloggertipandtrick.blogspot.com/feeds/posts/default/-/Change%20Template

Note : If you want to show your latest post under a label follow the steps below.

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Click on 'Feed' .

4.Add feed address for your label and click continue.Look at the example below.

5.Now customize your feed showing setting an click save.

Now you are done.

How to Create a Free Contact Form for your Blog

HTML

BestSellers March 01, 2019 0

How to Create a Free Contact Form for your Blog

Contact Form is essential for Blogs and Websites. Create a contact form for your blog using FoxyForm. FoxyForm provides the Anti-spam protection for your Website. This article I show you How to create a contact form for your blog.

Step 1:

Search FoxyForm.

Step 2:

Select your options like Title, Name and Email for your contact form.

How To Add a Custom Template For Your Blog

Step 3:

Choose Background Color, Font color and Font Style.

Step 4:

Enter Your Email Address.

Clock on Anti-Spam Protection.

Step 5:

This is a Preview Contact form.

Step 6:

Click on Create Formular.

Step 7:

Copy the HTML Code.

Step 8:

Go to your Blogger Dashboard.

Click on New Post.

Chose HTML.

Step 9:

Enter the Post title.

Paste HTML code.

Finally publish your post.

How To Add Different type Auto Scrolling Text or Marquee Text

HTML

BestSellers March 01, 2019 0

How To Add Different type Auto Scrolling Text or Marquee Text

This post explains you how to add Scrolling text to your blogger sidebars,blog posts,etc. This is a
another way to attract the visitors to your blog.

Use below codes to add Scrolling Text to your blogger post or widgets.

How To Redirect Blogger URL To Another URL

HTML

BestSellers March 01, 2019 0

How To Redirect Blogger URL To Another URL

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see <head> tag.

3.Add below code into your template just after the <head> tag.

<meta http-equiv="refresh" content="0;url=http://yournewurl.com"/>

It should Look Like This.

<head>

<meta http-equiv="refresh" content="0;url=http://yournewurl.com"/>

4.Replace http://yournewurl.com with the URL you want to redirect your old blog.

5.Click on Save Templates and you are done.

Now your blog traffic will be redirected to your new address.

How To Add Search Box to Search in Your Website

HTML

BestSellers February 27, 2019 0

1.Login to your blogger account.Go Layout --> Add a Gadget --> Select “HTML/JavaScript”.

2.Copy below code and paste it.Click save and refresh your site.

Note:Remember to replace "YOUR BLOG URL" and "NAME OF YOUR BLOG" with your
details.
If you want to change the size of your search box than just change the value 20 to 35(any
value you like to get a bigger search box.
You can also change the “Search” button to say, “Hit” or “Go” or "Enter" or "Read more",
by changing the Value in the above html code.

3.You can see search box like below one.

Blogger Tips And Tricks

You can also remove the button "search" from the above search box and place an image for better look. The html code will be:

You can see search box like below one.

How To Add Yahoo Search Box to blogger

HTML

BestSellers February 25, 2019 0

How To Add Yahoo Search Box to blogger

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

Note : Remember to replace YOUR-BLOG-URL with your real blog URL.

Look at below.

How To Add Feedburner FeedFlare below your Blog Post

HTML

BestSellers February 25, 2019 0

How To Add Feedburner FeedFlare below your Blog Post

If you want to add the FeedFlare to your blog follow the instruction below.

1. Login to your Feedburner account.

2. Click on the Feed Title.

3. Click on Optimize Tab.

4. Click on FeedFlare.

5. Check on the services you want to display in your Feed or on your Site.

6.There is a FeedFlare Preview/Ordering below the list of services. This lets you see how FeedFlare will appear in your feed and/or on your site. Just Click and Drag the links on the location that you want.

7.Click on "Activate".Now You will get this message.

8.Now in this window Before the Save button, there is a "Get the HTML code to put FeedFlare on your site". Choose the Blogging Platform as "Blogger"

9. A pop-up window will appear and it contains the instructions on how you embed the Feed burner FeedFlare on your blog.Just follow the instructions.Now wait about 20 minutes and refresh your site.Look at the example below.

How To Add Feed Link Button Before All Labels in Blogger

HTML

BestSellers February 25, 2019 0

How To Add Feed Link Button Before All Labels in Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this code:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

4.Now replace above code with below code.

<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

5.Now save your template and you are done.It will look like this.

Beautiful CSS Search Box For Blogspot Blogs

HTML

BestSellers February 25, 2019 0

Beautiful CSS Search Box For Blogspot Blogs

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

Attractive Subscribe Section + Search Box For Blogger

HTML

BestSellers February 25, 2019 0

Attractive Subscribe Section + Search Box For Blogger

In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social network buttons are powered by www.addthis.com.Above the subscribe section,Search box is included.You don't want to change anything in the search box code.To add this widget to your blogger sidebar without doing any modification,sidebar width must be at least 305 px. You can add this Subscribe Section + Search Box into your blog within few seconds and very easy to configure.If you like to add this widget to your blog or a website,then follow the steps given below.

1.Login to your blogger dashboard --> Design --> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save your template.

4.Now go to Design --> Page Elements and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNcXGbamc5LwXSSqj57DLEd6CExaxA7y-xVcs3HUzsZDF9DEM-Dfuy79fciO_wS9x7Nar7kO8cR6M7FrT_Nn0lnxKz-KWFxG0lQ2tk3LtgAdwX4PrmiiG255qgb7PW7Y8k929Tkr0QFJH6/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfJpHBQEIAtNiED71ye2JTJAJP-OtitYHAdiLmMUHJMg_Ffpq-DYEfm5Yqsk_tN9KPVlhLownE4eFm40r0_qIevCw0zjOTEhyphenhyphenA05KHQRdBaSx2ArdZpnZl9r8b9i5uNOyLWutCrUyQqYf/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Vr3ABVHFsgX6g6gXrNm-Gr6l8zvUYHS8HnRy45fnCTp_iINFE60skrut2XWpUH8UBw-Io-ymei7OEovcvU81qe87-roBn8v50n3k2w_5jWCnnshGnPsTvm6-FwvLuztEcx3V8Ql-NDW7/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaPX7nXubJX0fAR6JRV7k-GA81AlQLgD99-jSFMZQsFS0lS1jiWpEPYp9zsZc3i5huDuU1WegmrJvixRO500FQvDKKi0DMpy7e1TesXwC-oWZUTheY4IvNdIblymwCjCo_k2-ckMWTvYz/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="https://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73N3rIbJirLv5-mULeQwwKrNt1AtGAEkhAhzRJo6iw4Bt1bczaBgW-fc1VjkawmdHLgawWq64TWqrVSdqhG5ETEmUn8rEQIIuzZr1ToOCQNgXdiPwfOi5yS27WKa265sWNHCnI_Dd3bk/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQn8dLLe9gNED4UBxjjnge7mdPj9pioZZL8Tj1bTNeXa7OdBnGpWeAJ6H9trlm_edJvtcLCVNHlIijwODL-NfhMANAzFVJemgNog50x4lurDXn12d02-nOVjHBbiM-4w_bAQrmuwWCeA/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf18rXT-bilbgdraYvBNyMWSlQIPrTFocrUMT5bDOR0tggf9B-4C9Y1Oxq-L7yIAXAky-C5Uqva5z6vB95j6P8tCboRYW3tklKZwbVlF8j-ibYokQ_QpCbslWog9OV4asOjD9p_xZmJcc/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdB1y_YyWOLx8QpWoMujdQi_JM1DeRXXdMW7nP5W2O1Q17jecAi4WWu9TVITTBfNHpPjp-fi_GpJqxLDyBkHxX7uTptlHtLaGh_mJsYgoLDCkIksWJYcBJkI6wJ_Svq-UVRnkXs0QZNVE/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh89xifsoCeYq6ppFs6S6zxmNvsDYJJep7oyuXs5BbbkzA2BSiT9r7gGmdUNWlxhtB6EotuYGdu9-JZ5wxTriwgIWqVIFbNwJ6jH2ADYbkdBjU_qTQL8F5LnGqahy5fstx_pb34dKCC2rU/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8YiW5aUAYbC3QXrZ-Ql-EVY6g6c9ZDRqTIBwyeH4kwGUFDXzIuN6_Rhdh8a8eU87DywYgsF2OoO8-efD82UU8oDFBsFlgrqQNm9MgcEhLUyRu6oXq8ekVHNToTZiwfCVtDdUnaklwjw/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvg_WHjvucG082FA-K6et4m9AehZ3Cm_djvx1ulq0nqH-8Y3WzUuEnJrH_MJRGYffUAEC0rxAVvE48fwD-2WUMFUC5KXaAlXPC8fvQCFBhVLAK_vUBKYfY-b32b_G7OkSMQec0oq70-ns/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

NOTE : Remember to Replace,

FEEDBURNER-ID with your real Feedburner ID.(4 times).
TWITTER-USERNAME with your real Twitter username.
FACEBOOK-USERNAME with your real Facebook username.

You are done.

How To Open Links in New Window or New Tab

HTML

BestSellers February 25, 2019 0

How To Open Links in New Window or New Tab

Any webmaster don't like visitors to leave their site always.So,if we use links to open in new window,our problem will be solved.

We used targe="blank" to open the link in new page.

We can also use target="new" instead of target="_blank".Both are same.

For Text Links
____________________________________
<a href="website URL" target="_blank">website name</a>
____________________________________

See the example below.

<a href="http://howtoblogacademy.blogspot.com" target="_blank">Blogger Templates</a>

It see like this.

Blogger Templates

For Image Links
________________________________________
<a href="website URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>
________________________________________

See the example below.

It see like this.

Note:If you want You can change width,height,border value,etc... of above codes.

Hot

Sponsor

Tags

Extra Ads

Post Top Ad

Put the Title of the Post in front of the Blog Title to make it more SEO

How to Create a Free Contact Form for your Blog

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

Step 9:

How To Add Different type Auto Scrolling Text or Marquee Text

How To Redirect Blogger URL To Another URL

How To Add Yahoo Search Box to blogger

How To Add Feedburner FeedFlare below your Blog Post

How To Add Feed Link Button Before All Labels in Blogger

Beautiful CSS Search Box For Blogspot Blogs

Attractive Subscribe Section + Search Box For Blogger

How To Open Links in New Window or New Tab

Post Top Ad

Social

Recent

Popular

Comments

Archive

Sponsor

Make Money Blogging

Tags

About Us

Free Traffic

Labels

Contact Form