Category Archives: tutorials

10 Great Examples of Header Designs for Inspiration

July 12, 2017Design Ideas, tutorialsDesign styles, Header Design InspirationDeepak

Website header is one of the most noticeable and valuable areas in the entire web page design. The header section runs across the top of page and is viewable on every page of the website. The only motive behind having an enticing website header design is attracting more number of prospects for online business.

For website designers looking to incorporating the trendiest header designs in their website, this list of 10 great examples of header designs will definitely prove to be a helping hand

Header Design Inspiration Examples

Blamo

Blamo toys showcases its brand’s logo in the header section. Incorporating the latest web designing trends, Blamo places its logo in the centre, clicking on which redirects the user back to the home page. This is one of the sophisticated, professional and trendiest designing trends that not only strengthens brand value but also makes the navigation smooth, structured and quick.

So, if you want to emphasize on your brand logo, you should center it in the header and also add some white space around to make the nearby elements prominent.

Wild & Wolf

Considering the search bar as the most important element in website design, Wild & Wolf places its search bar in the top left. Allowing shoppers to interact with the search bar means increasing chances of purchase. In order to incorporate such header design, you can make the search bar larger, add contrasting colors and add more white space.

HTMLPanda

HTMLPanda’s header takes up a valuable space but still looks great and leaves a positive impact in the eyes of visitors. All the elements are neatly placed and separated from the content.

The layout is intuitive and uses the pattern in an inspiring way.

Netflix

The header design in this website is quite structured. Everything on the header page is synced so as to give visitors the clear idea of what the site is actually about. There is no such distraction element which keeps the visitors hindered from not clicking the CTA button that says, “Join free for a month”.

Hollister Co.

With a simple and effective header, Hollister comprises primary, secondary navigation along with highlighted offers which are altogether centered around the logo design.

Haven

It has one of the cleanest header design with a no-nonsense display. Each and every element has been placed down with utmost efficiency. The search bar also has the maximum of white space for clarity.

The use of red and black color in contrast adds a nice touch. Similarly, the presence of drop down menus makes the navigation process flawless.

Sietedefebrero

Featuring a clean, elegant, simple and structured header design, the website stays at its best to captivate user attention with a smooth and friendly navigation. The use of text, white space, images has been brilliantly planned so as to acquire increased traffic.

Howhost

The website showcases a perfect mix of bright and dark colors which, when used in combination adds to the elegance of website. The header section of Howhost steals the show with its eye-captivating functionality. The overall emphasis has been given to the header design and logo design.

Art, Copy & Code

Bringing a whole new experience to the website design, the website features the latest video background design that creates heavy contrast between the video and page text. The video content accommodates nicely to the layout.

Plata Fashion

The presence of customized and flexible header design in this website gives the full opportunity to developers to drag element, tweak content position and dynamically change the height of header section by simply dragging it up and down.

This website design also makes use of video backgrounds to incorporate an exciting user experience and introduce life to the content.
Conclusion:

Taking the idea from such interesting header designs, businesses can introduce an element of fun, interactivity, and engagement to their website. This kind of design directly communicates with the visitors and also brings in increased volume of sales. You can also hire a web designer to take assistance for such trendsetting ideas in the latest website design of your upcoming venture.

WordPress Guide: 4 Typical beginner mistakes to avoid

August 9, 2016tutorials, Wordpress Guidewordpress, wordpress mistakes, wp mistakesDeepak

Avoid WordPress beginner mistakes : It’s a testament to our basic human nature that we learn from our mistakes instead of crawling in a ditch, praying for Earth to open up and swallow us whole.

Okay, I may be exaggerating a little.

Mistakes happen and we deal with them. The entire charade, however, is more of a nuisance than a learning experience when you can’t point your finger at the cause and resolve. This applies tenfold to web development, where so many things could go wrong at any given point.

In this post, we take a look at 4 typical WordPress development mistakes and how to deal with them (so you won’t have to waste hours dealing with the mess):

1. The website doesn’t appear in any known search engine result pages

Reason: Unless this is a recent development (your site showed up before but doesn’t anymore: Check Google’s Webmaster guidelines and your own site’s security) it means that you have kept it on ‘Privacy’ mode.

