A simple Share Buttons Widget with Counts for Blogger. A one click instant install with no hassles of modifying the Template to integrate into the blog. Shareaholic Sexy Bookmarks include buttons from Facebook , Twitter , LinkedIn , Delicious , StumbleUpon , Google Bookmarks and a Email Send button with each one of them showing the number of times it has been shared previously. In this tutorial we will see how to embed it in your blog.
A simple Advertisment Banner style using CSS3. Ad Banners have one purpose only and thats to grab the attention of the readers and make them click through. With this in mind I designed a simple one with some simple CSS3 border-radius property.
In others word a On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the top something similar to the Facebook header bar. It contains social sharing options as well as links to Home Page of your blog. Also present are the Slide to Top and Email subscribe options. This can be easily customized to include options according to your needs. Lets get started and see how to add it in your blog !
Demo You can see the live demo on this very page itself !
Before we get started
We will be using the Old Interface for this tutorial as the New Interface throws up unexpected errors when editing the template. In case you are one of the people who joined Blogger recently then there might be a chance that you have no access to the Old Interface. To overcome this problem , type the following URL into the address bar
Replace the highlighted number with your Blog's ID . To find the Blog ID , observe the Address Bar while surfing through the Stats , Layout , Template pages of your Blog . You will see a similar large number . That would be your Blog ID
Video Tutorial
Steps
1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Scrolling Sticky Bar. Now select the Edit HTML option
2. Now search for <body tag ( See Video tutorial for more details ) and add the following code just below it
Note: In Line 4 Replace the URL with your blog Address and In Line 15 and 16 replace instance of stylifyyourblog with your RSS Feed Name 3. Now search for </body> tag and add the following code just before it
Note: In case you have already included the jQuery library in your blog then remove Line 1 . The same applies for Line 12 ,13 and 14 as well if you have included Facebook , Google+ and Twitter scripts respectively.
4. Lastly add the following CSS just before ]]></b:skin> tag
#share-top li { display: block; margin-right: 0; }
#facebook-widget,#google-widget,#twitter-widget {display:none; } @media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){ #SYB-Bar-Container{ display:none; } }
5. Hit the Save Template button and view your blog to see how the bar appears.
Thanks to Hacking University for creating this widget and also to Jafar Dhada insisting for creating a tutorial for this. In case you have any ideas for widgets or tutorials feel free to share them via comments
Social Sharing buttons are known for there bad effects on the page load speed. For some time I was trying to find a solution to this problem on lines of the Lazy Load Plugin for images , I was inspired by way Blogger Dynamic Views handled the problem , loading buttons styles and scripts on mouse-hover. Then I came across Taylor Fausak solution and did a bit of tweaking for making them work in Blogger.
In this implementation , there are fallback buttons for all the pages except the Post page. When clicked they will give a Popup of the respective default sharing option. Search for <div class='post-header-line-1'/> and add the following HTML just after it
You can extend this script for other social sharing buttons like LinkedIn ,Pinterest ,Digg , etc
For it to work effective ,make sure to all scripts related to Social Media buttons are removed from your template
There is lot of scope for improvement here specially for multiple instance on a single page. I will be doing a followup tutorial soon, till then feel free to ask any difficulties you face while implementing this in the comments below
Star Ratings are graphical representation of the likability of a post generally measured on the scale of 5 and represented by stars. This can act as a useful alternative for collecting information about the likability of posts as many readers shy away from leaving comments. Not only is it faster than commenting also there is a added element of anonymity. In this tutorial we will be learning how to embed JS-Kit star rating in Blogger and some handy tricks related to it
We will be using the Old Interface for this tutorial as the New Interface throws up unexpected errors when editing the template. In case you are one of the people who joined Blogger recently then there might be a chance that you have no access to the Old Interface. To overcome this problem , type the following URL into the address bar
Replace the highlighted number with your Blog's ID . To find the Blog ID , observe the Address Bar while surfing through the Stats , Layout , Template pages of your Blog . You will see a similar large number . That would be your Blog ID
Video Tutorial
Steps
1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Star Ratings
2. Now click the Edit HTML button and tick the Exapnd Widget Preview option
3. Now search for <div class='post-header-line-1'/> and add the following code just after it
Feel free to share any tricks or problems that you face while implementing this Rating widget. Blogger also has a inbuilt Rating system , I will be doing a tutorial about it soon
Web fonts have been around since the CSS2 specification came out ,but in the recent years there has been a huge adoption due to lots of services coming up to cater to the users needs. One of the first on the scene was Typekit and was followed by lots of others. But they were all paid services and hence out of reach of the many ,then came Google Web Fonts and rest is history. Not only was it free but being hosted at Google's servers it was the most reliable of them all. In this tutorial we will learn how to embed Google Web Fonts in Blogger .
Getting started There are mainly two ways to embed Google Web Fonts into your blog , firstly you can simply use the Template Designer or you can include the specific font related Style-sheet directly to your template .
Using the Template Designer
Video Tutorial
Steps
1. In your Blogger Dashboard ,go to the Template page of the specific blog
2. Click the Customise button present just adjacent to the Edit HTML button
3. In the Template Designer , go to the Advanced Tab and you are now free to select the fonts for the various parts of your blog like Page Text , Blog Title ,etc
Cons - You don't have access to all the fonts present in the Google Web Fonts Directory. Only a selected few are included in the Blogger's Template Designer
- An extra bit of JavaScript is added which is way more than the simple stylesheet added in the other method
-This might not work if you are using a highly customized template the reason being the template designer would have removed the necessary CSS variables required for this to work. If you facing this problem then follow the other method below
Pros - Simple to implement
- Surprisingly faster than the other method even though extra JavaScript is added
The Style-Sheet method
This requires a bit of fiddling with the Edit HTML of the Blog but is the cleaner of the two. I suggest that you follow this method
Video Tutorial
Steps
1. Go to Google Web Fonts and browse through the various fonts . Once you have selected which font to use , click the Quick Use Button just in the right hand side.
2. Now scroll down a bit and you will see a link tag code , copy this code
3. Now in the Blogger Dashboard ,go to the Template page of the specific blog
4. Click the Edit HTML button present just adjacent to the Customise button
5. Paste the code you copied just after the <head> tag
6. Now to add the CSS to use this font, just before the ]]></b:skin> tag
Embedding fonts is now a easy task, just don't overdo it, can have some negative effects Feel free to ask problems or questions related to this tutorial in the comments below
Related Posts are conventionally shown at the end of a article to present interested readers with a choice of reading other similar stories to the one they just read. In Blogger there are no official widget for this purpose so you will have to rely on third party services or a simple JavaScript hack. In this post we will be discussing a step-by-step guide on how to integrate the OutBrain Related posts widget into your blog. Also with a bit of CSS we will make them look better.
Lets get started:
1. Go to Outbrain.com and click the Register button on the upper right.
2. On the Registration page ,add all the relevant details and click the Register button
3. Now you will be asked to confirm your email
4. After confirming you will be redirected to the Dashboard , here in the left side, select the Manage Blog option and after that click the Add a Blog button
5. Now you will be asked information about your blog ,its platform (In this case set it to Blogger ) , its URL ,language ,etc.
Note: Make sure to set the Install widget option to Yes
6. After clicking the Continue button you will be presented with a option to Add the widget to your blog. Select your blog and click the Add Widget button Pro Tip: By default the widget is added to all the pages in your blog including your HomePage. In case you want the widget to only appear in the Post pages then add the following code in the Edit Template option as shown in the image below
7. The widget is installed but you will have to wait around 3-4 hours for OutBrain to index your posts and then only will they start displaying in below your a blog posts. Until then you can customize your widget by going to the Outbrain Dashboard > Manage Blog > Settings ( of the blog )
Enhancements The widget you added gives such a formal and dull look which will in no way interest readers to click on these links. Lets Stylify it a bit using some CSS !
Rounded Edges The square shapes are a bit too standard , lets round things up
The much awaited Google+ Stream Widget for Blogger and other platforms is on the way. It has not been made public yet but there is a working Demo present in one of the Blogger employee's blog which I stumbled upon by chance. Its not ready for a public release yet as the profile thumbnails of users are not working correctly . This widget uses the Blogger API for its implementation but this can be easily integrated into any other platform with a simple Iframe.
As you will observe in first few lines ,it is using the Blogger API for getting the Blog ID and URL . After that a iFrame is included ( Line 47 ) which is the Widget itself.
All Blogger API widgets use IFrames for implementation and this is no different. After a bit of research I came to across a XML file which contained the information about the author of this widget inside Google.
To display your Profile stream , just search for the word userid in the above code , it will look something like this
Just replace the highlighted number above with your Google+ Profile ID
Somethings to Remember
This widget has not been officially released and might experience some unexpected problems. Other than that feel free to ask any problems that you come across while implementing it in your blog/websites.
There has been plenty of buzz lately in the seo community about how social factors are going to take over from links when it comes ranking a website. How true this is we are yet to see but what many people forget is that link building has always been a social activity anyway, that’s because in order to get a good link you have to deal with real people. If you can get a link without a real person approving it in some way then it’s probably worthless since everyone will be exploiting it.
Usually the link building process starts out with some sort of contact with another webmaster and it’s usually in the form of an email. The thing is if a webmaster has a quality site then they probably get hundreds of standard “out of the box” link requests every month all starting with “Dear website owner”. If you can’t say something unique in your contact email then how likely is it that your website has anything worth linking to?
Follow the rules and get results
Many webmasters who do accept guest posts have specific requirements for the content that they will accept, i.e. it may have to be a certain length, on a specific topic or come with photos etc. The point is that whatever they are asking for you need to give them that and more, it’s their site after all and why should they accept less? When you show you’ve spent some time to deliver what’s really required then you can stand above a crowd of hundreds of other requests. My main point is that you want to make it as easy as possible for the target webmaster to put up your link, when there is a quality link at stake its always worth putting in the effort. Every week in the webmaster world there seems to be a new “system” for building automated links and I think this has made the idea of spending a few hours to get one link strange to webmasters.
Many link builders have embraced the concept of sending out thousands of emails to random sites in the hope that just a few people will reply. This has never made sense to me as just a few well targeted contacts to webmasters who are looking for content right now can be much more time and cost effective. For example a great place to find webmasters who want quality content today is myblogguest, here you have webmasters who get the concept already and if you can give them exactly what they want you can have a link up fast. I’ve spent so much time emailing random people and often you spend more time explaining why a link swap/guest post is beneficial to both parties than creating the actual content. Quality over quantity is important when it come to requests as well as the actual link received.
Find people who are active now!
Getting in contact with a real person also lets you know that the blog/site is active and open to the idea of giving you a link. There are so many dead (or dying) sites on the web where any contact made effectively going no-where, you need to filter these places out by looking for the social signals that the webmaster is interested now, i.e. a forum post or facebook status. I have to admit I have quite a few sites I am no longer interested in working on too but this wouldn’t be obvious if you just landed on the homepage.
So as mentioned the right social skills are important with it comes to links as there is always a person in control at the end of any potential request. But if you can give that person exactly what they are looking for then you make the whole process easier for everyone. I hope this article has helped if you’re trying to promote your site online.
This is a guest post by Paul who teaches people how to earn money using the net.
You've got a great perspective on something interesting and your blog is gaining popularity as a result. You're an expert and your writing style is informative and entertaining and people are beginning to talk about what you're doing. The last thing you want to do is partner up with other bloggers, right? Actually, it's a natural step in the evolutionary process of successful blogs.
Using Your Expertise to Build Readership
What if your expertise is helping international travelers understand the visa and customs requirements for their countries of destination? Understanding every requirement for gaining entry into and visiting a foreign country can be confusing for many travelers. It's never presented in plain language and there are frequent questions about the nature of the visit.
Expertise in helping travelers answer their specific questions is valuable to many people. Your blog will be talked about and shared among friends and family, and you’ll see your visitor count increase. But once they've had their questions answered, will they come back? Have you given them any reason to do so?
Joining Forces With Other Bloggers
What if you found a travel writer or journalist with their own successful blog and joined forces? Your joint efforts, through links, shared content, and collaborative articles, will provider travelers with complete information on the policies and procedures as well as what to expect culturally upon arrival at their destination.
Invite readers to come back to the blog to share their travel experiences, which give them the reasons to come back. Repeat traffic from travelers who are inclined to pass along information will only serve to make your combined blog a much more important feel.
What if found an independent travel agent and asked them to become an important part of the new and improved blog? Now you're providing three "hands-on" services to travelers. Direct contact through the blog with a personal travel agent is a real value-add for consumers, paired with the other two services already provided, has created a concierge travel service with a growing and loyal clientele.
Creating natural relationships with other bloggers, the kind that serve as logical extensions of what you're already doing, can serve to expand the reach and importance of your blog in ways not previously considered. Each person you reach has an interest in the information you're providing them, and in any number of other things that may be related. The more people you can reach the more synergy and potential new avenues not even imagined just weeks prior.
Growth through partnering is as old as commerce itself. Be open to opportunities to expand your reach, and at the same time be thinking about ways to get in front of more readers and contributors. The combination could set your apart from your would-be competition.
How has your blog strengthened through partnerships with other bloggers?
About the Author: Lisa is a full time blogger for Satellitetv.com,and is a regular contributor at Celebutaunt.net. When she isn’t blogging, she loves to garden with her cat Oreo.
