Pages



Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Recent/Latest Posts Widget For Blogger/Blogspot

Wednesday, November 13, 2013

Recent Posts Widget
You surely have seen on many blogs and websites a Recent Posts Widget in the sidebar that shows the recent or newest or latest posts of the certain blog or website. This widget shows the best posts title for SEO, date of post and an image of the post and even a snippet of the post. So today we are going to learn how to make this widget for your blog with some very easy steps. So let's start now.

Vertical Social Media Sharing Buttons Widget For Blogger

Tuesday, January 1, 2013

Vertical Social Media Sharing Buttons Widget For Blogger
Blogging becomes interesting when people share your content on different social media sites and other websites with friends. In order to share your content on social media sites by visitors; you need to add some beautiful and smashing social sharing widgets. If your widget is looking attractive and catches people's attention then your content might get shared by visitors. For this purpose, there has been a huge number of Blogger widgets and plugins by different designers. Today, I would like to share a floating social sharing widget with you which scrolls down automatically when visitors scroll down the page. You can see this widget on my blog. The same widget I'm sharing with you.

The Benefits of This Widget:
There are many advantages you can get by using this widget on your blog. The first benefit is that you can have all social sharing buttons in a single widget and also one can send your content to someone via email by using this widget. The second benefit is that this widget don't have loadable JavaScript or jQuery codes so it can easily be loaded by browser and also it scrolls down automatically and user can observe sharing your content somewhere, while visiting your blog.

How to Add Social Media Floating Widget to Blogger?
The process of adding this widget to your blog is simplest. You need just to follow below steps:

1. Open Blogger
2. Go to Layout
3. Add a Gadget
4. Add HTML/JavaScript
5. Copy the below code and Save

<div <!–sidebar floating share buttons code start–>
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://topclassfun.blogspot.com/2013/01/vertical-social-media-sharing-buttons.html">[Get This Widget]</a><font></font></div></div>
<!–sidebar floating share buttons code end–></!–sidebar></!–sidebar>


6. Save Arrangement


Customization

The floating is set to left side of your blog, if you want set it for right side of your blog then simply change the bolded  float:left property to float:right.

How to Remove "Powered By Blogger" Attribution from Blogger?

Tuesday, December 18, 2012


Blogger Attribution
As many of you know that Blogger is completely developed in XML (Extensible Mark Up Language). Blogger has its own XML codes which you can use to add elements or to remove elements. Those who make Blogger templates must know XML. There are many attributes or links on default blogger templates which sometimes people don't want to see on their blogs. And one out of those links is "Powered By Blogger" Attribution which appears in every blogger default template at the footer.


So today, we will find the easiest and quickest way to remove this link.

Steps:
  1. Go to Blogger Dashboard.
  2. Now click on your Blog Title.
  3. Navigate to Template tab.

Blogger Template
Note: Before editing your template, you may want to save a copy of it. Back Up Your Template.






4. Click on Edit HTML button.

5. Click Proceed button to continue.

6. Now you have to find the code of attribution element. Search for the code snippet similar to below in the template,

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

7. Now alter the attribute locked value to false in the line of code, which cause element unable to remove.

i.e: <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

8. Now you will able to remove attribution element. But still you won't be able to add any element to your page footer. So you need to change another line of code to allow adding elements to footer. Find the code snippet similar to below from the template.

<b:section class='foot' id='footer-3' showaddelement='no'>

9. Now change attribute value showaddelement to yes as below,

<b:section class='foot' id='footer-3' showaddelement='yes'>

10. Now Save template.


Blogger Layout

11. Navigate to Layout tab from left pane.





12. Find Attribution element bottom of the page.

Blogger Attribution Element




13. Click on Edit link correspond to the Attribution element.

14. Now click Remove button on pop up window.

15. Now Attribution element has been removed. You can add another element using bottom Add a Gadget link to add custom attribution or any other element.

16. Click Save arrangement button.

Enjoy :-)

How To Split Your Blogger Blogs Header For AdSense Or Other Ad Units

Monday, October 15, 2012

The header section of a blog is one of the prime areas for AdSense and other ads so in this post i will show you an easy tip to place ads in your blogger header section.This will help increase your earnings and hopefully help make you more money from your blog. 

This image from Google displays the top positions for ads.

Add Google Adsense To Blogger Header (Above The Title)

Now, i will show you how to add Google Adsense above your header, for instance just above the title of your Blogger blog. This can be done by adjusting your template to give you the option of adding more than one widget to the header area.

Html Parse Tool - Display Html Code In Your Blog

Below is an instant html parse tool.This can be used to display html in your blog posts.Once you enter html the parsed code will be generated and that code when added to a post will be displayed as code not formed.This tool can also be used to parse AdSense code as it needs to be parsed before being added to templates.

Enter Code:
Parsed Code
Top Class Fun | Entertainment for everyone , this blog provide entertainment for people of every age group. This blog contains Pakistani Dramas Online, Online Movies ,Free Online Live tv Streaming Channels, English and Urdu Stories, Wallpapers, English and Urdu stories, Games, Songs, Softwares and much more.
 
Subscribe via
Email

Most Reading

Archives