Remove "Powered By Blogger" Attribution from blogger mobile template in 2 minutes - Tutorial With screenshots.



For a beginner, its hard to find an option to remove "Powered by Blogger" text at the bottom of mobile version of blogger blog .(at first,me too), then gradually after learning the blog's layout and core concepts, i found it is easy as anything to remove whatever we need to remove,

So i came up with this article where you can learn how to remove "Powered By blogger" from mobile versions. Keep reading.

Before you experiment with this, i suggest you to backup your template. So, if something go wrong, you can rollback the changes.

Go to template section of your blog.


There you can see a mobile version

Click on the configure icon below mobile template.



A box will appear titled as Template> Choose mobile template.

There , below on "on mobile devices ,show a mobile version of your current template"

you can see 2 options .
Select the first on "Yes, Show mobile template on mobile devices.".
And below, that Choose mobile template, as "CUSTOM" From dropdown.

and click on save.

Step 2:

Open template editor

Search for "Attribute" in template.


you will see  aline like this.
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
Change locked='false'

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
 TO
<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

And
Change the parent section's showaddelement='yes'

<b:section class='foot' id='footer-3' showaddelement='no'>
 to
<b:section class='foot' id='footer-3' showaddelement='yes'>

Save your template for once. (Important).

After saving once, search again for "Attribution" in template, and delete below part from your template.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Resulting page will look like,


Save your template, Visit your blogs mobile version , if you see "Powered By Blogger"  removed from blog's mobile version, feel free to share that news here in below in comments.
If you face any problem applying this, Start a discussion.

Read Article →

Say goodbye to cheap javascript way of summarizing blogger posts - Alternative Serverside method for any blogger template


So, Ho do you Summarize your blog Posts to Show in your blog' homepage or archive page.?
If it i the Same cheap JavaScript method or trick(As you call it) that will trim out the received post, then its the time to change.

It Was Super slow,when i added JavaScript summarize and 4 posts on main page, then i understood that if it is like so, visitors will be running away from my blog because of its slow loading.
after analyzing and  studying about blogger tags in detail, i found that it is possible to summarize blogger posts in server side.
Finally I came up with the solution and i recognized how fast my blogger blog is than before.!

JavaScript method to summarize Blogger posts

You open template editor.
Then you add  below configuration in head to summarize received posts.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 200;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;

