Showing posts with label Tricks. Show all posts

Trouble Adding AdSense Code for Page-Level Ads? Learn how to fix it.

In order to add the Page-Level ads functionality from AdSense on your Blogger blog you are required to place a code that AdSense provides which is :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

Unfortunately if you have tried placing the code in your theme you may have run into this error that states:

Error parsing XML, line n, column n: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.



That's a bit annoying - What could be going wrong with the code that AdSense (a Google product) has provided is causing error on Blogger (another Google product).

The problem is highlighted in the error message itself "Attribute name "async" associated with an element type "script" must be followed by the ' = ' character."

Attribute name "async" in the code we got must be followed by a '=' character. But the code we got simply has <script async  ... />

So what can be done? Modify the code to be parsed by Blogger's theme parser correctly. Here's the code with a little change, we replaced async with async="async" to make the code a valid XHTML markup.

<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Place this code in your Blogger theme code and save. It should work properly now.

Why do we have to use this "hack"?

This shouldn't even be considered as a hack. This is plainly a case where a valud HTML5 markup is not parsed as a valid XML / XHTML markup. 

Yes, our blogs are HTML5 in the end when it gets loaded on a web browser, but the code that runs in the background is XHTML, and the thing with XHTML is that it is very strict about the markup language. In HTML5 you can simply leave out a value from a attribute or leave an HTML element unclosed and it will still work. 

But XHTML won't. What's valid in XHTML is also valid in HTML5, so this don't need to be considered a hack or even a workaround. AdSense provides the code that is totally HTML5 compliant only it didn't anticipate the case where users may want to add the code to XHTML templates.

Will it have any impact on the way this code is supposed to work?

Other than having a few extra characters in the code you had to add, no. This change wouldn't affect anything how AdSense is supposed to work. We just made the code compliant with XHTML to be taken in by Blogger.



Inviting All Friends to Facebook Page at Once JavaScript Snippet

Facebook is a great tool for connecting with the World but one of the problem is that the population on Facebook is very big and so sometimes we feel the need of a "do all" function in most places such as inviting your friends on your new page.

It can be a hefty job clicking on thousands of "Invite" buttons one after one since Facebook doesn't give you an "Invite all" button. Same used to be true for Group requests but fortunately it now does, but as for Facebook page invites you still have to do the manual way.


In this tutorial we will be learning how to invite all friends to page on Facebook automatically. In the past on our blog we posted some similar codes for Facebook but as you know Facebook changes it design and structure so not all the old codes may still work.

This one is latest and is working (created in June 2017).

We will keep this short, there's only two step mainly, copy the code and paste it, but to perform it successfully we have to do more than just that.

Copy the JavaScript Code 


var btns = document.querySelectorAll("button");
var i = 0;

setInterval(function(){
if ( btns[i].textContent == "Invite" ) {
btns[i].click();
console.log( i + " buttons clicked." );
}
i++;
}, 200);

Open Facebook on Desktop in Chrome / Mozilla Firefox or Safari

After you've open the Facebook website, navigate to your page and you will see the section where you can invite your friends from.


Click on "See All Friends" to make sure all your friends are loaded in the invite section so that when we run the code it invites all of them.  

In the browser open JavaScript Console and Paste the Code

Browsers have a JavaScript console where you can run JavaScript code from on the page, to open it on different browsers see the instructions :

  • Google Chrome: CTRL+Shift+J (CMD for Mac) OR Right click on page > Inspect > Console tab
  • Safari: Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”. Now in the Safari Develop menu select "Show JavaScript Console"
  • Firefox: CTRL+Shift+J (or CMD+Shift+J on a Mac) ORselect "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on OS X)




Paste the code in the input area in the Console section and then hit enter. 

That's it, the code will start running and will automatically invite all the friends to your Facebook page in no time. 

Does it have a limit?

There's no limit set by the code, it can invite any numbers of people in very less time but Facebook has a limit on how many friends you can invite to a page daily. Once it exceeds you won't be able to invite friends on the same day. 

We respect that and everyone should, Facebook knows that spamming would be a lot easier for people if it doesn't put such restrictions. 

Please do not use the code for spamming purposes, this tutorial is meant for the people who are genuinely inviting their friends on their page. There's no risk of getting blocked by using this method but we cannot be sure if it is abused, the system will detect. 

Why shouldn't I use an extension?

There are many extensions and add-on in browsers that lets you do the same but our recommendation is that you do not use those and the simple reasons are
  1. You never know what the extension might be running in the background
  2. Such extensions are known to go rogue and show pop-up ads in the future
  3. Do you really need to install a forever running extension for a small task ?
Using the codes you know what you are running on your Facebook pages, because running scripts is very sensitive in browsers, scripts can be used to do a lot of harmful stuffs, so always double-check before running any extensions or scripts in your browser. 

I see an error

Don't worry, it happens, even a small typo can lead to an error. If you see any error commend down below with a screenshot so we can jump in to help you in that regard. 


Fix Blogger Tracking Your Pageviews

Your blog's quick stats on the dashboard reflects the number of page views your blog received in a given time window, the stats can be inaccurate as it might also be counting your own pageviews.

Blogger does provide an option to stop tracking your pageview, though it doesn't work properly for many Blogger users.

