Asian Collection

Confirming Facebook Group Membership Request At Once

<div dir="ltr" style="text-align: left;" trbidi="on">
If you have a popular Facebook group where you receive hundreds of membership requests then it becomes a tough job to accept all of them one by one. 
 
You may already know about the "Select All Friends" code using which you can select all your friends to invite them to a Facebook event. We covered that topic in this post: 
 
Facebook now provides a new "Add All" function for confirming all group membership requests at once, so there's no need to use this trick/code. 
 
I wanted to post less on Facebook's topic but as you know it's a hot topic so one in a month is not a big problem. 
 
Anyways, let's get back to the main topic, how would you accept multiple group requests at once. Actually you can disable the approval system for group request but that will enable everyone to join the group, fake and spam profiles too. Such profiles don't target groups with approval system turned-on. 
How do you do that ? 
 
The trick is to manipulate clicks on selected buttons using JavaScript. JavaScript is webpage scripting language and you can manipulated static pages by running scripts. 
But to run the script you have to open the Developer Tools in your browser, it's not present in old and even some new browsers. I recommend Chrome, Safari or Mozilla - the latest version. 
Code 
Update: Facebook recently changed the layout of it's group membership request page, so the old code stopped working. I have updated the code which works with the current site. Thanks to A Suzy Meow for informing us about this change. 
 
Copy this small code : 
 
javascript:var cont = document.getElementById('Group_member_request_pagelet'); 
var ul = cont.childNodes[0]; 
var li = ul.getElementsByTagName('li'); // iterate on this 
 
for (var i = 0; i < li.length; i++) { 
var btnCont = li[i].getElementsByClassName('rfloat'); 
var ancHors = btnCont[0].getElementsByTagName('a'); 
ancHors[0].click(); // make the click 
} 
 
The code tells the browser click on the "Add" button next to each item (membership request item) in the list. 
 
 
How to use the code? 
For a person not familiar with scripting consoles, it might be tough for them to run the code. I wrote a step-by-step tutorial to make it easy for you : 
Open the membership request page of the group in a modern web browser (Chrome, Firefox or Safari) 
To open script console on different browsers : 
Google Chrome - press CTRL+SHIFT+J 
Mozilla Firefox - press CTRL+SHIFT+K 
Apple Safari - press CTRL + ALT + I and when the developer tools appear, press ESC or click "Show Console" button to bring up the Console window 
 
 
 
If you still didn't understand how to use the console, this article has more for you to learn and understand how to use Developer Tools Console. 
Once you have opened the Console in your browser, paste the JavaScript code (provided above) and hit enter. When you paste the code inside the console it would look like this (The code you must enter is not the same as shown in the picture) :  
 
 
 
Just hit enter and the code will start doing it's job. It will automatically click on every "Confirm" button one-by-one on the group membership approval page until the number of buttons becomes 0.  
This was it, this small block of code can save you a lot of clicks and time. That's what code are for, to make the users life easier.  But depending on the number of request it may take some time to complete its job, leave the page opened and it will keep doing its job.  
 
This code is very similar to the code to select multiple friends at once for Facebook events but with a little modification it works like a charm on  membership confirmation.  
For any queries use the comment form below :) And thanks for reading.</div>

Confirming Facebook Group Membership Request At Once

If you have a popular Facebook group where you receive hundreds of membership requests then it becomes a tough job to accept all of them on...

Creativeness with Box-Shadow CSS Property

<div dir="ltr" style="text-align: left;" trbidi="on">
Web technologies like HTML and CSS have come a long way and now it is now used more than just creating simple web pages. 
Almost every site you see on the web is writing in HTML and styled with CSS and those languages are way very simple than complex languages like ActionScript or C++, but despite of its simplicity it can be used to create masterpiece. 
 
Following two examples shows what todays web technologies can be used for. What we really showcase here is the use of box-shadow CSS property which is usually used to create shadows on HTML elements <-- Just like on this. 
 
The people who wrote the property's specification may have never thought what it can be used to create. Let's take a look at the amazing. 
 
Mona Lisa in Pure CSS 
One of the most discussed and popular portrait now re-created in CSS. CSS as you know is the styling language of the web, the thing using which you  make your website fancy :) 
See it in action! 
 
 
Mona Lisa Painting Recreated in CSS3's Box-Shadow 
Now one may think why this is so special, a little experienced Photoshop guy can make that in minutes but note that this is done using a CSS property called box-shadow , the designer who created this wrote each and every pixel of the complete photo to produce this. 
Da Vinci would have loved this.. 
Unicode Person Pixel Art in Box-Shadow 
How about something simple ? As being a 90's gamer I always had a love for pixel arts and this caught my example: 
 
Unicode Person Example 
 
This simple image of a cute face raising hands is also created with the same technology that was used to create the 'Mona Lisa' example. And do I need to repeat it ? It's created in box shadow!</div>

Creativeness with Box-Shadow CSS Property

Web technologies like HTML and CSS have come a long way and now it is now used more than just creating simple web pages. Almost every site...

Expandable Section in your Post on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Did you ever wanted to have sections inside your post body which is optional for the reader to read or see ? 
 
In some cases you might feel need for a section of your article to be hidden and only visible when the readers wants it to be. But in basic option we get in Blogger or any other WYSIWG editor this is not possible. But wait, it doesn't mean it can't be done. 
 
Before you proceed to the tutorial, check this demo : 
Expandable Section Demo 
 
