Monday, 30 April 2018

Google turned down support for their URL Shortener, Here are the top 7 Alternatives

url shortener alternatives
As of March 30, 2018, Google announced on their developer's blog that they are looking forward towards bright future and moved towards Fire Base, leaving behind the support for their URL shortener, Goo.gl.

Shortening the URLs is much of fun as they were giving you a track on traffic coming from different social media and apart from that, they were easy to share.

Hence, compressing large URLs into a small, we can't sit back and now need to find some other alternatives to URL shorteners. So, here, I've collected the top 10 alternatives for URL shorteners.
1.Bit.ly
Bit.ly is very good for Information Tracking.They are much powerful to deliver high engagement and real time insights. Bitly offers you to shorten, brand, track, and share links from its secure and intuitive platform.Account limits you for making 500 branded links and 10,000 non-branded links.
Bit.ly link shortener.
Enterprise account (paid service) can give you much more links as you want and you can analyze the information more accurately and get richer analysis than the free account.Over 3 hundred billion links are shortened by bit.ly (and counting).

2.Ow.ly
Ow.ly is User friendly.Ow.ly has a very user-friendly dashboard for shortening links and to track them.In order to create short links, you need to sign in to a Hoot-suite dashboard.The free version of Hoot-suite gives you unlimited access to the Owly link shortener. You can also upgrade to a paid plan if you need more features.
Owly URL shrinker.

3.TinyURL
Tiny URL is best for anonymous use. TinyURL is very simple and best for anonymous use somewhat like Google URL shortener.Once created a link by TinyURL, it didn't break in email postings or expires.
TinyURL homepage.

Just head over to their sire, enter your link to be shortened, add your custom alias if you want (this makes TinyURL better than Google URL Shortener.) and hit enter!

One down-point I found is that, if your custom aliases is not available, you need to add the URL and need to do the whole process again. TinyURL is good for simple URLs, but not for professional use.

4.Ouo.io
To make a little bucks out of your links.
Ouo.io can be used not only to shorten your links but also to make some cash.You can make nearly or more than $8 from 1000 clicks no matter from same or different IP or user.This makes this URL shortener a very simple and easy to use.At the date of writing this post, Ouo.io not uses https:// which may disappoint some people. Although, they can update it.

Minimum payout in Ouo.io is 5$ and paid 1st and 15th day of the month.
Ouo.io URL shortener.

There are many short-links sites like these which pays you through the means of advertising.When user will click on your short link, these site takes them to a page where there is an advertisement.After some time, they redirect the user to their original page.would suggest you not to go through this method, as the ads on the platform may be spamery, which may make the user disappointing and annoying cause to leave your site.It could also take down your reputation.

5.Buffer.com
Buffer is good at managing social media links.It is another short linking site which is free as well as paid.In the paid account, of course, you will get a lot more benefits.It has business plans to $399.

Buffer is simplest and most powerful social media tool, and to set the bar for great customer support.You can give it a try in its free plan first before upgrading in pro plan.

6.Cutt.us
Simplest URL shortener.Cutt Us is very simple to use.Just head over to cutt.us, paste a long URL, you can also add custom alias if you want and hit enter! You have a short link and Qr code ready.Must try!
Cutt.us URL shortener.

7.V.ht
Really very hot!If you don't prefer cutt.us, then v.ht is best smart service for you.It is simple, easy to use, and fast.
V.ht URL shortener.

I have tried to provide the best names of URL shortener with a varying need of different users.If you know more URL shorteners than these, you can comment down below.
Read more articles about blogging in the blogging section of this blog above and give a like to CSS-magz on Facebook.

Thursday, 26 April 2018

Set any thumbnail for the blogger blog post


While comparing WordPress and Blogger, the one down-point of Blogger is that there is no feature to set or choose any picture that you want as thumbnail of the post.Today, we are going to see how we can choose the random picture as thumbnail for the blog post.

