TUTORIAL IT: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

Thursday, November 19, 2015

Stylish Popular Post Widget For Blogger

The Stylish Popular Post Widget For Blogger as one of the best blogger widgets all bloggers should have, shows a list of posts that have the highest page views on your blog. To be displayed on this stylish popular post widget can be the most popular posts within 7days, a month or of all time. In order to promote your blog and improve its design, it would be useful for you to use this Stylish Popular Post Widget in your blogger blog. Follow the steps listed below to add this blogger widget in your blog.

Also Read: How to Add 'Link to This Post Widget' to Blogger Post
Social Follow and Subscription Blogger Widget
Scrolling Popular Post Widget For Blogger

How To add Stylish Popular Post Widget in Blogger Blog

Step one

From you blogger dashboard
Goto 'Layout'.
Click on 'Add gadget'.
Select 'Popular Posts'.
Tick the options for 'Snippet' and 'Image Thumbnail' before you save the blogger widget.

Step 2

You'll be Adding the CSS code in your blogger template. If you already have a popular post CSS code in your template, ensure you remove it before trying this out.

Goto your blogger template, back it up first.
Click on 'edit html',
Use ctrl+F keys to search for ]]></b:skin>
Copy this code below and paste 'above' ]]></b:skin>

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZ-uHvKOAL52pe_Vkvt9nycO6xS8ZKiBJG40FT5PDE1Cg9I_4xlaSJi2Dtl5lKEshWYtYDObDb5jhUiG4Vg8spO6mQVHbwmdqzndux69ISdhsRVLH_or0q32hydubjR9Tcorx_bBZfTs/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Also Read: Related Posts Widget For Blogger / Blogspot with jQuery
Facebook Invite Friends Buttton With Timer To Blogger
Facebook Popup Like Box With Timer For Blogger

Save the template. View your blog and you'll see the Stylish Popular Post Widget in your blog.

Basic Tips For Blogging

Most bloggers if not all strive to make their blogs better. This can only happen from the knowledge acquired about basic tips and tricks for blogging

Also Read: White Hat SEO Techniques

1. Remove the time from your post - Most likely, your blog will be ignored when it comes up in search results because the post might be viewed by visitors as outdated and not current enough even though the post is still relevant.

2. Use your keywords as anchored text when linking internally - Anchor text tells spiders what the linked-to page is about. Links that say “click here” do nothing for your search engine visibility.

3. Let your post be easy to share using social share buttons - With share buttons at the right locations on your blog, (below post or floating share button on the side bar) you can increase your blog traffic when the post is shared to social networks like Facebook, Twitter, Reddit, LinkedIn, and others.

Also Read:Verified List Of High PR Dofollow Commentluv Blogs

4. Don't be obsessed with your blog's pageviews - Avoid using automatic bots to increase your pageviews. You'll always hear "content is king". Spend more time writing quality content and what is in trend.

5. Dont copy and paste - Apart from the satisfaction derived from having loyal readers, avoid plagiarism, copying word for word even the images. If you must refer to sources, edit the post, with keywords at the appropraite places. Give credit to the source(s).

Also Read: How to upload blogger template

6. Learn from top bloggers - Here, you can Get more tips for blogging which will make the entire learning process easier and help you manage your blog effectively. Don't see them as your competitors, get help when necessary, it'll do your blog a lot of good .

7. Write as often as possible - If you can, daily or after a few days. Search engines love blogs that are updated regularly, keep your blog fresh. Keep in mind, it's not the number of post you have on your blog that matters but the quality each.

8. Don't relent your efforts - Blogging to you might look like a waste of time if there's no meaningful traffic or quick cash, but it'll pay off at the end if you're patient. Most successful bloggers passed through this phase. As a new blogger, concentrate on good content. Write about what you love and know, also blog for fun.

9. Get quality backlinks - Apart from quality content, quality backlinks matters. Having high pagerank sites that point to your blog can increase your blog traffic, reduce your alexa rank, and in turn increase your pagerank. Remember, 5 high pr backlinks could be worth more than 10 zero pagerank backlinks.