There's nothing special, it just a hide/show box inside which you can put content of your choice. It's not something that everyone might need for their blog posts but when you need it isn't easy to find easy-to-follow instruction on the Internet so I decided to create such a box and put up its instructions for blogger. 
Let's start 
 
This tutorial requires you to work with codes, here work means just copying-pasting and editing some parts of the code. So it will be easier for you to work if you open a plain text editor like Notepad. 
Including the jQuery Library 
This step is optional, you might not need to perform this step if your template already has a jQuery library included. If you are using a custom designed template, as your web dev. if they've already added it. If not you may continue with the steps 
 
Go to your Blogger Dashboard -> Template -> Edit HTML 
When inside the code box press CTRL+F to open a search box 
Search for </head> in the template 
Once you find it in the template, paste the following code immediately above </head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
That is how you add jQuery to your blog. 
Always remember to add the jQuery script code above any script (including the one I am going to provide for this widget) in the template depends on jQuery. 
JavaScript/jQuery Code 
The first thing you will add in the template to make our expandable section work is the code that handles it hiding and showing. It's a small jQuery dependent JavaScript code. Following is the code you need : 
 
<script type='text/javascript'> 
$(document).ready(function(){ 
$(".sh-section-btn").on("click",function(){ 
$(this).parent().children(".h-section-cont").slideToggle(200); 
}); 
}); 
</script> 
 
The code above simply tells the browser to show hidden content if the "show" button is clicked, and if the content box is already visible it simply hides. 
 
To apply this code go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F to find </body> and paste the JavaScript code immediately above/before it and save. 
 
Adding the CSS 
The event handling part is done. Now let's style our expendable box so that it looks good and the reader notices it.  Here's the CSS that styles the complete box. 
 
/* Expandable Box CSS */ 
 
.hidden-section-container { 
  background-color:rgba(187, 187, 187, 0.93); 
  box-shadow:0 2px 10px rgba(0,0,0,0.2); 
} 
 
.sh-section-btn { 
  font-size:18px; 
  color:#fff; 
  text-shadow:1px 1px 0px rgba(0,0,0,0.2); 
  padding:5px 10px; 
  cursor:pointer; 
} 
 
.h-section-cont { 
 padding:10px 10px; 
 background-color:#eee; 
 display:none; 
} 
 
If you aren't sure how to add this CSS to your Blog, check my tutorial on adding CSS in blogger. 
 
HTML for the box 
After we've got the two main things for this box we can now actually use it in our blog posts. Using it is simple. The HTML for box may contain your text or any other content you want inside it. But before we add the content let's see what's the basic HTML for this box. 
 
<div class='hidden-section-container'> 
  <div class='sh-section-btn'>Show</div> 
  <div class='h-section-cont shw-box'> 
     
    
     All your content here 
    
     
  </div> 
</div> 
 
You don't need to make much changes to this. All you need to change is the title and the content. Let's see how you will do it : 
 
Title Text - This is the text that will appear as the title of that expandable box. See the second line of the code. Change the text "Show" to anything you want as the title. 
Content - After the line 4 you can add anything possible with HTML inside the hidden box. Add text, images, links etc. using its HTML markup. 
Once your HTML for the expandable box is ready you are all set to put it in your post body. But you can't simply paste HTML code in your post editor. In order to prevent the HTML from being shown just as plain text you will first need to switch to the HTML mode in the post editor. 
 
Open your Post Editor, now select the HTML tab next to the 'Compose' tab to switch to HTML mode. Now you can paste your code anywhere you want the box to appear. 
 
This is how simple it is to get such cool features in Blogger. If you face any difficulty while implementing this widget feel free to comment here or email me for help.</div>

Expandable Section in your Post on Blogger

Did you ever wanted to have sections inside your post body which is optional for the reader to read or see ? In some cases you might feel...

Hiding Newer - Older Post Links Below Posts in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
The older - new post links or blog pager links are one of the most basic part of a blog. It provides an easy access to other blog posts on the blog. If you want to remove it then continue reading the tutorial. 
 
In this short tutorial you will learn how to control the display of the three links below each posts called Blog pager (Newer - Older Post and Home link). 
 
There can be many reasons you want the the Newer - Older post links to be removed from your blog. One can be that you are using your blog for just a single paged blog and in that case any blog pager links are not necessary. 
Hiding it with CSS 
 
The blog pager has three links Newer Post, Home and Older Post, if you want to remove only a specific link(s) I have provided the code for that too. Let's start with the code to hide the all the three links. 
 
To learn how to add the CSS codes in your template, see this tutorial: 
How to add CSS to Blogger 
Hiding All Three Links 
Hiding elements on web pages is not a rocket science, all you need is a small snippet of code. To hide the pager links we need this a one line CSS code 
#blog-pager {display:none;} 
 
Hide the 'Newer Post' link 
To hide just the "Newer Post" link in the blog pager use the following CSS code 
#blog-pager-newer-link {display:none;} 
 
Hide the 'Home' link 
Using this code will hide the Home link in the blog pager 
#blog-pager .home-link {display:none;} 
 
Hide the 'Old Post' link 
And use this for hiding the "Older Post" link 
#blog-pager-older-link {display:none;} 
 
A little note.. 
 
Using CSS to hide these links wouldn't remove the links from the HTML document but it will simply hide it from view, this is easier than and safer than removing it from the root. But if you still want to entirely remove it then try this</div>