function removeHtmlTag(a,b){if(-1!=a.indexOf("<")){for(var c=a.split("<"),d=0;d<c.length;d++)-1!=c[d].indexOf(">")&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&-1!=a.indexOf(" ",b);)b++;a=a.substring(0,b-1);return a+"..."}
function createSummaryAndThumb(a){var a=document.getElementById(a),b="",c=a.getElementsByTagName("img"),d=summary_noimg;1<=c.length&&(b='<span class="summary_img_span" style="float:left; padding:0px 10px 5px 0px;"><img class="summary_img" src="'+c[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>',d=summary_img);b=b+"<div>"+removeHtmlTag(a.innerHTML,d)+"</div>";a.innerHTML=b};

</script>
</b:if>
</b:if>
And then you Find <data:post.body/>  and replace that with below code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.canonicalUrl' rel='bookmark'><b>Read more &gt;&gt;</b></a></span>
</b:if>
</b:if>

So, It will be summarizing your blogposts in all other pages, except item page and static page.


BUT, Whats happening? [Disadvantages of JavaScript method]


  • your blogger blog takes too much time to load
  • Your blog downloads unwanted images and text blocks or scripts that are in each post.
  • It may show full post before it get trimmed out! thus the beauty of blog goes away.
  • If JavaScript i not enabled in visitor's device,it ill give your blog's homepage an awkward look because no blog post will be summarized.
  • It will throw your visitor away because many hates slow website/blog


Server side trimming / Summarizing of blogger posts.

You open template editor
Search for <data:post.body/>  (If JavaScript summarize already enabled, the whole block).
Replace that with below Code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div id='&quot;summary&quot;'>

<b:if cond='data:post.thumbnailUrl'>
<span class='summary_img_span' style=''>
  <img class='summary_img' expr:src='data:post.thumbnailUrl' style='width:100%;'/>
</span>
</b:if>

<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>

<div style='clear: both;'/>
<span class='readmoreblock'>
  <a class='readmorehref' expr:href='data:post.canonicalUrl' rel='bookmark'>
    <span class='readmorespan'>Read more &#187;</span>
  </a>
</span>
</b:if>
</b:if>

Whats Happening here? [Advantages of This method]

What we do is actually make use of the data:post.snippet tag in blogger.
and we also make use of data:post.thumbnailUrl tag.

  • You blogger blog loads faster because summarizing done on server-side.
  • Doesn't load whole blog post contents if its not the item page/post page.
  • Simple to apply. No coding knowledge required.
  • It will never show full post if it is not an item/post page.
  • Doesn't require JavaScript.

Summary

Make use of this feature and say goodbye to javascript method! you will not regret. ;)

Read Article →

Facebook comments and like count problem in blogger blogspot - Solved



After blogger started applying Country Redirection in blogs, it is being a problem that Facebook comments and likes are not working properly because each visitor gets different result depends on current blog address. for example, my blog address is http://aslamise.blogspot.com , and when i visit that blog, it becomes http://aslamise.blogspot.in , because i visit from India , this is called country specified redirection.

BUT, we can overcome this problem of Facebook comments or like count problem or any other problem which caused by the redirection, by setting data:blog canonical URL in Facebook plugins

The solution is to tweak your plugin's code and relace data:blog.Url with data:blog.canonicalUrl .
So that it will always point to .com version of your blog.

Here is the Facebook comment plugin code many blogger users,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='20' data-width='610px' expr:data-href='data:blog.Url'/>
</b:if>

Perfect one is below one.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='20' data-width='610px' expr:data-href='data:blog.canonicalUrl'/>
</b:if>

We Change  the expr:data-href='data:blog.Url' to expr:data-href='data:blog.canonicalUrl'

Facebook like plugin also need this to Work perfectly in blogger blog.

Enjoy blogging. if you have any doubts , feel free to ask in comments.

Or

If you want to know how to replace blogger comments with Facebook comments plugin, Go here





Read Article →

Best way to hide Email address in your website or blog from Spam bots - Google's mailhide



If you have a website or blog, it is necessary to put your email there to let visitors to contact you.
may be only in contact page or in every page.
But what if some bad bots searching websites for mail addresses in blogs or websites crawled into your website? yes. there is the problem that they will send you number of advt emails to your inbox.
if your mail server doesn't have an effective spam filter, things will get worse than that.
 you will be getting numerous mails each day that make your job difficult.

So, Whats the effective way to prevent spam bots to get your email address but to let your real visitors grab your email address so that they can contact you?

GOOGLE, the unstoppable king has the answer.
To hide your email address from bots,and let your visitors grab it after a simple captcha test, Google has a service named "MAIL HIDE"
Go make it today.
Go below address and get the code from there and put it whereever you want visitors to see the link to your mail address.

http://www.google.com/recaptcha/mailhide/


There you can see a text field  labled protect your mail.
Type your email address in it

You will be taken to next page after you click Protect it button.

There you can see two code blocks for you.
One is the text field which contain a URL to your protected email. you can make a link to that URL in your web page. shown in the figure below.



http://www.google.com/recaptcha/mailhide/d?k=01zI57-KPkSDVJEtubLfJaMw==&c=4GL32YEpIYeIqgdJWlqemLdYlQCJ7ElRa4KN3nHJOo8=

Next one is the HTML code we can put in our webpage, where visitor can click on the link and it will take them to your mail,protected with captcha


your<a href="http://www.google.com/recaptcha/mailhide/d?k=01zI57-KPkSDVJEtubLfJaMw==&amp;c=4GL32YEpIYeIqgdJWlqemLdYlQCJ7ElRa4KN3nHJOo8=" onclick="window.open('http://www.google.com/recaptcha/mailhide/d?k\07501zI57-KPkSDVJEtubLfJaMw\75\75\46c\0754GL32YEpIYeIqgdJWlqemLdYlQCJ7ElRa4KN3nHJOo8\075', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">...</a>@domain.com
Copy paste that code you see  into your web page where you want to display your email to visitors.

Below is screenshots of How it seen after implementation and how does it work.

User Sees a "you..@domain.com" on contact area.



User clicks on that . It will pop up a window,asking user to enter a captcha.


After filling and clicking on "reveal email address" button, it will show user the real email.




There are many methods out there, but i trust this one most. because it is provided by GOOGLE. whats more than that ;)

Read Article →

How to reset CSS for only a DIV or any other html element -Simple solution!

The aim of a CSS reset is to prevent inconsistency of elements that is nested to other elements,by reseting the height,width,margin,etc styles to the default ones.
there are many ways to reset style of an elemet to the specific one.
one solution is to add a !important after the style attribute. like h1{font-size:25px!important;}
and another is to overwrite each element style to the default one.
and another is to use an css reset stylesheet to reset.
Finest solution is to use a css reset tool. Below is Aslamise Css reset script. You may have to tweak a little if you find anything that doesnt suits your needs.
.aslamise-css-reset html{color:#000;background:#FFF;}.aslamise-css-reset body,.aslamise-css-reset div,.aslamise-css-reset dl,.aslamise-css-reset dt,.aslamise-css-reset dd,.aslamise-css-reset ul,.aslamise-css-reset ol,.aslamise-css-reset li,.aslamise-css-reset h1,.aslamise-css-reset h2,.aslamise-css-reset h3,.aslamise-css-reset h4,.aslamise-css-reset h5,.aslamise-css-reset h6,.aslamise-css-reset pre,.aslamise-css-reset code,.aslamise-css-reset form,.aslamise-css-reset fieldset,.aslamise-css-reset legend,.aslamise-css-reset input,.aslamise-css-reset textarea,.aslamise-css-reset p,.aslamise-css-reset blockquote,.aslamise-css-reset th,.aslamise-css-reset td{margin:0;padding:0}.aslamise-css-reset table{border-collapse:collapse;border-spacing:0}.aslamise-css-reset fieldset,.aslamise-css-reset img{border:0}.aslamise-css-reset address,.aslamise-css-reset caption,.aslamise-css-reset cite,.aslamise-css-reset code,.aslamise-css-reset dfn,.aslamise-css-reset em,.aslamise-css-reset strong,.aslamise-css-reset th,.aslamise-css-reset var{font-style:normal;font-weight:normal}.aslamise-css-reset ol,.aslamise-css-reset ul{list-style:none}.aslamise-css-reset li{list-style:none}.aslamise-css-reset caption,.aslamise-css-reset th{text-align:left}.aslamise-css-reset h1,.aslamise-css-reset h2,.aslamise-css-reset h3,.aslamise-css-reset h4,.aslamise-css-reset h5,.aslamise-css-reset h6{font-size:100%;font-weight:normal}.aslamise-css-reset q:before,.aslamise-css-reset q:after{content:''}.aslamise-css-reset abbr,.aslamise-css-reset acronym{border:0;font-variant:normal}.aslamise-css-reset sup{vertical-align:text-top}.aslamise-css-reset sub{vertical-align:text-bottom}.aslamise-css-reset input,.aslamise-css-reset textarea,.aslamise-css-reset select{font-family:inherit;font-size:inherit;font-weight:inherit}.aslamise-css-reset input,.aslamise-css-reset textarea,.aslamise-css-reset select{*font-size:100%}.aslamise-css-reset legend{color:#000}.aslamise-css-reset *{background:none;color:black;} Lets take a look at it.
  • This is a ul li block where no class assigned

  • This is a ul li block where aslamise-css-reset assigned


So , lets see how to use this css reset in your page. Copy and paste above css reset code in your stylesheet at the bottom of stylesheet. Then add class "aslamise-css-reset" to the element where you want to reset your css. Example: <ul class='aslamise-css-reset'><li>This is a ul li block where aslamise-css-reset assigned</li></ul> If you want to see another example, see previous post's "demo", where aslamise-css-reset class enabled!.

Read Article →

How to add Google translate to website or blog



Google translator is best service ever to translate between languages with ease.
Nowadays, many websites and blogs are make use of this feature. it will help user to read website contents in their language. Google does give an option to show a banner for users for those who are not using our website's default language as their system language.
thus Google translator makes it easy for users to read and understand everything in their language.

To add Google translator service to your website or blog, follow steps below. its so simple as anything.

Go to
http://translate.google.com/manager/website/add


You will see a text field titled with Website URL. with a subtitle of What is the URL of your website.

Enter your website URL here. if you are having a sub domain and not a domain, like a blogspot.com domain,
type the address here.

Next, is Website Language
It will ask for what is the original language of your website.
so if you have a website with its contents in English language, select default language as English.
And if you have a website with contents in other language, just select that language.

Click Next.





Now you will be in plugin settings Tab.

you will see a field titled as translation languages.

select All languages, if you want to enable translation to all languages.
or if you want to enable translation to only some languages, you can select "Specific languages" option  and select languages.

Select display mode.
Three options are there

  1. Vertical
  2. Horizontal
  3. Drop down only


When you select this option , sample of the widget displays on right side.

Under advanced title option

"Automatically display translation banner to users speaking languages other than the language of your page. "
Check this option if you want to. i recommend to check this.

If you have contents in multiple languages, then check next option "Your page contains contents in multiple languages"

If you want to, you can use Google analytic to track translation usage.

Click "next" button. you will be agreeing to Google's terms and conditions.





You are almost done, but you have to add the code to your blog or website to get it to work.

Add the first code meta code to section

It will look like this.

<meta content='e3ca32bb0a4tgtrr09d-5b78317696fryr863-g5bc9rye-15' name='google-translate-customization'/>

Now add the next code(Widget code), wherever you want to display the translation option

It will look same as this.



<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>



If you are blogger, using blogspot.com sub domain, you can use add add widget option in Layout Section

After completing the above steps, test run your website and check whether it works or not.
iif you are having problems, feel free to ask in comments.


Read Article →

[SOLVED] - How to Disable the message "Google Chrome didn't shut down correctly. To reopen the pages you had open, click Restore."




How to Disable the message "Google Chrome didn't shut down correctly. To reopen the pages you had open, click Restore."


Why this happens?


Many people having this problem but not yet a working solution found anywhere,so i came up with mine. because of power failure, Chrome shutting down automatically along with the operating system, whichever os it is, Windows X P or Windows 7, Next time when we open the chrome browser, it shows up the warning message and if we click on Restore button once, all tabs will open again as in the previous state, keeping all cookie information in it, and No cached items. All the cookies are deleted only if we click on close button of the same warning bar.

Its a Security problem sometimes if you are using a public computer rather than a personal computer, if there is a power failure for long time and if we leave it like that, next time another one can easily access sites we had opened last time without even entering a password for that sites.

What is the solution to disable this warning message?

Solution 1:

Try using google chrome in incognito mode.(Using this, you will not able to make use of caching files or saving history. )
to use chrome in incogninto mode, open google chrome, Press Ctrl+shift+N  and it will open chrome in incognito mode.
If you want chrome to open in incognito mode everytime(Better for public computers), you can right click on chrome shortcut on desktop and change the "Target" to 

"C:\Program Files\Google\Chrome\Application\chrome.exe" --incognito




Solution 2:

Use something like Deep Freeze.
Deep Freeze is a software to reset your drive after a shutdown whether it is proper or not.
But its a bad habit to do that thing because it will affect all system and all data will be lost after restart.
So i came up with a simple solution.


Solution  3:

Before trying this out, Don't forget to make backups for files that you going to edit.
Close Google Chrome! <- data-blogger-escaped-i="">important
.Go to Google Chrome's default user data folder.

In Windows

Open Explorer by pressing Windows key + E
In Address bar Copy paste below address as it suits your operating system.

Windows XP :
 %USERPROFILE%\Local Settings\Application Data\Google\Chrome\User Data\Default\

Windows Vista/ Windows 7/ Windows 8:   
%LOCALAPPDATA%\Google\Chrome\User Data\Default\

Mac OS X:   
~/Library/Application Support/Google/Chrome/Default

Linux: 
~/.config/google-chrome/Default



Find a file named "preferences". and open with a notepad. (Open notepad first and drag the file to opened notepad).

Find below line in that preferences file. (Press Ctrl+F and Search for "Exited").

"exited_cleanly": true,

This tells the browser, Browser was exited in  proper way last time.
If it is "exited_cleanly": false,

This tells the browser, Browser was exited not in  proper way last time.
Change it to "true".

Just before that, add following line.
"exit_type": "None",

Now that part might be like this.

},

      "exit_type": "None",

      "exited_cleanly": true,

      "name": "First user"

   },