To do this, first we need to understand that to which picture the Blogger makes as its first photo!It has been noticed that Google Blogger always takes the first picture in the article as its thumbnail.

So, the solution is to make a beautiful thumbnail and always add it as the first thumbnail of the post.

But, what if you don't want to put it as the first image?For that, there is a little hack!Let me show you that.


  • First, after writing the whole post, add  the thumbnail image at the top of the post like in the below image.
    Adding photos in Google Blogger.
Adding photos in Google Blogger blog post.

After adding thumbnail at the top of the post, it will look something like this.
Editing in blogger.
Now, Switch to HTML tab from compose tab as shown below.
Switch to HTML from compose in Google Blogger.
After that, you'll find the <img> tag.If you know HTML, you will understand this better.
Editing HTML of blog post.

Now, we need to hide the image using attribute style='display:none'.So, add it after '<img '.Then it will look something like this.
Adding style attribute in HTML.

BOOM!That's it! Now publish the post and you will notice that the
 thumbnail is Not visible in the post but is visible in the Home where all the articles are being shown,You will also com to know that while sharing the links on social media, such as Facebook, thumbnail is being shown.

If you preview this, then it will won't work.This trick will work only after publishing the article.This will not work if you did any mistake in between.There should be space left in front and back of the 'style='display:none''.If you have any problem, comment down below.I'l surely reply.

If you want demo, then check in this article itself.You won't find any thumbnail included in this post, but when you look it from the home, then it will appear.

Thanks for reading this post.If you liked it then give a like us on Facebook.

Tuesday, 24 April 2018

Increase you Facebook page likes

Making a Facebook page is a very easy task, but gaining likes becomes difficult sometimes.So here we come up with some extreme tips that will help you in getting more Facebook page likes.

1.Make all the things set up
After creating a Facebook page, follow the tips give Facebook,i.e. Set up a profile , cover and then set a unique id for the page.Unique Id should be short, rememberable this redirects your page like https://wwwfacebook.com/your_id,. The reason behind it is-; Let me explain with an example.If you search Css-magz on google, the first result comes up is on our Facebook page then you'll see on somewhat 3rd or 4th link that this site is there.So, having social media accounts similar to the website name is better.
Another advantage is, the search engine will see your page as a little well known as it will see your likes on Facebook page.Make sure you've added your site's URL in your facebook page's about section.

The best way to target the right audience on your page is by promoting your Facebook page.You can promote any of the Facebook posts on your page, in minimum $1.It will bring true followers as Facebook targets their ads to the people of the specific interest.

Other ways are Quora and Facebook groups.These ways remain common as I have discussed that in this article.But, here I'm going to add some more Facebook groups.

2.Make Magical posts
Make some good posts like quote posts.You can easily make them very beautiful using Canva.
You can also make some other, such as did you know or comic post like below.You can take help of the tools like Meet Edgar to maximise your reach.



3.Add Facebook widgets to your blog or site
You might have noticed that when you leave a site, a popup comes like below and tells you to like their Facebook page.These are Facebook widgets.You can make then very simply here.These are plugins also called as Social plugins which helps you to maximize your reach to the people of you blog.
Make a Facebook like plugin for your website
First add your page URL like-'https://www.facebook.com/cssmagz'.Enter in tabs what you want to show.For e.g. timeline, message, events etc. You can also specify the width and height and then click on the 'Get Code'.Then you will get a code.You can embed it either through FB JavaScript SDK or an iFrame.

3.Invite your friends to like
You can, of course, invite your own friends to like your Facebook page.It is very easy way to get likes very early when you start your page.
Invite friends on Facebook.

4.Make two pages
This trick can also be used when you are unable to get expected likes.Make another page of nearly similar topic.For e.g. I have a brand page-'Tony Bakes' then another page will be-'Cake Lovers'.

Cross post across two pages to increase their likes.Try to touch the emotional feelings of the people towards their passion to get more likes.

Also, you can submit your posts to another page with lots of likes.Or can tell them to share your one of the post so that the people will also reach your page.

