How to get a custom username for Facebook

If you have a Facebook page you will have some weirdly big URL that you have to use and share. But if it was shorten and custom it would be 10 times better. It's pretty easy step to do so. Follow the step below and it's very easy and fast.

We will be able to change the URL to something like this.

BEFORE YOU DO ANYTHING

Once you change your page username you will never be able to change it back!

STEP 1

GO to https://www.facebook.com/username

STEP 2

Choose the page you want to select below and write your desire username on the right

STEP 3

Click check availability (be sure to read all the tips) and Confirm it. Your done!

NOTES:

If you have already used your old link of your Facebook page don't worry it will go to the same place!

Enjoy!

Remove borders form your blog image

Removing borders from your blog image is easy. You can do this using different ways. The first tutorial is a very simple CSS code that will change the setting for all the images in your blog to no border. 

Before doing any changes it would be best to backup your actual HTML, although it wouldn't be affected much!

►To remove image border from Blogger blog

1. Go to blogger.com 

2. Click design

3. Go to Template Designer

4. Click on Advanced

5. On the right where it says add custom CSS copy and paste this code

img {border: none}

6. Click Apply to Blog

7. Your done!

   

•  To undo the effect follow the same instruction and delete the code and then click apply to blog

• You can use the same trick and add it in the CSS of your blog to make it no border images.

►Custom No border image Tutorial

Sometimes it is useful to use border in some cause. But for the other cause if you don't want to destroy the border from all the images you can custom change the setting for each image.

Use the following code for your blog in HTML section

Hope that help you out. If you have any question, comment or concerns do so in the comment section below.

Facebook timeline news-get timeline now

Beside fighting with the Google+ the Facebook timeline finally here up close for you. You can very easily get the Facebook timeline using the developers version before but now it's open for pretty much everyone. Many people already got the invitation to get timeline. If you are still waiting for the timeline to officially come you can now check timeline out without doing the creative hack. Just follow the simple instruction to get and set up timeline before it becomes officially default. 

1. Log into Facebook

2. Go to Facebook.com/about/timeline

3. On the right you will see a green button says get timeline

4. You will be taken to your timeline to customize as you want (Only visible to you)

5. You can choose to publish after your done to show the world by clicking publish Now!

Recommended Post Slider Widget for Blogger with Twitter / Facebook share button

In this post I have an awesome new gadget that can be seen Wordpress blogs is now available for Blogger.Recommended post slider in each post is interesting widget.Those of you who follow some Wordpress blogs have seen the recommended or related posts slider.You may have seen this type of widget in many popular websites like The New York Times, Mashable, Times of India, etc.The widget is originally developed by bloggerplugins, i just changed something in the widget.It keeps readers to read more pages of your blog.

How to Install Recommended Post Slider Widget for Blogger with Facebook,Twitter share button



I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

?

+

X

Recommended for you

Loading..

loading

And now click Save



Optionally use this Widget installer to add this link to your blogger blog.


Click the following image to add the widget to your blogger:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style type="text/css">#recslide{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #000;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-6px -5px 5px #aaa; font-family:Arial, Helvetica, sans-serif;}#recslide p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#000; font-weight: bold;}#recslide_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}#recslide a,#recslide a:hover,#recslide_title{text-decoration:none;color:#FE3F10; padding: 5px 5px 5px 2px;}#recslide .close,#recslide .expand,#recslide .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}#recslide .help{right:35px;}#recslide_image{float:left;width:80px;}#recslide_title{width:287px;height:30px;overflow:hidden;}</style><div id="recslide" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p><div id="recslide_image"></div><div id="recslide_title">Loading..</div><center><div id="share_box">loading</div></center></div><script> if(document.location.href.split("/").length==6&&document.location.href.indexOf("/")!=-1){if(typeof bts_onload_queue=='undefined')var bts_onload_queue=[];if(typeof bts_dom_loaded=='boolean')bts_dom_loaded=false;else var bts_dom_loaded=false;if(typeof bts_async_loader!='function'){function bts_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bts_dom_loaded){newcallback()}else bts_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bts_domLoaded!='function')function bts_domLoaded(callback){bts_dom_loaded=true;var len=bts_onload_queue.length;for(var i=0;i<len;i++){bts_onload_queue[i]()}}bts_domLoaded();bts_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bts_async_loader("http://safir85.ucoz.com/bdlab-blogspot/24work/recommended/recommended-Slide-v1.0.js",function(){},"bts-out-slide")},"jQueryjs")}</script>

And now click Save


if you want slide come out whenever you reach the end of post, then follow this instruction:



Adding Recommended post slider widget below posts



I have seen few who are showing the Recommended post slider of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.



I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

or

or

Immediately below any of these, add the following code and save Template:

Now you can see a beautiful Recommended post slider appearing below the posts in your Blog.
