Of course many blog owners might not want to track their own pageviews, especially when even low number of page views from their side may affect the overall stats, so it makes perfect sense that you may want to tell Blogger to stop tracking in on your account.

We recently started getting a lot of queries about "why blogger is still tracking my pageviews" and similar, on Twitter and in the forums in large quantity. Here's a tweet from a Blogger user with the hashtag #gHelp seeking for help with the issue



The most straightforward option is to set the option in your blog's dashboard, that can be done by following these steps (these are optional steps, you may have turned it on already):
  1. Go to your Blogger Dashboard
  2. Select the Stats -> Overview tab & then click on "Manage tracking your own pageviews"
  3. You shall be now taken to a new tab with the following URL format: https://[yourblog].blogspot.com/b/statsCookieManage
  4. Check the box that says "Don't track my views for this blog.", and that's it.
This is supposed to stop tracking your pageviews on the blog, but if you test it you will find that it doesn't work. You can check this if it works or not by refreshing your blog in the browser, and after that refresh the stats on your blogger dashboard - you will see that the views are still being counted rendering the option to turn it off completely useless. 

A Valid Workaround

We know that it doesn't work, and Blogger engineers are still on it to fix it, but meanwhile many blog owners are affected and this has to be fixed somehow. 

To tell Blogger to not count your pageview is not a magic, the technique is to set a cookie on your browser so that whenever you load your blog the server knows that you do not want your pageviews to be counted, if the cookie, which is nothing but a small text file saved for websites that contains data used by the browser and server, is not available it counts your views.

What the problem is

(You may want to move to the next section if you want to just know how to fix it)
The error is with where the cookie is set when you go to the options page that let's you choose if you want the blog to stop tracking your pageviews. 

The URL is: https://[yourblog].blogspot.com/b/statsCookieManage

The cookie named "_ns" with the value of "2" is supposed to be set on blog address, but due to an error on the Blogger system the cookie is only set on the /b whereas it is supposed to be set on the "/" path which signifies that it must work on every page of your blog, but due to the error it is not.

Here are some screenshots with the information of cookies that is set while we toggle the option



Everything seems to work okay. As you can see, when the option in the second image in unchecked (highlighted in orange), the cookie named "_ns" disappears. That is how it is supposed to work, the problem actually is its Path value set to /b

And as the path is set to /b the cookie appears no where on the blog except for the page that starts on the path /b

The Workaround

To make this work i.e to have Blogger stop counting our own pageviews we just have to set a cookie on the blog, but this time manually as the options page that Blogger provides us doesn't work properly. 

That can be done with a simple JavaScript snippet. All we will do is set a cookie with the name "_ns" and the value  "2" on the root path of your blog. 

Without any further delay here's the code we need (copy it to your clipboard):

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

createCookie("_ns", "2", 999);

The snippet will create a cookie with the passed values in createCookie("_ns", "2", 999);, you do not need to understand anything about this for it work, only thing you might be interested is the number of days this cookie will be valid for, in the code we have set it to 999 days, after that the cookie will be removed itself from the browser. You can set the value higher or lower if you like.

Using the code snippet

After you have copied the code open your blog's homepage. To run this code you need to access the JavaScript console, there are different ways to open the console in different browsers, I am mentioning how to do it in Chrome and Firefox

Google Chrome

You can open the console using the keyboard shortcut CTRL+Shift+J / F12 on Windows or CMD+Option+J, or you could right click on an empty area in the web page, then select Inspect and switch to the Console tab.

Following screenshot shows the code entered in the JavaScript console on Chrome.




After pasting the code in place, hit enter and that's it. The cookie is set and now until the cookie expires or is manually removed (by clearing cookies off your browser) Blogger would not count your page-views when you access your blog from the browser.

Mozilla Firefox

To open the console in Firefox: CTRL+Shift+K on Windows or +Option+K on Mac. Or you could Right Click, then choose Inspect Element and then go to the Console tab.

Enter the code in the console window and hit enter. Here's how it must look like in Mozilla Firefox:



On Safari

On your Safari browser click on the Develop menu and select "Show JavaScript Console" to open the JavaScript console where you will be entering the script you copied above. 

If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”.


Important note: If you are on .blogspot.com URL then check which version of your blogspot has loaded, Blogger mainly redirects .blogspot.com URLs based on the visitors country, so if you are in the UK it will change to .blogspot.co.uk. Setting the cookie on .blogspot.co.uk or your country specific TLD won't work on other country specific TLDs. You can set the cookie on all of the variants if you like. 

The Cookie's now set. That's it.

Now that you have run the code the cookie that we have been mentioning throughout the post will be set on in your browser. As long as the cookie stays in the browser any visits to your blog from that browser would not be counted towards the pageviews of your blog. 

If you use different browsers, you may also use this code in those to stop tracking the pageviews from those as well. 

Note that it is possible in browsers to set an option that deletes any cookies on a site once it is closed, so I recommend you to look for the option for cookies in your browser if this doesn't seem to work, if problem continues please post a comment on this post.

Confirm Friend Request on Facebook All At Once

Popular on Facebook? So you have got 100s of friend requests pending on your Facebook profile, confirming them one by one can be a pain. This small block of JavaScript code can save you time and energy.


Before we start I want to tell you that it's not guaranteed this code might work in the future. If Facebook's website structure changes, there's a possibility that this code might become obsolete, but that doesn't mean you can use a script to do that, we will work on a new script and update it on the blog.
Last Tested: 28 September 2014 (Works)