WordPress has an option that lets you choose whether you want to keep your site hidden (de-indexed) from the search engines or not. This setting comes in handy when developers are creating/customizing/or otherwise running maintenance on the website. Basically, it keeps the traffic from search engines off your site (Note: Only the search engine traffic, you’ll still get traffic from other sources: social media, PPC campaigns, etc.)

The Fix: Making your WordPress site visible to search engine (through the admin).

The change cannot be made by anyone who doesn’t have admin-level access.

What you need to do is:

Login to the admin panel
Go to Settings >> Reading screen
Uncheck the box titles “Search Engine Visibility: Discourage”

(Note: If it is already unchecked, check-and-uncheck again just to be sure)

Save changes

2. Certain themes and/or plugins fail to load

Reason: The theme/plugin (and any custom work/ modifications made by you) contains code that is deprecated by WordPress.

WordPress community is very proactive and usually, rolls out about 3-4 major version upgrades (and dozens of minor ones) to make sure the platform is running at the best of its capabilities without creating problems for those who are still on PHP 5.5 and previous version servers.

The Fix: There are several ways to make sure you are not getting beaten by outdated code.

Check themes and plugins: Use the plugins Theme Check and Plugin Check on a separate WordPress install to make sure they pass the latest WordPress theme/plugin review standards.
Enable WP_Debug
Use Deprecation Checker plugin and the Codex to keep up with all the functions deprecated by WordPress and their replacements.
Or you could go for theme developers like Chickthemes wordpress themes to all the work for you.

3. Installing WordPress in the WRONG place

Reason: You were probably unaware of the possibilities and consequences of WordPress installation in subdirectory vs. subdomain.

WordPress is a very SEO-friendly platform, and everyone knows that. But it’s not unheard of for a client with an existing website to wish for a WordPress “blog” or “shop” as a part/extension of the current website.

The trouble arises when you and/or the client forget to understand the SEO benefits and cons of WordPress installation in a subdirectory (www.domain.com/blog) and subdomain (blog.domain.com). They both serve different purposes in terms of online reputation, traffic, and yes SERP-rankings too.

The Fix: Here’s how to explain the difference firsthand to avoid drawbacks in the future:

A Subdirectory-blog is perfect when the client wants to increase the flow of traffic to the original website (www.domain.com). It’s also the cheaper and more manageable solution of the two as it’s controlled through the parent website.

The drawback is that the client gets no separate listing on SERP (Search Engine Results Page).