You are almost done, but wait. now we shouldn't allow browser to change the values we entered as long we wish. (Please note that it will be affected other preferences too,i don't care, i just want to disable the warning message,).

So, Right click the "preferences" file, and tick "Read only" option.

Click apply, OK.

It will not affect history saving, or bookmarking. but will do affect some of preference overwriting.

That's all. From now, there will no Error message popping up saying Chrome didn't shutdown properly.

Check if it works or not.


To Check Whether it works or not, Open Chrome browser, Open two or more websites.
Open task manager, In Tasks tab, Right click and Select "End process tree" option till Chrome browser closed.

Wait two seconds, open Chrome again, If everything is done well, There will be no error message sayings that Chrome Didn't shutdown properly.

Let know if this worked for you,tell through comments!
If you face this problem again, feel free to discuss through Comments :)


UPDATE : As of the Version 26.0.1410.64 m release of Google Chrome browser, Chrome Application has moved to Program files folder, but still we will be able to do this trick because Preferences file is located at where it was before.


Read Article →

Google App Engine | appcfg rollback - Effective ways to Undo the transaction with appcfg rollback

Did you ever felt problems while deploying my code to google Appengine ,and Deploying interrupted by power problem or connection problems?

If you are a google appengine user and using google app engine application in your computer,its the time to make a bookmark to this page. because in any time you will need to use this rollback function in google appengine.