10. Include a site map - A site map helps spiders find all the important pages on your site and index them. This is especially helpful if your site has a hard-to-crawl navigation menu.

How to Show Ads and Gadgets In Blogger Mobile Version

Still wondering how you can make Ads and blogger gadgets appear on mobile version of blogger blogs? Waste no more time. The guidelines are given below. Most of the traffic we get are from mobile users who atimes don't view the web version of our blogs. This reduces the chances of getting clicks on ads, readers subscribing for post on the blog with the email gadget or viewing other related post which in turn increases your blog's bounce rate. For adverts, blogger gadgets like popular post gadget, labels, social media follow and subscription widget and the likes, these guidelines will show you how to display them on the mobile version of your blog, making your blogspot blog compatible with mobile phones . Also showing ads on mobile version of blogger will be another opportunity to make money.

First, Goto your template
Click on the gear icon for mobile settings.

Select 'Yes. Show mobile template on mobile devices'.
From the drop down menu, select 'custom'.
Save your template.

Also Read: How to upload blogger template
How to Add HTML Parse Tool To Blogger

How to Make Ads and Gadgets Appear on Mobile Version of Blogger

Next, goto 'layout'.

For New Gadgets

Click on 'add gadget'.
Select 'html/javascript', paste your code, either the ad code you generated or a blogger widget/gadget code.
Save the gadget.
Still in the layout section of your blog, edit the gadget you just created.
View the address bar and note the 'html number', which is the widget ID of your new gadget/widget.
Next, goto your blogger 'Template', click on 'Edit html'.
Select 'Jump to widget' and click on the html number you noted previously (that is, if it was html12 or html8).
Add this line of code when the widget/gadget opens in your template mobile='yes', just after where "locked false" appears. Or, If you want the widget/gadget to appear only on the mobile version of your blog and not on the web version, then add this instead mobile='only'.
Save your template.

For Existing Gadgets

Click on 'Edit' option for the gadget you want display on the mobile version of your blog.
View the address bar and note the 'html number', which is the widget ID of your new gadget/widget.
Next, goto your blogger 'Template', click on 'Edit html'.
Select 'Jump to widget' and click on the html number you noted previously (that is, if it was html5 or html8).
Add this line of code when the widget/gadget opens in your template mobile='yes', just after where "locked false" appears. Or, If you want the widget/gadget to appear only on the mobile version of your blog and not on the web version, then add this instead mobile='only'.
Save your template.

Also Read: How To Show Adsense Below Blogger Post Title
How To Centralize Blogger Title And Description

NOTE: Using mobile='only' might bring error messages each time you try to rearrange the gadgets in layout. It'll be advisable for you to include mobile='yes' instead. With this your ads and gadgets will now be displayed on the mobile version of your blog.

Facebook Invite Friends Button For Blogger

The Facebook 'Invite Friends' button for blogger can also be added as one of the best widget because it enables your blog readers to easily refer their friends to your Facebook fan page, thereby increasing your audience. Normally, this Facebook button can only be found on Facebook pages where Page administrators have to manually invite others to like the page and fans who have liked the page also inviting their friends. Taking advantage of thousands of users on a social networking site like Facebook can go a long way in improving your blog's audience.

Also Read: How to Add HTML Parse Tool To Blogger
Social Follow and Subscription Widget For Blogger

How does this facebook invite friends blogger widget work? Each time a person clicks on the 'invite friends button', a new pop-up window opens. They can invite as many as 50 friends (which is the limit) at once to like your page. Using this invite button can help in increasing the fans on your Facebook page, thereby bringing more traffic each time your blog post is shared on the page. Include this widget on your blog so that your readers can also invite their friends to like your page directly from your blog.

Also Read: 'Link to This Post Widget' For Blogger
Customized Labels Cloud Widget For Blogger