A Subdomain-blog will give separate listings on SERPs other than the original domain (you get listed separately from domain.com and blog.domain.com. The traffic to this blog is not counted into the parent domain. It’s a viable option if the parent domain has enough goodwill and reputation to kick-off a ‘new’ website in its name.

4. Not respecting WordPress’ Boundaries

Reason: In the creative/coding haze, developers often slip away from the basic, core structure of WordPress.

It sounds like a non-issue, but despite the inherent flexibility and scalability of the platform, it still needs to retain some form of its own to make sure you are still capable of working with it. The JSON REST API is great, but to work with WordPress-specific area of the live-integrated system you’re building, you’ll need to learn and respect the platform’s boundaries.

The Fix: Respect the standards WordPress puts in place. They’re there for your benefit.

For instance: Instead of writing CSS and JavaScript inline, put them separately in files and call them using wp_enqueue_scripts(), wp_head functions: It saves time, maintains consistency in design, lets you cache and minify the scripts and helps make revision easier. I fail to see one single disadvantage of this method, but enough developers still swim against this particular current obstinately.

Endnote

Learn from the platform, and grow with the community. The worst mistake you can make is to stay in the dark about the latest developments taking place within WordPress.

Get up, and keep up. You’ll be creating masterful interfaces in no time.

How to Add Instagram Widget in Blogger

August 3, 2016how to, tutorialsinstagram, instagram blogger widget, instagram widgetDeepak

A simple guide to show you How you can Add Instagram Widget in Blogger blog,Instagram is a Fun Simple image sharing app and it has quickly become one of the best social visual media platforms and fast-growing social media site with over 400M+ Monthly users and on average 80M+ photos shared on a daily basis.

There are various ways to increase your Instagram followers and embedding Instagram widget on your website/blogger blog can be very helpful to build a strong following on the platform.

As Instagram doesn’t have their Official widget so you can use the Third party javascript widgets to show your Instagram feed in your blog. Like we have included in our Amazine Blogger Template and Blush Blogger Template

To properly use this widget first you need to generate instagram access token.

Note: Steps below will work only in our Blogger Templates.

Instagram Widget Blogger Styles

We have provided several Instagram photos styles to embed in your website/blog directly. Just copy the code below and paste it any javascript/HTML widget in blogger layout.

On Blogger Dashboard Click Layout.
Click Edit on Instagram Widget In footer area.
If there’s no widget then Add a widget and Choose HTML/Javascript.
Copy the following Code:

Instagram Widget Blogger For Footer Style

<div class='media-left'>

<div class='table-cell-m'>
		<h4 class='widget-title'>Instagram</h4>
		
				<a class='btn btn-default' href='//instagram.com/bthemez' rel='me'>Follow Us</a>


  </div>
</div>

<div class='instagram-footer'>
<div class='dark-wrapper'>
 
           
      <div class='cf'/>    
      <ul id='instafeed' class='insta-slick'>   
</ul>   
</div> 

<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var feed = new Instafeed({ 
 get: 'user',   
 userId: 3818481741,   
  limit:14,   
  sortBy:'random',  
  accessToken: '3818481741.1677ed0.14b2e5f55b6842a2a898da10ef99c145',
   after: function () {
     
     var owl = $('.insta-slick');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 300,
prevArrow: '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>',
 nextArrow: '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>',
  arrows:true,
  slidesToShow: 5,
  slidesToScroll: 2,
autoplay: false,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  
  
   template: '<li><a href="{{link}}" target="_blank"><div class="zoom-out-effect left"><div class="img-box"><img src="{{image}}" /></div> <div class="info-box"><div class="info-content"><div class="insta-likes"><i class="fa fa-heart"></i>{{likes}}</div> <div class="insta-com"><i class="fa fa-comment-o"></i>{{comments}}</div>   </div></div></div></a></li>',   
 resolution: 'standard_resolution'   
 });   
 feed.run();   

 });
//]]>   
</script></div></div>

Instagram Widget Blogger For Sidebar Only

For Sidebar Instagram Use the Code below.

For Instagram Grid Style

For Instagram Slider Style For Sidebar

Note	just change the # with your instagram url
Generate Access Token	you need access token for instagram widget to work Go to this url-> http://blog.bthemez.com/instagram-access-token-generator/ Generate access token
Sign In and Follow the steps	Then You’ll be given an access token like this 1531863919.1677ed0.23d238bc564249e799095d060c7521327
Follow The next step	Add Instagram User ID:
To Change No. Of Instagram photos in slider	slidesToShow: 5 ( CHange the value in instagram code).
To Change Total No. Of Instagram photos	limit:14 ( CHange the value in instagram code).

How to Add Featured Slider in Blogger Template

July 21, 2016how to, tutorialsblogger widget, featured slider, featured widgetDeepak

Featured slider in blogger template is always a nice feature to have in any blog, through which a blogger get to show their special post to the user. It also allows visitors to iterate these post easily. Featured Section can be anything likes Slider, Carousel, Special Grid etc.

How to Add featured Slider Blogger Template

On Blogger Dashboard Click Layout.
Click Edit on Bt-Slider Widget.
Just Use “featured” ( without quotes).
Click Save

All you have to do is just add the “featured” (Without quotes ) in featured slider widget and you must have label of named featured for the post you want to show in slider and make sure your blog is set to Public.Please follow the screenshots below:

Step 1: Click on Edit

Step 2: Add The word Featured in Widget

Step 3: Add The label in your post named “featured”

Note : The steps given above will work in all bthemez blogger Template.

How to Solve Blogger Undefined Problem

June 1, 2016how to, tutorialsblogger undefined, date problem, how to, undefined problemDeepak