How to Install Recommended Post Slider Widget for Blogger

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

?

+

X

Recommended for you

Loading..

And now click Save



Optionally use this Widget installer to add this link to your blogger blog.


Click the following image to add the widget to your blogger:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf("/")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://safir85.ucoz.com/bdlab-blogspot/24work/recommended/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script>

And now click Save


if you want slide come out whenever you reach the end of post, then follow this instruction:



Adding Recommended post slider widget below posts

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.



Now find (CTRL+F) this code in the template:

or

or

Immediately below any of these, add the following code and save Template:

Now you can see a beautiful Recommended post slider appearing below the posts in your Blog.

Many thanks to breakthesecurity or bloggerplugins for making this code and I just tested and modified to work on blogger

Where to find free images for your blog?

When you write a quality content you need a quality image. Finding free images for your blog is very important to keep your reader focused and to show you how professional you are. Since images says 1000 words it is always best to find the best images for your blog. You can get high quality images for 1/2 $ for a simple use, but getting the photo for free will save your pocket. Only problems with free photos are that they are not very high quality. So without giving you the list of places where you can find free photos here is one site that will give you high quality images and  copyright free.

►Morgue File

It's the place for dead pictures. That means copyright free high quality thousands of images. You can also search for other paid money using dream time. The best thing about this site is that it allows you to embed your picture right from their site. You can also crop the photo as you like and if you wish to give credit you can also do so using their all ready code. If you are unsure about the license click here to check that out.

Instructions:

1.  Go to www.morguefile.com

2.  Write the keyword for the free photos from upper right corner search box and click search

3.  For further search look for the search box on the upper right and be sure the it says "free photos" next to it

4.  Click on the image you want to use

5.  You will see two links, one is for image url and other is for page url

6.  Click on the image url and copy it to use it from their site, or download it by right click and save and upload it to your blog

7.  If you wish to give them credit from step 5 click on the crop and post

8. Crop as much as you need and click finish

9.  You can also see a code now to embed in your site or use the crop version from their website.

-------------------------------------------------------------------------

It's always a good idea to give credit for image if you are not sure to avoid any conflict later on. This website is great because it allows you to use the image link right from their site. If you use blogger or similar site/ host there is a limited amount of MG/GB you can use, so it's always good to use the linking src. If you don't know how to do it, and how you can drive more traffic using the photo you can check out my other tutorial about how to customize your image for blogging to drive more traffic.

-------------------------------------------------------------------------
Photo credit: 3rdworldman from morguefile.com

If you have any questions and concerns be sure to leave a comment below.

Sexy Sliding JavaScript Side Bar Menu Using Mootools

Show- hide, Smooth sliding and sexy. Menu bar with javascript and mootools. This post explains how to add Sexy Sliding JavaScript Side Bar Menu Using Mootools Widget on his blog that looks good on your blogspot blog.Be effective CSS vertical menu with show / hide uses MooTools to show / hide the menu with a vertical slide-in/slide-out nice effect.

About MooTools: "MooTools is a compact, modular, Object-Oriented JavaScript framework designed for intermediate to advanced JavaScript developer. It lets you write powerful, flexible, cross-browser code with its elegant API, well documented and consistent. ".
MooTools Home: Home Mootools.

How to Install Beautiful Sliding JavaScript Side Bar Menu Using Mootools


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..


Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below


4. Now Click On Save 'JavaScript' You are done.

LeftMenu

• Link One


• Link Two


• Link Three


• Link Four

"#">

And now click Save



Note: Keep in mind that before a save above "#" of land and your link Link One, Link Two, Link Three Link Four, and the name of the place you need to do is save.And here is the link I used to have 4, you can link up to 10

Health concerns for blogger-Sitting down

For a average computer person, internet might seem like a heave. For the bloggers who sit on their butts to create the good content for it, I don't know what internet is to them. But I know like many others there is a catch. Not the money trap but health concerns I am talking about. Blogging and creating a successful web space is a hard work. You should always know what your doing and do it well organized. Since life is not just about blogging, be sure to think about your heath. since we can't actually run in-front of the computer. Sitting is the main tool (!) here. But when that goes out of numbers you should know the consequences of that doings. Since internet is all about fast and easy, check out the statics and consequences of sitting on your butt in-front of the computer without telling you what you should do.

Via: Medical Billing And Coding

Auto Scrolling Recent Posts Widget For Blogger / Blogspot

If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your blogspot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget:

How to Install Auto Scrolling Recent Posts Widget



I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

And now click Save





Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size  

ScrollAmount:	(0 = No Scroll)
ScrollDelay:	(0 = MaxScrollSpeed)

You can only modify the code with red color (variables) according to your requirements, for ex. in case of "var w2bScrollDelay", lower the number, higher  the speed.










Watch live Demo

Demo does not works Properly here, But when we add as widget it Works Great!

