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

Related Posts Widget for Blogger


Add a Related Post Widget for Blogger


Hey bloggers! Hope you're running your blogs fine. Today I'm gonna share a simple  related posts widget with you. You know how important it is. A related posts widget can retain your visitors. It helps to increase visitors' engagement with the site. Have you noticed, when you visit a site to know something and get a related post just at the end of that post you also read the related post! 


Let's consider my own case. Few days ago I visited My Blogger Tricks to know something. At the end of the post there were 05 related posts. I've also read one of those related posts. From that post, I discovered another posts which I like! After reading the 03 posts from that site, I've used the search option to find another post. 


And this only happens due to the related posts widget. Instead of one pageview, My Blogger Tricks got at least five pageviews from me. And I spent almost an hour on that site! Can you imagine? One hour instead of five minutes. And this is exactly what Google wants. 


Visitors' Engagement with the Site


And if you're able to satisfy Google, you will get - 
  • Improved Page Rank
  • Improved Search Position
  • More Pageviews
  • Finally, more Ad Revenue

Maybe I'm talking too much about SEO. But this is not my today's topic. Let't back to the related posts widget. All you need to do is just - Add a simple JavaScript to your template. And you will get 05 related posts under each post as the image shows below: 


You May Also Like Widget for Blogger



Adding the Widget to Blogger:
  1. Sign in to your blogger account and go to the dashboard.
  2. Layout > Add a Gadget from the bottom > HTML/ JavaScript Gadget.
  3. Copy the following code and paste it in the Content box.
  4. Save the Widget and View your site.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>


Note: This widget may slow down your site's loading time


Stay with Marks PC Solution to get more interesting IT topics!


Scroll to Top Buttons for Blogger


Scroll to Top Buttons for Blogger
 

After a long time, I'm come with a nice widget for blogger. Maybe you've already got an idea what my today's post is about. From the post title and the image, it is clear enough to guess that you're getting a Scroll to Top script for your blogger blog. I'm gonna share some buttons too. But you can easily replace the default button with your custom image.
Back to top PNG Button for Blogger
This is the default button of the script I'm sharing here. You can view the demo at the bottom right corner of the page. Just scroll down and see the button. Then hit on this to back to the top.  But if you don't like it, or if you wanna use your own button, then you can replace this one. Now follow the procedure below (as simple as adding a JavaScript):
  1. Make sure you're signed in to your blogger account.
  2. Now go to your blogger Dashboard or Control Panel or whatever you call it.
  3. Go to the Layout, and hit on the Add a Gadget button from anywhere.
  4. Choose HTML/ JavaScript gadget.
  5. Copy the following code and paste it in the Content box.
  6. Now Save the gadget and View your site!
<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);
return false})});</script><a href="http://munnamark.blogspot.com">
</a><a id='noop-top' style='display: none; position: fixed; 
bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='http://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png'/>

There are many codes available throughout the web to add Back to Top button. Almost all of these will ask you manually edit your HTML. But this one very simple just like adding a gadget nothing else. 



Scroll to Top Button

Scroll to Top Button

Back to Top Button

Back to Top Button

Scroll to Top Button

Smooth Scroll to Top Button

Using Custom Image:
At the beginning of this post, I mentioned, you can use your custom image with this script. Look at the blue part of the code. This is actually the link of the button where it is uploaded. If you have any button of your own, then simply replace the blue part of the code with your button image URL (You must need to upload the button image to the server) .  That's all.


Tips:

There are six buttons I've prepared for you. If you wanna use any of them, simply click make a right click on any of them. Copy the image URL. I'm showing you the sample of second one below:

http://1.bp.blogspot.com/-tpi8yVRlUWk/UmIMGsJ8nGI/AAAAAAAAAGU/ls6u-3tkyl8/s1600/Top+2.png

Thus you can find the link of other buttons. Just click right button your mouse over the button you like, then copy the image URL. To make sure whether this is the right URL, paste it in a new tab of your browser to check whether the image is alright.


