How to Upload, Customize & Use Mexider in Your Blog?

Friends, Probably, you know that I had released Blogger Guiders’ first template whose name was ‘Mexider – A Wonder of Mixture’ that is available to download (for FREE). You can see the Demo or Download that awesome template. It is full of features (you can see in demo). So, in the previous post, I had only told you about the features of Mexider and how to download it. Now, today, I am going to tell you- How to Upload, Customize, Use Mixider Blogger template. So, here are the topics we are going to elaborate.

What Am I Going to Cover Here:-

I am going to tell about:-

1. What are the features of Mexider [Description]
2. How to upload Mexider in your Blogger blog?
3. How to use Mexider in your Blogger blog?
4. How to customize Mexider in your Blogger blog?

What are the features of Mexider? [Description]

In the previous post, I had informed your that I will publish the next articles with the features description of this beautiful mix template. So, here are the features:-

• Great Design:- As you can see in the demo, the template’s design is awesome. I have chosen the best features of best three template to make it best than ever. The three templates are: Flat Mag, MBT, Blogger Yard.
• Greatly SEO Optimized :- As you can see, We (Blogger Guiders) are posting SEO tips & tricks for you everyday. So, of course, I have greatly optimized this template (off-page and on-page SEO).
• Responsive Design:- The design of this template is very good from both screens (Desktop & Mobile). The template can seen perfectly from all mobile screen sizes.
• Installed Best Meta Tags:- I have installed all types of best meta tags including Facebook Debugger (OpenGraph), Rich Snippets (Good for Google+ Sharing), Thumbnail Meta Tags (For providing the correct thumbnail of the post to Facebook, Google+ while sharing posts.
• Best Pagespeed Settings:- Do you know? The pagespeed score of our demo is 81 which is enough for ranking. So, its good for ranking your blog!
• Fast Loading Speed:- Let me tell you that the speed (loading speed) of this template is very good. It is only 1.96 seconds. It means, that, the template loads within some seconds!

• Added Great sharing tools for text & Images:- For better sharing experience, I have installed best sharing tools in this template. The sharing tool appears when- You hover on any image, you select any text (as shown in picture). It can help you in getting more traffic from social sites.

• Beautified CSS:- I have installed beatified CSS for more understanding. So, you can easily customize the template according to your needs.
• Compressed JavaScript Codes:- Bloggers hardly know JavaScript language and JavaScript or jQuery makes the template heavy. So, I have installed Compressed JavaScript which will increase the template’s loading speed.
• Great Comments Stylesheet Installed:- I have installed MBT’s commenting stylesheet for comments design. If you want to customize them, you can by just search for ‘.comment’ CSS(s).

• Animated Smilies Installed:- Not many but yes, you can add smilies in your blog. Just put /hihi or :) for different smilies. I have only added two smilies in the template because the more smilies the template have, the more effect will come in the template’s loading speed. (Animated Smilies)

• Beautiful Related Posts Widget Inbuilt:- Related post widget is I think the most popular and most usable widget in Blogging platform. Its very helpful for keeping your visitors on your blog for more time than he plans to be their.

• Sharing Box below posts:- I have included a sharing box after the post end. If your visitors like your post, then they will surely share the post to let others let the post.
• Customized Accordion Widget:- On MBT, the accordion's design is good and to make it different, I have customized that design with the new one (as shown in the picture below).

• Featured Posts Inbuilt for Homepage:- Featured Post widget by Blogger Yard is very useful if you want to tell your blog’s users that was is trending on featured on your blog at this time.

• Great Read More Script Design:- I don’t think that you have seen this type of design anywhere else. Can you see the dashes around the featured post? If yes, then let me tell you that those dashed are not on picture actually. This is a CSS effect will add these dashed to every post thumbnail of your blog.

• Hover Effects on Images:- I have added a smooth hover effect on pages. When you hover over images, the image will get lighted smoothly and when you hover out from over them, the image will be back on its real colors.
• About-Post Information Widget:- This is a latest widget by MBT that I have included on Mexider. You can see it at the end of every post.

 

• Author Box with fabulous hover effect:- As in all blogs, I have also added Author Box on Mexider template but this author box have a unique thing: When you hover over author’s picture, it will get changed into leaf shape smoothly.

• MBT Navigation:- As you know, MBT had created a navigation system for Blogger blogs which I have included in this blog for easy navigation for your blog’s coming visitors.

• Breadcrumb & Search Box:- Sometime, you blog’s visitor wants to read more and for that, he finds a search bar but when he couldn’t locate it, he leave the site/blog. So, in this template, I have included a Breadcrumb and Search bar from Flat Mag template for easy searching and navigation.
• Automatically Image Adjust:- On every screen sizes, images on posts will automatically adjust themselves according to screen size. (you can check it by resizing your browser window).

