Coursecode

Upload videos to youtube without any copyright issue

2016-03-30T18:53:00.000+05:00

Upload videos to youtube without any copyright issue

You have downloaded a video from the internet and you wanted to share it with your friends by uploading it to youtube but youtube strikes you with a copyright issue and your video is deleted. So what are we going to do about it now.? don't worry , in this Article we show you exactly how you can get your video uploaded on youtube without any copyright issue

Here are the steps to upload videos to youtube without any copyright issue.

STEP #1 : Download FREEMAKE VIDEO CONVERTER

...

Download youtube videos without any software of add on

2016-03-30T00:31:00.001+05:00

Sometimes you may not have enough time to watch a video directly on youtube and you may want to save or download the movie to watch later on. But the thing is that youtube does not have a download button for you. so what can you do to download the videos.? in this Article we will tell you how to download youtube videos easily to your computer without using any software or browser add on. Here are the steps you can follow to download videos to your computer.
Note : We are using firefox this trick.

Download youtube videos without any software of add on

STEP #1: Open Developer Tools in the browser by Clicking Inspect Element and go to Network tool, or you can press Ctrl + Shift + Q.

STEP #2: Click Media in the Network tool so that you’ll see only the HTTP requests made to media files, like audio and video files.

STEP #3: Browse to a YouTube video you want to download. You’ll start seeing the requests made by the YouTube page to the audio & video files in the Network tool.

STEP #4: Hover the cursor over the Type column of each request in the tool and look at the media type:

If you want the audio, look for "audio/mp4".

If you want the video, then look for "video/mp4".

Note: If you’re using a browser that doesn’t segregate requests (like IE) or doesn’t list the requests made to the audio & video files in YouTube under "Media" (like Chrome), just search the term "audio" or "video" in the search bar in the Network tool.

STEP #5: Once you found a request with the wanted media type (it’ll be of the googlevideo.com domain), click on it, and copy the full URL from where it appears.

STEP #6: Paste the URL in the address bar, remove the range parameter (starting from the & to last number) in the query string and press Enter.

STEP #7: The video or audio will open, right-click on the page and select "Save Page As" to save the file.

STEP 8: If you want both the video and the audio, look for both with the steps above and put them together using any default media editor you have in your computer. It’s actually pretty easy and quick to do so (even with programs like the outmoded Windows Movie Maker).

WEBM FIX FOR FIREFOX

If you’re getting WEBM audio files instead of MP4 from YouTube (webm can only be played in a browser) , disable your browser’s WEBM audio support, then YouTube will send the audio in MPEG4 format.

Type "about:config" in the address bar, press Enter, click through any warning message and search for "webm".

Find and double-click media.mediasource.webm.audio.enabled. Its value will change to false and you’re set.

Transfer blogger blog to another account

2016-03-28T20:54:00.000+05:00

Sometimes you would like to change the Google Account that your Blogger blog is attached to, follow these simple steps.

Transfer blogger blog to another account

Blogger is a FREE blog publishing tool by Google, to share your photos , text and other stuff on the web. You can create a FREE account with google and then use it to sign in to blogger whenever you want. In this article i'm going to tell you how to transfer blogger blog to another account with easy steps.

STEP 1: Go to blogger dashboard and sign in to blogger via your google account.

STEP 2: Click on More Options button and select Settings.

STEP 3: Now, Click on Add Authors in Permissions section.

STEP 4 : Now, type the gmail id (gmail email address), where you want to transfer your blog.

STEP 5 : Now, sign in with the id where you want to transfer your blogger blog.
STEP 6 : You’ll receive an invitation link from blogger blog. You need to click on the link and you’ll reach to blogger dashboard. Yet, the blog has not completely transferred but you have only become a contributor for the related blogger blog.

STEP 7 : So, to transfer completely, you have to log into your blogger account again with the original blog admin id and again navigate to Settings > Permissions.
STEP 8 : Now, you’ll see a list of blog authors named admin & author. Here you need to Click on author and change it to admin and remove the old admin from the list if you like .

Now you have added another admin for your blog. You can remove the old admin and then the only person with access to that blog will be the person whom you just transferred the blog to.

Share the Article if you liked . Thank you!

Creating a website in mints for beginners Part 8 ``Contact form continued``

2016-03-26T23:52:00.000+05:00

Contact form Continued

Previously we had styled our contact form submit button and now it's time to complete the form and add an info panel on the right side of the contact form add some more corrections to our form and give it a final touch.

Creating a website in mints for beginners Part 7 ``Contact form continued```

2016-03-26T23:44:00.003+05:00

Continuing the contact form

let us continue where we left previously because of lake of time and complete the contact form.

Creating a website in mints for beginners Part 6 ``The Contact Form``

2016-03-26T23:40:00.002+05:00

Creating the contact form

People always have something that they might wanna share with you, for example they might want to share some security info about your site or maybe they want to request you for something else some contents or for other certain reasons. But how do they do that.? you provide them with a contact form to contact you from.

Creating a website in mints for beginners part 5 ``The Footer``

2016-03-26T23:18:00.000+05:00

Creating the footer

Well every website contains a footer where every web developer can put its copyright info or a little about us blurb to show the visitor what contents a website is providing or what service they have to offer.

Creating a website in mints for beginners Part 4 ``The articles area``

2016-03-26T22:58:00.002+05:00

Creating the articles area

The main area or the main part of a website is an articles area where users can see all your work, what you have posted and other thing like that after creating the "Navigation" for our site we are now going to create the main page which is the articles area.

Best HTML5 Video Players For web Developers (FREE & PREMIUM)

2016-03-24T13:41:00.000+05:00

The best and most important thing about HTML5 video players is that they are: fast, responsive, easy to install and compatible in all browsers.There are a lots of HTML5 video player out there on the web some FREE and some premium available for web developers to make use of in there projects if you too are one of them, Here is a list of some of the best ones .

HTML5 VIDEO PLAYERS

VIDEO JS: - FREE

Video.js is an open source library for working with video on the web, also known as an HTML video player. Using Video.js straight out of the box is fine, but it's better if you make it your own. Plugins and skins make it possible to completely customize your player. the player can easily be customized to meet your needs.

Skinning: Yes

The player skin is completely built from HTML and CSS, including when Flash and other players like YouTube are used.

Skin changes can be as simple as centering the play button (you can just add the 'vjs-big-play-centered' class to your video tag), or as complex as creating entirely new layouts. We've built a codepen project where you can explore different changes.

Goto (Video.js Skin Designer) and design your own player live.
And if you know CSS, you can always just open your Chrome dev tools and hack away!

Plugins: Yes

Video.js by itself is purposefully very simple. It supports the basic video and audio playback features and ensures they work the same across different playback technologies ("techs"). Any more advanced features are built as plugins, including playlists, analytics, advertising, and support for advanced formats like HLS and DASH. Check out the plugins page to see what's available.

View Details

HTML5 VIDEO PLAYER WORDPRESS PLUGIN - PREMIUM

HTML5 Video Player WordPress Plugin includes 3 types of video players:

– Video Player With RightSide Playlist
– Video Player With Bottom Playlist
– Video Player Without Playlist

FEATURES:

Responsive Design: The video player if fully responsive. Parameter to enable or disable responsive behavior.
Multiple Skins Included: You can choose from 5 skins for each player.
Multiple Instances: You can insert the player multiple times in the same page with the same skin or using a different skin.
It plays .MP4 and .WEBM video files
Fullscreen: It supports full screen, having all the controllers usable in full screen mode, including playlist.
Autohide For Controllers: The controllers will auto hide on mouse out, showing the entire movie. Parameter to to enable or disable this behavior.
Preview Image: A preview image can be defined for each movie
Playlist Image: A playlist image can be defined for each movie
Volume Control: You have a complete sound control. You can also set the initial volume
Description For Video – Optional: It Can Be Disabled: You can set a Title and Description for the video. Supports HTML & CSS formated text.
Click Listener
Multiple Parameters Available:

– width
– height
– playlist width
– border width & color
– autoplay
– loop
... and more

View demo View Details

CHAMELEON – HTML5 VIDEO PLAYER - PREMIUM

HTML5 Video is one of the coolest new features of HTML5. However, Internet Explorer doesn’t offer the fullscreen experience that we’re all used to, and if you want to use HTML5 video in Firefox, you have to create additional videos because it doesn’t support the mp4 file type.

Chameleon solves these important challenges with its intuitive Flash backup. When a browser can’t go fullscreen, the Flash backup is used. And if you don’t want to create additional video files just for Firefox, Chamelon gives you the option to use the Flash backup instead.

Features Include

Extremely easy to use with the built-in settings panel and shortcode generator
Two skins to choose from, both light and dark.
Built with 100% CSS, and icon fonts. This means retina display love for your MacBook Pro.
Choose to make the video responsive or set a fixed size instead.
Custom built right click menu that includes an optional copyright link.
Optional Social Icons so users can share your video.
Add as many videos to your page as you like

RESPONSIVE HTML5 VIDEO PLAYER & GALLERY - PREMIUM

This is Responsive HTML 5 Video Player with/without bottom gallery. You can use player without gallery with only one video, or you can build your own gallery with thumbnails, titles and descriptions. Number of videos is unlimited. Player look is customisable via CSS, so you can easily customize colors and adjust it to your needs. Player is resizeable so it fits perfectly in every website design.

FEATURES

easy setup
responsive
optional gallery
Google Drive videos support
Amazon S3 support
multiple themes included
click & drag (touch) to control gallery
mobile friendly (iPhone, iPad, android)
100% vector icons, retina-ready
all browsers compatible
multiple instances: you can insert more players in same page
optional logo: you can add your logo as image (.jpg, .png). Logo position can be in bottom-left corner, bottom-right ot top-right corner.
optional preview image: if you want your player to be paused when page loads, you can set preview image
autohide controls: you can choose after how much seconds player controls will disappear
hide / show gallery with playlist button (with this functionality you can “stretch” player over gallery to have better view for video, as well as “shrink” player to see gallery menu again to choose videos)
autoplay: on/off
complete volume control
optional share menu: facebook, twitter, myspace, wordpress, linkedin, flickr, blogger, delicious, mail
optional embed code: for visitors to embed your player in their sites
information window with HTML formatted text (it means you can insert links, change fonts, sizes with standard HTML tags)
rewind
tooltip for time
tooltip for volume percentage
fullscreen support (when not supported real fullscreen it switches to full browser support)
double click to enter/exit fullscreen
SPACE key play/pause
ESCAPE key to exit fullscreen
installation instructions included

View demo View Details

Projekktor - Free

Projekktor is a self-hosted, open source video (and audio) player for the web, written in Javascript, released under GPLv3.

It simplifies the way you implement and work with web video by solving tons of cross browser- and compatibility- issues, adding eye candy and by providing extremely powerful non standard features.

With other words: We try to create the best truely free web media player – period.

Some Features

Pre- & Postroll Ads (VAST)*
True Fullscreen (where applicable)
Build Playlists, stream Channels
Flash fallback with RTMP support
VLC Web Plugin support
OSMF support for HDS streaming and DVR
Quality selection and toggling
Easy to integrate and theme
Unified Javascript API
Cue-Points for media synced events

* additional plugin required

Why should you use Projekktor ?

Consistency

Different platforms, one look and behavior. Tinker in Projekktor and serve a consistent experience to your users. Regardless if they come along by desktop or a mobile device. No user agent detection, no nested markup-tricks but a player that simply works and looks the same.

Unified Javascript API

Projekktor automatically detects the best way to play out your content. Regardless if via Flash, the VLC Web Plugin or native HTML5 video: The Javascript API works the same. Stay focused on the fun part of your work and let Projekktor do the dirty work.

Extend-able

Either by its API or the built in plugin interface: Projekktor grows with your needs. Write your own functions, hack extensions or use our stock addons built in cooperation with our premium customers.

View demo View Details

1
2
3

Creating a website in mints for beginners

2016-03-24T03:00:00.000+05:00

Sometime you may have wondered how all these websites are working and how are they created.? your favorite part (in my case was) would be the curisity to learn about how to create a site. But don’t know how to do that.? well, don't worry because today i'm going to teach you exactly how you can too do that. There’re videos included to help you learn visually so you should'nt have any difficulty following up.

This full course is 100% FREE so let's get started.

Creating a website in mints for beginners

How to use whatsapp on PC

2016-03-23T00:56:00.002+05:00

Use whatsapp on PC

it happens when sometimes you are using your computer and you don't want to pick up your phone to reply to chat messages from whatsapp. Sometimes you just wanna keep your phone in rest and wanna continue using your pc while still being able to use whatsapp and chat with friends. Recently in a whatsapp group chat a friend asked me that how could he use whatsapp on his PC/Computer. So i decided to make a tutorial for it with easy to follow steps to show you how you too can enjoy whatsapp on your pc/computer.

In this article i am going to show you need to have in order to use whatsapp on your pc. It is really easy and straight forward process and you shouldn't have any problem following up, there are two ways with which you can use whatsapp on pc/computer, Here are the steps to use your whatsapp on your pc/computer.

Method #1: Using whatsapp web

This is a pretty straight forward method for as you just need to go to whatsapp web page (https://web.whatsapp.com/) to use whatsapp on pc/computer.

Steps for using whatsapp web:

Step #1:

Visit whatsapp web (https://web.whatsapp.com/) page and wait for the page to load until you can see the page as shown in this picture below

Step #2:

Open your whatsapp on your phone and in the desktop of your whatapp click Options and then click on "Whatsapp web" Option then scan the QR CODE on the screen of your PC/COMPUTER as shown below in the pictures.

After completing all these steps you should see a screen like the one in the picture below:

Congratulations you can now use whatsapp on your pc/computer. But do be careful not to disconnecting your cell phone from the internet otherwise whatsapp web will no longer function. So keep your cell phone data connection on via wifi or regular data and use whatsapp on your pc/computer.

Method #2: Using whatsapp via bluestacks

It's as it sounds like, we will use bluestacks on our pc to use whatapp on the pc. To do so you just need to download and install the bluestacks application from (http://www.bluestacks.com/download.html) page and you will be good to go.

Steps for using whatsapp via bluestacks:

Step #1:

Download the bluestacks application from (http://www.bluestacks.com/download.html) the original page for the latest application and install it on your computer. After installing the application run it and you should see a screen like the one shown in the picture below:

Step #2:

Now that the application is running bluestacks will instruct you to setup your account as the play store requires you to be logged in in order to download application for android from the play store. So just login to your gmail account

Step #3:

Download the whatsapp application from the playstore and install it as you would normally do on an android cell phone.

Step #4:

Open whatsapp application and enter your phone no#. You will receive the verification code via an sms just type in that six digit code without any space and you will be good the go. Now you will see the whatsapp asking your name , follow the instructions and you can now use whatsapp on your pc as seen in the picture below:

Congratulations once again you can now use whatsapp and other applications on your pc/computer via bluestacks. you can also install all other application on bluestacks as you would do on your cell phone .

I hope that you enjoyed this post and liked it. please don't forget to share this post with friends.

Animation software used by Studio Ghibli is going to be free

2016-03-22T13:56:00.002+05:00

You may not have heard of Toonz animation software, but you've no doubt seen work it was used in: Studio Ghibli films like Spirited Away and Tale of the Princess Kaguya (above), or the animated series Futurama. Now, the Toonz Ghibli Edition used by legendary Japanese filmmakers like Hayao Miyazaki is going open-source, making it free to use by studios and novice animators alike. The deal came after Japanese publisher Dwango acquired the software from Italian developer Digital Video. It's now focusing on customization and training, but will still sell a premium version to companies "at a very competitive price."

Studio Ghibli's imaging director Atsushi Okui says, "we are happy to hear that this open-source version contains the Ghibli Edition. We hope that many people inside and outside of the animation industry will utilize this software for their work." Toonz, which debuted way back in 1993, is used to convert hand-drawn and rasterized art into vector graphics. From there, it can be animated in 2D by creating "skeletons" for characters, providing a similar animation workflow to 3D projects.

The open-source announcement means that a production-ready version of the software, which used to run thousands of dollars, is now free for aspiring editors. Studio Ghibli says it first chose the app in 1995 for Princess Mononoke "to combine hand-drawn animation with the digitally painted ones seamlessly ... in order to continue producing theater-quality animation without additional stress." It takes considerable effort to learn software as deep as Toonz, but now that it's free, it'll be easier for aspiring animators to become the next Miyazaki or Takahata. It will be presented officially at Anime Japan in Tokyo, which starts on March 26th.

Via: Cartoon Brew
Source: Toonz

Parkinson's disease

2016-03-22T10:47:00.000+05:00

Parkinson's disease is a progressive disorder of the nervous system that affects movement. It develops gradually, sometimes starting with a barely noticeable tremor in just one hand. But while a tremor may be the most well-known sign of Parkinson's disease, the disorder also commonly causes stiffness or slowing of movement.

In the early stages of Parkinson's disease, your face may show little or no expression, or your arms may not swing when you walk. Your speech may become soft or slurred. Parkinson's disease symptoms worsen as your condition progresses over time.

Although Parkinson's disease can't be cured, medications may markedly improve your symptoms. In occasional cases, your doctor may suggest surgery to regulate certain regions of your brain and improve your symptoms.

image by: webmd

Tech legend and former Intel CEO Andy Grove passes away at 79

2016-03-22T10:38:00.000+05:00

The world has lost a true technology legend after Andy Grove, the former CEO and chairman of Intel, passed away aged 79. Grove had suffered Parkinson’s disease, but the cause of death has not been made public at this point.
Grove was the first hire at Intel, having worked with Intel founder Gordon Moore (he of Moore’s law fame) at Fairchild Semiconductor. Grove joined Intel at its creation in 1968, and he subsequently became the firm’s president in 1979 and then CEO in 1987.
Intel payed tribute to the impact that Grove, who was born in Hungary and moved to the U.S. in the mid-1950s having survived Nazi occupation and Soviet control, had on its business in a blog post:

Grove played a critical role in the decision to move Intel’s focus from memory chips to microprocessors and led the firm’s transformation into a widely recognized consumer brand. Under his leadership, Intel produced the chips, including the 386 and Pentium, that helped usher in the PC era. The company also increased annual revenues from $1.9 billion to more than $26 billion.

“Andy approached corporate strategy and leadership in ways that continue to influence prominent thinkers and companies around the world,” said current Intel chairman Andy Bryant in a statement.
“He combined the analytic approach of a scientist with an ability to engage others in honest and deep conversation, which sustained Intel’s success over a period that saw the rise of the personal computer, the Internet and Silicon Valley,” Bryant added.
Gove wasn’t just a business pioneer, he also moved the needle as an author and a business strategy pioneer. Aside from his time with Intel, Grove wrote a number of critically acclaimed books on management, including ‘High Output Management’ and ‘Only the Paranoid Survive’, which remain current today more than a decade later.
Apple CEO Tim Cook, Salesforce CEO Marc Benoiff and Microsoft CEO Satya Nadella were among the many to pay tribute to Grove on Twitter:

Andy Grove was one of the giants of the technology world. He loved our country and epitomized America at its best. Rest in peace.
— Tim Cook (@tim_cook) March 22, 2016

Very sad to hear of the passing of the great Andy Grove, former CEO of @intel. A tremendous positive force on our industry & community.
— Marc Benioff (@Benioff) March 22, 2016

Saddened by the passing of Andy Grove…a pioneer, a leader and a
great teacher
— Satya Nadella (@satyanadella) March 22, 2016

I’m sad to hear that Andy Grove has died. I loved working with him. He was one of the great business leaders of the 20th century.
— Bill Gates (@BillGates) March 22, 2016

An excerpt from Andy Grove's autobiography. He is in post-war Hungry and applying to immigrate to the US. pic.twitter.com/K7C9ZhgWaK
— Adam Smith (@asmith) March 22, 2016

Grove is survived by his wife, Eva, two daughters and eight grandchildren.

Featured Image: Intel Free Press/Flickr UNDER A CC BY-SA 2.0 LICENSE

Creating a website in mints for beginners Part 3 ``The navigation``

2016-03-22T06:00:00.000+05:00

Creating a website in mints for beginners Part 3 `` The Navigation ``

Hello folks and welcome back to "Creating a website in mints for beginners Part 3"
In this video we are going to learn how to create navigation (menu) for our site and style it in css
So let's start doing that right away

You can either watch this video or you can just go through reading the article below and

Okay so now we need to create a navigation for our site

Let's start by opening the navigation tag "nav" and adding some un-ordered list items


    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>

Here we have created our basic navigation Markup and now we need to style it in our css file
let's open the "style.css" file and add some styles also if you notice in the markup above we included two links only
the reason for that is because we are only going to create two pages in this course an index page and a contact page

So Here How we are going to style our menu

Step 1:
Set the background color of ul tag by selecting it via "nav ul" since inside of th nav tag and give it some padding


nav ul {
    background :rgba(126,44,44,1);
    padding:2px;
}

Okay now go check out how it looks.

Step 2:
Setting the list item (<li>) and anhcor tag (<a>) color and display styles


nav ul li, nav ul li a{
    color:#fff;
    display: inline-block;
}

Go check what effects it added before i tell you.

Okay so here we are selecting two tag elements which are "li" and "a" by separating them with a comma .
Here we are just giving them a white color and setting their display to inline-block so they align on the same line. by default "li" list items make a new line for each list item.

if i sound a little confusing go check it out your self.

Step 3:
Add let's now style our main link so they look better



nav ul li a:link , nav ul li a:visited {
    padding:20px;  /* Giving links a padding of 20px */
    text-decoration: none; /* Setting to have no decoration (underline etc) */
    font-family: georgia;    /* specifying which font family we wan't for our menu */
    text-transform: capitalize; /* capitalizing each word in menu (making the first letter big)*/
    transition: 0.8s; /* Setting basic transition for the menu */
    -o-transition: 0.8s; /* opera specific transition */
    -webkit-transition: 0.8s;    /* Chrome specific transition */
    -ms-transition: 0.8s; /* IE specific transition */
    -moz-transition: 0.8s; /* Mozila specific transition */
}

Okay so the example above is pretty self explanatory as it has been commented on each line telling you what we are doing
but you may be a bit confuse about the transition property
well, we are just adding a transition of .8 seconds which gives our navigation link color a nice fade effect

Step 4:
Lastly for this lesson let's add a hover effect to the navigation which takes place when someone hovers their mouse on one of the navigation links


nav ul li a:hover, nav ul li a:active {
    background:rgba(169,61,61,1);

}

Okay i assume you understood that well ... (just adding a background color when someone hovers over a link).

Now here is the final version of our navigation menu along with the header from previous lesson

So that's it for this lesson hope you learned something good and if you have any queries or questions don't hesitate to contact to via below options

Don't forget to share this article if you liked and learned from it

Thank you

Creating a website in mints for beginners Part 2 "The header"

2016-03-22T05:30:00.000+05:00

Building a website from scratch free course Part 1

Hello folks and welcome back to "Creating a website in mints for beginners"

in this video we are going to start creating our website

we will start creating the header of our site which will be styled using css3 properties so let's start creating it, you can either follow along by watching this video or you can continue reading below.

Now start by opening your text editor and creating some structural tags that look something like this

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>

</body>
</html>

now that we have our structural tags in we need to save it (create a new folder and save)
NOTE: Save the file as "all files" and put .html or .htm (Don't forget the dot) at the end of the file name

you can name it anything you like but for the purpose of this tutorial series you should name as index.html as this is going to be our homepage
the homepage file is always an index file for any website

okay let's add a title to our site
in the head section add this code

   <title>Our site</title>

of-course delete the empty <title></title> tags.

great..!! now let's add header section inside of <body></body> tags
so just create a header tags (<header></header>) and inside of these create another h1 tag write something in it it and save

Now your code should look something like this.

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
   <header>
       <h1>SomeText</h1>
   </header>
</body>
</html>

ok go ahead and open that file in a browser by double clicking on it or by right clicking and choosing to open with a browser you are using.

Looks awful right ??

but it's just the starting we are going to make look pretty
Now go back to the folder where you saved this file and in that folder create a new folder called "css"

ok now in that "css" folder create a new file and name it "style.css". Now open that file up in your text editor

reset the margins and paddings to 0 by adding a simple rule at the top in style.css

* {
   padding:0;
   margin:0;
}
So what that does is that it selects all html tags by writing "*" and sets there paddings and margins to 0
okay now select the header tag using css selector "header"
and add following styles

header {
   font-size:2.5em;
   background: rgba(166,44,44,1);
}
Don't know what that means ? don't worry let me take you through this code in details
So the font-size (i think you probably have guessed that one) just sets the font size of the text we wrote in the header section , you can change that to any size you want or like i will just keep it 2.5em
The second line well i think that's pretty confusing isn't it ?
don't worry it's nothing you can't understand.
Basically that is just setting the background color of the header to a red color and sets the opacity to a 100%

How ??
let's look at this

rgba(166,44,44,1) Ok the first three values are Red, Green and Blue values "rgb" and the last one is an alpha value which sets the opacity by going through 0 to 1 (0 , 0.1, 0.2....1)

i think that should clear your mind (at least a little) if you are still having trouble go ahead and search for "rgba color values" and read about that property.

ok before we open our index file in the browser we need to link to our stylesheet file which is located inside of the "css" folder

to link to our stylesheet file add the following code to the head section

<link rel="stylesheet" type="text/css" href="css/style.css">
Okay so that should now link to our stylesheet. now open your index file in your browser and see what happens

So did that look good ?? No ?? let's add some more style to it.

header {
   font-size:2.5em;
   background: rgba(166,44,44,1);
   text-align:center;
   color:rgba(255,255,255,1);
   padding:40px;
   text-shadow:2px 2px 5px rgba(0,0,0,1);
}

Now that should look okay ..
i think you understand the code above a little bit so i will only explain the text-shadow property a bit
so in the text-shadow property we are setting 2px horizontal shadow 2px vertical and blurring it by 5px after that we are just setting the color for the shadow (you can change that if you like).
So this is how it looks

Okay now that's it for this lesson hope you learned something and now if you have any queries or questions you can drop your comments below and i will try to answer you as soon as i can

Now the last thing is sharing the article with friends .. :)

Thank you..!

Creating a website in mints for beginners Part 1

2016-03-22T05:00:00.000+05:00

It's time you learned to build your own CSS and HTML website this course will take you through a beginners website structure so that you follow up and create your own site in no time in this course there are many things you will be able to observe. Here is a list of what we will be creating in this course:

Header
Navigation
sidebar
footer
article area
Contact form

So i think you are excited and ready for the next lesson.

How to Add Font Awesome Icons in Blogger easy steps

2016-03-21T22:04:00.003+05:00

Do you want to add hundreds and thousands of scalable vector icons to your blogger website? One of the most proper , easy to use and current solution that most professional designers recommend is FontAwesome.
How to Add Font Awesome icons in Blogger?
Font Awesome provides a simple CSS technique that adds vector icons that looks awesome at any size. In this article, we will show you how to properly add Font Awesome Icons in Blogger. It is really easy and will be completed in just two steps below.

About font Awesome

Font Awesome provides an awesome way of adding scalable vector icons that looks good at any size or dimension. Being a web designer you might need a lot of different icons set to give your design a professional touch while maintaining the latest developing standards. According to the Font Awesome site:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS

Why to use Font Awesome:

Though the perks of using this tool are countless but few of the prominent ones are mentioned below:

Wide Range of Icons: It provides a wide range of high quality vector icons and scaleable clean images.
Supports CSS: It also works with CSS so that colors, size, shadows and other components can easily be adjusted and applied to them.
Speed: Font Awesome images are extremely lightweight and loads very quickly as compared to the CSS Spirit images.
Flexibility: They are so many different ways to add and use Font Awesome in your site to improve its performance and site appearance.
Innovate: The team behind this amazing tool is highly talented and they are continually working to make it even better.
Everything for FREE: You can get this and everything for absolutely FREE.

How to Add Font Awesome Icons in Blogger easy steps:

Adding or implementing Font Awesome on your blogger site yourself is extremely straightforward and would take moments to finish. Here are the basic steps to follow:

Step#1: Adding Font Awesome in Blogger:

To add Font Awesome is to include it in your Blogger Template file. add it right after the <head> Tag. Therefore, go to Blogger >> Template >> Edit HTML and scroll down and look for the <head> tag, just below it paste the following line of code.


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

Step#2: Using Icons in Blogger:

Adding FontAwesome icons is pretty simple just add the following line of code where you want the icon to be.

<i class="fa fa-eye"></i> fa-eye

It should give you following results:

fa-eye

You now maybe wondering where are the other icons ? well, you can visit the FontAwesome Directory for a complete list of icons and many examples showing how to add them to your website easily.

Step#3: Applying CSS to Icons:

You can change the color, size, shadow and more through applying CSS to your icons. The method is quite straightforward and it is achieved through the class given to your icon. Here is a good example showing exactly how to do that:


.fa-eye {
   font-size:2em;
   font-weight:bold;
   color:#fff;
   border:1px solid #fff;
   padding:10px;
   float:left;
}

Further more you can visit this FontAwesome Examples page for more examples to know how you can customize these icons easily.

Font Awesome is a fantastic, flexible and a fast way to add quality graphic vectors to your blogger website. There are tons and tons of endless use to graphics in menus, posts, footer and etc to spice up your website. We hope this article has helped you in learning How to Add Font Awesome Icons in Blogger easy steps. Do share your thoughts in the section below.

Google search 'Find My Phone' to find your missing Android Phone

2016-03-21T17:18:00.000+05:00

Lost your phone and now you don't know where to find it.? Don't worry because Google's making it even easier to track down your missing android mobile device. While Android Device Manager already exists to help find lost phones and tablets, just getting to your account's ADM menu often requires a search of its own. But Find My Phone is as simple as a web query. In fact, that's literally what you're doing. Simply open a Google omnibox and type "find my phone" to display a map that reveals the phone's current resting place. If the device is nearby, you can also opt to ring your cell phone even if it was put on silence the phone will still ring loud to tell you its current location. Unfortunately, Find My Phone does not allow you to lock or erase your device should it be stolen or, say, left at the local pub -- you will still need Android Device Manager to do that.

Here's the Google's original post that explains it.

Add rain to a photo in photoshop easy step by step process

2016-03-21T03:22:00.000+05:00

Ever wondered how to insert rain in a photo using Photoshop ?? and wanted to learn how you can too insert rain in a photo with easy photoshop trick ? well, don't worry in this short course i will tell you exactly how you can do it with easy step by step process.

Adding rain to a photo using photoshop

Here's a preview of the original image.

So now you can just watch this video and learn how to do that yourself or skip the video and continue to reading.

Now if you want to skip the video and learn by reading on just continue below reading the step by step guide

Step 1: Open your image

Well you already knew that (i guess) . Open up your image in Photoshop and we can get started right on.

Step 2: Creating a new layer

Now create a new layer and fill that layer with black (shift + backspace).

Step 3: Convert to smart object

Now convert the black filled layer to smart object (right click on the layer and select convert to smart object)

Step 4: Add noise

Now go to filters > Noise > Add noise

Keep the noise amount 100+ to get some nice white dots (or at least that's what i called it) and check the monochromatic box keep the distribution to Gaussian.

Step 5: Add blur

Now's the time to add some motion to our rain by going to filters > blur > motion blur .

Keep the to about 100+ and adjust the angle at which the rain should be coming down at

Step 6: Scale the image

Now hit ctrl + T and scale the layer till the rough edges are hidden

Step 7: Levels layer

Now go to layers panel and create a new levels layer . Bring both of the pointers (right and left) to white space . Select the noise layer and change the blend mode to screen.

Now our rain should be somewhat visible.

Step 8: add blur

Now to further more smooth our rain let's add Gaussian blur of radius of 0.4 by going to filters > blur > Gaussian blur

Clip the levels layer under the noise layer (hold the alt key and right click in the middle of the two layers where the arrow appears).

Step 9: Layer mask

Create a layer mask for noise layer and select the brush tool with foreground color as black . Set the opacity to about 50% and start brushing where you want the rain to be little smoother than the rest.

That's basically it yo can now adjust the levels layer to increase rain effect and also use the layer style and tweak in a little bit

For any query or question i am available at Facebook or Google+

Don't forget to share.. :)

Source: Google

How to make an oil paint image effect in photoshop cc 2015

2015-07-21T23:41:00.000+05:00

Hello Folks! Sorry for being away for so long. i have had some serious issues. Well now i'm back and i have a good news for you guys!!
Guess what ?? Want to know ?? Yeah ?
Then perhaps i should tell you that from now on the tutorials shall be in video and written format which you can watch directly on youtube or you can watch them here as i will be placing them on my pages too. How was that huh ??? Like it ? well, here's another thing today i have a tutorial in which we will go through the process of making an oil painted image in adobe photoshop cc.
well then without further wasting our time let's start..

You can either watch this video to show you how to do this or just keep on scrolling and read below.

How to make an oil paint image effect in photoshop ??

Here is how to do oil paint effect in photoshop step by step.

Step 1:

Well, i think you may have guessed what the step one is right ? no ? Don't worry, The first step is to open your photoshop (LOL, Just kidding) Open the image that you want to make oil painted.

Step 2:

Now make two copies of the image by either right clicking on the layer and choosing to "Duplicate Layer" Or just press "ctrl + j" at the same time to copy the selected layer.

Step 3:

Select the second copy of the layer go to filter > Other > High pass

Set the radius to 3px, click ok and change the blending mode to "Hard light" and merge the first and second copy of the image

Step 4:

Now with the current copy select go to filter > Stylize > Defuse and set the mode to anisotropic and click ok.

Do this step one more time.

Step 5:

Go to filter again and choose sharpen > Smart sharpen , Set the amount to 200% , radius to 1.5px , Remove to Gaussian blur, Tick the "More accurate" box and hit ok

Step 6:

We are almost done now...

Once again go to filter > blur > Surface blur and set the radius to 5px and threshold to 15px and hit ok

Done...!!! Congratulations you have created an oil paint image effect..

Tip: You can use the curves adjustment layer to play with the brightness and contrast a bit to make the image look even better.

Wndows 7 tip to minimize all windows at once

2015-05-29T00:53:00.000+05:00

Did you happen to work on several programs at once and got you desktop cluttered with unwanted windows ??? what if you wanted to minimize all the windows at once except the one you are working on?? Today I have gotten just the trick for you which is pretty handy for windows users....

How to minimize all the windows

it's actually very easy and fun i will show you or tell you how you can minimize all the windows at once

So the first step is to get up and jump for five mints ( LOL just kidding , no need to do that . But you can if you want to , Really!!)

ok let me tell you what it is now , just grab the title bar of the window you want to keep and while you are holding on to it shake shake shake right and left ( back and forth if you like) and that's done all windows have been minimize huh.!! pretty easy no??

you can also do it by pressing the windows key and the Home key together if you want to but where's the fun in it??

Hope you liked the trick and will share it with friends also for any queries join me on Goggle+ and Facebook

Saiyo nara :)

Create a pattern and add watermark using photoshop patterns technique easy watermark

2015-05-18T18:30:00.000+05:00

Watermarking is an essential and must know thing in this age of plagiarism. As many of the internet surfers and bloggers use the work of professionals authoritatively. The images with a watermark look pretty much ugly, but it's the least we can do to prevent miss use of our precious work

Creating a Pattern in photoshop:

Step 1: Create a New Document

Open photoshop and create a new document by going to File > New ( or press ctrl + n) , Make it any size you like (i.e 500x500) and select the background as "transparent"

Step 2: Create your pattern text

Now select the type tool in the left pain (or press T) and write what you want your pattern text to be. for the purpose of this tutorial i wrote "Fucnki tips and tutorials" , Make it as large as you want your final watermark image to be.

Step 3: Rotate your text

Now that we have our watermark text let's rotate it at an an angle of 45 Degree, Press ctrl + T and drag the corners of the text until tilted by 45 degree

now your image should be like this

I have had it colored black you can change it to whatever color you like (i.e white would be nice)

Step 4: Cropping your image

Now crop the image but keep in mind not crop too much as it will be squeezed when adding watermark to smaller images

Step 5: Defining as pattern

Now go to Edit > Define Pattern give the pattern a name and hit ok

Step 5: add watermark using photoshop

Now select the image you want to watermark and click on layer styles below the layers panel , select Pattern overlay and select the newly created pattern , adjust the scale to your needs and hit enter

Behold You have watermarked your image! How's that ? Don't forget to share the article and join me on Goggle+ and Facebook

Images sources: google | Funcki
Via: Funcki

How to Add Breadcrumbs navigation in blogger and improve seo

2015-05-18T02:10:00.000+05:00


Breadcrumbs Navigation

Hey, folks! Many of us have been wondering why other sites have breadcrumbs navigation system and

we dont ? so i thought i would teach you now how to create a breadcrumbs navigation in blogger.

What are breadcrumbs anyway ??

Breadcrumbs is a navigation trail that tell the user where exactly the user is in a web document. it helps the user to navigate through a website or blog easily. you can see the breadcrumb navigation above in the picture to see how it looks. You may have noticed that my site uses breadcrumbs as well.

It is also good for the health of your blog or website as it adds keywords in search engines database...

How to Add Breadcrumbs navigation in blogger

Note: You must backup your blog template first before adding breadcrumb navigation in your blog.

Follow these steps to add a breadbrumbs navigation:

Go to Blogger Dashboard > Template > Edit HTML
Copy all the template code into a Notepad file
Now press Ctrl+ F and search for below code.

<b:include data=’top’ name=’status-message’/>

Replace that code with the below one.

<b:include data=’top’ name=’status-message’/>
<b:include data=’posts’ name=’breadcrumb’/>

Now find this code in your blog template.

<b:includable id=’main’ var=’top’>

Replace it with the below code.


<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<!– No breadcrumb on home page –> <!–Breadcrumbs by http://www.funcki.cf/–>
<b:else/>
<b:if cond=’data:blog.pageType == “item”‘>
<!– breadcrumb for the post page –>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast == “true”‘> »
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == “archive”‘>
<!– breadcrumb for the label archive page and search pages.. –>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<a expr:href=’data:blog.homepageUrl’>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == “index”‘>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<b:if cond=’data:blog.pageName == “”‘>
<a expr:href=’data:blog.homepageUrl’>Home</a> » All posts
<b:else/>
<a expr:href=’data:blog.homepageUrl’>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id=’main’ var=’top’>

Find ]]></b:skin> and paste the below code just above/before it.


/*Breadcrumbs by http://www.coursecode.tk/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Now your code is ready. Replace your entire template code with your Notepad file code.

Click on save template button.

You are Done!

How amazing is that ?? You have a breadcrumbs navigation in your blogger blog. Isn't that nice ?? for any queries or suggestions drop you comments or reach me at Goggle+ and Facebook

Via: Funcki
Source: Funcki

Use your keyboard to control the mouse and move the cursor

2015-05-16T16:43:00.000+05:00

Hey folks! How are you doing ?? hope all right, sob i've got another cool trick for windows user who like to be an ethical hacker and have their mouse stolen (Just kidding). Like most of us you may have also thought that the computer can only be operated by the mouse but in fact that is not the case you can control your cursor even without a mouse and can do so much faster and easier
So let's get to the point and find out how to use your keyboard to control the mouse and move the cursor

Using the ‘Ease of Access Center’ in the Control Panel

If you're Using Windows 7, 8 or Windows Vista:

First of all go to Start. ( or alternatively press "Windows key" + U)
Next navigate to the Control Panel.
Click on 'Ease of Access Center' .
Now find something called 'Make the mouse easier to use' and click on it.
Then you should notice a checkbox written "Turn on Mouse Keys". Tick it.
Save changes. Technically you're done.

Now you can use your keyboard keys (numeric keypad) to move your cursor on the screen, by default the keys are 2,4,6,8 and 5 (left mouse click).
Now press ok Or alternatively Press " alt+ O"

Note: If this does not work it could be because your computer settings cannot be changed due to local IT policies – contact your local IT support for further help.

Tips:

You can easily activate the mouse keys by pressing ALT, Left Shift Key & Numlock . to deactivate do the same as you did for activating.

While the mouse keys are active, you won't be able to type through those keys at the numeric pad. So use the generic number keys during that time.
if you are on windows vista you can do by going to Control Panel > Accessibility > Mouse tab > Tick on checkbox , "Use Mouse Keys".

Hope you liked the article and had fun moving your cursor with your numeric keypad, your comments are always welcome also drop in your messages at Goggle+ and Facebook

Coursecode

Upload videos to youtube without any copyright issue

Upload videos to youtube without any copyright issue

Download youtube videos without any software of add on

Download youtube videos without any software of add on

WEBM FIX FOR FIREFOX

Transfer blogger blog to another account

Transfer blogger blog to another account

Creating a website in mints for beginners Part 8 ``Contact form continued``

Contact form Continued

Creating a website in mints for beginners Part 7 ``Contact form continued```

Continuing the contact form

Creating a website in mints for beginners Part 6 ``The Contact Form``

Creating the contact form

Creating a website in mints for beginners part 5 ``The Footer``

Creating the footer

Creating a website in mints for beginners Part 4 ``The articles area``

Creating the articles area

Best HTML5 Video Players For web Developers (FREE & PREMIUM)

HTML5 VIDEO PLAYERS

VIDEO JS: - FREE

Skinning: Yes

Plugins: Yes

HTML5 VIDEO PLAYER WORDPRESS PLUGIN - PREMIUM

FEATURES:

CHAMELEON – HTML5 VIDEO PLAYER - PREMIUM

Features Include

More on Features

RESPONSIVE HTML5 VIDEO PLAYER & GALLERY - PREMIUM

FEATURES

Projekktor - Free

Some Features

Why should you use Projekktor ?

Consistency

Unified Javascript API

Extend-able

JW Player - Free & Premimum

MediaElement - Free

Video for Everybody - Free

Creating a website in mints for beginners

Creating a website in mints for beginners

How to use whatsapp on PC

Method #1: Using whatsapp web

Steps for using whatsapp web:

Step #1:

Step #2:

Method #2: Using whatsapp via bluestacks

Steps for using whatsapp via bluestacks:

Step #1:

