Subscribe:

Nepali_Funnn chatroom

Saturday, December 15, 2012


A Simple Dock Menu (FishEye Menu) For BlogSpot Blogs

Similar to the previous dock menu, explained a few weeks back, here is another great widget for your blogspot blogs (will work in blogs based on any other platform too).
A fisheye-menu/dock menu is a menu with pictorial menu items which zoom on mouse-hover, and are linked to different web pages.


Check out the widget in action: Fish Eye Menu

As positioning the previous widget was somewhat confusing for most of the bloggers, so I found this one at MarcGrabanski, which can easily be placed at any location in the blog with simple HTML widgets.

Remember to subscribe to this blog, for more such great widgets and hacks.

Follow these instructions, to add this widget:

STEP1:
Download these two files as a zipped file:
fisheye.js
fisheye-menu.css

Download the zipped file.

STEP2:
Upload the files to MyDataNest (you have to register before uploading the files)
Now copy the DIRECT LINKS to the two files.

STEP3: 
Log in to Blogger, go to Layout -> Edit HTML
and find (CTRL+F) this in the template code:

</head>
Now immediately ABOVE/BEFORE it, paste this code:

<!--FISHMENU-STARTS-->
<link rel="stylesheet" type="text/css" href="http://mdn.fm/files/18...._x.....3s/fisheye-menu.css" />
<script src="http://mdn.fm/files/18..._....2v/fisheye.js" type='text/javascript'></script>
<!--FISHMENU-STOPS-http://bloggerstop.net-->
Replace the links in RED with the DIRECT LINKS you got from the previous step.
Now save the template.

Then go to Layout -> Page Elements, and click on "Add a Gadget" and select it as "HTML/JavaScript" type.
Then paste this code in to the widget:

<ul id="fisheye_menu">
<li><a href="http://google.com"><img src="http://mdn.fm/files/.........../icon.gif" alt="image description" /><span>Icon 1</span></a></li>
<li><a href="http://bloggerstop.net"><img src="http://mdn.fm/files/....../icon2.gif" alt="image description" /><span>Icon 2</span></a></li>
<li><a href="#3"><img src="http://mdn.fm/files/....................../icon.gif" alt="image description" /><span>Icon 3</span></a></li>
<li><a href="#4"><img src="http://mdn.fm/files/...................../icon2.gif" alt="image description" /><span>Icon 4</span></a></li>
<li><a href="#5"><img src="http://mdn.fm/files/....................../icon.gif" alt="image description" /><span>Icon 5</span></a></li>
<li><a href="#6"><img src="http://mdn.fm/files/....................../icon2.gif" alt="image description" /><span>Icon 6</span></a></li>
</ul>

Instead of the links in BLUE, use your own image links.
And finally save the widget and drag it to the position you want.
Posted by Unknown at 12:26 AM 8 comments

Friday, December 14, 2012


How to Add Facebook Comment Box to Blogger Blogs

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This
Bloggers that wish to be successful in their blogging career cannot separate their blog from Facebook since it is one of the top channels to increase blog traffic.

Facebook-Comment-Box-For-Blogger

Facebook comment box is a useful tool for bloggers to increase & improve conversations and drive more traffic since the post commented on by your blog visitors will be shown on the visitor’s wall on Facebook.

Today, I want to share a simple process that will enable bloggers to add Facebook Comment box to their blogs without any ado.

How to Apply Facebook Comment Box on Blogger Blog


Step:1 ==> Create a Facebook App ID

1. You need a Facebook App Id. Go to Facebook Developers Page to create one.

2. Click on "+ Create New App" a window will pop out, so enter your blog Name and click on "Continue" as shown in the image below:
add-facebook-comment-box-to-blogger

3. A new app id will be given to you like the one you're seeing below, so note down your APP ID.
Facebook-comments-widget-blogger

Step:2 ==> Add Comment Box Code To Blog Templates

1. Go to your Dashboard >> Templates >> Edit HTML and  Expand Widget Templates checkbox.

2.Use CTRL + F key on your computer keyboard to search for <html and replace it with the code below.
<html xmlns:fb='http://www.facebook.com/2008/fbml'

3. Search for <body> tag in you template and add the code below after it.
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>

4. Replace YOUR_APP_ID with the App ID you note in Step 1 above.

5. Search for </head> tag and add the open graph meta tags below above the </head> tag
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='Just Naira' property='og:site_name'/> 
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/> 
<meta content='YOUR_APP_ID' property='fb:app_id'/> 
<meta content='http://www.facebook.com/justnaira' property='fb:admins'/> 
<meta content='article' property='og:type'/>

Now Make the Following Changes on the Code above:
Replace Just Naira with your blog name.
Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
Replace YOUR_APP_ID with your app id.
Replace http://www.facebook.com/justnaira with your Facebook page url.

6. Search for the any of these tag:
<p class='post-footer-line post-footer-line-3'>
or
<div class='post-footer-line post-footer-line-3'>
or
<data:post.body/>
Add the code below after any of the tags above and save your template.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> 
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div> 
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px;'>Facebook Blogger Plugin by <b><a alt='blogger templates' href='http://www.justnaira.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>JustNaira.com</a></b> | <b><a alt='Facebook-Comment-Box-widgets' href='http://www.justnaira.com/2012/07/how-to-add-facebook-comment-box-to.html' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Get Widget</a></b></div></div> 
</b:if>
  •  If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'

You can keep Facebook Comment box and Blogger default comment box. But in case you want to make Facebook comment box your default comment box, go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.


Posted by Unknown at 11:23 PM 0 comments
hi all
Posted by Unknown at 10:46 PM 0 comments
Subscribe to: Posts (Atom)

Pages - Menu

Pengikut

Search This Blog