5.Share your Facebook page
There are many groups on Facebook a we've discussed here where users will exchange their Facebook page links and like each others posts.Join these groups and start sharing.

πŸ’žIn Veronica’s Corner: Social Media Share Group πŸ’ž
Share Your Blog + Tips and Tricks
The Bogging Crew
Blog Booster

6.Try to use the following words in your Facebook page post.
To maximize your post reach, you expect to share it by your followers.So remember to use the following words next time-

Warns,Inspires,Unites,Amuses,Gives,Offers,Discount,Deals,Amazes,Advises.

It also seems that Facebook helps these posts to get maximum reach.

7.Post things at right times.

Avoid posting anytime .Its better to make a schedule.The best time to post are 12 PM, 3 PM and 7 PM. Although, this cannot be accurate for all the people because of different demographic and industrial factors.

Facebook correct time for posting.

So this were some tips and tricks to increase your Facebook page likes.Hope at lease one will sure work for you. Thanks for reading the post and to be connected, leave a like to css-magz's Facebook page for sure.

Saturday, 21 April 2018

Build a HTML 5 Video Player With Custom Controls || Part-2

This is the second part of  ''How to make an HTML 5 video player with custom controls''. For first part head over to the first post.
Make a HTML 5 Video Player.

This post will be little different from the last post as we will now design our video player and will add the functions such as toggle play-pause, timings and progress bar.

Before going further, we will first look at our project files.
To avoid interruptions, we've made total 3 files for the video player.

---πŸ“‚ Index.html
---πŸ“‚ Design.css
---πŸ“‚ vidplayr.js

In which, Index.html is our main HTML file, Design.css is cascading style sheet(CSS) file and vidplyr.js is javascript file in which we'll be writing all functions.In JavaScript file, we will add different functions to make our player work.

Step 1: Making <div> for controls

We will make a <div> for all the controls.All the controls such as play/pause, progress/seek bar, a full-screen button will be fitted inside it.To general idea about how it is, see the sketch below.
HTML 5 video player sketch.

So, we are going to make a <div> tag after <video> tag.Let's set the id and class as vidcontrols.
Inside this <div>, we are going to make a division tags for the progress bar,and a common <div> for play/pause button, time , volume ,settings and fullscreen.

The code will look somewhat like below.This is not a complete code for the player as we will see the volume and options in next tutorial.

<div id='vidcontrols' class='vidcontrols'></div>
After adding the other elements, it will be something like below.

<div id='vidcontrols' class='vidcontrols'>
<div id='progressbar' class='progressbar'>
<div class="seekbar" id='seekbar'></div>
<div class='loaded' id='loaded'></div>
<div class='ball' id='ball'></div>
</div>
<div id='btmcontrols' class='btmcontrols'>
<button id='playbtn' class='playbtn' title='Play'>
<!--<div id='volume' class='volume'></div>-->
<!--<div id='options' class='options'></div>-->
<button id='fs' class='fs' title='Fullscreen'>
</button>
</div>
</div>
For the buttons, we will not use images and instead of that, we will use SVG.It will reduce the size that of the image and increase the size of the SVG will not affect its quality.

So, the SVG for the play button(▶️)-
<svg style='fill:white;'><g><path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path></g><g><path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path></g><g><path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path></g><g ><path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></g></svg>
And SVG for fullscreen(🈁)-
<svg style='fill:white;'><g><path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path></g><g><path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path></g><g><path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path></g><g ><path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></g></svg>
Above tags will go inside the Play and Fullscreen button tags respectively.

Step 2: Adding CSS

Now the next thing is to apply CSS so that the player will look good and easily controllable.
For all the tags we've already seen the classes and their ids so the entire CSS will go as below.

