MiniSEO Blogger Template

Home » Posts Filed Under Blog Tutorial

Showing posts with label Blog Tutorial. Show all posts

4 March 2016

5 Tips to Speed Up Blog Loading

Author Friday, March 04, 2016 322 Comments

Blog loading speed is very important, both for the convenience of visitors and SEO. Load time is too long can make visitors go before it can read the entire contents of a page.

Speed Up

Actually, it is natural if the blog has a load time longer than a website, because, the blog is identical to some widget installed both as a navigation tool as well as for other functions. On average, all these widgets many wearing javascript, then the loading time tends to be longer. It's good if we do the minimization of the size of files that are loaded.

There are some points that we can do to reduce blog loading time based on the elements :

1. CSS

CSS (Cascading Style Sheets) is a styling language that often we add in HTML. To reduce the size of CSS in HTML template, do compress CSS either manually or with a tool. Its function is to reduce the file size and time open the browser. Then, place the CSS rules at the top.

2. JavaScript

JavaScript has time reading tend to be longer, so that when placed on top, the browser will read first, while other elements will wait until the loading is completed. As a result, elements that are eager to be seen to be affected, especially the posts/articles.

Therefore, the elements that contain javascript (especially in the widget) should be placed at the bottom. Use the output widget Blogger and Google because its javascript can be loaded quickly. When forced to use an external javascript, uploading and hosting his js file for personal use only.

3. Posts

On the main page, the number of posts or articles that are displayed also affect the loading of the blog. If the posts/articles displayed too much, then the loading time will be increased. View articles on the main page with a reasonable amount, preferably 5 or 6 articles only.

To set it up, go to the Dashboard > Layout > Click ' Edit' on the body of the blog post, write the number of posts you want displayed. To further optimize it, cut part of the contents of posts / articles on the main page by using the "auto readmore".

4. Pictures/ Image

The image serves to beautify the look of the blog, gives the impression, and became a symbol of representation and interpretation of the content of the article. However, the images are large also inhibit the loading of the blog, it is therefore necessary the existence of tactics in using the image.

PNG image format is preferred because of its transparency, but the size of the file needed is much larger, but try to use a JPG format images. If still have to use a PNG image file, such as the header, background or blog posts. Reduce / compress its size with PNG compression tool which reduces the image quality.

5. Widget / Gadget

Widgets are an important part of a blog. But if the widget is used too much, then the page loading time will be longer. Use widget is important and particularly supported navigation. Avoid widget that is not so important and does not even support the content of the blog, for example, clock, calendar, photo shows, and others.

I call these widgets is not important because visitors actually do not need it, loading times heavier, and does not give any effect to the performance of the blog.

Optimize the five points above to speed up the loading time of your blog and improve its performance.

That's all I can share. Hopefully helpful.

How to Put Meta Keywords in Blogger

Author Friday, March 04, 2016 1 Comment

How to Put Meta Keywords in Blogger - Actually, search engines no longer use meta keywords as a determining factor for ranking.

But for those of you who still want to put meta keywords in blogger, below is a tutorial.

There are two types of meta keywords that can be used in blogger. First, meta keywords automatically, and secondly, meta keywords manually.

How to install meta keywords automatically

If using the method below, the keywords in the meta keywords will automatically take on the title of the blog and also post title.

1. Login to Blogger and go to your blog dashboard.

2. Click the "Template"

3. Click "Edit Html"

4. Put the code below directly below the code <head>

<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>

5. Click "Save template"

How to install meta keywords manually

Meta keywords manual means, you must manually enter keywords in the meta keywords code.

1. Login to Blogger and go to your blog dashboard.

2. Click "Template"

3. Click "Edit Html"

4. Put the code below directly below the code <head>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta content='Keyword1, Keyword1, Keyword1' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta content='Keywordi2, Keyword2, Keyword2' name='keywords'/>
</b:if>

Change keyword1 with keywords for your blog's homepage
Replace keyword2 with keywords for your blog post pages

5. Click "Save Template"

That's how to put meta keywords in the blog. Hopefully useful for you.

27 February 2016

10 ways to Increase Google AdSense CTR on Blog

Author Saturday, February 27, 2016 Add Comment

10 ways to Increase Google AdSense CTR on Blog - Register for Google Adsense is just the first step for those who want to earn money from Google AdSense.