Hiding Newer - Older Post Links Below Posts in Blogger

The older - new post links or blog pager links are one of the most basic part of a blog. It provides an easy access to other blog posts on ...

Changes to Files not Immediately Applied on WordPress Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
A few days ago I got a project to setup a WordPress blog on the client's website. Most of my work included editing and adding codes to re-design the look of the blog, so editing, saving and viewing is a normal process. But I found a issue of changes not updating on site immediately after I updated the files.  
 
I have worked on WordPress many times, but this project required me to work in a different environment, by different environment I mean editing theme and other PHP files only through the WordPress interface and the Web Host was Yahoo which still provides a quite older version of WordPress for their customers. 
 
As the primary job was designing the blog I had to edit and reload the blog page to see the changes on the live blog. Many times the changes didn't appear immediately on the blog, especially the header.php and other page template files. 
 
While I was working on it, I didn't had much problem because of this issue but when the client tried checking the changes I made they complained about the blog not updating. I thought it was a problem with the web host but the actually cause of the problem turned out to be something else. 
 
WP-Cache is what causing the problem 
 
I didn't even think about it. I knew there were cache plugins for WordPress but my mind never focused on it. After exchanging messages with the client he sent me a link to a forum where the cause of the problem was mentioned and it was WP-Cache plugin.  
 
Fixing it is easier than you may expect, just login to your WordPress Dashboard -> Settings -> WP-Cache 
 
 
When you are in the settings page for WP-Cache plugin, click the "Disable it" button to disable the plugin.  
 
Once you disable the plugin, any changes you make to your WordPress files will be immediately applied to the live site. That's a good idea when you are working on a re-design and you need to preview your changes again and again. 
 
If it's not WP-cache.. 
 
If you don't have WP-cache plugin for your site then something else or other cache plugin is causing the problem. Look for other cache plugin for your WordPress blog, you will find all your plugins in the Plugins tab. If you find one then just disable it to solve the problem. 
 
If it's not even a plugin then you might need more help with your blog's technical details, so it's a good idea to try WordPress Support Forum. 
<div>
 </div>
</div>

Changes to Files not Immediately Applied on WordPress Blog

A few days ago I got a project to setup a WordPress blog on the client's website. Most of my work included editing and adding codes to ...

How to Open Developer Tools in Different Browsers

<div dir="ltr" style="text-align: left;" trbidi="on">
Developer tools or shortened DevTools are set of tools used for debugging web pages which is important tool for web developers and also general users who wants to inspect a page, make changes to the site on the front-end or analyse network usage by the webpage. 
 
It is a all-in-one tool for a person who wants to learn what happening behind the scenes of a website. If you are new to it you may want to learn about, I wrote a post about using Chrome Developer Tools but if you need a more brief information about it see this 
https://developers.google.com/chrome-developer-tools/ 
 
Chrome and Safari's developer tools are very much the same. But Mozilla Firefox has it's own unique developer tool set but using it is almost same as using any other developer tool. 
Google Chrome 
 
Google Chrome in my opinion is the best browser for web debugging using DevTools. DevTools are frequently updated and are simple to use. 
Starting DevTools on Chrome 
Starting DevTools on any webpage is very easy. There are three ways to open the console : 
 
1. Select the Chrome Menu  > Tools > Developer Tools 
 
2. Right click on a blank area of the page and from the list of options click on "Inspect Element" at the bottom. To inspect a particular element right click on the element and then select the inspect element option. 
 
3. Another way to open the console is keyboard shortcut. Press Ctrl+Shift+I (Cmd+Shift+I on Mac) and the developer tools will appear. 
 
 
 
Starting JavaScript Console in DevTools 
JavaScript Console is used to run JavaScript codes on a page. It's often used to test scripts on a website to check if the code works well or not. But you can use it as a calculator or just try out JavaScript functions using it. 
To directly open the JavaScript Console select the Chrome Menu  > Tools > JavaScript console or use the keyboard shortcut Ctrl+Shift+J (Cmd+Shift+J on Mac). 
 
When the Developer Tool is opened select the "Console" tab on top to switch to JavaScript console. 
Mozilla Firefox 
 
If you are using Firefox make sure you have the latest version, as older versions don't include developer tools or if they do, they are old. Developer tools of new Firefox is way better than the older version and got some extra tools too. 
Starting Developer Tools on Firefox 
You can it by various ways. The most common way is to open it using Inspect Element option. Right click on a blank area on the web page and from the list options select "Inspect Element", the Firefox Developers tools will open. 
 
Or if you can open it by going to the Tools menu > Web Developer > Inspector, this will open the developer tool in page inspector mode. 
Opening JavaScript Console 
Accessing JavaScript console in Firefox is similar to opening the page inspector. Open the Developer tools by right clicking on a blank area and then selecting the Inspect Element option. Now just switch to the "Console" tag on top of the dev. tools. 
 
Or you can also open it through the tools menu. Click on Tools > Web Developer > Web Console or use the keyboard shortcut CTRL+SHIFT+K. 
 
 
 
 
Apple Safari 
 
Accessing developer tools on Safari is similar to as in Chrome. Some keyboards shortcuts might be different. Simply right click anywhere on the page and press Inspect element.</div>

How to Open Developer Tools in Different Browsers

Developer tools or shortened DevTools are set of tools used for debugging web pages which is important tool for web developers and also gen...