#vid
{
display:block;
width:100%;
max-width:100%;
height:auto;
}
#container
{
position:relative;
max-width:700px;
}
.vidcontrols
{
position:absolute;
bottom:0;
left:50%;
padding:1px;
background:rgba(0,0,0,0.5);
background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.5));
transform:translateX(-50%);
transition:bottom .25s ease-in;
height:40px;
width:698px;
}
.playbtn
{
position:absolute;
border:0;
cursor:pointer;
transition:opacity .175s ease-in;
margin-left:5px;
display:block;
height:40px;
width:40px;
background-color:transparent;
overflow:visible;
outline:none;
}
.fs
{
display:block;
background-color:transparent;
border:1px;
height:40px;
width:40px;
position:absolute;
float:right;
right:2px;
margin-right:10px;
outline:none;
overflow:visible;
}
.time
{
position:absolute;
height:28px;
width:auto;
margin-left:50px;
margin-top:10px!important;
overflow:visible;
font-size:18px;
color:#fff;
}
.seekbar
{
position:relative;
cursor:pointer;
width:0;
height:8px;
display:block;
max-width:670px;
background-color:rgba(225,0,0,0.9);
display:block;
}
.progressbar
{
cursor:pointer;
display:block;
height:8px;
position:absolute;
max-width:670px;
background-color:rgba(225,225,225,0.2);
z-index:10;
width:698px;
margin-top:0;
margin-left:10px;
}
.loaded
{
margin-top:-8px;
height:8px;
display:block;
background-color:rgba(225,225,225,0.4);
max-width:670px;
}
.btmcontrols
{
max-width:670px;
width:100%;
height:28px;
margin-top:5px;
margin-left:10px;
}
.vidcontrols
{
opacity:0;
transition:opacity .1s cubic-bezier(0.0,0.0,1,1);
}
#container:hover .vidcontrols
{
opacity:1;
}
.ball
{
opacity:1;
width:15px;
height:15px;
margin-top:-11px;
position:absolute;
z-index:99;
border-radius:100%;
background-color:red;
}
In above CSS, we've given all the basic stylings.Video controls will show when the user will hover over the video tag and this is controlled by pure CSS.

Step 3: All Of the Functions - JavaScript

Starting from the basic play/pause function, we'll see rest all of the functions.Finally, we'll combine them into one file-vidplyr.js
So we start with the main function s(). It will be triggered when the body will load.So the body tag will be <body onload='s()'>.

The play pause function.
playbtn.onclick = function() {
    if (video.paused) {
        video.play();
        trackPlayProgress();
        playbtn.innerHTML = '<svg style="fill:white;"><path d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path></svg>';
    } else {
        video.pause();
        stopTrackingPlayProgress();
        playbtn.innerHTML = '<svg style="fill:white;"><path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path></svg>';
    }
}

Where. playbtn is a play button and video is the video tag.

When user will click the play button, if the video is not paused, then it will play and the SVG(icon) of the play button will change and vice-versa.
trackPlayProgress is a function that will track the play progress as follows-

    function trackPlayProgress(){
      playProgressInterval = setInterval(updatePlayProgress,50);
    }
    function stopTrackingPlayProgress(){
      clearInterval(playProgressInterval);
    }
updatePlayProgress will update the time in <p> tag.
    function updatePlayProgress() {
     document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);
     widthvi = video.currentTime / video.duration * 100;
     seekbar.style.width = widthvi + '%';
     ball.style.left = widthvi + "%";
     if (widthvi == 100) {
      video.pause();
      stopTrackingPlayProgress()
     }
    }
Video.currentTime will return to the time in seconds up to many decimals as 8.So we need to format the time to proper minutes and seconds.
    function formatTime(seconds) {
      seconds = Math.round(seconds);
      minutes = Math.floor(seconds / 60);
      minutes = (minutes >= 10) ? minutes : "0" + minutes;
      seconds = Math.floor(seconds % 60);
      seconds = (seconds >= 10) ? seconds : "0" + seconds;
      return minutes + ":" + seconds;
    }