The next step is increase visitors to the blog, and also optimize your AdSense ads on the blog, so lots of clicking.

Well, in this post, I will tell you how to increase Google AdSense CTR.

What is CTR?

CTR (Click Through Rate) is the percentage of the number of ads click, out of a total display/ad impressions.

For example if ads on your blog is viewed 1000 times and there are 10 people who click on ads, that means you get a CTR of 1%.

How to increase Google AdSense CTR?

Below are some things you can do to increase Google AdSense CTR :

1. Use a template that is simple and not too many colors

Try to use the theme or blog template, which has a simple layout and also not too much color.

Why... ? Because the blog that is simple and not too many knick-knacks will make your ads can appear more prominent and will more easily attract the attention of visitors to click.

2. Don't install too many widgets

Even though your blog using a simple template or theme, but if you put up too many widget, it will be useless.

Remove the widget that is not too important, for example, a calendar widget or widget blog stats, etc. The fewer widgets installed will get better. The reason is same as point number one.

3. Use the theme/template that is not too wide

Blog design that is too wide will make the visitor's eye should move to the right and to the left to read the content on the blog. Because his eyes tired, finally could not see the ads because they do not focus.

Well, if the design blog narrow, it will make the visitor's eyes focused on the middle and will make the ads more easily draw the eye. In the end the visitors itching wanted to click on the ads.

4. Use the responsive design

Now, more Internet users use mobile devices than desktop. That means to have a responsive blog is a must.

Moreover, Google AdSense now provide advertisements with types Responsive.

5. Use the recommended ad size

Google AdSense provides a fair amount of ad sizes to choose from, but you also can create your own ad sizes. But there are only few ad sizes that have a good CTR performance.

Generally, the larger the size of the ad, then the higher the CTR values. The reason it is certain, because the larger ads will be more easily seen by visitors.

6. Place Ad in the right place

Even though you have selected the right ad sizes, but if their ad placement is wrong, then it could certainly not be effective.

Below are recommendations ad placement in order to get a high CTR :

Under the title of the posting, size 300 × 250 or 336 × 280
In the middle of the posting, Responsive size, 300 × 250 or 336x280
Under posting, size 300 × 250 or 336 × 280
In the sidebar, size 300 × 600, 300 × 250, or 160 × 600
In the header, Responsive size, or 728x90

7. Use a combination of ad types of images, text, and link units

Google AdSense provides three types of advertising, namely advertising the type of image, text and link units. Use a combination of all three, so the ads that appear to be more varied.

8. Reduce the number of ads

One other way that can be done to increase Google AdSense CTR is reducing the number of ads that are attached.

Simply attach the ads in locations that get high CTR values. For example under the post title or in the middle of the post.

9. Do not mix AdSense ads with other ads

Google AdSense itself does not prohibit to mix AdSense ads with ads from other programs. But it would be better not to mix it up.

10. Increase your blog visitors

The latter may not how to increase CTR, but how else, if you applied the way from 1 to 9 but still lower CTR ad, then the easiest solution is to increase visitors to the blog.

Closer...

I think that's all I can share this time. Don't forget to do your own experiment, because every blog is different.

If you have any other way, please share in the comments box.

25 February 2016

How to Keep the Blog Traffic Stable or Even Up Although Rare Post ?

Author Thursday, February 25, 2016 Add Comment

How to Keep the Blog Traffic Stable or Even Up Although Rare Post - Posts on the blog regularly and consistently is one constraints often encountered a blogger.

Don't care about bloggers new or old, certainly often experience a sense of lazy, don't have any idea, have no inspiration or no passion for writing a post on the blog.

Especially for bloggers who did not have a hobby of writing like me, every day it's like to want to just stop blogging.

It is not a secret anymore, if more frequent posts, blog visitors usually will also increase. But even then, it does not mean post frequently be the only way to increase visitors to the blog.

You can still increase visitors to the blog, or at least create a blog visitor traffic stabilized although rarely post on the blog.

My blog is a simple example of a blog that is rarely post, but hardly ever decreasing visitor traffic, even every month is always increasing.

Want to know the secret ? Just look below :

Create Evergreen Content

Some of you may have heard the term "Evergreen Content". The purpose of Evergreen Content here is a piece of content (content = posts) which keep relevant although read anytime, or content that is not easy casserole.