How to Add the Facebook Invite Friends Button to Blogger

1. Create a Facebook app by Going to Facebook Developer's Page.

2. You must be a registered developer before you can gain access to this to create apps on the page. To do this, click on the Register button on the top right corner.

3 Next, Click on 'Apps' tab, then select 'Create new app'.

4. Enter a name of your choice for the app and also an identifier(optional), Select your app's category from the drop down menu. Then click 'create'.

5. You'll get an app Id, copy the ID into a notepad or text editor

6. Still on the Facebook developer's page, click on 'app page', and then go to 'settings'. Select 'Add a new platform' and then click on 'Website'. Fill the spaces appropriately with your URL and also mobile URL of your site, and then save your changes.

7.

.Goto your blogger dashboard
Click on 'layout'
then select 'add gadget'
select 'html/javascript'.
Copy the entire code below into the html/javascript editor. Before you save, edit the code by replacing the app ID in the code with your 'app ID' which you copied from Facebook developer's page. Also edit the 'facebook page url' in the code, replace it with yours.
Then Save the gadget

Save the gadget

High PR Dofollow Commentluv Enabled Blogs

With High PR Dofollow Commentluv enabled blogs, you can get high PR backlinks to your blog/website. The relevance of backlinks to any site are numerous and includes ranking higher in search engine results, increase in the site's traffic, and reduce it's alexa rank. Although these backlinks are necessary, much consideration is given to the quality and not really the quantity, and also if they're from a niche related to yours. So, one of the ways of building these high authorithy backlinks is by blog commenting on high Pagerank dofollow blogs. In this post there's a list of some dofollow commentluv enabled tech blogs with high PR for tech bloggers who can use them in getting high PR backlinks pointing to their blog/website.

Also Read: High PR Dofollow Social Bookmarking Sites 2015
How to Add Read More Attribution Links to Copied Text in Blogger
How to Add Nofollow Attribution to All External Links In Blogger

To generate these backlinks, all you have to do is visit these commentluv enabled blogs and comment meaningfully on any of their blog post. An anchored link to one of your post with its post title is left on these blogs as you comment. The comments on some of these blogs are moderated before being posted, ensure you do not spam or write comments unrelated to the post. Below is a list of about 30 High PR Dofollow Commentluv enabled tech blogs.

Also Read: Free Online Backlink Checker Tools
All In One SEO Pack Plugin 2015 For Blogger
Verified List Of High PR Dofollow Commentluv Blogs

List Of High PR Dofollow Commentluv Enabled Tech Blogs

How To Show Adsense Ads Below Blogger Post Title

Another blogger trick on how to display adsense ads below blogger post title to help you earn from your blog. How much you'll make from adsense depends on your traffic and where you place the ads to increase your CPC. Best places to show adsense ads are usually below the post title, in the middle or within the post body. This doesn't go against adsense policies. The adsense ads can be centalized, wrapped around text or aligned to the left within post. To do this, follow the steps below on how to show Adsense Ads below blogger post title.

Also Read: How to Add HTML Parse Tool To Blogger
How to Add Read More Attribution Links to Copied Text in Blogger

How To Place Adsense Ads In The Middle Of Blogger Post

Next is to parse the code you generated from your adsense account. Visit this link to parse the adsense code . On the html parse site, paste your code and click on 'convert' . Your parsed code will be generated. Copy this into a notepad or any text editor. The parse code you generated is what we"ll be using.
From your adsense account, create a new ad unit or get the code to any previous ad unit you have. Most preferred ones are usually 300*250 Medium Rectangle or 336*280 Large Rectangle ad sizes.
Goto your blogger dashboard, click on 'template'. It will be advisable for you to backup your template first.
Click on "edit html" in your template, Use Ctrl+F and search for this tag <data:post.body/> copy the code below and paste 'above' <data:post.body/>. This tag ( <data:post.body/>) will appear more than once in your template, paste the code either on the second or third tag, depending on which will work in displaying the adsense ad.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