Function for on updating time on page load and updating video loading time.
 video.onloadeddata = function() {
 document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);
 video.addEventListener('progress', function() {
  var range = 0;
  var bf = this.buffered;
  var time = this.currentTime;
  while (!(bf.start(range) <= time && time <= bf.end(range))) {
   range += 1;
  }
  var loadStartPercentage = bf.start(range) / this.duration * 100;
  var loadEndPercentage = bf.end(range) / this.duration * 100;
  var loadPercentage = loadEndPercentage - loadStartPercentage;
  document.getElementById("loaded").style.width = loadPercentage + '%';
 });
};
And finally,
 Function for seek bar on mouseup.
function seekbarmove(e) {
 var x = e.clientX;
 var position = progressbar.getBoundingClientRect();
 var xi = position.left;
 diffrence = x - xi;
 seekbar.style.width = diffrence + 'px';
 ball.style.left = diffrence + 'px';
 ai = diffrence / 670;
 updatetime(ai);
}
function updatetime(pos) {
 time = pos * video.duration;
 video.currentTime = time;
 document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);
}
Although, the seek bar is not smooth as the mouseup event is used.In next tutorial, we'll see how to make this smooth.So we can drag it well.

Step 4: Summing Up

Voila! Our video player is ready but we missed one function-Full screen. We'll see it in the next version of this player.
HTML 5 video player css-magz demo.
Have a look at the whole Code and Demo.
If you like this post, give it a like on our FaceBook page - CSS-Magz.

Monday, 16 April 2018

10 Tips to Speed Up Your Blog's Loading Speed

Maintaining higher blog speed is also a factor in SEO. We constantly need to check if our blog is running at uniform speed or not and for that we need to apply some techniques to make it faster.

Today we are going to look at some easy to do techniques to boost up page loading time.
make blog load faster.
  • Take Look At Host
The very important thing if you have any blog, website or web app.It is okay if your bog is hosted on blogger.com as it runs on Google servers which are usually fast.

But if you are using any third party hosts, and your page loading speed isn't that great, then you need to upgrade your plans.If you are using shared hosting then upgrade it to VPS.
Server hosting websites.

  • minify CSS and JavaScript
If your scripts are not minified(compressed), then do it as it will surely increase your page load speed. Minifying or compressing this scripts will reduce the size of the files and thus, they will load faster.
If you use WordPress, you can use this or any other plugin.For non-WordPress users or bloggers, you can use some online tools like this.

  • Compress images
This is the most important factor responsible for slow page loading speed. Many bloggers use high -quality images(nothing harm in them) and their size is also high so it takes much time in loading.
You need to compress this images as they will reduce image size and there is no much need of using high-quality 1080x1768 px images if finally, they will be loading at 590x590px. Also at mobile phone level, there is no much need of using this high-quality images.

When the page is being loaded, the browser tends to load the text in the page first.If you have already specified height and width of the image in <img> tag, the browser will leave that space and will load the text first and then it will load the images.

For compressing images, you can use WordPress plugins such as smush or many online tools are also available like this.
If you are using Google blogger, the Blogger will automatically resize the image and will add height width.

  • Use CDN
Using content delivery network or CDN page will absolutely load faster as it would load resources from the nearest server to user. YouTube also uses CDN to deliver the video much faster to the user and cuts off much streaming time.There are many CDN available such as CloudFlare. It has 150+ data centers around world.
CDN worldwide.
  • Use a better theme
Use an SEO friendly, fast loading theme.If theme itself takes much time in loading, you need to change it immediately.
WordPress themes.

Choose a theme from well-trusted sources. It is better not to go much far for free themes in case of WordPress or similar as they can further create problems if there are any malicious code in it.In Blogger,theme  is made of simple xml yet you need to download from trusted sources.
  • Don't load unnecessarily
Check whether some resources are loading unnecessary such as unnecessary scrips etc. If they are, better to remove them.
  • Delete unnecessary plugins
If you find that a plugin is no longer useful to you, do delete it. Check for a plugin that would do the work of two or more different plugins(plugins substitute).
  • Show limited number of posts