Below are some examples of articles that could be called the Evergreen Content :

1. Guide or Tutorial Articles

Guide or tutorial article is an article that teaches step by step to do a thing.

2. Definitions Article

Definitions Article here means is an article that explains the meaning, purpose or concept of a thing.

For example the topic of this blog is about blogging, then I could write an article about "What is a Blog ?"

3. List Articles

List Articles is articles which displays a list of a thing. Articles of this type are usually there are numbers on the title.

Below are some examples of the List Articles :

12 Ways to Increase Blog Visitors
20 Beautiful Sights
7 Ways to Maximizing SEO in Blog

4. And others...

There are many more types of other articles that could be an "Evergreen Content".

The important thing to keep in mind when it wants to make the Evergreen Content is, make sure if the content we make many who seek it.

Useless if we make posts that are not easily stale, but there is no devotees.

Update existing content

Many bloggers who thought to update the blog, we should publish a new post, whereas to update the blog can also update existing posts.

So while dont have an idea, we can use the time we have for updating an existing posts. For example, fixing typos, make it more complete, or update the information in it.

There are several benefits that can be obtained if we consistently update our blog posts :

Make the postings into a higher quality over time
Got a good rank on Google, because Google likes a quality article and also up to date.
Of course, if it gets good grades, it will have an effect to increase visitor traffic

Boost Blog Promotion

The last one I think is most important but many bloggers are not too concerned with it, that is the promotion of the blog.

Blogging is not just a matter of how often posting articles on the blog, but also active in promoting the blog.

If in our blog is filled stale content is not easy, then we have to promote your content, so that many came to read it.

Rather than spend the time to make new posts, that's better if the time used to promote existing content.

Conclusion...

The conclusion is clear, you do not need to post the article in frequency, so that blog visitors is increasing. But even then, it does not mean after reading this post, you can simply laze around for posting articles on the blog.

If you are able to post articles on a regular basis, then it would be great, But if you are not able to, it is better do not forced. Use the ways that I have written above.

How to add the SEO Friendly Breadcrumbs on the Blog

Author Thursday, February 25, 2016 1 Comment

How to add the SEO Friendly Breadcrumbs on the Blog - The breadcrumb is one of the factors that affect the Blog, that's SEO Friendly or not.
Therefore, all blogs are required to have the Breadcrumbs.

Are You know what it breadcrumbs ? Breadcrumb is the marker on a website/blog. For more details, you can see the picture below :

Are your blog is already added the breadcrumb ? If not, you can add it by following the tutorial below. But before that, you have give label to all your post.

Below the steps in Add a Breadcrumb on Your Blog :

1. Sign in to Blogger

2. Then click Template >> Edit HTML

3. Next, find the code <b:includable id='main' var='top'> (Use Ctrl+F)

4. If it is found, delete the code and replace it with the code below :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

5. After that, place the code below right above code ]]></b:skin> :

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Finish. Now your blog already has the coolest and SEO Friendly Breadcrumbs.
With the breadcrumbs, the look of your blog will look more beautiful and handsome.

I think that's all from me.

How to Make Table of Contents (Sitemaps) in Blog Based on Label

Author Thursday, February 25, 2016 Add Comment

How to Make a cool Table of Contents on Blog Based on Label - On a blog, there should be a table of contents.

What is the table of contents on blog ? The table of contents on the blog is a box which contained the entire postings / articles that we have made.

The main function of the table of content is to allow visitors to see throughout all of your article and if there is interesting, visitors can just click the title of the article.

Well, in this post I will share about how to make "table of contents" automatically based on the label for Your blog.

Below are the steps to make it, follow it right:

1. Sign in to Blogger

2. Then select Pages >> New Page

3. Then put the code below into the HTML section

<div style="margin: auto; max-height: 1200px; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftsimple.js"></script><script src="/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script>
</div>

4. Click Publish

5. Finish

Now, Your blog already have a table of contents. Many blogs out there that do not install / use table of contents, whereas, it's function is very large for a blog.

Simple Tricks to Make The Default Blogger Template be Responsive

Author Thursday, February 25, 2016 Add Comment

Simple Tricks to Make The Default Blogger Template be Responsive - Talk about the template, the default template of blogger does not have a responsive features. Therefore, you must create your own templates or use the templates from others that already have the responsive features.

If you guys still want to use the default blogger template, then you have to make it become responsive.