Often When you upload/Install a new custom made blogger templates in your blog. You’ll notice a common problem occurs in your blog ie.Blogger Undefined problem. Basically It’s just Timestamp Error which is not supported by Blogger.

Why Blogger Undefined Problem occurs

This Question has been asked many times by newbie bloggers that what is this undefined date problem and why it occurs. they might be thought that the problem is with their blog post setting or with the template. It’s nothing but a simple Timestamp Problem.

When you use custom made 3rd party template you know that these Blog templates provide features which you won’t find in any default blogger template, and blogger supports the limited type of Date styles and to make a custom date style, we blogger developers achieve this using javascript methods. So what we do is we take a blogger mm/dd/yyyy Timestamp format and change it to any custom date style like January 1, 2016.

How to solve Blogger Undefined Date Problem

On Blogger Dashboard Click Settings.
Click Language and formatting.
change Time Stamp > only Choose mm/dd/yyyy.
Then Click Save settings.

I hope this tutorial will help you out & solve this problem If you have any queries and question. please leave a comment below.

How to Increase Instagram Followers The Effective Method

May 25, 2016how to, tutorialsDeepak

Everybody Knows about Instagram, A Fun Simple image sharing app and it has quickly become one of the best social visual media platform and fast-growing social media site with over 400M+ Monthly users and on average 80M+ photos shared on a daily basis. Despite that Recent study reveals that it has 25% better engagement than any other social media sites, Even better than twitter. Getting the right real followers and engagement can be tricky if you’re not using the right strategy, Below is some points mentioned that will help you Increase Instagram Followers.

Increase Instagram Followers & Blog Visitors

So having a large followers list under your name & build a community will definitely boost your site traffic, increase sales or Build brand name. Instagram has worked well for many marketers and I know some of them how they increased massive followers within a short period of time, by using this simple strategy.

1: Write Instgram Bio and Add Website Link to it

The best way to drive traffic to your blog is adding the link to your blog/website to your Bio. The Strategy called “link in Bio” strategy. Don’t just add the link in the bio you need to add some descriptive information about yourself as well.you need to ensure that whoever reading bio completely understand what you do and what is this account all about.

Jenn Herman, An Instagram consultant points out the best way to create an Instagram bio that attracts followers. Make sure you have all those points in your Bio.

2: Use HashTags To Reach Targeted Audience

Just Like Twitter, Instagram Also uses hashtags to organize the photos provide search options based on that particular hashtags. Using of Hashtag will Improve your Photos visibility and reach the targeted audience. Some hashtags are more popular than others but don’t overuse it can be annoying for the user just use the relevant one that helps you categorize your photos.

Recently Buffer did Research on this and found that Instagram Post with 11+ Hashtags Gets Higher Engagement

So, How do you find those 11+ relevant hashtags which you integrate into your Instagram post?

The process is very much alike keyword research, Using the right tool and right method will help you find the relevant hashtags which perfectly describe your post and reach a more targeted audience to increase Instagram followers.

Webstagram compiled the list of 100 Most Used/Popular hashtags which you should Include in your post.

And you can also you use the online web tool to find the relative hashtags. Hashtagify.me is a simple Instagram tool which helps you analyze your hashtag and display how other hashtags are correlated to the original one.

Recently, while I was researching on topic, I stumbled Upon an article where an e-commerce site owner increases his Instagram followers using a simple but effective Technique.

3: Increase Instagram followers By Posting at Right Time.

Like most of us, you did everything which points are described above but still you’re images aren’t getting that exposure as you thought it would. Most of the users who goes to school or work login in the morning, and in the evening, on their way home or reach home.

So, what should be the right time for posting images on Instagram? According to the Latergramme, A Service which allows the user to schedule & manage the Instagram post did a research on more than 60,000 Post to determine when’s the images received the maximum engagement.

And In the research, they found that the best time to post on Instagram at 5 p.m. EST on Wednesdays. But you should add post throughout the day to better engagement with your followers.

Schedule your post so that you can add the post when you asleep. There are many services out there like later and iconosquare , The best tool to full analysis of your Instagram account and details about your New Followers, Most Popular Photos, Best Time to Post.

4: Increase Instagram followers By Embedding Instagram Widget In Your Blog/ website.