Encrypt Your Personal Details with JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on">
When you have a lot of online accounts to handle and don't have enough time to memorize all the passwords it becomes an annoying problem. What if you could save your passwords and other details in a simple text file on your PC ? 
 
That makes sense but if your PC is accessible to others it is not a good idea to explicitly save your personal account details in a text file available to every user on your PC.  
 
There are many other ways to keep your account credentials safe on your computer but they are often a folder password software or something like that, but it is a waste of time and most of the times those software are malware itself. 
 
Another option is using an encryption/decryption software on your PC but you won't be able to decrypt your details if you don't have that particular software on the other PC too. Say you downloaded the encrypted file from your Dropbox on a public PC, now to decrypt it you need to install an extra software on it, and it's not a good idea though.    
Let's Start Encrypting/Decrypting 
 
There's an inbuilt encode and decode function in JavaScript that takes in an string and output the result. The function we are talking about are btoa and atob, in JavaScript these functions are generally used for transmission of data that may cause communication problems. 
 
But I found another use of these functions and when I found myself saving my account details on my PC accessible to anyone. I then used those function to encode the details, save it in a text file and when I needed it I used the decode function. 
Open the JavaScript Console 
First we need to open the Developer Tools with JS Console in the browser. If you want to learn how to open developer tools in different browser check this tutorial.  
http://www.stramaxon.com/2013/10/developer-tools-in-browser.html 
 
If you don't want to read that tutorial then just use these keyboard shortcuts to open JavaScript console on your browser : 
Chrome - CTRL+SHIFT+J (CMD+SHIFT+J on Mac) 
Mozilla Firefox - CTRL+SHIFT+K 
Encode it first 
Finally when we have the Console open, we are ready to use it for encoding any text we like. The function that encodes any text is btoa("Text you want to encode") if you run this in your Console it will output this VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU= . 
 
We now know what the function does now see how can you use it 
? 
1 
btoa("Something here"); 
 
The text between the parentheses and double quotes is the text you are encoding so replace it with your personal details you want to encode and once you run it the console will return the encoded version of it, now you can save that text in your file and no one be able to read it (if you don't have any geek or programmer kind of people near you, can be worry free). 
 
Here's a screenshot  
 
 
 
Time to Decode 
Encoding is of no use if you can't decode it for later use. As btoa() encodes a string similarly atob() decodes the encoded text. 
 
Try running this code in your open JavaScript Console 
 
atob("VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU="); 
 
This will output "Text you want to encode". You use this function in the same way but you just need to pass encoded data in the parentheses. 
 
 
 
Tip: If you want extra protection, you can encoded the encoded data too but you also need to decode it the times you encoded it. 
Bonus Tool! 
 
Even before writing this article I had written a small JavaScript tool you can use to encode/decode data without worrying about the Console and function codes. Click the link below and start using it.</div>

Encrypt Your Personal Details with JavaScript

When you have a lot of online accounts to handle and don't have enough time to memorize all the passwords it becomes an annoying proble...

Easiest Way to Earn Money for Freelance Web Designers

<div dir="ltr" style="text-align: left;" trbidi="on">
If you have just entered the world of web designing it will be difficult for you to find work to earn some bucks but don't get disappointed, we have found a great way for you to earn money with your web design skills. 
 
Internet is a great place use your web design skills and earn money from it, but finding clients is not easy as it seems. You can find a job in some local IT company etc. or start working as a freelance. Both have their own pros and cons. But if you are a person who wants to earn money fast by doing the work you like then Freelancing is the option for you. 
 
 
 
It might be difficult for you find clients and projects on your own but if you are ready to work as a freelance then Freelance.com is a great start-point for your web design career. Unlike other outsourcing programs it doesn't require you to have years of experience in the area you want to work in. 
 
If you are willing to work then you can start earning 100s of dollars in less than a week. Freelancer.com is a platform for both small business and entrepreneurs. The site has more than 9 Million users which makes it a great Freelancing platform. 
 
It will take not more than 10 minutes to setup your profile and after that you will be able to bid on projects and take part in contests. 
 
Not just web designing, from Data Entry to T-Shirt designing, it's got a large number of areas of work.</div>

Easiest Way to Earn Money for Freelance Web Designers

If you have just entered the world of web designing it will be difficult for you to find work to earn some bucks but don't get disappoi...

Add A New Year Background Image to your Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
New year is just hours away and everyone is getting prepared wish new year to their friends and family. If you run a blog it would be a good idea to celebrate new year with your readers by changing its look a bit. 
 
This new year eve, add a bit of code in your blog to wish your blog readers a happy new year. We just add a view lines of code to set a new background image with a happy new year message on your blog. 
 
It's almost 2014, so without much blah blahs, following are the wallpaper's preview and the code you need to add : 
 
 
1. Dark Brown Wallpaper 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYmAglhKQ0gm9VBSZ1O6Hb6ajCmhJ3Mv4EussI2P-DdByi9n9wmsq0zAN6NCd4C3vquLaw1F8gvxl8FB_1TJ0dTAcijIcLb8k2ZfdA2N9P37XHGLTs-oxNi2KF9j-UFv6I7TgjAnjiNRg/s1600/1059-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed;  
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
 
 
 
2. Background with Fireworks 
 
 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxM6_HI-K-_s6KyzxA8xPaIgMnfgVPVveoavdD_dc0MALs1SE-5BavL_sQzqLbJWbPkMJ7aDI4ZWm6-69HBqz6OZx4d5LNGw0LqvvmoKdfYRvLqRDdEQxKE9w3gPk1Rge4lidui2DtGG1/s1600/1961-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed;  
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
 
 
3. Purple Background 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsb2hsg90B1Us91_0f9g3WqXI1Qg4mlLFI1c9qKsCY5U_GTkge2KebHOHSjfPW4nm6zfOSE2MNWqsBSz_emM9OJPlGU1VjhG3lBixOzAi-ykctB8J1SqAXiyC8SMRKj_dMmeox4uDuYnAb/s1600/2084-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed;  
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
 
4. Classic Gold Shine 
 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxfTC7b9Etwp_pWHu0jZebpD0CtN9tHr0EuNY7U9_rQN_7hv85F1CZ21gwz6zt2WnP3LQcYFQntmYp5BlDorFx-Gqfu6Rm08lMqpotthRJJ8Mm2K6AV2HRYd4TqC0z8i9XUfbpkMNn-AL/s1600/2085-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed !important;  
-webkit-background-size: cover !important; 
-moz-background-size: cover !important; 
-o-background-size: cover !important; 
background-size: cover !important; 
} 
 