Below is the demo of the error message you will get after you trying to deploy your code to google appengine with appcfg.py or programme.



2013-01-01 01:00:00 Running command: "['C:\\Python27\\pythonw.exe', '-u', 'C:\\Program Files\\Google\\google_appengine\\appcfg.py', '--no_cookies', u'--email=your.mail@gmail.com', '--passin', 'update', 'C:\\your-app-container-parent\\your-app-container']" 04:03 PM Host: appengine.google.com 04:03 PM Application: your-app-name; version: 1 04:03 PM Starting update of app: your-app-name, version: 1 04:03 PM Getting current resource limits. Password for your-email@gmail.com: 04:03 PM Scanning files on local disk. Error 409: --- begin server output --- Another transaction by user your-email is already in progress for app: s~your-app-name, version: 1. That user can undo the transaction with "appcfg rollback". --- end server output --- 2013-03-13 16:03:30 (Process exited with code 1) You can close this window now.
So what you will do after getting this error? probably you will open your command prompt and type "appcfg rollback".

But unfortunately,thats not enough.
Here is the solution that works.

First of all...
CHECK TIME AND DATE OF YOUR MACHINE and if it set to incorrect date, it will cause problems.

To rollback changes for google app engine in  Windows OS

Open Command prompt
To open command prompt in windows,
Windows- RUN 
OR 
Start - All programs -Accessories - Command prompt.