Embedding Instagram widget can be very helpful to you build a strong following on this platform. As Instagram doesn’t have their Official widget so you can use the Third party Websites like snap widget, Instawidget, and many other similar sites or you can use some javascript to show your Instagram feed in your blog.

There are many advantages of using javascript method rather than third party sites like the snap widget is that whenever user clicks on your Instagram widget it will take them to their site rather than open an Instagram app or site if they are visiting from the desktop, Although javascript method will open the image on app directly and then user can like your other images and follow you directly and you can change mould the widget however you want or you can use the theme/template which support this method. Like Our Bush Blogger Template which supports javascript method in the sidebar and in the footer as well.

Share your thoughts what other Methods or strategies you’ve used to grow your Instagram followers?

Easy Steps To Setup Custom Domain Name In Blogger

May 21, 2016how to, tutorialscustom domain name, domain name, setup domain name, tutorialDeepak

Remember when most of us first started our blogging journey, the first thing what we did was searched on google “HOW TO START A BLOG” and got to know about 2 popular platforms which are preferred by the majority of blogger community is google’s Blogger and WordPress. Blogger has slightly advantage over WordPress as it is a free platform and requires less technical knowledge to get started which we most newbies favors.

Custom Domain Name Vs Blogspot Subdomain

When you first Signup at blogger.com for a blog, you’ll automatically receive a free blogger subdomain, for example after signup your Blog URL would be like this emily.blogspot.com, Despite all the features like Unlimited storage, Unlimited bandwidth, Free Blog Name and many other but you have to use that Blogspot subdomain, As your blog grows the first thing you’d want to do is switch to some blog name which explains your niche/blogging passion. A custom domain would be something like this example.com or www.example.com.

How To Setup Custom Domain Name In Blogger

Please note that you need to purchase the custom domain name before start any of these steps below. Following are some of the sites which offer and provide domain name on a subscription basis the monthly or yearly choose whichever you like.

Godaddy
Namecheap
EasyDNS

In this tutorial, we are using the godaddy.com, so if you’ve purchased it from different domain service provider, don’t worry steps are almost same for all. Now Let suppose you have domain name mynewdomain.com. For Namecheap, you can follow the guide about adding domain to blogger

Login to your blogger account.
Now you’ll be in Blogger Dashboard. Just go to blogger setting. In basic setting, you’ll see something like this. Click “+setup third party URL for your blog”.
After that, you’ll see “Third-party domain settings” next to “http://” just type your domain that you just purchased and be sure that you have included “www” prefix to the domain name.
Then Click on “View Setting Instructions”. It will redirect you to google’s help page which has all the instructions how to setup CNAME. Steps are too much confusing for a newbie. we’ll try to simply so read all the steps.
On View Instruction setting page choose “On a top-level domain (www.example.com)”.
On this very page, You’ll see 4 Ip address. Just Copy it somewhere you’ll need them later.
Now Go back to your blogger setting again, and hit save. When you hit save it will give you an error that we haven’t verified the authority of domain don’t worry about that we will do it in next step.
At this point, Just copy the host field and Destination field somewhere.
Now login to your Godaddy.com account and select manage in the domain.

When the page loads you’ll see your recently purchased domain from GoDaddy. Just choose which domain you want to use and select the manage DNS setting.
Now It will take you to the DNS record page. In which you’ll all the DNS records which are already associated. we don’t have to change them, we have to add record there. To add a new record just click on add button below on that page.
Now we have to add CNAME There, remember we have saved the host field and destination field. refer point 7.
make sure you add both of them.we just showed you one. but you have to save both of them.
Now we need to add those 4 Ip addresses which we saved earlier. Click on add again and this time, select A record instead of CNAME record.
And you need to add all 4 like this in A record. After that just delete the old A record if there’s any which has host @. Make sure you have all 4 google Ip address which has type A and Host – @ always.
Now Go to Blogger dashboard setting and hit save again. You shouldn’t see any error now. It will take some time to take effect so sit tight for 24 hrs to 36 hrs.
Congratulations All Done!! Happy Blogging with new custom domain name.

Bthemez Blog

Get Free Blog Resources, Templates, themes and mockups