Add the code 
 
Once you've chosen a background image that suits with your blog you are ready to apply its code on your blog. To do it, copy the code. 
 
Now go to your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Now paste the CSS code in the text area in the "Add CSS" tab and save it by clicking the "Apply to Blog" button.</div>

Add A New Year Background Image to your Blog

New year is just hours away and everyone is getting prepared wish new year to their friends and family. If you run a blog it would be a goo...

How to add CSS to your blogger blog

<div dir="ltr" style="text-align: left;" trbidi="on">
In this tutorial you will learn how to add custom styles to your blog with CSS on Blogger. 
CSS is plays an important role in presentation of a blog or website. In Blogger users are allowed to style their blog, but if you are new to Blogger or just don't know about CSS and HTML you might find it difficult to find the right way to do it. So how do you add your custom CSS in Blogger? You will get the answer in this tutorial, for you to understand it better I have also included screenshots. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1s08sF2CNKo3JypgI5oOdYPuWeb7s5iA5SHFWAt_TFBkskwA4nCJnP12phX7dkUBL8dH2XuN9LRGDKvi8f4Uusnzy8stVvqnBsBloJ2kr0LZ9S38m0be0MtEmuIZEU5UTQv1ymRnkFA/s1600/template-editor-new-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1s08sF2CNKo3JypgI5oOdYPuWeb7s5iA5SHFWAt_TFBkskwA4nCJnP12phX7dkUBL8dH2XuN9LRGDKvi8f4Uusnzy8stVvqnBsBloJ2kr0LZ9S38m0be0MtEmuIZEU5UTQv1ymRnkFA/s320/template-editor-new-blogger.png" width="320" /></a></div>
 
There are two ways to add CSS to your blog template. I prefer to use te hEdit HTML mode, it's good for professional web designer, and I suggest to use basic Add CSS option in blogger for peoples who are new to web. 
 
There are two ways to add CSS codes to your blog template. One is using the HTML template editor where you can put the code according to your needs anywhere in the document. And other is to use 'Add CSS' GUI option provided in the visual template designer. 
 
For general users I suggest the Add CSS option as it doesn't require code editing and all, but in some cases you might need more control on how you want that CSS to be loaded (for example, if you want to load a CSS only on item pages) in such cases using the HTML Template editor is the only choice. 
Using Add CSS in Template Designer 
 
Blogger have included an Add CSS option, where you can just copy and paste the CSS styles code and it will be applied to the template. Let's see where's that option. 
 
Blogger has a rich set of template designing tool that you can use to change colors, fonts and layout of your blog without writing even a line of code. The template designer also allows you to define your own styles using CSS to apply on the blog. To access that option follow the instruction below : 
Go to your Blogger dashboard at http://www.blogger.com/home 
Now select the blog from the list (if you have multiple) and go the its Template tab on the left pane. 
 
 
 
On the Template tab, click on the button that says "Customize" and you will be taken to the Template Designer page 
Select the Advance tab from the list of options on left pane and from the sub-menu list select Add CSS, it's at very bottom. 
 
add css option template designer 
Now in right pane, there will be an input area where you can paste your CSS styles 
 
adding custom css in blogger template designer 
In this procedure you won't be able to edit the existing CSS code in your template, you will only be able to add new styles and can only edit the styles that you added using the template designer.  
 
You don't need to add the HTML elements such as <style type="text/css"></style> , we can paste the CSS styles directly. Adding those elements may result in error. 
Adding it using the HTML Template Editor 
 
You can also directly add CSS syles in your template code, but working in the HTML template editor can be difficult for users who don't have much experience with HTML and CSS. As lot of markup codes are lying there already, a general user might feel a bit unformtable, but once you start working with codes you will find it interesting. 
Go to your blogger dashboard at blogger.com/home  
And from dropdown menu of the blog select Template 
 
 
After going to Template menu, click on Edit HTML button to open the template code editor on the page 
 
 
 
Now using the default find-on-page function (by default CTRL+F ) and find </head> and paste your CSS code (inside <style>) and paste it above </head>. Do remember to include the first and last line in the following code around your CSS rule when adding it above the closing </head> tag d 
 
 
<style type="text/css"> 
/* This is a comment, and follow is a CSS rule */ 
body 
{ 
color:#999; 
background-color:whiteSmoke; 
font-family:"Georgia", Helvetica, sans-serif; 
} 
</style> 
 
 
The CSS styles are just for example. 
 
