Winge – A Grid Blogger Theme

Note : This documentation guide is specifically for the Winge Blogger Theme.


A how-to guide and helpful informations about options and features of the Winge Blogger theme. Step by step easy tutorials are written describing each feature & functions of the theme so that you can very easily master our themes.

Let’s Get Started

Thanks for purchasing The Winge Blogger theme.

If you are satisfied with our services then please do not forget to write us, as it inspires us to work more hard for our customers like you.

Make sure BackUp!

Before installation of our theme make sure to backup you old/previous template, in case you can need it in future anytime. Do remember the folder name where you have saved the template as it would be easy for you to get it when you need it.


When you purchase the license of Winge Blogger Theme, you will get a file named Winge Theme Unzipping this file using a good Unzip software,you’ll get a folder named Winge Theme Package, inside which you will see a file named “Winge.xml“.

This xml file would be our main template file which we will be uploading on our blogger dashboard.

For easy installation guide have a walk through our article on how to install blogger themes.

Back to Top ↑


To make your blog look exactly like the Demo, you must install the demo-content.xml file which is included inside a folder named Demo Content as shown in below screenshot.

So now you’re ready to import the demo-content? Right!


  • Navigate to Settings > Other within your Blogger dashboard,
  • Now click on Import Content in Import & back up section.

  • Now, select the demo-content.xml for import.
  • Click on the Import from computer and
  • Wait for a moment! until it’s all done.


Back to Top ↑


  • To create a new post, navigate to Blogger Dashboard > Posts > New Post, there
  • A new window with post editor will open up.
  • Write your post’s titlecontent in the respective fields.
  • After adding all the fields, hit the Publish button.

Back to Top ↑


A standard, static page is similar to creating a post in many ways and is ideal for creating an About Me or Contact Me page in your blog/website.

To Create a Page using “Winge theme”,

  • Navigate to Page > New Page,
  • A new window with post editor will open up.
  • Write your page titlecontent in the respective fields.


Back to Top ↑


Your homepage is the first page visitors will see when they arrive at your website. By default, the homepage will be the page that also displays all of your published posts, beginning with the most recent.


Blogger applies different template for mobile version so whether your blog looks okay on desktop but it will look very odd on the mobile version. So tackle this issue we have done some work on the mobile version which lets you easily transform your mobile version blog too.

To customize look of your blog’s mobile version

  • Navigate to Theme in your blogger dashboard, there
  • Open the click on the cog just below mobile version.


  • Now Select the  ” 
  • And do not forget to Save the changes.
  • It’s done now.


Back to Top ↑


Logo & favicon are the important part of a blog. Identity of your brand is reflected by it among your audiences.  With a perfect logo you can be easily recognized, that’s because we have implemented the option for custom logo in our theme.

To add in your preferred logo image, navigate to Blogger Dashboard > Layout > Header, a new tab window will open up there will be options to upload a Custom Logo from your computer. Click on the option and upload it.

Do not forget to save the changes.

Back to Top ↑


How To Customize Navigation –

Setting up Winge’s main menu is quite simple! For that go to Blogger Dashboard > Theme > Edit HTML. A editor when codes in unknown language for some of you will apppear.

There inside the editor type CTRL+F on your keyboard, a small search box on the top-right of the editor will appear before your screen. Type there ” nav-menu ” and hit enter.

The HTML Editor will take you to the new set of codes something like as shown in the below screen.

Now, you can see the # inside the codes, Just replace them with the links you want to be displayed on your navigation menu.

For e.g. I have 5 different links listed below


I will replace all the # with the above links after which the codes in screenshot will look like this

Do not forget to save the changes made.

Back to Top ↑

Featured Slider is a function with the help of which you can featured some of your interesting blog posts in a easy and simple way. Let’s have a look

To display a post in Featured Slider, open that post and go to label section in the right-top of the post editor.

Back to Top ↑


Social media are the essentials parts of the online business, as it exposes your content to a large community in short time. So we have integrated our theme with the social media which you easily add to your blog with very simple steps.

To add social links to your blog navigate to Layout > Connect With Us in your blog’s dashboard, there click on the edit link in the widget area.

A new window will appear as below screenshot. Replace the links within href and save the widget

Here’s The code

<div class="social-icons">
<a class="btn-facebook" href="#" title="Facebook"><i class="fa fa-facebook"></i></a>
<a class="btn-twitter" href="#" title="Twitter"><i class="fa fa-twitter"></i></a>
<a class="btn-gplus" href="#" title="Google Plus"><i class="fa fa-google-plus"></i></a>
<a class="btn-linkedin" href="#" title="Linkedin"><i class="fa fa-linkedin"></i></a>
<a class="btn-xing" href="#" title="Xing"><i class="fa fa-xing"></i></a>


A sidebar is a vertical content area that displays to the right of your main content/post area. You customize your sidebar by stacking up different widgets that display a variety of things.


  • To add, remove, or edit your sidebar widgets, navigate to Blogger Dashboard > Layout.

To add a widget in your sidebar click on ” Add a Gadget ” as shown in the screen below.


Here’s the code, for about widget, add this in HTML Widget in your sidebar.

<div class="about-widget">
<a class="author_img" href="#">
<img src="" />
<p>Nam cu odio vocibus, cu eam graece iisque. Ius ceteros antiopam cu, per cibo illud verear an</p>

For help troubleshooting issues in Winge or to see some fun customization tutorials, check out all of Winge’s FAQ Articles here!  Winge Articles

And, as always, if you have any theme-related questions you can’t find the solution to in our FAQ article database, you’re always welcome to open up a new support ticket.

Back to Top ↑