But for now this code must work perfectly for confirming all the friends request at once. Login to your Facebook profile and go to the friend requests page where you can view your pending friends requests, use either Mozilla Firefox or Google Chrome or Safari.

Keep showing up more friend requests pending by clicking on "Show more" button until you reach the end.

The Magic Charm (JavaScript Code)

var confirmBtns = document.getElementsByTagName('button');
for (var i = 0; i < confirmBtns.length; i++) {
if (confirmBtns[i].innerHTML == "Confirm") {
confirmBtns[i].click();
}
}

Copy the JavaScript code





Now Run The Code

We assume you have the code snippet on your clipboard, copied. Now you need make use of the developer tools in the browser.

Developer tools are small set of tools use to debug web sites. To learn more about using developer tools see - How to open developer tools.

To open Developer Console

Press CTRL+SHIFT+J (for Chrome), CTRL+SHIFT+K (for FireFox) to open the JavaScript Console.


Paste the code in the console and press enter to run the code. If done correctly your pending friend requests will get confirmed one by one in a matter of seconds.

Note: Facebook might show up a big warning message to do not copy-paste codes and tell you it might be scam and yes never ever run suspicious or codes not from trusted sources in the console, the scripts can do malicious things on your Facebook account. 


Easiest Way To Use WhatsApp on PC

Using WhatsApp on PC has been really a hot topic, one obvious answer is to use an Android emulator and then use WhatsApp, but it has its own difficulties. I will show an easy way to use WhatsApp on PC or even Mac.

I don't usually write about such things on my blog, but the method I am using is closely related to one thing I love the most, and that's web technologies.



The most popular method and the only one known to be legit is using the Bluestack Android Emulator, then download WhatsApp and use it, but getting Bluestack to work on your system is a challenge in itself, and if you have a system with old graphics card or low memory then you have no chance of getting it work!

UPDATE: WhatsApp launched WhatsApp Web a while back, and it now also launched Windows and Mac OS version of WhatsApp, download WhatsApp for Windows and Mac. You can continue with this tutorial for learning purpose :)

How? Let's get this started!


Let's first compare the size of things you need to download to get started with using Whatsapp on PC:

BlueStack Method : 103MB (Bluestack Download) + 40MB (Whatsapp Download) =  143MB
Firefox Method : 87MB (Firefox OS Simulator Download) + 38MB (Firefox Browser Download) + 3MB (ConnectA2 App) = 128MB, and no need to download Firefox if you already have Firefox > 32 (latest version)

We will move ahead step by step, as even this isn't easy, just require proper concentration on what you are doing.

1. Download Mozilla FireFox 32+

If you already have the latest version of FireFox then skip this step, else go to http://www.mozilla.org/firefox and download and install the latest version of Firefox on your computer.

2. Installing Firefox OS Simulator

Using your Firefox browser, go to the following URL https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ and install Firefox OS 2.0 or the latest stable release (note: downloading older version might not work properly.)



Running Firefox OS Simulator

We are halfway down there! If you have successfully passed the previous steps then bravo, the next steps are really easy.

In Firefox, open the App Manager from Tools -> Web Developer -> App Manager 

Now start the Emulator by click on the blue "Start Emulator" button at the bottom menu


You are now ready.. select the Firefox OS 2.0 or any version of emulator you have installed and a new window might open:


Installing ConnectA2

Whoa! See you are using a mobile OS, that's the fun of Firefox OS simulator. Unlock the lock screen and use it the way you would use any other smartphone OS.

You would need ConnectA2 app to use WhatsApp, so open the Firefox App Marketplace


After it's downloaded, open it and enter your country and phone number, you will be sent an SMS for verification. Enter the code and you are ready to use it!

To add new contacts in your chat list you first have to add that contact in the Contacts list on the Firefox OS. Use the Contacts app to add contacts and then you can simply add them in your WhatsApp.

If you didn't understanding some or not working, you can leave your comments and we will try to solve the problem. Enjoy using WhatsApp on your PC now.

Fun With The Developer Console: Styling Console Output

This post is for people who are familiar with the Webkit JavaScript console you find in Chrome and Safari browser. Did you know you can do a lot more with the console than just logging output ?

Console is a great tool for any developer to debug web sites and apps. But did you know you can even style your output with CSS ? Nope ?

Okay, so copy the following code and run it in the console (CTRL + Shift + J)
console.log("%cSee, you can style me!", "font-size:6em; color:#60B660; border:1px solid #eee; font-family:'Open Sans', Arial, sans-serif; text-transform:uppercase;");


See! It is that easy. With a few more parameters in console.log() you can get a style output of the text you pass in as the first parameter with prefix of %c . You pass regular CSS styles in the second parameter to style the output.

If you want to style multiple parts of the string you are outputting, you can do this:

console.log("%cLarge Text!  %cSmall Text", "font-size:52px;", "font-size:12px;")

So here we have two %c, to style them differently we need to pass two different strings with the CSS styles to apply on the corresponding part of the string. For more details check the docs on Chrome developer site

A Little More fun