Other way 
You can paste your CSS styles by putting the HTML markup (in green) above and below your raw CSS code and then paste it above </head> in the template 
 
So now you have the idea where to paste the CSS codes in your blog. For more web designing help subscribe to our blog. 
 
Remember to Backup your template before making any changes to it. To Backup your template Go to Blogger Dashboard >> Template tab >> On top right corner there will be a Backup/Restore button and then download the template, if anything went wrong we can restore it to working template by uploading it there.  </div>

How to add CSS to your blogger blog

In this tutorial you will learn how to add custom styles to your blog with CSS on Blogger. CSS is plays an important role in presentation ...

How to find my Facebook join date ?

<div dir="ltr" style="text-align: left;" trbidi="on">
I was searching the internet to find a way to know my joining date on Faebook, this is January and I remember that 2011 January i jonied Facebook but don't remember the exact date, after minutes of searching i found a page where some ways were provided , but i already had that in my mind.  
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vonoL7GfnNMAcaN017NjdxaaKn9JFBitJZOP9Laum1M9iUd3-eofqFSZBgDVGZyGhL-b9QDAsNoFIkHaCi7WV1oEQRT2c5DmsUJSzYjb2xRlQZT16MUE4gl1-HjRzd7J4Mk41Uc42mE/s1600/sve+hgdf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vonoL7GfnNMAcaN017NjdxaaKn9JFBitJZOP9Laum1M9iUd3-eofqFSZBgDVGZyGhL-b9QDAsNoFIkHaCi7WV1oEQRT2c5DmsUJSzYjb2xRlQZT16MUE4gl1-HjRzd7J4Mk41Uc42mE/s320/sve+hgdf.png" width="320" /></a></div>
 
 
 
So I am writing those procedures 'find when i joined Facebook' : 
 
 
 
1. First is the easiest one,whenever someone joins facebook ,they get emails from Facebook about verifying your account and welcome emails, so open your email which is associated with your Facebook and either go to the last page on email list or if the email service has a search option search for 'WELCOME TO FACEBOOK' it might then pop the result with Facebook welcome email ,check the date in the mail and we are done !  
 
 
 
2. If you deleted the emails there is one more way put some ice on your head and remember who was your oldest friend on Facebook , just go to their profile and on right side there will be a arrow pointing down just click on it and then on SEE FRIENDSHIP on top there will be the date of when you became friend with him. It will surely find the nearby date in some cases it might be also the exact date.But if this doesn't work , check the next procedure. 
 
 
3. We can also know the join date by the timeline , you all maybe familiar with the new Facebook Timeline , however removing it is not possible once you integrated it , but yet there's one trick to remove it. But if you want to find your date of join , and you don't know the oldest friend on Facebook or deleted the Facebook emails , then timeline can help you. In timeline just scroll down and you will find your Facebook join date.You can not only see your joni date but also your friend's join date if they have enabled Facebook timeline</div>

How to find my Facebook join date ?

I was searching the internet to find a way to know my joining date on Faebook, this is January and I remember that 2011 January i jonied Fa...

How to select all friends at once to invite friends on Facebook

<div dir="ltr" style="text-align: left;" trbidi="on">
Facebook friend invites are useful to invite your friends to view your website or to like your new Facebook page etc. you will see friends invite almost everywhere on Facebook.   
Facebook invites are useful but a sometimes it can be a tough job if you have large number of friends, I had 2525 friends on Facebook and it was very difficult for me to select each and every friend manually to invite them all. 
 
When I started learning JavaScript, I learn how easy it was to manipulate web pages using codes and then I found a way to automatically check all the check boxes on invite boxes. 
 
But before we start, make sure you are using Google Chrome or Firefox, they are good as they support almost every new JavaScript functions and are updated, so using them makes sure that it will not create any problems. I will explain it in step by step procedures. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5Ia5OySoJfovuW2FG-s3Xo02E0jnlZ_ByW8ZGu9uilmlvqGG56wtRCIsBWCon4XnqzdH1wjg4PqJMILgjjEltWwN2fcXy04bFeiNgvrx0asWq3iU5T8mVEs3YpGquvr1iZoaDGZsp64/s1600/rfg66rfd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5Ia5OySoJfovuW2FG-s3Xo02E0jnlZ_ByW8ZGu9uilmlvqGG56wtRCIsBWCon4XnqzdH1wjg4PqJMILgjjEltWwN2fcXy04bFeiNgvrx0asWq3iU5T8mVEs3YpGquvr1iZoaDGZsp64/s320/rfg66rfd.png" width="320" /></a></div>
 
Open Google Chrome  
 
Now open any event etc. where you can invite your friends and open the friend invite box 
Now scroll down until all your friends appears in the box 
Press CTRL+SHIFT+J (for Chrome), CTRL+SHIFT+K (for FireFox) 
A JavaScript console pane should open at the bottom of the page 
Paste the following line of JavaScript code in the console 
 
Problem using Developer Tools? Check the tutorial on using Developer Tools on different browsers 
 
 
 
javascript:elms=document.getElementsByName("checkableitems[]");for (i=0;i<elms.length;i++){if (elms[i].type="checkbox" )elms[i].click()}; 
 