Remember, sometimes an image may got two links or URLs. One is Image URL and the other is Link URL. You should copy the image URL, not the Link URL. It also depends on your browser sometimes. For exaple, Internet Explorer will only let you copy the link URL. It shows - Copy shortcut. 


Caution:

While replacing the default button with your own you should  be careful enough:

  • Upload the image to a server which is fast and responsive
  • Never try to shorten the URL
  • Try to use the PNG format
  • Keep the image size as minimum as possible (But not at the cost of quality)
  • Don't try to replace any other part of the code if you don't have sufficient coding knowledge


Add Total Posts & Comments Widget in Blogger



How to show total number of posts and comments widget in blogger blog


Hello Guys! Hope you all are fine. Today I have come with another post for bloggers! You know there are many tips and tricks published for bloggers. You will find them in the blogging category. And several times I have also discussed about adding attractive widgets in blogs. Today I'm gonna share another one with you- Total Posts & Comments Widget.


Adding this code is very easy. All you need is just to add an HTML/ JavaScript Gadget in your site. And before that you must decide where you will place this gadget. It maybe at the bottom, or maybe at the right pane (if any) of your site. Or if your site has any page views/  hit counter then you can place it just before that counter. 

Okay let's start: 
  1. Don't forget to sign in your blogger account. Then go to the blogger control panel I mean design or dashboard. 
  2. Go to the Layout option from the left side. 
  3. There you will find several Add a Gadget options. Select one that is suitable for you. 
  4. Find and select HTML/ JavaScript Gadget. (Usually found at the 11th position)
  5. Now copy and paste the code below in the Content box.
  6. Hit the Save button and rearrange the widget by dragging through by mouse if necessary. 
  7. That's it! View your site to check. 
<script>function mbhTotalCount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><div style="font: 15px Georgia;">
Total Posts: <script src="http://www.markspcsolution.com/feeds/posts/default?alt=json-in-script&amp;callback=mbhTotalCount"></script></div>
<div style="font: 15px Georgia;">
Total Comments: <script src="http://www.markspcsolution.com/feeds/comments/default?alt=json-in-script&amp;callback=mbhTotalCount"></script></div>

Just replace my URL (red part) with yours. 

And also look at the Demo below. This is exactly what you will get in your site after adding the above code in your template. 

Total Posts:
Total Comments:


Stay with Marks PC Solution to get more interesting IT topics!



Show your Recent Blog Posts as Headline !!








Recent posts widget can increase your page views to a great extent. When someone is on your blog and reading a topic he may find another topic useful from recent post list. So adding a recent posts widget is also important for attracting readers to stay long in your site. 

But there maybe many other widgets in your blog. And adding too much widget is boring and it also looks odd. 

Today I'm gonna share a code with you. This code will show your recent posts as headline! And certainly it will be space effective. It will take space just as a single line. All you need to do, is just add an HTML/ JavaScript gadget at the top of your site. 

  1. First, sign in to your blogger account and go to design.
  2. Then hit on layout button from the left pane.
  3. Click on Add a Gadget (Select gadget from top).
  4. Choose HTML/ JavaScript.
  5. Now copy and paste the following code into the content box.
  6. Now save the gadget and view your blog.

<script style="text/javascript" src="https://sites.google.com/site/munnamark/test/Recent%20Post%20Headline%20Widget.js?attredirects=0&d=1"> </script><script style="text/javascript"> var nMaxPosts = 7; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="S"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://munnamark.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script><span style="font-size: 55%;" > <a target = "_blank" http://munnamark.blogspot.com/2012/11/show-your-recent-blog-posts-as-headline.html " >Get this Widget</a>


Remember, here I used my blog link. You must change the red part of the code with your blog name. And just change the red part. Nothing else.



Customization: You can also customize the code as below.


  • Max Posts = 7. That means how many posts will be shown. You can change this as 5, 6 or more.
  • Scroll Delay = 175. If you write 100, it will increase the speed. And if you wanna make it slower then use more than 175.
  • Direction = Left. That means your post will be moved from right to left. You can also use right. 


Stay with Marks PC Solution to get more interesting IT topics!