How to Upload Mexider Blogger Template in Your Blogger Blog?

If you have already got the Mexider template but could not upload it, then here’s a simple way.

1. You can observe that I have sent you a .rar file in which, the template is stored.
2. Open that file. You will find a .xml file their. Open it (the file name will be ‘Mexider_BY_Blogger_Guiders.xml’).
3. And, copy all the code their.
4. Now, go to Blogger Dashboard > Template > Edit HTML and paste all the code their and remove your existing template code.
5. Save the template and you’re done!

How to Use Mexider Blogger Template in Your Blogger Blog?

Its the time to set up this amazing template on your blog.

• Firstly, Go to Blogger Dashboard > Layout and Check their our for ‘About the Author’ named HTML widget. It will be on the left side at bottom. Click on Edit Link.
• Now, Re-open the .rar file which I had emailed to you and check their out for ‘About Author Widget.txt’ file. Open it and copy all the codes.
• Now, paste the codes to ‘About The Author’ named HTML widget which you had opened after clicking the Edit link.

Do this for all widgets. The HTML widgets will be created automatically after you upload the template. You just have to put correct codes on correct HTML Widget. Put ‘About Author Widget.txt’ code in ‘About The Author’ named HTML Widget. Put ‘Circle Us Widget.txt’ code to ‘Circle us!’ named HTML widget. Put ‘Popular Series Widget.txt’ code to ‘Popular Series’ named HTML widget. Put ‘Tags Widget.txt’ code in ‘Topics’ named HTML widget. At last, Put ‘Subscribe Box.txt’ code to ‘HTML/JavaScript’ named HTML widget.

Don’t forget to Customize them!

How to Customize Mexider Blogger Template?

This the toughest part which a newbie thinks. But I have made it very easy for you. Here are one-by-one widget customization steps:

1. How to change the image which is appearing while sharing my blog’s homepage?

I already said that I have installed Thumbnail meta tags on Mexider. So, You will have to do some changes in it.

• Search for:

http://s12.postimg.org/5al42ru8d/Untitled.png

And replace the URL with your blog’s LOGO image.

• Done!

2. Customize Meta Tags for twitter Cards:

• Search for these meta tags:

<meta content='@PFCITech' name='twitter:site'/>
<meta content='@Shivansh_Skv' name='twitter:creator'/>

• Now replace @PFCITech with your blog’s official twitter account and @Shivansh_Skv with your twitter account.

3. How to Edit Notification Bar?

• Search this code:

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>

• Now, you will find this code after above code:

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
  <div id='bloggernotification'>
    <div style='width: 997px;margin: 0px auto;'>
      <strong>
        <font color='#288EBA'>
          <i class='fa fa-wordpress'/>
          Guide:
        </font>
      </strong>
      <a href='http://www.placeforcompinfo.com/2015/02/how-to-create-wordpress-blog-in-minutes.html'>
        Create Your Own WordPress Blog in Minutes
      </a>
      <strong>
        <font color='#87CEEB'>
          <i class='fa fa-line-chart' style='margin-left: 40px;'/>
          Trending:
        </font>
      </strong>
      <a href='http://www.placeforcompinfo.com/2015/02/how-to-integrate-use-font-awesome-icons.html''>
        Integrate and Use FontAwesome Icons on Blogger      </a>
      |
      <a href='http://www.placeforcompinfo.com/2014/12/create-internet-forum-for-free-in-only.html'>
        Create Your Online Forum
      </a>
    </div>
    <span id='closebloggernotification'/>
  </div>
  <span id='openbloggernotification' style='top: -6px;'>
    <span/>
  </span>
</div>

• Now, in this code, change Olive color words with the Font Awesome Codes you want, Black Bold Italic words with the words you want to be appeared on Notification Box and red colored words with your URL(s).
• Done!

4. How to Customize Menu?

• Search for this Code:

<nav id='menu'>

• You will find this code after it:

<nav id='menu'>
          <input type='checkbox'/>
          <label>
            &#8801;
            <span>
              Menu
            </span>
          </label>
          <ul>
            <li>
              <a href='/'>
                <i class='fa fa-home'/>
                <span>
                  Home
                </span>
              </a>
            </li>
            <li class='item1'>
              <a href='http://www.placeforcompinfo.com/search/label/Windows%20Tips'>
                <i class='fa fa-windows'/>
                <span>
                  Windows Tips                </span>
              </a>
            </li>
            <li class='item2'>
              <a href='http://www.placeforcompinfo.com/search/label/Blogger%20Tips'>
                <i class='fa fa-edit'/>
                <span>
                  Blog Tips                </span>
              </a>
            </li>
            <li class='item3'>
              <a href='http://www.placeforcompinfo.com/search/label/Blogger%20Widgets'>
                <i class='fa fa-gears'/>
                <span>
                  Widgets                </span>
              </a>
            </li>
            <li class='item4'>
              <a href='http://www.placeforcompinfo.com/search/label/Earnings'>
                <i class='fa fa-money'/>
                <span>
                  Earning                </span>
              </a>
            </li>
            <li class='item5'>
              <a href='http://www.placeforcompinfo.com/search/label/Windows%20Softwares'>
                <i class='fa fa-skype'/>
                <span>
                  Softwares                </span>
              </a>
            </li>
            <li class='item6'>
              <a href='http://ask.mybloggertricks.com'>
                <center>
                  <img height='31' src='http://s12.postimg.org/o6ve0clhl/2af11481af1d58c3.png' width='31'/>
                </center>
                <span>
                  Need Our Help?
                </span>
              </a>
            </li>
          </ul>
        </nav> 

• Now, after you it has found, change green color words with the URL(s) you want, change Olive color words with the font awesome codes, change Bold, Italic and Underlined words with the text you want to display their and change purple URL if you want to display any image their.

5. How to Customize Featured Post Widget?

• Firstly, search for this code:

<i class='fa fa-indent'/>

• You will find this code after it:

<ul>
              <li class='item2'>
                <a href='http://www.placeforcompinfo.com/2015/02/add-your-copyrights-to-copied-text-on.html'>
                  Blogger Trick: Add Your Copyright to Copied Text - Script for Blogger
                </a>
                <span>
                  <i class='fa fa-tags'/>
                  Blogger
                </span>
              </li>
              <li class='item3'>
                <a href='http://www.placeforcompinfo.com/2014/11/skill-blogger-template-review.html'>
                  Is Skill Blogger Template is Perfect for your Blog?
                </a>
                <span>
                  <i class='fa fa-tags'/>
                  Reviews
                </span>
              </li>
              <li class='item4'>
                <a href='http://www.placeforcompinfo.com/2015/02/giveaway-get-cyberlink-youcam-5.html'>
                  Giveaway: Cyberlink YouCam for 5 Lucky Winners.
                </a>
                <span>
                  <i class='fa fa-tags'/>
                  Offers
                </span>
              </li>
            </ul>

• Now, change the Bold, Italic words with the text you want their, Oliva color words with the tags you want and green color words with the URL(s) you want.
• Done!

6. How to Change the Data of Author Box & Author’s Picture?

• Search for this code:

<img alt='Author' src='https://lh4.googleusercontent.com/-6P8cI1QHfI0/AAAAAAAAAAI/AAAAAAAABQw/NVB3HVHVGpY/s120-c/photo.jpg' title='Author'/>

• Now change the green (Lime) color words with your profile picture’s URL.
• Now, Search for this code:

<div class='author-title-line'/>

• Next, you will find this code:

<p>

Shivansh is a young addicted Blogger who is founder of PFCI Tech. He is 14 years old and living in India, Uttar Pradesh, Karwi. Currently, He is studying in 8th grade and running his site. He loves to share his Blogger resources, making money online and helping newbies in the Blogging world...</p>

• Change the text in bold with About You (Or About Author)
• Done!

7. How to Change The Links in Above Footer Strip?

• Search for this code:

<div class='menubottom'>

• Now, you will find this code:

<div class='menubottom'>
          <ul>
            <li>
              <a href='http://www.placeforcompinfo.com/search/label/Tutorials'>
                Tutorials
              </a>
            </li>
            <li>
              <a href='http://www.placeforcompinfo.com/p/blog-page_6.html'>
                Privacy Policy              </a>
            </li>
            <li>
              <a href='http://www.placeforcompinfo.com/p/welcome-to-place-for-comp-info-about.html'>
                About Us              </a>
            </li>
          </ul>
        </div> 

• Change Bold, Italic words with the URL(s) you want, change Bold text with the text you want to be displayed.

Note:- For instructions for Customizing Footer Widgets, Please check at Section ‘How to Use Mexider in Your Blogger Blog?’ of the post.

Final Words From Author

I hope you have liked this template. If you have not brought the template until now then for what you are waiting for? You have the customization instructions, way to Download the template. Means almost everything! You can comment here that ‘I want the template’ how any other comment after subscribing our blog and the template will be right on your inbox in some minutes!

Share this post