After pasting click enter, now wait for a minute and when all friends are selected click on send, if you have large number of friends it may take about 1 - 2 minutes for successfully sending the invites .  
 
 
Problem inviting all friends ?</div>

How to select all friends at once to invite friends on Facebook

Facebook friend invites are useful to invite your friends to view your website or to like your new Facebook page etc. you will see friends ...

How to convert an ECM file to BIN

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
I will show the use of ECM file and will also give a tutorial on how to convert it to any usable format like BIN</div>
<div>
 </div>
<div>
I was browsing a PSX game site and downloaded a game from there and got a ECM file, that was the first time i saw an ECM file, i researched about it and was able to convert it to a working BIN file, the original ECM file was 200MB and when i converted it, it went 600MB, so you can imagine how powerful is this ECM system. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBID-o_IyRvQivs6cde3O3HSXCIwF49-NYSgjcWnGrWlkpXWBkkkyVCZVFcttoH0w47HZaqvaGCZAM5wosHT-C_hhQbZiPwY0biQeIGq6GrAj1FHSwI4BODTcYKYZx72FOrBQ7Y9VkVXE/s1600/ecm10042.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBID-o_IyRvQivs6cde3O3HSXCIwF49-NYSgjcWnGrWlkpXWBkkkyVCZVFcttoH0w47HZaqvaGCZAM5wosHT-C_hhQbZiPwY0biQeIGq6GrAj1FHSwI4BODTcYKYZx72FOrBQ7Y9VkVXE/s320/ecm10042.png" width="320" /></a></div>
<div>
 </div>
<div>
ECM files are used to compress files and folders from a CD or CD image, it's very powerful and can compress a CD image to 200MB from 600MB, isn't it great ? So, many people compress their file to ECM and upload it to internet to save space and bandwidth. But the file can't be open by a Disk Burning or CD image converting programs like Nero, MagicISO etc. They are only to burn files of CD images type like ISO,CDZ,BIN etc.</div>
<div>
So read this post to know how to open it.   </div>
<div>
 </div>
<div>
What is an ECM file?</div>
<div>
ECM stands for Error Code Modeler , it compresses files and save huge amount of space, most of the CD/DVD have unnecessary EDC/ECC data in them and takes lots of space on the drive, ECM only adds the data in the compress file, and thus the file size changes, the compression size depends on unnecessary EDC/ECC data on the CD. Compressing a CD image to ECM is easy, just open the CD image file into your favorite compression program and save the file as [filename.bin].ecm, just add ECM at end. </div>
<div>
 </div>
<div>
How to convert ECM to BIN?</div>
<div>
Ok, let's get back to the main thing, but read the above contents as well, we were at 'How to convert ECM to BIN' or any other readable/burnable file format, because we can't burn an ECM file to a CD so we need to convert it to use it.  </div>
<div>
 </div>
<div>
The procedure is small, it's just a 2 minute job. To make it easy to understand for you, i will list step-by-step procedures, please read them carefully.</div>
<div>
 </div>
<div>
 </div>
<div>
First of all we have to download a file, with which we will convert the ECM file to a BIN file, it's not a good looking program but works great, thanks to Neil Corlett for this program. I have set a password to extract files from the RAR file, the password is stramaxon.</div>
<div>
 </div>
<div>
 </div>
<div>
Download File - Password for the file: stramaxon</div>
<div>
Now extract the RAR file with WinRAR program, it will ask for a password, just enter "stramaxon" in the password field (without quotes)</div>
<div>
 </div>
<div>
Open the ecm100 folder in the extracted folder there will be two files, unecm.exe and ecm.exe</div>
<div>
Open the folder where your ECM file is, now drag and drop the ECM file on unecm.exe in the ecm100 folder</div>
<div>
 </div>
<div>
 </div>
<div>
A similar window may pop-up when you drag and drop the ECM file into the unecm.exe, wait for it to decode 100%.</div>
<div>
Once it's 100% completed, the cmd windows will close, now check the folder where tje ECM file </div>
<div>
was, a BIN file will be created. </div>
<div>
 </div>
<div>
And done !</div>
<div>
 </div>
<div>
We have successfully converted the ECM file to an burnable image file BIN. If you want to change the BIN file to other CD image file, you can do it by burning the BIN file on a CD and then making image file from that CD, i know that will be easy for you, but if you don't know how to do it then please request me an tutorial on @gmail.com</div>
</div>

How to convert an ECM file to BIN

I will show the use of ECM file and will also give a tutorial on how to convert it to any usable format like BIN I was browsing a PSX ...

Facebook Took Action to Block Developer Tools - Know Why

<div dir="ltr" style="text-align: left;" trbidi="on">
If you recently tried accessing the developer tools in your browser on Facebook you might have noticed a large notification in the console highlighted in red. Well, that's for a reason, if you haven seen that scam/spam yet let's tell you more about it. 
 
