Archive for August 2018

Thursday, 30 August 2018

Remove Footer Credit From Blogger Template Without Redirecting To Their Website

Posted By: August 30, 2018 39 Comments
So, you want to hide that 'footer credit' from the free blogger templates-and you tried editing the main HTML of the theme. You removed that footer element from there and went back to refresh page - It redirects you to their theme website!

Many of the Blogger template makers make the templates like Goyabi, Msdesign , Templetify etc..Most of them provide the same paid template free - but has that footer credits on it.There's nothing much to keep that templates name down the footer, some some people found it to be problem :(

Now how to remove that? These templates have encrypted JavaScript in it which checks if the footer credit is present or not. If not, it will simply redirect you to their website.

Here, I'll not show how to decrypt it, but how to remove that or hide that credit.There are many solutions already present but some works and other didn't. So I thought to came up with a ultimate way to solve this problem.

#1 Using CSS

You can easily set the opacity or visibility of that to none or 0.But in some cases, it still redirects to their main web page.
Steps are as follows for this method-
  1. Go to Blogger.com , Theme > Edit HTML.
    Edit html in blogger.
    Edit HTML in Blogger.
  2. Click Ctrl + F, but before that, make the text area focused(That means right click on the code anywhere.) then this will appear.
    search for the name
  3. Search the exact the thing that appear on footer. For eg - If it comes MSdesign , search for Msdesign.
  4. Then you will able to find the footer tag. If not, Search 'footer' and finally add between the tag.For eg, <div id='footerfix'> , change to <div id='footerfix' visibility='none'> .
Now lets move to the Second one.

#2 Using JavaScript OR Jquery

Here, we will be finding the element and using JS or Jquery.[after page loads ->> set opacity to 0.] 
Steps are as follows for this method-
  1. Go to your blog and open Inspect Element.(Ctrl+Shift+I on Google chrome for Windows).
  2. Click on select element (Ctrl+Shift+C) on the top left corner of Inspect window.
    Ctrl+Shift+C
  3. Locate the element you want to hide and note down the respective id.(If there is no id, note down the class.)Click on below image and look carefully.
  4. Add the below code in the <head></head> of your page, replacing the ID with your Id.(Do not remove the # and If you noted down class[as  in step 3], replace #ID to the class and add '.' in front of it.)
    5. 

    1. <script>
      

      2. 

    2. $(document).ready(function(){
        $(#mscontent).css('opacity','0');
});
</script>
      

      3.
  6. And for JavaScript, put below code at the end of the document-
  7. <script>
document.getElementById("ID").style.opacity= 0;
</script>
So here you knew about how to hide that.If you know about query or JavaScript, you can easly make it out.And, if you missed any steps and lost any where, simply comment your blogs URL down below and I'll give you direct Jquery and JavaScript code.
Categories:

Saturday, 25 August 2018

Detect The Keyboard Key Clicks In JavaScript

Posted By: August 25, 2018 Leave a Reply
Well, you might have seen on the different websites and web apps that you can control them on keyboard.For example, you can hit spacebar for play/pause the video or F to toggle full-screen. You can apply it to your project too. For that, you need to detect the keyboard clicks in JavaScript.

How to detect keyboard clicks in JavaScript?

For that, we need to write a little JS code. Have a look at that.
document.onkeydown = keyCtrl;//will map all the keyboard actions.
function keyCtrl(e) { 
    if (e.keyCode == '67') {
        // Add function code here
    }}
Okay, here we have made a function that will detect the key actions. For that, we need to know the keyCode of that particular key.In above code, it is 67 means 'C'.You can take a look at below chart or simply go to keycode and hit the key of which you want to find the keyCode.
JavaScript character codes key codes.






So that's it!
Below is an example of a function that will alert once the caps lock key is pressed.
If you want demo then try clicking caps-lock:).
document.onkeydown = keyCtrl;
function keyCtrl(e) { 
    if (e.keyCode == '20'){
        alert("You Just pressed Caps-Lock!");}}

Solution To Some Known Issues

What do I do to block the default function when I click on the function keys?
In this case you can use  event.preventDefault() to prevent the default functions.

That's it for this post, hope you like it and Do check other posts.
Categories:

Sunday, 19 August 2018

Creating the unique Images that Google will love

Posted By: August 19, 2018 1 Comment
People search on Google.They too search on Google images.Whereas, many people drive a huge traffic to their blog by Google images itself.But many people fails.This is a guide for just creating right images for your blog that both- your visitors and Google will love.

Categories:

Tuesday, 14 August 2018

How to Host CSS and JavaScript files on GitHub?

Posted By: August 14, 2018 4 Comments
Okay, so you have a problem of slowing of your blog or website because of the server, which is not giving hand-holding support to loading of resources.This happens specially if you are using shared hosting.The reason could be your CSS or JavaScript which are putting lots of pressure on your server.

So you are looking for a CDN or a file hosting service which would be totally free of cost! And yes, your'e on the right place.Here I will show you how to host CSS and JavaScript files on GitHub totally free.
host files free on GitHub gist

#STEP 1:

Create your GitHub account, if you don't have already.After that, Sign In.
Now go to GitHub Gist, or Google search- 'GitHub gist'. There you will see a option for creating a new gist as follows.
Creating new gist in GitHub.
Creating new gist in GitHub.

#STEP 2:

Add filename with extension and copy-paste your code there.You can also write description.Then create the gist by clicking  Public or Private buttons.Only difference is that private gistes do not appear in search engines, but can be viewed by anyone if that person has URL of the gist.
This is more nicely illustrated in the picture below.
Create GitHub gist.

#STEP 3

Now when your'e done with step 3, click on RAW button headed right about the code.
GitHub gist code
Copy the raw URL and finally you can use it as normal script element like below.
<script src="https://gist.githubusercontent.com/BigBozzz/be07313132a5cc895e1cfacef8542f29/raw/c0d8bbe761fea5fb993c2ee2efaaf73982bd41f8/Simplefunction.js"></script>

Now this was one way.Another is to by creating repository.If you already have a file in repository, click Raw button to get the link to raw file.

So here you learned how you can host unlimited files free!Follow css-magz for more trips and tricks like this or at least remember this name so you can catch us back!
Categories: