All posts by Mushfiqa Anwar

How to Create a Custom view in Google Analytics

Google Analytics is a convenient tool to measuring your log posts activity and performance. Though it’s a little bit tricky, but still it’s easy to use and customize. Here we are going to describe how you can create a custom view and filter in Google Analytics to measuring your data more accurately. So, let’s get started:

Step 1: Go to your analytics Admin Area and choose “Create a new view.” Now you can give a name to the newly created view and Scroll down to set the timezone and save it.

Google Analytic Admin Area

This button will redirect you to the following page, where you can give a name for your view.

Create new view

Now, you can set the view type for Website or Mobile app and give a perfect name to you reporting view and set 25 views under a property. Set the Time zone and hit the “Create view” button.

Select Master view again

Now, again go to the Admin area and select the “Master view” from the drop-down menu. And click on the “Add Filter” button.

Add filter button

After clicking on the “Add Filter” button, set your desired filter. Select Exclude radio button and from the Filter field and select “IP Address”.

Exclude select field IP Address

In this filter you’re going to exclude your own IP address from Google Analytics. To finding your IP address go to the “Google Search” and search with “what is my IP” keyword. You will get your current IP address.

What is My IP

Now, Enter the IP address in the correct field and scroll down to save this filter.

Enter IP and Save

And you are done. A new filter applied to your “Master view” that takes up to 24 hours to effect. Once your new effects are applied, you will see the custom view of Google Analytics.

How to use Google Analytic Account to your Blog

Google Analytics is an excellent tool for getting in-depth visitor information from your websites. You can learn all the information about a website using this tool. For example,

1. How many people are visiting the site right now?

2. What is the total number of users in a given time period?

3. How many visitors have come from a specific country?

4. What kind of devices are they used to visit the website?

5. How do they know about this website?

6. How many of them are interested in a particular product or click on specific buttons?

7. How many of them came through the search, how many of them came from referrals, how many of them came through the emails and how many people came directly?

8. When did they visit and how long they stay?

9. How much of their age range?

10. In which area they lived in?

11. Did they new or came earlier?

12. Which area they are most interested in?

Not only get a trustworthy data for these queries, but you can also learn many more such kind of things from Google Analytics, which will give you a clear and transparent idea about your website users.

Let’s look at the step-by-step guide for how to you use Google Analytics on your website.

Step 1: To use Google Analytics, at first you need a Google account. You can sign up to Google Analytics using this account. To sign up for Google Analytics, visit the link below: analytics.google.com/

Here you can see a window like this below.

Google Analytics Sign Up

Step 2: After clicking on the signup, a window will open in front of you. If you open Google Analytics account for a website, you do not have to do anything. Because the default option for Google Analytic account is ‘website.’

 

Google Analytic Dashboard

Now you can give your account name, website name, URL of the website for a specific place and select the industry category. At the same time, you can also set up your time zone.

Google Analytic Category Selection

Step 3: When done, scroll down to the bottom and check all of the data sharing settings. Or, check the information you want to share from your website.

Step 4: A user can create highest 100 Analytic accounts. Now, you can click on ‘Get Tracking Code’ button to get your JavaScript Code. After clicking on it, you will see the Google Analytics terms of use. Then click (I accept.)

 

Google Analytic TOS

Step 5: After clicking on it, it will redirect you to the Google Analytics editor dashboard. Here you can find the Google Analytics tracking code.

Google Analytic Tracking Code

Step 6: Copy the tracking code from here and paste it just after the first head (<head>) tag of your website. In some WordPress theme, you will find a specific option for Google Analytics code. Where you can enter the tracking code.

Step 7: If you want, you can immediately view your tracking results. Which will show you how many visitors are on your website right now!

Real Time Google Analytic Report

By this way, you can monitor your website or mobile apps’ activities using Google Analytics. And understand what kind of content or topics are popular on your website.

Not only this, you can also link AdSense and AdWords to your Analytic code. As a result, you can use Google Analytics information in both cases, to generate advertisements and make money from advertisements.

 

How to Create a Basic WordPress Theme for Theme Development

Developing a WordPress theme is not an easy task. A complete theme can take months or even years to accomplished if you don’t copy or paste a single code. But, how it would be if you get a theme which is basic and minimal but ready for further development. It might be a good idea. In this tutorial, I am going to create a primary WordPress theme. And demonstrating how to Create a Basic WordPress Theme for Theme Development.

That is very basic but ready for development. So, no more delay and we are going to get started. At first, we are going to create a directory. And some other necessary files for WordPress theme that will be necessary. Then, we’ll use some template tags to create the basic structure of the WordPress theme step by step. Finally, we’ll add some advanced functionalities. I will show you by doing this step by step process. So that you do not have any problems to understand:

Step 1: Create a directory for the theme and others necessary files:  First, open the wp-content> themes folder from your WordPress directory. Now, open a new folder here. I renamed it as “A Basic Theme.” You can use any other name if you want. Now you have to create some PHP and CSS templates in it. We will create some essential files here:

  1. header.php
  2. index.php
  3. content.php
  4. content-none.php
  5. sidebar.php
  6. footer.php
  7. functions.php
  8. style.css
  9. comment.php
  10. single.php

The functionality of these files are:

  1. header.php: It is displaying the top part of a WordPress website. Name, logo, menu, etc. Important meta tags and other required scripts are also links to this area.
  2. index.php: The main part of the blog is generating here. And it is possible to display the entire blogging structure in this section.
  3. content.php: The content or contents of the website is displayed in this section.
  4. content-none.php: This template’s are call if no contents are available. Or, no specific content exactly matches the query.
  5. sidebar.php: Display the sidebar of the blog.
  6. footer.php: This section displays the footer and other sidebars on the website.
  7. functions.php: This template used to add various functionalities to the theme.
  8. style.css: This file used as a stylesheet for the theme.
  9. comment.php: This template displays the comments form and the comment form.
  10. single.php: This template displays a single blog entry.

Index.php and style.css files are two essential files for any theme. Because without these two files, no theme will work. Other files are sharing the contents of the original file. And some of them used for special pages and functions. Now, you may already create the index.php and style.css files in your theme directory. Step 1: Adding some details to the Style Sheet. Now let’s add some details to the style.css file so that WordPress can detect our theme on the WordPress dashboard. So, don’t delay. Open the style.css file in Notepad or your preferred text editor. And add the following descriptions.

/* Theme Name: My Basic Theme Theme 

 * URI: http://yourwebsite/basic-theme

 * Author: Your Name

 * Author URI: https://yourwebsite/your-name

 * Description: A Very Basic Theme for Theme Development

 * Version: 1.0

 * License: GNU General Public License v2 or later

 * License URI: http://www.gnu.org/licenses/gpl-2.0.html 

 * Tags: Basic, One column, Empty Theme This theme, like WordPress, is licensed under the GPL 2. Use it to make something cool, exciting and have fun. Feel free to share what you've learned with others.

 */

WordPress can recognize your theme now as well as the other details. It will not do any work because the rest of the files are still empty. But now you can activate this theme from the WordPress dashboard. To see your theme on the WordPress dashboard, go to the dashboard under Appearance > Themes menu. It looks like the following: WordPress Dash board If you don’t like this look, you can put a screenshot named PNG file in the parent directory. That will be used as the default thumbnail for the WordPress dashboard. Keep in mind that, the size should be at least 387 × 290 pixels. The general size of this file should be 1200 x 900 pixels. It’s good to have a big picture as a screenshot so that you can see it in the high-resolution screens. After adding the screenshot, our theme now looks like the picture below on the dashboard:   A Basic Theme And the details of the themes are looks like the following screen. So, we can see that the information we provide in the style.css file is now showing here. I give some information about the demo. But if you want, you can use your name and website address instead of the demo name and website. We don’t add any style to our stylesheet yet. As I am already saying before, we are going to create a basic theme structure or framework. You can use this framework as a base to develop any themes later on. So, we will not add any details to the stylesheet and close it for now. Step 2: The Structure of the index.php file: Now we will create the structure of the index file. I already said before, that this is a required file. And without this file, any WordPress template or file will not work. I will use some template tags and functions to build the structure of the index.php file.

  1. bloginfo()
  2. wp_title()
  3. have_posts()
  4. the_post()
  5. the_excerpt()
  6. the_content()
  7. the_tags()
  8. the_posts_pagination()
  9. wpautop()
  10. get_sidebar()

The details of the templates files described below. So, you can find and understand the appropriate template codes and use it to your template or them.

  1. bloginfo(): this tag used to present various information about the blog.
  2. wp_title(): This template tag used to represent the title of a blog. Usually, placed in the header area between <title> and </title> tags.
  3. have_posts(): Used as the conditional tag of a WordPress loop. And find that whether a blog post exists on the platform or not.
  4. the_post(): Used to present the blog posts, if anything posted on the blog.
  5. the_excerpt(): Used to display the short form of a blog post in the blog feed.
  6. the_content(): Used to display the full post of the blog.
  7. the_tags(): Used to display the tag links of a blog.
  8. the_posts_pagination(): Used to create the pagination of the blog.
  9. wpautop(): Used to create automatic paragraph tags in WordPress.
  10. get_sidebar(): Displaying the sidebar area of a blog.
  11. home_url(): Used to call the URL of a blog.

We’re going to create a kind index file that will not depend on other templates. So, we do not use any special template tags which are usually used in WordPress headers and footers. Later on,  we will split this original code into a specific template file. Then, we will use some special template tags. It will help us to identify which one is the header, footer and sidebar template, etc. Step 3: Creating index.php file Open the index.php file and add the following code. Please, don’t copy or paste. Write this code by your hand, so that you will understand the structure.

<?php 

/**

  * The template for displaying the Index file *

  * Displaying all the Necessary Blog Entries. 

  *

  * @package WordPress

  * @subpackage basic_theme 

  * @since A Basic Theme 1.0 

  */ 

?> 

<!DOCTYPE html>

   <html>

   <head>

    <title>This is my Blog Title</title> 

   </head>

   <body>

   <h1>A Basic Theme</h1> 

    <p>Some Contents…</p> 

   </body>

  </html>

You can see that it is a solid HTML static content. Now we will convert it into php. But the first thing is first. Notice the <head> section of the file. In the middle of this, we can call our stylesheet in HTML file. And, also we can convert the title tag into dynamic content. Change the middle part of the <head> with the following code.

<head>

   <style type="text/css" media="screen">

     <[email protected] url( <?php bloginfo('stylesheet_url'); ?> ); -->

   </style> 

  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>

</head>

We have done two things by a single code in <style type=”text/css” media=”screen”>. type=”text/css” is define which kind of style it is and media=”screen” ensures that it will fit all types of screen. And <! – @ import url (<? php bloginfo (‘stylesheet_url’);?>); -> Creates a link of stylesheet in the index.php file. Now let’s check if the links are displayed or not. Turn on your browser’s developer tool and open the <head> tag and see how it looks. In my case, it creates a nice link, but we will check it later if it works or not. Now I’m adding the rest of the code one by one. In the middle of the <body> tag, now replace the <h1> tag with the WordPress template tag for your theme.

<body> 

<h1><a href='<?php echo esc_url( home_url( '/' ) ); ?>'><?php bloginfo( 'name' ); ?></a></h1>

<p>Some Contents…</p>

</body>

In general, bloginfo(‘name’) displays the blog name. But we can create links here by home_url () echoing the tag with the esc_url (). As a result, the original URL of the blog will be used to output the link. Our blog name now displays on the main page. Now, it is time to create the content. To create the loop of our main content, we need to create some conditions. Type the following code in the next line of <h1> tag:

<?php if (have_posts() ) : while (have_posts() ) : the_post(); ?> 

/*our loop will go's here*/ 

<?php endif; ?> 

We are going to create a loop here, which is displaying the title, content and the pagination of the blog. A loop is a piece code that, used in every blog entry. Now loop code for the title from below:

<?php if (is_single() ) : the_title( 'h1', '</h1>' ); else : the_title( '<h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); endif; ?>

 That means, if only one blog entry is display, it will use <h1> as the title tag. Otherwise, the title tag will be <h2>. And, it will be displayed as a link to its permalink. Now, use the loop code for the content below:

<?php if ( is_search() || is_home() || is_category() ) : the_excerpt(); 
else : the_content(); 
the_tags(); 
endif; ?>

So, here we define that if the content of the page is search, home or category. Then, it will be displaying the_excerpt() or summary of the blog. Otherwise, the blog will display the full content. Now, we will create pagination for the content feed. But this part is apart from the loop code and appear only once at the end of the page. So we will close the loop now. Please enter the following code to close the loop.

<?php endwhile; ?>

Now, create the main pagination or page navigation. Put the following code beneath the loop.

<?php the_posts_pagination(); ?>

Using this code, you can display the full pagination links of your blog. Now, in case, if any users can’t find anything after searching, or the requested URL doesn’t exist. Then how to handle this error. A 404 page can deal with this situation. Since it is a basic theme, we will put an auto system to handle this error. So we’ll add both of the following codes:

<?php else : ?> <?php echo wpautop( 'Sorry, no posts were found.' ); ?>

This code indicates that, if the user requests a post or query that is neither searchable nor exist in the blog. Then WordPress will display a small note: ‘Sorry, no posts were found.’ At this stage, the condition mentioned above comes to an end. Now we will add the sidebar and a little copyright information. And also check that the above conditions are already closed. To close a condition,  use <? php endif; ?>. Now, add the following code to call the sidebar section.

<?php get_sidebar(); ?>

 And, for copyright add the following code snippet:

<p>Copyright &copy; 2012-<?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>

 Now, take a look at the complete index file: At a glance, the code snippets might be looks minimal and straight-forward. But this code is enough for creating WordPress basic Structure. In the upcoming tutorial, we will create the rest of the template files using the index.php file, how to use the content.php file as a template for the index file. And how to create various theme supports and useful function’s using the functions.php file. Now we will conduct some design experiments. Let’s add some style to the title and the blog name. If it works, then we can change the look of the entire theme. Otherwise, we will find out the problems and solve it. Open the style.css file and add the following CSS styles:

h1 { color: green; } 
a { text-decoration: none; color: black; } 
a:hover, a:active { color: green; }

Save the file and reload it again in the browser and see whether your page style is changing or not. If it’s successfully changed then, we can change the look of the entire blog by adding some other division tags.

Conclusion: I hope that, in this tutorial, I’m able to focus on the basic structure of a WordPress theme in a concise and clean approach. In the upcoming posts, we will break the index file and create a header and footer file. And create other necessary templates too. If you like, don’t forget to share this post and if you have any question, write down the comment below, and I’ll try my best to answer.

A Simple Learning Guide For Web design

Web design is a set of skills and knowledge that is required to create and maintain web properties. Today’s world actually depends on website or web related interfaces for many purposes. So, it is a very popular profession in the current world. There are several types of position’s are available in a Webdesign industry. According to the different area or needs, they pick the perfect candidates. Usually, a website can maintain by some people who know:

  • Web Graphics Design/Web design
  • Web Interface Design
  • User experience design
  • Web authoring or coding
  • Technical SEO

Let me explain each of them so you can get a perfect picture of Webdesign and the role of a Web designer. And then you can proceed to make a successful plan for your website:

Web Graphics Design

The world of Graphics design is full with a lot of colors. And you can perform well in this world if you know how to make excellent looks for a website and make it pixel-perfect by coding. Without the knowledge of coding, you can’t make the perfect design that converts into a successful site and fulfills your goal.

Beside this, you must have the high creativity and choice to arrange the best things to build a successful virtual world for users. Web Graphics Design depends on Graphics Design. But you don’t have to master it to create excellent design’s, rather you must know the basics of Graphics Design.

A Graphics Designer can make the perfect design for websites if he/she understand the interface of a website. To become a successful Web designer you don’t have the first-class coding skills. A Graphics Designer can use his/her imagination to make a website layout. But, before doing that you need to know how a website works and what is necessary to make a website different from others.

Turning the original mockup into a pixel perfect design is the work of a web developer where he/she struggled to give life to the graphical plan and make the design of the website user-friendly.

You can design a website using a simple graphics software even using windows default paint software. But the final result is actually up to your creativity. If you don’t have the basic skills in Adobe Photoshop or similar kind of tools, the design process will be getting harder for you, or you can not figure out the right design.

Here we are going through a simple web design tutorials for a one-page spa website. You can simply practice these tutorials to create the exact design or use these techniques for another model. The primary goal is learning some essential methods for Adobe Photoshop which can be useful for further web design work.

Setup a Local Server
Setup a website with WordPress
Planning a Theme Design
Create a PSD File: Part-1
Create a PSD File: Part-2
Create a PSD File: Part-3

5 Essential Things In Digital Marketing

The Social Air is always hot with so many Buzz. It is challenging to bring something different from the crowd while you are going with an inbound marketing Plan. But luckily, there are a lot of option for a marketer to build strong social signals for their business and increasing sales, exposure, and brand popularity. Here we are going to share five must have digital marketing goal for 2016 to win the market.

1. Shout on Social Media with a personal accent: When it’s the matter of Social Media, people always want to know your own story. They usually don’t like to deal with a brand. They are looking for your appearance, what’s the story behind your success and every up and down. In this world, peoples are not usually satisfied with the product, but they also want to know the story behind this product. However, you can share this story with personal test and accents to fulfill their needs.

2. Visual Posts are winning the most attention: If you want to build a perfect social strategy, it is a great time to think visually. Otherwise, peoples are usually ignored words and text. Try to explain essential matters visually. Design your graphics using Photoshop or invest some of your marketing budgets on a graphics designer.

3. Try to meet with your audience in person:  In social media, your fan and followers are always keen to know about your lifestyle. In Facebook people usually like to express their thoughts and share their day to day life stories. Don’t hesitate to share your habit, your thoughts, little and beautiful snaps from everyday life. Maybe, it would be a cup of coffee, a flower in your garden or just a snap of your child. Believe me; it makes your followers amuse and engaging ever more than any other posts.

Drill Machine4. Visual storytelling approach: A good story always attracts a lot of people to like or share your posts. Peoples are usually noted the person or brand for a remarkable story and check them back time to time for another story. When you are presenting a good story, they usually remember you and curious about the next story or outline. A story with appropriate visual is the best way to drive and engage more people in social media.

5. Focus on mobile: Nowadays, 95% users are accessing the internet from their mobile device. When you’re design or present something for your audience keep this word in your brain, “How it looks like from a small device, and how they feel?” It doesn’t matter how big or small your content is, but how your viewers see and take it. Make your website mobile-friendly and try to give something better than previous posts. From my experience, I know that peoples are usually like to remember a person more instead of a brand in social media. They love visually beautiful graphics and new ideas.

They love to listen to your neighborhood. They like to talk or communicate with you before buying your product. They love to share their thoughts and experience. All you have to do is listen to them and respond with your solutions and ideas. Without this, you are just shouting in the forest, and nobody will listen to you.

How to create simple search bar using jQuery event

Search option is the most common option that exists in every website. Today, we are going to learn how to create a simple search bar using jQuery event plugin. It is a third party plugin that needs to call from .html document. jQuery is the library of JavaScript and you can get a lot of ready-made script here to add functionality in your website by using them.

Some people limits using jQuery because it takes a long time to loading. So, it is render blocking object that can make a website slow. It is partially true. But, you can easily avoid this problem by using .html ‘async’ attribute.

What can do the “async” attributes for my webpage?

HTML “async” attributes are only used for the external JavaScript source. It allows an external .js file to continue the loading process along with a webpage, and not block the page for complete the download process of JavaScript.

Using this method you can easily use jQuery with your website without blocking the page from quick load or parsing. For this search bar we are going to use this jQuery plugin:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" async></script>

You can also save this file in your theme directory and connect it using the same method.  So, let’s get start to prepare the search bar now:

Step-1: First of all we are going to create a folder and rename it “test search bar”. In this folder we are going to create three file, such as .html, .css and .js file.

Now, open the .html file in a text editor and add the following:

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Test Search Bar</title>
</head>

<body>
  <nav id="topbar">
    <ul class="navigation">
      <li class="threebar"><a href="#">Menu</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
    
    <div class="searchlink" id=" searchlink”>
      <div class="searchform">
        <form id="search">
          <input type="text" class="s" id="s" placeholder="Search…">
          <button type="submit" class="sbtn">Search</i></button>
        </form>
      </div>
    </div>
  </nav>
</body>
</html>

Now, save the document and open it in a browser. You’ll see the search bar and menu like below:

search bar and menu

We are now see a simple plain .html file that is not add any .css style sheet with it. So, we are going to add a style.css file with this document. To linking it add the following .html script before </head> tag.

  <link rel="stylesheet" type="text/css" media="all" href="style.css">

Open the .html and .css file side by side in a text editor. My favorite text editor is Notepad++. You can download it from here: https://notepad-plus-plus.org/download/v6.8.8.html

Find the css selector from .html file and arrange them into .css file. Here we found some css class and id and separate them.

#topbar
.navigation
.searchlink 
.searchform
#search 
#s
.sbtn

Okay, done. It is now time to add some value to the .css selector to beautify .html file. Let’s add the following rule’s to our .html file:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Remember that, it is a general rule that needs to add in every .css document. That is why, you don’t have to bother for add it with every selector.

Now, we are going to add some other general rules for html, body, br, article and other html elements:

html { overflow-y: scroll; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  line-height: 1;
  color: #555;
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }

Now, we are going to style the main structure for this page:

/** page structure **/
#topbar {
  display: block;
  height: 40px;
  background: #75de89;
}

.navigation {
  display: block;
  float: left;
}

.navigation li { 
  display: block;
  float: left;
}

.navigation li a {
  display: block;
  float: left;
  font-size: 1.4em;
  line-height: 40px;
  padding: 0 25px;
  text-decoration: none;
  font-weight: bold;
  color: #000;
}
.navigation li a:hover {
  color: #dedede;
}

.navigation li.threebar {
  display: none;
  font-size: 1.8em;
}
.navigation li.threebar a { position: relative; padding: 0 30px; }
.navigation li.threebar a:hover {
  padding: 0 30px;
  color: #bababa;
  background: #75de89;
}

.searchlink {
  display: block;
  float: right;
  position: relative;
  padding: 0 20px;
  right: 0;
  font-size: 16px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
}
.searchlink:hover, .searchlink.open {
  color: #;
   background: #75d120;
}

.searchlink.open > .searchform {
  display: block;
}

The search bar is now looks very simple and we don’t add any style for the search field yet.

green search bar

So, we can add some style to it. Now, the search field is disappear, and we only see the “search”. But whenever you are hover over on the search field, you will see a different color.

Green search bar with white color

Now, it is time to add the jQuery functionality and search icon. So, we can add the simple code before </head> tag to linking external jquery source that is required to create on/off functionality.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" async></script>

And we also add the icon from an external source to hide the search bar. For this functionality we add the following .css file before </head> tag:

<link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">

And we change the menu and search field with icon, so our search field will collapse within a icon. After the replacement of .html codes it’s looks like the below:

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Test Search Bar</title>
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <nav id="topbar">
    <ul class="navigation">
      <li class="threebar"><a href="#"><i class="fa fa-bars"></i></a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
    
    <div class="searchlink" id=" searchlink”>
          <i class="fa fa-search"></i>
      <div class="searchform">
        <form id="search">
          <input type="text" class="s" id="s" placeholder="Search…">
          <button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
        </form>
      </div>
    </div>
  </nav>
</body>
</html>

And we add some media query to make it responsive in small device:

/** media queries **/
@media screen and (max-width: 515px) {
  .navigation li { display: none; }
  .navigation li.threebar { display: block; }

}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

After add search icon, the search bar is now looks like the below.

Mobile Search bar and menu

Now, we are going to add the piece of code that is make the search field visible as we click it and also invisible after clicking again. Add this code before the last</body> tag.

<script type="text/javascript">
$(function() {
 var $searchlink = $('#searchlink');
 
 // on click effect
 $searchlink.on('click', function(e){
 var target = e ? e.target : window.event.srcElement;
 
 if($(target).attr('id') == 'searchlink') {
 if($(this).hasClass('open')) {
 $(this).removeClass('open');
 } else {
 $(this).addClass('open');
 }
 }
 });
});
</script>

This is the final look of the search field and menu.

search icon on click

If you want to add the hover effect such as the search bar will open after hover over the search icon and disappear with your mouse cursor, you can replace the piece of code with hover effect:

<script type="text/javascript">
$(function() {
  var $searchlink = $('#searchlink');
  
  // hover effect
  $searchlink.on('mouseover', function(){
    $(this).addClass('open');
  }).on('mouseout', function(){
    $(this).removeClass('open');
  });
});
</script>

And that’s it, we finally got. You can also add the same functionality for the three bar menu too.

Bonus Tips: If you want to convert this search field in WordPress php, use this simple piece of code between search division:

<div class="searchform">
<form id="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
 <label>
 <input type="search" class="s" id="s" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" />
<button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
</label>
</form>
 </div>

The code is execute the following simple search field:

<div class="searchform">
   <form id="search">
      <input type="text" class="s" id="s" placeholder="Search…">
      <button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
    </form>
  </div>

If you don’t want to add the external source, just download the search bar project from below, where I host all required files and css.

Test Search Bar

12 social media practice that annoying your friends on Facebook

The main goal of Facebook, twitter, Google+ and other social media platform is make it easy for the peoples to connecting with their family, friends and same minded peoples, who is likely related with their jobs or other interests.

However, some  practices of these platforms can make your social media experience annoying and unwelcoming for you and your friends both.

People who make a noise in the social media is most likely a very new person or the people who always seeking for the popularity or just a spammer.

Here we pointed up some worst practices that are frequently made by a lot of Facebook user’s and annoy peoples.

Photo tagging: Photo tagging is not bad, if this photo is related with the people who is tagged in it. But, if you see that you are tagged in a photo that is neither related to you nor bring some value to your interest, how do you feel then?

Moreover, you get the notification for every time when someone commenting or replying to the post. I don’t know about others, but from my perspective it’s really annoying. I don’t like to get a lot of notifications for unrelated matters.

To avoid this, you can un-tag yourself from the post or keep your tagging feature under your own review. So, it will not appears on your timeline until you approve it.

Facebook gives you a full control on your privacy and sharing contents. So, you can utilize these settings to control which photo you’d like to tag or not. Go to your Facebook page settings and click on the Timeline and Tagging features. Turn on Facebook review. That’s really simple!

Unknown Friend request and Friend suggestion: Some people’s make new friends using fake id for marketing or creating a troll for specific purposes. Some people use fake id to make new friends and want to become familiar and popular in Facebook by this way.

That is why, they send huge amount of friend request to other people’s in their circle and accept friend request from totally unknown person. They did this type of activities and thinks that, it will make them popular and familiar to others.

However, Facebook restricted this type of activity and if their security system can detect, they often flag these type of accounts. But maximum users of Facebook are mostly like to accept new friend request, even don’t knowing them at all. If people consistently accept unknown and non-related friend requests it’s blurred the actual reason to identify them.

Remember that, when you accept friend request from a unknown person, you are actually give them permission to monitor your Facebook activities, interests, and other privacy concern. Unfortunately, if your private details (such as your location, credit card no) are going to the wrong hand, you may suffer for the long run.

So, beware about the unknown friend request and friend suggestion and don’t forget to mark these type of request as spam. Because, you even don’t know who wants to mess with you or use your personal details in a wrong way. So, it’s an early concern to be aware about this.

Luckily, Facebook has a great option to control the unwanted and non-related friend suggestion and friend request. So, anyone can use these option to put a limitation on the friend request and suggestions that they got.

Sending Group message: Some people usually send message by adding a lot of people in a chat room. This is great for your friend circle. But what do you think if someone pull you to attending on a unrelated conversation that is neither related with your interest nor related with someone you know.

This type of massage are annoying and people hate to get notification from unknown people and for unrelated matters.

If you get this type of message, you can leave the conversation or report it immediately from massage options.

Get call from unknown people’s: Facebook has a great free calling feature for friends and family. That means you can easily hang out or talking with your friends and family without spending extra money.

But sometimes you can get call from unknown people’s, if you add them to your friends list without confirming their identity. Moreover, hacker’s can find your location and IP address using some simple method by call you to attend this type of calls or conversation. If you got this type of call it is best to avoid it or you can ask them why they want to talk with you via Facebook private massage.

Track someone’s activity and harassing them: One of worst threat for adding unknown people’s to your friend list is they can easily track your activity or harassing you.

They can also learn about your location or get idea about your family and other private things, if you don’t configure the privacy accurately. If you use Facebook from android device and turn your GPS on, any people’s can learn about your current location. Because Facebook massanger have some features that can allow your friends to see your location.

Ask for vote or like: Some People often ask to vote something or like a page or post. It’s looks innocent but make bother to other people’s if they are not interested in your topics.

Yah, Facebook make it easier to connect with any people’s but don’t beg for vote or like from others. Instead of it, put your effort to create a like-worthy useful or entertaining post that get maximum like or win the heart of your followers.

Sending games or app request: Facebook is well known for many interesting games and apps. You can send a games or app request to your friends who like to play. However, sometimes people send too much app or games request for some extra point to their friends.

Some people loves games and some people don’t love to play games at all. When you send too much games or app request to other peoples, they can feel bother and leave you. So keep this matter on your mind, when you sending games or app request. Some people don’t like it, and they just think you’re nothing but a time waster.

Send invite for like a page: If you got invitation from a friend to like his/her page, be sure to check it first. Whoever like to see a lot of post in their timeline, instead of the nearest friends and family. Don’t like the page that is neither interesting nor bring some value to your interests or beneficent you.

Some people make fan page about popular topics to increase the like and vote and then simply sell it to the other parties. So, beware about this what you’re going to like and follow.

Sending message with spam or suspicious link: In the second decade’s of twentieth century, the age of e-currency is begin to rule over the market. Beside this success, hacker’s are also active to hack personal data from a device.

They can compromise your device by installing bugs and steal your valuable data such as credit card number, security pin etc. It’s just a matter of time for a skilled hacker.

Unlike other social platform hacker’s are also very active in Facebook. They usually send spam links that automatically install a software or virus to monitor your device and digging the confidential data.

If you see such kind of massage that is contains suspicious links, immediately report the profile for your safety. Don’t click on the suspicious links. It can damage your device or steal valuable information from it.

Posting Content or news without confirming from the trustworthy source: Some People use Facebook for propaganda and raising a storm against something. Social media can do a big favor for helpless people and raising voice against oppression and other injustice, but don’t spread a news or content on social media until get the confirmation from a trusted source.

Sometimes people use contents to raise the propaganda for something that is stands on pure lie. So, if you see that someone trying to get attention by posting this type of contents, it is better to avoid them.

“A lier can make the nearer things far and the far things to near”. So when you post this type of contents, you just help a lier to spread a wrong statement.

Send message for buying or selling goods: Using Facebook for business purpose is not bad. Many big and small business owner’s are usually use Facebook to market their products and business. People’s create a lot of groups for buying or selling goods.

And if you really want to reach to your audience, you can use Facebook ad system and pin-point to your audience to market your product.

Although, some people use Facebook to buying or selling goods and send mass-massage to the people’s to instigate them for buying a product. This type of activity is not help people’s unless bother them.

Adding People’s to a group without their permission: Some people invest their time to making new community, adding a lot of people’s to these community and group and create a big mess. I personally don’t like groups that is full with random shit and other posts that make no sense or bring no value to me. So, be sure to the person’s interest before adding them to a group.

Whether you have a lot of fans, followers or not, it is your first task to make sure about their interest and what’s delight them. If you fail to figure out the key attraction or interest, you will not become successful for your campaign.

Some basic techniques of Adobe Illustrator

Adobe Illustrator is one of the most wonderful and handy tool for creating vector graphics and Illustrations. There are some typical difference between Adobe Photoshop and Adobe Illustrator. Lets, we introduce with some basic techniques of Adobe Illustrator that will help you to boost your productivity.

  1. Usage of brush tool: Brush tool is a simple and most useful tool for digital painting or artistic graphics. You can either create your own brush or pick a default brush to paint a texture. Brush tools are actually useful for hairy texture and neat artwork for sketch. To use brush tool simply click on the brush icon from left side and apply on your artboard.

brush tools2. Usage of symbol Sprayer tool: Symbol sprayer tools do wonder for making a lot of objects within minutes. To create a new symbol, select the object and open symbol panel to add a new symbol. Then you are able to use this symbol using symbol sprayer tool.

symbol tools3. Usage of Pathfinder: Pathfinder is great for create different types of shape. You can do a lot of things using pathfinder. You can unite two overlapping shape. Minus the front shape from two object or intersect two object or minus the back from two object.  Perfect usage of pathfinder will give you a quick solution for creating any shape. If you don’t see pathfinder in your toolbox, simply go to the window menu and check pathfinder. You can also do it by pressing (shift+ctrl+f9) key at the same time.

Pathfinder tools4. Usage of Gradient tool: Gradient tool is great for mixing two colors. Sometimes, it also used to showing the shade or curve of an object. You can choose linear or radial gradient from your gradient options panel. You can also select this tool using shortcut key G.

Gradient tools

5. Usage of pen tool: Mastering on pen tools can help you to quicker the design process. Pen tools also let you to create any shape without extra command. It is flexible as your fingertips and let you to make any type of design. You just need to select the anchor point and extending the node and make your desired shape. Perfect usage of pen tools actually depends on practice.

pen tools6. Usage of Warp tool: Usage of Warp tools will give you the flexibility to shaping up an object. It’s actually work for adding various effect to an object including arc and bulge effect. You can create a wonderful shape with fine line using this tool.

7. Usage of Layer panel: Layer panel in illustrator actually arrange by hierarchical position. Some secondary layers are always appears under the main layer unless you create a new layer.  When you create a new object you must need to keep an eye on the layer position and their classification.

8. Usage of object tab: Object tab consists with a lot useful tools. These tools are used to manage the objects in different position. Some common usage of object tab is grouping some objects or expand them. It also use for transforming an object in different position and shape.object tabs9. Usage of Type tool: Type tools are usually used for typing text. You can do a lot of things using type tools including Type on a path tools, typing on a area tool and type in vertical and so on.

Type tools

10. Usage of Mash tool: Mash tool is actually use for highlighting an area or designing a critical path. It’s usually combined by various colors to make it realistic and eye catching.

simple papaya using mash tool
simple papaya using mash tool

11. Usage of reflect tool: Reflect tool allows an object to rotate into opposite direction. Using reflect tools you can simply rotate an object into 90 degree to 180 degree or whatever you want. It is a handy tools for creating opposite objects easily.

12. Usage of blend tool: if you want to make a shadow of an object or 3D effect bend tool is one of the most useful tool to doing this effectively. You can also create multiple object very quickly by this tool.

3D object using bend tool
3D object using bend tool

13. Usage of Expand tool: if you want to turn adobe fonts, lines and brush strokes into a particular shape or just tweak the bend properties and font styles, you can use Expand tool. “Expand Tool” is one of the best option for make a outline of any shapes and separate a critical path.

There are approximately more than 100 techniques of Adobe illustrator to leverage your effort for design anything. The above techniques are only some hand picked basic techniques for beginner’s. If you understand these techniques, it’s make your design journey smooth and hassle free.