Anytime if a user searched anything to set a limit of 10 results or like that.Loading posts way more will increase loading time.So load a limited number of posts or even comments.
  • Use JavaScript at end
When inserting JavaScript to the page, such as Facebook or any other sites, add it after <body> tag.SO it will not interrupt the existing things while loading.

  • Don't use too many Advertisements
We've seen many bloggers using too many ads from different ad publishers.Load all the ads after loading the page.Many times, in slower connections before loading the text and images, the ads start bonking up.This is because they have inserted the scripts at top of the page.These scripts take time to load and further the whole page loads slowly.
too many advertisement.


Well, Google seems to consider 0.5-1 sec as excellent page loading time. However,less than 3 sec are average for most of the websites.
Use the above tips to make your blog faster and move a rank up in Google search!

Saturday, 14 April 2018

Create a custom scrollbar with pure CSS

Want to make your existing scrollbar beautiful, responsive and matching with the theme of your blog?Yes! you could too build it without using any javascript and only with a little bit of CSS.
Create a custom scrollbar cssmagz.

Before moving further, the sad part is this CSS will not be effective in Firefox and IE or Microsoft Edge.


So you have to copy above CSS code and paste it into <style> tag of your HTML page and that's it is!

And don't forget to make any changes in code.You can always change color, add radius and add buttons up and down the scrollbar.

Add hover property to make a realistic effect and you can also add smooth transitions to this.

There are currently 7 properties in which you can stylize your scrollbar.They are -
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
::-webkit-scrollbar-track
::-webkit-scrollbar-track
::-webkit-scrollbar-track
Any extra info and examples of this are, of course, available on W3Schools.

Use Google Like A Pro!

Google,being most used search engine till date,used by many people around world.But after reading this post you will be more knowledgeable about how to use Google like a pro-faster and get a quick answers.

So lets start with the simple ones.

  • Head Or Tale?
consider when you and your friend or colleges got stuck up with a decision, and want to decide with only either of a options remaining and you decide to flip a coin.But wait! you have no coin!In such case you can use Google for flipping a coin.Just search 'Flip a coin' and your decision is ready.

Flip a coin on Google Search

  • Know your IP address
You want to know your Internet Protocol (IP) address? Just search on Google 'ip' or 'ip address',it will show up your ip address.
Search for IP address on Google.
  • Do a barrel roll
Want to make Google Search page roll like a barrel? Search 'do a barrel roll' on Google and check out the result yourself! 

  • Convert numbers to word
For example what will be 8203983 in English words? Search 'Number = English' and check out the results!
Numbers to word on Google search.

  • Do calculations on Google
Although its easy to do simple calculations on Google chrome in search bar,Google search will be more helpful while doing complex calculations.For calculator, search on Google - 'calc' or 'calculator' or make your mathematical problems directly through search.For example - 627+839
Google Calculator.

  • Search for specific file type
You want to download any power-point presentation or want to download any word file to your search results, search- 'your-search-query filetype:pdf'.
Search pdf files on Google.

  • Search in specific site
If you want to search results from specific site, use query -'your-search site:sitename.com'
For example, -'why can't leopard hide? site:quora.com'
Results from specific website-Google search.
  • Set timer
You must be knowing this thing already.Search 'set timer for 10 minutes' , to set a timer of ten minutes.
Timer on google.
  • Atari Breakout on Google
Search for 'Atari Breakout'  in Google Images and play the game.(desktop only)

  • Google Gravity and Underwater
Try this fun tool for searching google.Gravity and Underwater!

  • In URL and In Title
Search with specific words in title or in website URL using 'inurl:google' or 'intitle:code'
Google search inurl and intitle.
  • Askew and <marquee>
Try searching 'Askew' and '<marquee>' on Google search and find what is does yourself!

With that thanks for reading this short post.If you like, don't forget to follow css-magz.
If you have more searches like this, mention in comment section.
Yet this are some simple searches, We'be coming soon with- 'How To Use Google Like A Super Pro!'