Copy and paste below line to command prompt

CD C:/Program Files/Google/google_appengine

and hit Enter. Command prompt will be inside the Google_appengine folder.

(To paste to command line, you can use the menu at the top left side of command prompt and select edit -> paste)

Now,  Paste below line.

appcfg.py rollback F:/way-to-/your-app-folder-/where-app.yaml-exist/

Change F:/way-to-/your-app-folder-/where-app.yaml-exist/ with the folder path where your app exist.


It will ask for your email and password. please note that it will not show your password nor *'s while you type your password. just go on with typing.

If everything is done well, it will rollback your update to GAE.
Good luck.

What about next time it happens?

If the above method worked, then I Recommend you to bookmark this page, in case if you have the same problem again, then you can just open this page from bookmarks.

If there any alternate methods available?


Yes there is. follow below steps.

Open your notepad.

Copy and paste below code to the notepad.

C:\Program Files\Google\google_appengine>appcfg.py rollback C:\your-app-container-parent\your-app-container\

Remember to type this in one line. And replace "C:\Program Files\Google\google_appengine>appcfg.py" with the path to your appcfg.py file in your computer and C:\your-app-container-parent\your-app-container\ and with the path to your App container folder.
Now Save this file as a .bat file. which will be opened in command prompt.

Double click that file once.

You are done.
From now, whenever you get the same problem by power problems or connetion problems, just double click the file.

To rollback changes for google app engine in  linux platform

Use this code in command prompt


C:\Program Files\eclipse\plugins\com.google.appengine.eclipse.sdkbundle_1.2.5.v200909021031\appengine-java-sdk-1.2.5\bin\appcfg" rollback war

Here,If you are using any other version than this, Don't forget to change the path as in your drive.


If this didn't help, please let know what have worked for you.

Read Article →

SpeedUp Using ReadyBoost in windows7


If you really want to speedup your windows 7 installed PC, you can use Readyboost feature of windows7.
readyboost is a service that help operating system ,to use a flash usb as a ram(Random Access Memmory).

Here is the simple steps to follow if you decided to setting up readyboost now.

Plug IN your Flash  USB.



Open My computer,


Select properties of the usb flash drive,


As in the above picture, select Tab 'ReadyBoost'

Select Use this Device Option.

Assign Space you reserve for System Speed.

and press Ok.

You are done!

If it says, current hardware doesnot support,

Try
Backuping any files that exist in usb drive, and do a full format. when formatting, set options as ,Filesystem:NTFS, Allocation unit Size:Default allocation size. and untick Quick format.


Click on start, after Appearing 'Formating complete' dialogue box, try repeating the first step !

To Unboost, right click the usb flash drive in my computer, and select Eject.

Read Article →
Subscribe to: Posts ( Atom )