How to Install This Widget On 'Blogger' ?

1. Customize Options in Given Widget Generator Form
2. Click on Generate Button
3. Click Preview** Button to see your widget Preview
4. Finally Click Add to Blogger Button to add this widget on Your blog

**Note:- After changing any values, First Click Generate Button and then See Your Preview

 Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size 

Automatic scrolling Recent posts widget will give scrolling of post titles with links

This widget has automated MARQUEE Effect will result scrolling titles

And now click Save









Watch live Demo

(Demo does not works properly here, But when we add as widget it Works Great!)

How To Add This Widget :

1. Customize Bellow form and Click on Generate button.



2. And Click Add to Blogger button to add this widget to your blog.

Many thanks to Harish for making this code and I just tested and modified to work on blogger

22+ Google Flag Translate Widget For Blogger / Blogspot

Installing translete on blogs is very necessary because there could be visitors from foreign countries who stray blog you, but that should be taken to ensure that no errors occur then translate your blog must use the official language, not language or slang market.Let your readers easily translate your blog with this highly compact widget. This blog translator is powered by Google Translate. The languages available at the click of a flag are Arabic, Bulgarian, Chinese (simplified and traditional), Croatian, Czech, Danish, Dutch, Finnish, French, German, Greek, Hindi, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Romanian, Russian, Spanish and Swedish.I hope no one could have seen a huge list anywhere. Now This widget gives your readers easily translate your blog.

How to add the Google Translate Widget to your blog:

Blogger


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.


3.Select 'HTML/Javascript' and add the one of code given below


4. Now Click On Save 'JavaScript' You are done.


WordPress

1. Login to your Admin panel > Presentation tab > Widgets tab


2. Paste the code into the Text Widget. If there’s no Text Widget available, add one.

3. Add a title. Ex: Translate, Translate this page, Google Translate (Optional)

4. Save.

Joomla site

1. Login to your Admin panel > Modules – Site Modules > click New


2. Paste the code into the Custom Output content box

3. Adjust module details and menu item links if necessary

4. Click Apply or Save.


...............................................................................



Google Flag Translate Widget For Blogger / Blogspot 01

 


 

 

 

 

 

 
      

 

 

 

 

       
 

   Powered By 
 

Google Flag Translate Widget For Blogger / Blogspot 02

 
 




















































































 

  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 03

http://YOUR_BLOG_ADDRESS" />



   













 




 |  |  |  |  |  |  |







 |  |  |  |  |  |







 |  |  |  |  |  |  |







 |  |  |  |  |  |  |







 |  |  |  |  |  | 
 
Blogspot Tutorial

Google Flag Translate Widget For Blogger / Blogspot 04

Google Translate             Blogspot Tutorial

Google Flag Translate Widget For Blogger / Blogspot 05

Google Translate               Blogspot Tutorial

Google Flag Translate Widget For Blogger / Blogspot 06

Google Translate              Blogspot Tutorial

Google Flag Translate Widget For Blogger / Blogspot 07

Blogspot Tutorial

Google Flag Translate Widget For Blogger / Blogspot 08

 


 

 

 

 

 

 
      

 

 

 

 

       
 
  Blogspot Tutorial

Google Flag Translate Widget For Blogger / Blogspot 09

 


  

  

  

  

  

  

  

 
 

   Powered By Blogspot Tutorial

 

Google Flag Translate Widget For Blogger / Blogspot 010

 

 



 

 



 

 



 

 



 

 



 

 



 

 



 

 



 
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 011

 

 



 

 



 

 



 

 



 

 



 

 



 

 



 

 



 
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 012

 

 



 

 



 

 



 

 



 

 



 

 



 

 



 

 



 
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 013

 

 



 

 



 

 



 

 



 

 



 

 



 

 



 

 



 
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 014

 

 



 

 



 

 



 

 



 

 



 

 



 

 



 

 



 
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 015

 

 



 

 



 

 



 

 



 

 



 

 



 

 



 

 



 
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 016

 

 



 

 



 

 



 

 



 

 



 

 



 

 



 

 



 
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 017

  Chinese








 French








 German








 Italian








 Japanese








 Korean








 Russian








 Spanish





↑ Google Translation 

Google Flag Translate Widget For Blogger / Blogspot 018

↑ Google Translation 

Google Flag Translate Widget For Blogger / Blogspot 019

↑ Google Translation 

Google Flag Translate Widget For Blogger / Blogspot 20

  
 
 
 
  
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 










 
  ↑ Google Translator Widget
  

 

Google Flag Translate Widget For Blogger / Blogspot 021

                       

  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 022

        
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 023

         
  ↑ Google Translator Widget
  

Google Flag Translate Widget For Blogger / Blogspot 24

 Translate this page


  Chinese








 French








 German








 Italian








 Japanese








 Korean








 Russian








 Spanish