Developer Tools are great for debugging websites and running scripts manually on a web page, it could be done on any website including Facebook. By writing a script, the author can make anything do with the site on Facebook they can use it for sending friend requests, making comments etc. anything that is possible. Because all that functions are controlled by JavaScript onsite. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2naLPmhX2f8C4Klb9JKlAWRyitevoehvGmKaMeqXcIySyYlOdtrkx10fqI6z19j4foUbAN7XpbLpaJ2qPGQH8AtPYO5O3ymwb3wc0CDSfi4FOCWir2xVUYmd_xmgISQt43uzjREeZ3E/s1600/Facebook-spam-theme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2naLPmhX2f8C4Klb9JKlAWRyitevoehvGmKaMeqXcIySyYlOdtrkx10fqI6z19j4foUbAN7XpbLpaJ2qPGQH8AtPYO5O3ymwb3wc0CDSfi4FOCWir2xVUYmd_xmgISQt43uzjREeZ3E/s640/Facebook-spam-theme.png" width="640" /></a></div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjva2VEQLTnWM5-XNKwA8QNKIVqhY_cwC7GzxkUIRmbx5hk7BS7UbFhjFK6krqg2k9Y6y96mbBGrxNowy5NpZN9VeV7EaOCYNTzpp3vS8e9Y-DVelArE_9QoI5j4EPBuQOfZvbmK5ANzWo/s1600/fb-console-disabled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjva2VEQLTnWM5-XNKwA8QNKIVqhY_cwC7GzxkUIRmbx5hk7BS7UbFhjFK6krqg2k9Y6y96mbBGrxNowy5NpZN9VeV7EaOCYNTzpp3vS8e9Y-DVelArE_9QoI5j4EPBuQOfZvbmK5ANzWo/s400/fb-console-disabled.png" width="400" /></a></div>
 
 
Taking advantage of these awesome feature of a browser, some notorious spammers have wrote a script which auto-tags people and like pages associated with them on their statuses where they post instruction to use their code they wrote by claiming that the user will get a new theme for their Facebook, which would seem to work but what it does in the background will terrify you. 
 
The code would send unwanted likes to the pages the spammers wants, it will auto-tag your friends in 100s of status automated by the script and much more as they might even get access to your account. The spam have got amazingly viral as people do really think it's going to work and try it without giving it a thought. 
 
How does it actually look ? 
 
This is an example of well planned viral spam by some script kiddies originating probably from Indonesia. 
 
 
 
The link they tell you to open contains the code which they ask you to run in the browser's console which then do what it is supposed to - screw you. 
 
If you see any such things in the future don't let it make you look like a fool! Just block that person and you are good and safe. 
 
Facebook Took An Action to Control it 
 
By disabling developer tools temporarily. Developer Tools is a great tool for developers so they didn't disabled it permanently on their site, but it let's you choose what you want to do. And will also show you what could be the consequences of running scripts from Unknown sources.  
 
Not all scripts are dangerous, for example see my "How to Select All Friends at Once on FB" script, it just automatically selects your friends for inviting them in events etc. But you can clearly understand from this that code can do things that you don't expect to be automated. 
 
Beware before you run scripts from third-party sources especially from these so-called lucrative offers. And even though the script seems fine to you make sure to see what others say about it, what's their opinion to get an idea about it. 
 
It's all, be safe online :) </div>

Facebook Took Action to Block Developer Tools - Know Why

If you recently tried accessing the developer tools in your browser on Facebook you might have noticed a large notification in the console ...

Making Images Fit in Post Body on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
If you are working on a responsive design for your Blogger blog, or you are just tired of resizing your images in post editor to fit in the post container then this tutorial will show you an easy way to make images fit with it's surrounding. 
 
This problem occurs often when you try to post images of the dimension larger than your content area or you are just using a responsive layout and when it down-sizes, the images overflows the content area. 
 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTQx-PNvrZQqM9atdKJEgzoDmYNyU-fKT3rdjNr37s3ZDerwC-XOZzNu4VRaZ5eepPQ2IdUY3PL70jtibO0U4dXqUN0e0PGTPcs-j-G0D8rtJbm28zJoJO7YHE9ypvbAtPL-qMoKR_Zs/s1600/images-fit.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTQx-PNvrZQqM9atdKJEgzoDmYNyU-fKT3rdjNr37s3ZDerwC-XOZzNu4VRaZ5eepPQ2IdUY3PL70jtibO0U4dXqUN0e0PGTPcs-j-G0D8rtJbm28zJoJO7YHE9ypvbAtPL-qMoKR_Zs/s320/images-fit.jpg" width="320" /></a></div>
 
Before you continue with the tutorial, check the demo: 
Demo: Without the CSS Demo: With the CSS 
 
In the first demo, the image in the container overflows because the width of the image is larger than that of the image, but in the second demo, if the image width is greater than the container's, it will fit itself to the container. 
The Code! 
 
All this can be achieved with a small block of CSS code. Before I start giving you lectures on how this works, here's the code for you to use (can be used in most Blogger Templates, but you might need to change the selectors if you are using a custom designed template): 
 
 
.post-body img { 
    max-width:100%; 
    max-height:auto; 
} 
 
Now you just need to apply this code to your blog, check this tutorial to learn how add CSS in Blogger. 
How does it work? 
 
If you are not a web designer or coder, then this might all seem like a magical charm to you, but it's just code, code that's made to make your life easier. Well, so if you are ready to get bored then I am starting my chapter on CSS. 
 
What actually does the magic is the max-width CSS property which gives any element a maximum width limit. So if you specify an element the the maximum width of 200px, it wouldn't exceed it. The 100% value tells the browser that the element(s) must not exceed the full content width of the container. 
 
The max-height property helps in keeping the original proportion of the image intact. To know more about what would happen if you specify a value in percentage then try and check the results ;)</div>

Making Images Fit in Post Body on Blogger

If you are working on a responsive design for your Blogger blog, or you are just tired of resizing your images in post editor to fit in the...