Step #2:

Step #3:

Step #4:

Animation software used by Studio Ghibli is going to be free

Parkinson's disease

Tech legend and former Intel CEO Andy Grove passes away at 79

Creating a website in mints for beginners Part 3 ``The navigation``

Creating a website in mints for beginners Part 3 `` The Navigation ``

Creating a website in mints for beginners Part 2 "The header"

Building a website from scratch free course Part 1

Creating a website in mints for beginners Part 1

How to Add Font Awesome Icons in Blogger easy steps

About font Awesome

Why to use Font Awesome:

How to Add Font Awesome Icons in Blogger easy steps:

Step#1: Adding Font Awesome in Blogger:

Step#2: Using Icons in Blogger:

Step#3: Applying CSS to Icons:

Google search 'Find My Phone' to find your missing Android Phone

Add rain to a photo in photoshop easy step by step process

Ever wondered how to insert rain in a photo using Photoshop ?? and wanted to learn how you can too insert rain in a photo with easy photoshop trick ? well, don't worry in this short course i will tell you exactly how you can do it with easy step by step process.

Adding rain to a photo using photoshop

Step 1: Open your image

Step 2: Creating a new layer

Step 3: Convert to smart object

Step 4: Add noise

Step 5: Add blur

Step 6: Scale the image

Step 7: Levels layer

Step 8: add blur

Step 9: Layer mask