PLACE YOUR AD CODE HERE

</b:if>

5. Replace 'PLACE YOUR AD CODE HERE' in the code above with your parsed adsense code. Save your blogger template. Goto your blog, you should see the new changes, if not paste the parsed ad code above the next <data:post.body/> you see.

Also Read: How To Centralise Blogger Title And Description
How To Add Customs Header Tags In Blogger

How To Align Adsense Ad Within Blogger Post

By default, the ad will be aligned to the left as shown in the image above. If you'll like your post to wrap around the adsense ad, then copy this code below and paste 'above' <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div style='float:left; margin:10px;'>  // type this line manually, dont copy and paste

    PLACE YOUR AD CODE HERE

    </div>

    </b:if>

Also Read: Google Adsense Ads Now Showing In Opera Mini
Automatically Open all External Links in a New Window On Blogger

How To Centralize Adsense Ad Within Blogger Post

If you'll the ad to be centralized in your post, and the post below the Ad, copy this code instead..

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div align='center'> 

    PLACE YOUR AD CODE HERE

    </div>

    </b:if>

NOTE: In each of the codes above, ensure you replace 'PLACE YOUR AD HERE' with your parsed adsense code and you'll have adsense ads displaying within your blogger post title in no time.

How to Share Blogger Post Automatically to Social Networks

Sharing blogger post automatically to best social networking sites like facebook, and twitter can help bring meaningful traffic to your blog depending on your fan size. The more the fans, the more page views for you. With the steps below, your post on blogger will be sent automatically to your facebook page instead of sharing them manually each time you update your blog. Should make blogging easier for you and help in efficient use of your time. Twitterfeed and dlvr can be used to share your blog post to social networks.

Also Read: How To Add Floating Share Buttons On Blogger

How to Share Blogger Post to Social Networks with twitterfeed

1. Goto twitterfeed and create a new account if you don't have one already.

2. Click On 'create new feed'.

3. Enter feed name (your desired name) and your URL in the spaces provided. Then click on 'continue'.

3. Click on 'connect a service', select facebook or twitter depending on which social network you want to share your blog post to.

4. Authenticate your facebook or twitter accounts, then select 'create service'.

5. If the service you selected was facebook then continue, Choose facebook page or select facebook profile to share your blogger post on your facebook profile.

6. You can edit the number of times you want your post to be sent to your facebook page by clicking edit (optional), then advanced settings on twitterfeed. Save when your'e through.

Also Read: Social Media Follow And Subscription Follow Gadget For Blogger

How To Share Blogger Post To Social Networks Using Dlvr

1. Goto dlvr.

2. Signup for a new account or sign in if your'e a registered user.

3. Link your accounts.

TUTORIAL IT

Pages

Thursday, November 19, 2015

Stylish Popular Post Widget For Blogger

How To add Stylish Popular Post Widget in Blogger Blog

Popular Posts Widget With Hover Effect For Blogger

Friday, November 13, 2015

Basic Tips For Blogging

Thursday, November 12, 2015

How to Show Ads and Gadgets In Blogger Mobile Version

How to Make Ads and Gadgets Appear on Mobile Version of Blogger

For New Gadgets

For Existing Gadgets

Wednesday, November 11, 2015

Facebook Invite Friends Button For Blogger

Facebook Invite Friends Button For Blogger

How to Add the Facebook Invite Friends Button to Blogger

High PR Dofollow Commentluv Enabled Blogs

List Of High PR Dofollow Commentluv Enabled Tech Blogs

How To Show Adsense Ads Below Blogger Post Title

How To Place Adsense Ads In The Middle Of Blogger Post

How To Align Adsense Ad Within Blogger Post

How To Centralize Adsense Ad Within Blogger Post

Friday, November 6, 2015

How to Share Blogger Post Automatically to Social Networks

How to Share Blogger Post to Social Networks with twitterfeed

How To Share Blogger Post To Social Networks Using Dlvr