TUTORIAL IT: blogger post

Showing posts with label blogger post. 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.

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.

How to Centralise Blogger Title and Description

Here's how you can centralize your blogger title and the description. By default, blogger title and description are aligned to the left. To make your blog's title and the description appear at the center of your blog, follow the steps below.

From your Blogger Dashboard.
Goto 'Template'
Select 'Customise'.

Click on 'Advanced'
Scroll down and select 'Add CSS'
Copy the code below and paste in the text field.

#header-inner img {margin: 0 auto !important;} #header-inner {text-align: Center ;}

Click on 'Apply to blog' to save your changes.

How to Create Pages on Blogger and Link Them With Labels

Labels On blogger help you organize your post into the appropriate category such that related post are found in a particular label. Your post can also appear in Search engines depending on your labels. The pages on your blog brings easier navigation through it. To create Pages on Blogger and Link them With Labels, you should have labels attached to each of your post.

Also Read: How To Upload Blogger Template

How to Create Pages on Blogger and Link Them With Labels

If you are not using blogger labels, this might not work. Next time you want to post, in the post editing section, create a label by clicking on label and place all related post in that particular label. You can choose to name it anything you like. Each time a reader clicks that label, all post related to it should appear.

Also Read: Check Username Availability For Social Networking Sites

Next is creating your pages using those labels. From your blogger dashboard click on pages, then select new page, next click on web address.

On the first box type any name which you'll like to name the page. And on the next box type in the address which should be like this http://yourBlogAdress/search/label/YOURLABEL NAME

Also Read: How to upload blogger template

For example i have a label name 'blogging' and i want to use it to create a page, then the address will be like this http://informationtutorial158.blogspot.com/search/label/blogging. You can follow this procedure to create as many blogger pages linking them with labels.

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