In this post I will share how to create a default blogger template into full responsive.

Here are the steps :

1. Disable Navbar on blog by selecting "Off" , then click Save

Make a default Blogger templates be Full Responsive

2. Next click menu Template >> Edit HTML, then search the code below : (Use Ctrl+F)

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

Then remove all the code and replace it with the code below :

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

3. Then you must find the code below :

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

Then remove all the code and replace it with the code below :

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

4. Place the code below right above code </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}

@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

5. Lastly, Put the code below right above the code ]]></b:skin>

@media screen and (max-width: 1230px){ #header { float:none; max-width:none; text-align:center; } #header-inner { margin-bottom:0px; } #header h1 { margin-right:0px; } #header p.description { margin:0; } #header-right { position:relative; right:0; text-align: center; margin : 0 !important; } .header-right-inner { margin: 0 30px ! important; } .main-nav-top{ clear:both; float:none; } .main-nav-main { margin:10px 0 0 0; } #nav-search { float:none; margin:0; } } @media screen and (max-width: 960px) { .sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; } .subscribe_outer { margin: 0 -20px; } .main-wrapper{ margin-right:0; width:100%; min-height: 0px; } .ct-wrapper{ padding:0 15px; } #content { padding: 5px; clear: both; border-radius: 0; } .sidebar-wrapper .sidebar{ margin: 15px; } .sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; } } @media screen and (max-width: 768px){ .header-wrapper { margin-right: 0; min-height: 0; width: 100%; } #header { text-align: center; width: 100%; max-width: none; } #header-inner { margin:30px 0 0; } #header h1 { font-size:35px; } .main-nav-top, .main-nav-main, .main-nav-top ul, .main-nav-main ul{ text-align:center; } .related-post { width:auto; } #comment-editor { margin:10px; } .footer { margin:15px; width:auto; } .footer-credits .attribution{ display:none; } } @media screen and (max-width: 500px){ #header img { width:100%; } } @media screen and (max-width: 420px){ #header h1 { font-size: 30px; margin: 10px; } .main-nav-main ul li{ margin:4px 10px; float:none; } .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .ct-wrapper{ padding:0; } .footer .footer-inner { padding: 45px 10px 10px 10px; } .comments .comments-content .comment-replies { margin-left: 0; } }

Finish. Now the default blogger template has been successfully modified to be responsive. That's it from me on this post.

How to resolve Error "Oops there seems to be wrong" in Blog

Author Thursday, February 25, 2016 Add Comment

How to resolve Error "Oops there seems to be wrong" in Blog - One of the errors that often occur when blogging is error "oops there seems to be wrong".

The error will appear when we will edit a part blog post on layout and at the moment we are going to edit the look of the template on the Advanced menu.

For more details, please see the image below :

When the error appears, of course it will hinder us in organizing the blog posts and also to change the look of our blog.

In this post I'll share a little bit about how to resolve the error like above.

Here are the steps to resolve it :

1. Sign it to Blogger

2. Then click on Template >> Edit HTML

3. After that search rgba code (use Ctrl + F), this section may be the most difficult to explain. But I will try to explain it as best as possible

4. If you already found the code, find that in the end there are the numbers 0. for example :

value: "rgba(80, 80, 80, 0.1)" dan value: "rgba(80, 80, 80, 0)"

The difference of both the above code is at the end of red code there is a 0, then we have to replace that code with code like this : value: "transparent"

5. The code like it was not just one, then you have to find again the rgba code that has a 0 at the end, and replace it with this code : value: "transparent"

That's how to resolve the error. It's rather difficult to explain, but I've been trying as much as possible to share this tutorial.

Hopefully tutorial above can be understood by you all.

How to create a Blockquote With Scroll Function in Blog with quickly and easily

Author Thursday, February 25, 2016 2 Comments

How to create a Blockquote With Scroll Function in Blog with quickly and easily - Blockquote is a column that we use to enter a specific word or it could be to insert the HTML/script code that is already parsed.

Talking about blockquote, actually from the blogger itself already provides a button to use the blockquote.

However, the Blockquote which has been provided by the Blogger has the look of a less good and does not have a scroll function. So if we enter the code/script that is very long, it will be long until it's down.

Therefore, we have to create the blocquote column has a scroll function.

How to make it ? It's easy. You just need to add a bit of code in the Template. For those who want to use this scroll function.
Please follow the steps below :

1. Sign in to Blogger

2. Then click menu Template >> Edit HTML

3. Search code ]]></b:skin> . And add the following code right above code ]]></b:skin>