Using this feature of the Webkit Developer tools, I wrote a JavaScript code which does magic on your console ;) Want to see what? Check out this pen (http://codepen.io/depy/pen/uxdpw) and open your developer console.

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 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
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.

Sometimes it's fun to to a work in the difficult way ;)

Sinhala Font in Blogger

Bloggers in different country needs different fonts that supports their language, most of them are already in the computer but when you are talking about some forgotten languages then you hardly get it on computers, then you need to get a font for it on your web page and so in Blogger.

Sinhala or Sinhalese language is mainly used in Sri Lanka and if you are here in search of getting Sinhala font then you are probably a blogger from Sri Lanka or Blogging in that language, because Sinhala is not that a famous language, people wanting it on their blog find it difficult to get a perfect solution.

Being not a famous or talked language doesn't mean that need for it is not there. Bloggers, blogging mainly in their language need that the most, however big blogs manage to get fonts for their blog easily by hiring professional web designers but if you can't afford to hire one then we are free to help you.

Adding the font

Easy as eating a cake, you don't need any extra knowledge about computers. First we need the font to load on the page or you blog, that can be done adding this CSS. Don't add the CSS directly in the document or it will load the page slow, I am hosting the CSS file on host, you just have to link it
<link href="http://dl.dropbox.com/u/93278694/stylecssff.css" rel="stylesheet" type="text/css">
If you open the link in href value you will realize how big the CSS code is, it's because we aren't loading the font file, we are directly rendering it's data content.
Note: We are hosting the CSS file on Dropbox and we have no guarantee when it get deleted, so i suggest you to host it on your own server and then link it.

Add this in your template

To add the <link> HTML given above you need to first access your HTML of your page, follow the steps to add it.
  1. Go to Blogger Dashboard 
  2. Select the Template tab
  3. Click Edit HTML and Proceed
  4. Use CTRL+F to find </head>
  5. And paste the HTML given just above/berfore </head>
Save the Template, that's it. Now move to the next section to learn how to put it to work.

CSS to change the font

Adding the font in Template won't work alone and also it won't change your font automatically, to tell the browser to load a specific font (this time it's Sinhala) you have to define a CSS.

You can make the whole body (full page) font to Sinhala or can also make only the Post area to be in Sinhala, it's completely depends on the CSS selector. If you know how CSS selectors works then you can detect the class or id of an element on page (can be post area) and then change the selector, to know how to  do that read this post.

If you don't have any idea about the selector then these two different CSS will help you.

#1 Sinhala font only in Post area
.post-body {
font-family: Dhananjayaweb;
}
#2 On full document/page
body {
font-family: Dhananjayaweb;
}

Add the CSS 

Now when you have choose one of the CSS either for the full body or just the post body, now you have to add it into your template. Do it easy with this tutorial on adding CSS in your template.

This is the end of this tutorial but do remember to subscribe our email newsletter for more post. We are excited to hear from you in comments.

Speed up our blog by hosting CSS files externally

Nowadays, blogs and websites are ranked on basis of various factors and page load speed is also one of the factor on which your search rank depends.
If you are on Blogger then the reason you don't get good search results if compared to similar WordPress blogs is because WordPress sites load faster and that's because the CSS for the website is hosted externally.
speed up your website blog hosting files externally
In blogger templates the CSS styles are always internal and those CSS lines are 100s in number. The simple template in Blogger have more than 20kb of CSS styles inside the document.You maybe thinking how 20kb of CSS can slow down your page, 20kb can be downloaded easily with speed or even slow internet connection but here it's not about your internet connection speed, it is about your page's speed. Every single bytes can decide your rankings on search pages.

The first thing you must check is your current page speed marks, the highest score you can get is 100.

If you get less than 90 then you should now host the CSS externally and speed up your site.

Get your CSS codes into a stylesheet file

Note: The first step to out the CSS styles in your template on an external stylesheet file. To do that you have to make changes into your template, so i suggest you to keep a backup of your template for future.

You are now ready to remove the CSS from your template and put it into a CSS file. Follow the instruction below.

Create a CSS file

Before you take out the CSS codes from the template you have to make a stylesheet file. You don't need any special tool to create a .css file. You just need a plain text editor (notepad).
  1. Open Notepad, don't type anything 
  2. Click on the file menu and click on Save As
  3. Locate where you want to Save the file
  4. Now name your file with .css at end, in Save As type place select 'All Files' and in Encoding select 'UTF8' that is it. See what it should look like this
    [Click on Enlarge]
  5. Save the file and it will be in a .css format if you did it right
Continue the next section to learn how to take out all the CSS in your blogger template and then put it into the stylesheet file

Move style code from template to stylesheet

Now you have to open up your template code, you can do it by going to Blogger Dashboard -> Template -> Edit HTML ->  and Proceed.

Now copy all the CSS codes you have in your template and paste it into the stylesheet file we just created and delete the codes from template as you have now pasted it already into the file.

Note: You can not normally use the Blogger's default CSS code which has dollar sign into it's values for example font: $(body.font); as the value of a property is fetched from database, so you can't use it into a normal stylesheet file. If you want to speed up your blog page more efficiently than you can ask me to make the blogger's CSS code compatible with a stylesheet for as low as $8 as a donation amount. Contact me on my email depy45631@gmail.com

Host the file

Now when you have made the stylesheet file ready with the codes you can now upload it to your hosting service [Click here to know how to use free DropBox as CDN]. When the file is uploaded, get the hotlink (direct link) to it.

Attach it to your template

This is the last step, you now have to link the hosted CSS file to your template so it fetches the styles from the stylesheet. To do that go to your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F5 to find </head> and paste this code above </head> 
<link rel='stylesheet' type='text/css' href='http://host.com/files/stylesheet.css'/>
You obviously have to have the link in the href value, replace this link in above HTML
http://host.com/files/stylesheet.css
With the link to CSS file hosted by you.

Mission Accomplished

Yay ! congrats on improving your page load speed by using external CSS files, it not only optimize your page speed but also makes the page rendering easy. But the problem is that you can only put normal CSS in the stylesheet, if you want to make all the CSS codes compatible with a stylesheet you can contact me on depy45631@gmail.com  and yes you have to pay $8 for it.

Remove default share buttons from Dynamic Views Blogger

Dynamic views is now used by many people. But everyone don't want every feature of Dynamic views and e the share buttons are a feature that many Blogger users asked me how to remove it, this tutorial is specially for them.

Why one would want to remove the social share feature ?

Good question, the answer is that people having private blog don't need the share feature at all and even if the blog is not private some might just want keep away from social sites. Whatever the reason is, there's no option in Dynamic views to disable the search features and that's why you are here to learn how to remove it. Continue for the trick to hide/remove the share buttons

The trick

A one line code can work like a charm to hide elements from a page and for the share buttons in Dynamic views this one line CSS will do the job. Copy the CSS code below and then follow the instruction to add it
.share-controls {display:none !important;}
To add this CSS into your Dynamic views template Go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS and hit Apply to Blog and that's it.
Check your updated page by refreshing your page with CTRL+F5.

Your feedback

As you know we love to hear from you and to say thanks and ask question comment is the best way. Also subscribe to our blog for regular updates and Blogger tips and tricks. 

Add 'Read Previous post' link at bottom of Posts in Blogger

If you have a well structured blog with links to right things at right places then your chances of getting more readers increases and that's what any blogger wants. This tutorial shows you how to add an good looking link to previous post at bottom of every post automatically.
When you are new with all this HTML and CSS thing in blogger then you add a static thank you message at bottom of post one by one in all blog post while writing it, but there's more you can do with the template, you can add your own elements in the template to make your blog look better.
Demo
This is a post you will find helpful if you want to add something at bottom of every post : http://stramaxon.blogspot.com/2012/07/adding-any-thing-under-every-post.html
Coming back to main topic of the post, it's about adding a link to previous post under each and every post automatically. Read further for the codes.

The skeleton HTML

Before you start, Backup your template.
As usual we need the HTML to be in place and then we will add some CSS effect on it. The HTML code is actually just an anchor HTML with bloggers layout data tags to dynamically get the link of previous or older post.
<a class='lst-post' expr:href='data:olderPageUrl' target='blank'>Read our Previous Post</a>
Copy the above HTML to your clipboard by selecting and clicking CTRL+C.

How to add this HTML

We have to place it in the template and to do that follow these steps.
  1. Go to your Blogger Dashboard 
  2. Select the Template tab (in new interface)
  3. Now click on the 'Edit HTML' button on the page
  4. Click on 'Proceed' 
  5. Then check mark the box which says 'Expand Widget Template' (Important)
  6. Use CTRL+F to find <div class='post-footer'> in the template, you may not copy and paste the text from here, type <div class='post-footer'> yourself in the search box which appears after hitting CTRL+F
  7. Once you find this line  <div class='post-footer'> paste the HTML provided just above the code.

  8. When you have place the right code at right place then you can Save the Template.
Now check one bottom of your one of post and you will see the link to previous post, but doesn't it look so dull ? It needs to be painted in CSS3 to attract reader's attention.

The CSS

    .lst-post
    {
    display:block;
    font-family:'verdana' !important;
    cursor:pointer;
    background-color:rgba(10, 74, 133, 0.49);
    margin-bottom:-5px;
    margin-top:16px;
    color:white !important;
    padding:5px 10px;
    -webkit-transition:background-color 0.3s ease-in-out;
    -moz-transition:background-color 0.3s ease-in-out;
    -o-transition:background-color 0.3s ease-in-out;
    -ms-transition:background-color 0.3s ease-in-out;
    box-shadow:0px 0px 4px gainsboro,inset 0px 0px 2px white !important;
    font-size:14px;
    text-shadow:1px 1px 1px grey;
    border-radius:4px;
    }
    .lst-post:hover
    {
    background-color:rgba(6, 128, 224, 0.49);
    text-decoration:none;
    }
    The CSS code is lengthy but useful, all you have to do is now to add the CSS in your template to apply the style onto the link.


    Now follow these steps to know how to add the CSS into the template
    1. Go to your Blogger Dashboard
    2. Now select and Template 
    3. In the Template tab you will see the customize button
    4. You will enter the template designer
    5. Click on the Advanced tab > Add CSS 
    6. Now paste the CSS in the custom CSS box, Preview it before you save to make sure it's working well.
    7. If it's okay, hit the Apply to Blog button refresh your blog with CTRL+F5 and see the link just below any of your post !
    That's it ! This feature will keep your visitors engaged with your page and that's a good thing for your SEO and pageviews. Your readers will stay online for more time on your blog.                  

    Your suggestions

    You can help us make our blog post better by giving your suggestions and informing us about any error in post or the codes. Drop your precious comments which is very important for us. We will love to hear from you. 

    Create Google like Scroll bar in blogger blog

    If you look back at Google web pages back in mid 2011, they were simple just like a classic web page like other pages but 2012 seems to be a design year and that's why each and every big company painted their web pages with dynamic looks and features. One of the extraordinary thing about Google is it's scroll bars, they are just awesome and anyone wants to implement it, this tutorial will show you how to do that.

    Many websites used the same design for scrollbar with different techniques, some with JQuery or etc. Many blogger users also wanted to use the same design for their blog but they were helpless as most of the blogger users just have basic knowledge of web languages so it was difficult for them to make such design on their own.



    Before
    After
    This tutorial will teach you how to design the scrollbars like that in blogger.
    Actually the trick is very simple, the scrollbars are design with new CSS3 scrollbar selectors which only works in webkit, unfortunately their's currently no way to make it work in non webkit browsers such as Firefox, Opera etc.

    I have recently published 'Dream Blog V2' template in which i have implemented the scrollbar design. So here's the demo


    Demo

    The CSS

    It is all CSS which do the designing on the scrollbar and you don't need to worry about heavy javascript codes, a simple CSS code block can do it. This is the CSS, you don't need to make any changes in this code but if you know what to do then you can change color and some values to fit your needs.
    /* Webkit Scrollbar */
    ::-webkit-scrollbar {
    width: 15px;
    }
    ::-webkit-scrollbar-track {
    background: #FFFFFF;
    -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
    border: 1px solid #D8D8D8;
    }
    ::-webkit-scrollbar-thumb {
    background: #646464;
    -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
    }
    ::-webkit-scrollbar-thumb:hover {
    background: #AAA;
    }
    ::-webkit-scrollbar-thumb:active {
    background: #888;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
    }

    Adding the CSS

    Adding this CSS is easy, check this tutorial or follow these steps.
    • Go to Blogger Dashboard 
    • Select the Template tab
    • Click on Customize button
    • When you are in template designer, select Advanced
    • And from the Advanced menu select Add CSS 
    • Paste the CSS there and hit Apply to Blog. 
    That's it, now clear and caches and reload your blog by hitting CTRL+F5 and you will see the Google like scrollbars on your blog, now when your readers ask you how you did it you can tell them about us :)

    If you are facing any problems implementing the code then you can send us your message by dropping comments. 

    Embed Slideshow in blog post from Picasa

    Many Blogger users wanted to use a slideshow technique in Blogger, but they don't have the idea to do it. This tutorial will tell you an easy and working way to put slideshow into post.
    Embedding this slideshow into your post don't require you to use some heavy codes. Or you don't have to insert each and every image url in the source HTML yourself. This slideshow gadget provided by Picasa uses flash embed to put the slideshow on a page, so it's only displayable if you have Flash Player installed in your browser or computer system.
    Just follow these steps which is a 2 minute work.

    Procedure to add the slideshow

    If you are using blogger then the photo you upload into your posts are actually stored on your Picasa Web Albums. The half of the work in done inside Picasa Web Albums, follow the steps
    1. Log into your Picasa Web Albums with your current Google account. 
    2. When logged in you will see a upload button on top of the page,click it to upload your picture

      picasa web album homepage upload button

    3. A new page will be opened, name your Album and selection the files you want to upload by either clicking 'Select photos from your Computer' or dragging and dropping the pictures in the box. Just a quick example of it here.

      album create in picasa
    4. When the photos are successfully uploaded you now have to make the album Public, because photos uploaded directly through Picasa site are turned to private. You will see the privacy settings on right side (if it's already public then you can leave this step)
      Click on the Edit > And when a new box appears, you will see a dropdown menu under 'Visibility', select 'Public on the web' and Save changes.

      privacy settings edit album picasa

      album edit information picasa
    5. Now you will see some extra options on your right sidebar after turning the album public (by following above step), you will see 'Link to this Album' > Now click on 'Embed Slideshow'.

      picasa albums slideshow embed
    6. A pop-up will appear after you click on 'Embed slideshow', choose your settings. I recommend you to use the Large one, that's ideal for a blog. You will be given the code, click on the Yellow text area and copy the embed code.

      slideshow gadget configuration in picasa photo albums 
    We have now completed the 80% distance.
    Implementing the code in blog post
    To implement the code into a blog post, create a new post. You have to switch to the HTML mode and then paste the copied embed code from Picasa into the HTML of the post. Switch to compose mode to see how it is looking.

    Tip - If also want to have texts in your blog post (obviously) then first put the embed code in HTML mode and then enter a character after the embed code of slideshow. When you switcht to compose mode you will have the character in the Compose mode to get a text writing point in the post.
    Tip - Not only in post but you can also embed this gadget anywhere into your blog or website by placing it in the right place.

    Yay ! That's great you have your own slideshow in your post. If you are a photography blogger then this tutorial will help. Drop your comments on how was this tutorial helpful to you.  

      Hover effect on images in posts - Blogger

      This is an easy trick but an amazing one too, bring the photos in your post to life with this hover effect trick.
      You may have seen this on many big websites, these types of hover effects keeps the reader engaged with your blog and if they are getting bored they can simply play with it. If you haven't seen it before then check the demo below

      Demo

      So, how's it ? You can also do it vice-versa
      Don't it look great with this elegant hover effect. The code implementation is easy and you after reading the code specification you can make your own effect out of it. The whole thing we have to add is CSS. So read further to achieve this.

      The CSS for this hover effect

      This effect looks like that it must be created with heavy codes but with CSS3 generating this effect is easier than ever. The CSS below is actually for Blogger, but with little edits WordPress users can also use it on their website or blog
      .post-body img {
      opacity:1.0;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      }

      .post-body img:hover {
      opacity:0.7;
      }
      To add this CSS into your blogger blog : Log into your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS  -> Add the CSS into the custom CSS box and hit Apply to Blog.

      Now refresh your blog with CTRL+F5 and check the effect on your images !
      But what if you want it in opposite order ?

      Vice-Versa
      Then try this CSS, this keeps the image untouched faded and when you hover it you will see it in normal state.
      .post-body img {
      opacity:0.7;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      }

      .post-body img:hover {
      opacity:1.0;
      }
      The adding procedure is same as above one. Here opacity is the main property creating this effect, so changing it's value may bring some versatility into the effect. You can change it's value from 0.0 to 1.0

      Your views and opinions

      How is the effect working on your blog ? I guess its great but if you are having any difficulties in applying this effect at any point contact us via email or drop your comments.

      Show/Hide effect for Gadgets in Blogger with JQuery

      Don't you sometime feel like adding more dynamics to your blog and make it more user friendly, like giving them their own control like toggling show/hide of a gadget. You will learn how to do that in Blogger.
      A little instruction to JQuery: It's a powerful and small JavaScript library to add dynamic features and sometimes also used for transferring data.

      For a demo of this JQuery effect, click on the Title of About me gadget on right sidebar and see it toggling between hide and show. Ain't it great, you let your users decide whether they want to choose to display the gadget or not.

      Adding the JQuery lib.

      In classic blogger template, JQuery library isn't added in the document already. So to make the JQuery codes work you first have to implement the JQuery library.
      To do that in blogger, Go to Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </head> and paste this HTML script tag just above </head>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      This is just the first step, now read further for the real trick.

      The JQuery to make the effect 

      The main think we have to focus on this is the correct selector so it should work for your blog too. Although there i know the basic selector for classic blogger templates and can be applied on any template unmodified.


      This is the magical code doing it all, study it well and read what ever line is about
      <script type="text/javascript"> 
      $(document).ready(function(){
      $('.sidebar .title').one("click",function(){
      $(".sidebar .widget-content").slideToggle("slow");
      });
      });
      </script>
      Note : The first and last line is just to wrap it into script tag to be placed in the document.
      • Line 2 : It tells the browser to load the Jquery after the document is fully loaded and read for performing JQuery effects
      • Line 3 : The whole line describes that when .title in the .sidebar gets clicked then perform the function (which is in the next line)
      • Line 4 : Continuing from the above line, it plays the function that was declared in the 3rd line, it makes the .widget-content inside .sidebar to hide when it's visible on a click event and when it's already hidden it's comes back in view. 
      • Line 5 and 6 : Ending for the above lines
      Where to add this Script ? Go to Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </head> and paste this HTML script tag just above </head>

      You can use this on other areas of your blog just by making some changes in selectors, selectors can be identified easily with chrome developer tools.

      Result : So when you are done placing the codes at right place, Save the template and refresh your blog using CTRL+F5 to ensure that all files are loaded freshly. Now try clicking on title of any of your gadget and see the amazing toggle effect. That will just make you blog to a new level.

      Your feedback ?

      This tutorial is designed to make implementation of JQuery in blogger easy and make you understand jquery, so if you find anything difficult and don't understand it then drop your comments and we may just look to it.

      This JQuery will not work on some blogs having different templates, so if you don't have any idea what to do then post your blog links in the comment and we will guide you through the process. 

      Adding any thing under every post

      Bloggers with less experience with some advance feature of HTML and Blogger will always end up adding 'Thank for reading this post' under every blog they post, but there is much easier way to add any thing, from normal text to good looking HTML elements below the post.
      In this tutorial you will get to learn about adding anything you want under each and every post without adding it. It will automatically appear below your post, take my sharing buttons, previous post and subscribe box. I don't add them in individual posts, they all render automatically.

      You maybe thinking what's the big deal ? You can add the gadget from Layout, but note that gadgets added under Blog posts gadget actually appear under the comments section which is again under the post. So the gadget gets in little distance from the post, ain't it ?

      I don't think that i must stretch this post to add extra information, i am sure you have understand what i am trying to say.

      The trick is to add the element directly in Template's HTML, but you need to have an idea about where you exactly need add the HTML. The obvious way for the edit HTML is
      Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Check mark the 'Expand widget template'. The next step is to use CTRL+F to find this line
      <div class='post-footer'>
      Once you find it, but any HTML you want just above the div element. See the image below.



      All you need is to paste any HTML or JavaScript code above it to render the code under post. But if you want to control where should the HTML appear then see this tutorial on using blogger conditional tags.

      Now you can make your weblog more attractive and dynamic with this simple but useful trick.

      Disable users from selecting text and images on blog/website

      Bloggers using tricks to disable right click are benefited in ways. They may have surely get red of their content being copied.
      There are more steps you can take to make your content secure and can disable others from copying it. I posted a tutorial on disabling right click but there more techniques you have to use to protect your content better.

      Demo

      We can disable the selection of text or images on any website or blog to disallow others from copying your contents. It can be done with CSS easily. You just have to make some small customization depending on your needs.

      body {
      -webkit-user-select: none; /* Chrome all / Safari all */
      -moz-user-select: none; /* Firefox all */
      -ms-user-select: none; /* IE 10+ */
      -o-user-select: none;
      user-select: none;
      }
      The above CSS will disable selections on all elements including text, images, tables etc. Learn from the examples below  


      This CSS will work in Blogger, it disables selection on all elements in a post. Means users will be able to select every element on sidebars,headers and other parts of the blog except the .post-body area.
      .post-body {
      -webkit-user-select: none; /* Chrome all / Safari all */
      -moz-user-select: none; /* Firefox all */
      -ms-user-select: none; /* IE 10+ */
      -o-user-select: none;
      user-select: none;
      }
      The CSS below will only disable selections for images in the whole document, cause i have put body in the selector.
      body img {
      -webkit-user-select: none; /* Chrome all / Safari all */
      -moz-user-select: none; /* Firefox all */
      -ms-user-select: none; /* IE 10+ */
      -o-user-select: none;
      user-select: none;
      }
      Or if you want to disable selection for images in post area only, then this CSS will work (for Blogger)
      .post-body img {
      -webkit-user-select: none; /* Chrome all / Safari all */
      -moz-user-select: none; /* Firefox all */
      -ms-user-select: none; /* IE 10+ */
      -o-user-select: none;
      user-select: none;
      }

      This was a quick overview on the user-select CSS property and the way to disable selection on elements. If you want to apply CSS on your blogger blog can check this tutorial.


      If you want the disable selection for elements in a specific part of your web page then you use chrome developer tools to know it's class and put it into the selector area of CSS code.

      Disable right click without JavaScript

      There are many JavaScripts that can disable right click on a website or blog, but JavaScripts can be bypassed in many ways and just to reduce the chances for copy-cat to copy your contents use the disable right click technique along with the technique in this tutorial.
      http://stramaxon.blogspot.com/2012/07/disable-right-click-without-using.html

      Disable right click without using JavaScripts

      Disabling right click on websites and blogs are very popular nowadays just to ensure that no one can copy content from their website.
      Using JavaScripts provided by many websites on blog or website to protect content from being copied is very popular. JavaScripts can be of different types depending on it's author, they can put whatever they want and block right click on webpages.
      But JavaScripts have it's own bad effect on blogs, because most the JavaScripts provided to disable right click on webpages sends out an alert message whenever someone right clicks and it is irritating. And JavaScripts can be easily bypassed and allow the right click.
      So what you want is a hassle free way to stop peoples from right clicking on your page and copy your contents.

      One benefit of having right click disabled is that you can stop most visitor from copying your contents, but there can be some people knowing ways to bypass it, but hope you don't have such visitors who will copy your content.

      The real trick

      Almost everywhere you will see tricks to disable right click using JavaScript, but if the user disables JavaScript they can easily use right click on your website without any difficulties. JavaScript is not an ideal way to do it.
      We have got a new way to disable right click without any implementation of JavaScripts that can slow down your page. I came to knew about this while I was in a net banking site, just used the chrome developer tool tools to inspect what they used to disable right click and found it.
      It was a small attribute in the body tag of the document. So follow the steps to do it on Blogger, this can implemented on any website, just find your main HTML and add this attribute in the <body> tag.

      Demo

      For Blogger Users - 

      1. Go to Blogger Dashboard
      2. Select Template tab
      3. Click on Edit HTML > Proceed
      Now click CTRL+F and find enter this <body into the search box, you will find something similar to this



      The
      <body> tag is just below the ending </head> tag. Now when you find it, copy this small code snippet or a short code word.
      oncontextmenu="return false;"

      When copied, go back to the Edit HTML of your Blog and paste this after
      <body with a space in between. So it must look something like this


      Once you have added the attribute in the body tag refresh your blog with CTRL+F5 and try to right click, now you have right click disabled on your blog/website ! Great, people can't copy your content.

      Negative points in using JavaScript for this ?

      You can rank JavaScript 2nd to play the trick of disabling right click on a website but there are some negative points of JavaScript. Read those below
      • Most JavaScripts uses alert message which can annoy regular users
      • If the page load is interrupted when the page is loading then JavaScript don't work which will result in letting others copy your contents with right click.
      • Those who want to copy the content they can disable JavaScript in their browser and they can copy the content again. 
      • JavaScript slows down the page loading speed 
      So, these were some negative points of using JavaScript to disable right click, simply use the small attribute to make it work like the JavaScript does.

      Will it completely disallow the user to copy contents ?

      You must accept the bitter truth that there's no technique which can keep everyone from copying contents or pictures from a site. They can use many ways to do this, but if you don't have some wicked minded people on your blog then it's guaranteed that your content will be less copied from your site. Using this trick is better than not using it.
      • Additionally you may also disable text and image selection on your page for better protection - Click to know about it

      Your feedback

      As always your opinions and feedback is important for us because you are the one who makes our post more valuable and worth reading. Drop your comments to express your thought on this tutorial.