.post blockquote{max-height:250px; overflow:auto;background:#ffffff; font-style:italic; border:2px solid #2288bb;padding:10px 10px 10px 20px}

*Information :

max-height:250px; is the height of the blockquote box. You can change it in the size of the pixel.
background:#ffffff; is the background color of the blockquote box , please change color as you want.
#2288bb is the color of the outline of the box. You also can change the color that you want.

4. Lastly, click Save Template and see the result.

Now the view from your own blockquote box is not like before were very plain.
And if you enter the code / script that long, this box will also serve to save pages of your blog posts.

How to make a Cool and Responsive Navigation Menu in Blog

Author Thursday, February 25, 2016 Add Comment

How to make a Cool and Responsive Navigation Menu in Blog - The navigation menu is a menu that is usually placed under the header of the blog that is useful to direct the readers or visitors of the blog heading link they are looking for. If during this time a lot of the bloggers who have difficulty how to make it, this time I will share about how to make a cool and responsive navigation menu on your blog.

To view the display from the menu which we will create later, please see the image below:

Navigation menu usually consists of several tabs. "Inside" each of the tabs contains a link to the page of posts, static pages, page labels, to other websites etc. Actually create tab menu is not so difficult. Basically the bottom line is the same, namely to make a menu that contains a few links with some styling for added visual appeal. While links are arranged vertically, the navigation menu is usually arranged horizontally.

In this tutorial we will be installing the navigation menu below the header,common and typical place to put a navigation menu. Well, here is how to put up such a cool navigation menu:

1. Login to Blogger

2. Then click menu Template >> Edit HTML

3. Put the code below just above the code ]]></b:skin>

.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important} #nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px} .nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left} .nav-menu2:before,.nav-menu2:after{content:" ";display:table} .nav-menu2:after{clear:both} .nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em} .nav-menu2 a{display:block;padding:0 15px} .nav-menu2 li{position:relative;margin:0 0} .nav-menu2 > li{float:left} .nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset} .nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset} .nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset} .nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)} .nav-menu2 li li ul{left:100%;top:-1px} .nav-menu2 > li.hover > ul{visibility:visible;opacity:10} .nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block} .nav-menu2 li li.hover ul{visibility:visible;opacity:10} .nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px} .nav-menu2 li li a:hover{background:#f0f0f0} .nav-menu2 li li li a{background:#fff;z-index:20;color:#333} .nav-menu2 li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px} #search-form{background:#333333;float:right;margin:0 0;width:200px} #search-form table{width:100%;margin:0 0 0 0} #search-form td.search-box{padding-right:30px} #search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none} #search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s} #search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer} #search-form input#search-box[type="text"]:focus{background:#eee;outline:none}

@media only screen and (max-width: 768px) {.nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; } }

4. Put the code below just above the code </header> . Replace the Red with the address of your Blog.

<nav id='nav'> <a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>  <ul class='nav nav-menu2'> <li><a class='active' href='http://18guide.blogspot.com/'><i class='fa fa-home'></i> Home</a></li> <li><a href='#'>Menu 1</a> <ul> <li><a href='#'>Sub Menu 1</a></li> <li><a href='#'>Sub Menu 2</a></li> <li><a href='#'>Sub Menu 3</a></li> </ul> </li> <li><a href='#'>Menu 2</a></li> <ul> <li><a href='#'>Sub Menu 1</a></li> <li><a href='#'>Sub Menu 2</a></li> </ul> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> </ul>  <form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search Here...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form> </nav>

5. Put the code below just above the code </body>

<script type='text/javascript'> //<![CDATA[ var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}} //]]></script><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>

6. If the Template you are using is already using "Font Awesome", then this step is not necessary. But if not, please put the code below just above the code </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

7. Put the code below just above the code </head>

<script type='text/javascript'> $(function() { $(".set-1").mtabs(); }); </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

The navigation menu is a widget that should exist on every blog. So by following the tutorial above, you already have a navigation menu that is very cool.

So that's it how to create a navigation menu on a post this time. Hopefully what I share can be useful for you all.

Subscribe to: Posts ( Atom )