WeblogMag - Responsive Professional Blogger Template

51 comments :
WeblogMag is a professional blogger template for business blogs, magazines and simple news sites. Weblogmag is coming with plenty of features which makes it easy for us to improve user experience. It is coming with an awesome slider and new ticker along with a recent posts widget.


Features of Weblogmag Blogger Template

  • Responsive design
  • Full width slider
  • News ticker
  • Social media sharing buttons
  • Social media buttons
  • Recent post widget with a label or recent posts from blog
  • Better label widget

WeblogMag Pro responsive Blogger Template


Blogger template configuration

Edit your blogger template using blogger template editor and change these options
var pageCount = 8;
          var upPageWord = "Previous";
          var downPageWord = "Next";
          var rmorepost = "Read more";
          summary_noimg = 385;
          summary_img = 285;
          summaryPost = summary_img;
          postthumbnail = "s250-h200-c";
          nnewsticker = "News Trending";
          imgr = new Array();
          imgr[0] = "http://1.bp.blogspot.com/-nhrIA7_1ei0/UkHKoMI2UTI/AAAAAAAAA28/a9-8_0KXPTI/s1600/no-thumb.jpeg";
          numposts = 8;
          showRandomImg = true;
          //related posts settings
          var defaultnoimage = "http://1.bp.blogspot.com/-nhrIA7_1ei0/UkHKoMI2UTI/AAAAAAAAA28/a9-8_0KXPTI/s1600/no-thumb.jpeg";
          var maxresults = 4;
          var relatedpoststitle = " Related Posts";
          var norelatedpoststitle = " No related posts"
Change these variables with your requirements.
pageCount - Number of blog posts in homepage(Recent posts), label search pages(here need to mention number of posts to load in a lable page). Make sure "Number of posts on main page:" of your blogger set as same value.
upPageWord - Pagination previous text
downPageWord - Pagination next page text
rmorepost - Read more text 
summary_noimg - Summary text length when there is no image in post.
summary_img - Summary text length when there is image in post.
summaryPost - Summary text length featured post widget first post.
postthumbnail - Recent posts thumbnail dimension. eg:s250-h200-c(250px width and 200px height), s300-h210(300px width and 210px height)-c, s400-c(400x400)
nnewsticker - Newsticker heading.
imgr[0] - Magazine widgets no thumb default image.
numposts - Default number of posts for magazine widgets. Not important.
showRandomImg - Keep it true itself.

Related posts settings 

defaultnoimage - Related posts no thumb default image.
maxresults - Number of posts to show in relates posts area
relatedpoststitle - Related post heading text when there is more than one related post.
norelatedpoststitle - Related post heading text when there is no related posts.

How to add News ticker

Hope you already installed this blogger template. News ticker work easily with recent posts from label or recent posts from your blog. As shown in image given below best 2 places for placement of news ticker is marked as 1 and 2.

So widget section 1 is just a normal widget area. But section 2 will only be available for home page of the blog.
Add a html widget in any of these areas. Add content as shown below to show recent posts of a Label. Replace Featured with label that you need to showcase posts in that particular widget and set number of posts to show.
<div class="magazine_news_ticker">
<script>
widgetrc(
 'Featured','6','shownewsticker'
);
</script>
</div>
This code if need to showcase recent posts.
<div class="magazine_news_ticker">
<script>
widgetrc(
 '','6','shownewsticker'
);
</script>
</div>

How to add a slider

Add a html widget in any of these areas. Add content as shown below to show recent posts of a Label. Replace Slider with label that you need to showcase posts in that particular widget and set number of posts to show.
<div class="magazine_slider_flex">
<script>
widgetrc(
 'Slider','16','showsimpleslides'
);
</script>
</div>
This code if need to showcase recent posts.
<div class="magazine_slider_flex">
<script>
widgetrc(
 '','16','showsimpleslides'
);
</script>
</div>

How to add recent posts widget

You can place this widget anywhere. In sidebar areas or footer widget areas. Just follow the instructions.
Code for html widget. Replace Featured with your own label.
<div class="small-recent-posts">
<script>
widgetrc(
 'Featured','3','singlecolumnsmallthumb'
);
</script>
</div>
This code if need to showcase recent posts.
<div class="small-recent-posts">
<script>
widgetrc(
 '','3','singlecolumnsmallthumb'
);
</script>
</div>

Email subscribe widget

<div class="well"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=weblogtemplates", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">
    <div class="form-group">
<input id="follow-by-email-address" name="email" placeholder="Email address..." type="text" class="form-control">
</div>
<div class="form-group">
<input id="follow-by-email-submit" type="submit" value="Submit" class="btn btn-danger btn-email"> <input name="uri" type="hidden" value="weblogtemplates"> <input name="loc" type="hidden" value="en_US">
</div>
</form>
</div>
Replace weblogtemplates with your own feedburner handle.

Navbar and social media links

<nav class='navbar navbar-default main-top-nav' role='navigation'>
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class='container'>
        <div class='navbar-header'>
          <button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
            <span class='sr-only'>
              Toggle navigation
            </span>
            <span class='icon-bar'>
            </span>
            <span class='icon-bar'>
            </span>
            <span class='icon-bar'>
            </span>
          </button>
          <a class='navbar-brand' href='#'>
            <i class='fa fa-home'/>
          </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
          <ul class='nav navbar-nav'>
            <li>
              <a href='#'>
                About
              </a>
            </li>
            <li>
              <a href='#'>
                Contact US
              </a>
            </li>
            <li>
              <a href='#'>
                <i class='fa fa-mobile-phone'>
                </i>
                Tech
              </a>
            </li>
            <li>
              <a href='#'>
                <i class='fa fa-gamepad'>
                </i>
                Games
              </a>
            </li>
            <li class='dropdown'>
              <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                <i class='fa fa-list'>
                </i>
              </a>
              <ul class='dropdown-menu'>
                <li>
                  <a href='#'>
                    Action
                  </a>
                </li>
                <li>
                  <a href='#'>
                    Another action
                  </a>
                </li>
                <li>
                  <a href='#'>
                    Something else here
                  </a>
                </li>
                <li>
                  <a href='#'>
                    Separated link
                  </a>
                </li>
                <li class='dropdown-submenu'>
                  <a href='#' tabindex='-1'>
                    Hover me for more options
                  </a>
                  <ul class='dropdown-menu'>
                    <li>
                      <a href='#' tabindex='-1'>
                        Second level
                      </a>
                    </li>
                    <li class='dropdown-submenu'>
                      <a href='#'>
                        Even More..
                      </a>
                      <ul class='dropdown-menu'>
                        <li>
                          <a href='#'>
                            3rd level
                          </a>
                        </li>
                        <li>
                          <a href='#'>
                            3rd level
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href='#'>
                        Second level
                      </a>
                    </li>
                    <li>
                      <a href='#'>
                        Second level
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <ul class='nav nav-pills navbar-right'>
            <li>
              <a class='fb-nav' href='https://www.facebook.com/weblogtemplates'>
                <i class='fa fa-facebook'>
                </i>
              </a>
            </li>
            <li>
              <a class='t-nav' href='https://twitter.com/weblogtemplates'>
                <i class='fa fa-twitter'>
                </i>
              </a>
            </li>
            <li>
              <a class='plus-nav' href='https://plus.googl.com/+weblogtemplatesnet'>
                <i class='fa fa-google-plus'>
                </i>
              </a>
            </li>
            <li>
              <a class='pin-nav' href='http://www.pinterest.com/weblogtemplates/'>
                <i class='fa fa-pinterest'>
                </i>
              </a>
            </li>
            <li>
              <a class='instagram-nav' href='#'>
                <i class='fa fa-instagram'>
                </i>
              </a>
            </li>
            <li>
              <a class='tumblr-nav' href='#'>
                <i class='fa fa-tumblr'>
                </i>
              </a>
            </li>
            <li>
              <a class='linkedin-nav' href='http://www.linkedin.com/'>
                <i class='fa fa-linkedin'>
                </i>
              </a>
            </li>
            <li class='dropdown search-drop'>
              <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                <i class='fa fa-search'/>
              </a>
              <ul class='dropdown-menu menu-drop-search'>
                <li>
                  <form action='/search' class='navbar-form navbar-right' method='get' role='search'>
                    <div class='form-group'>
                      <input class='form-control form-main-search' name='q' placeholder='Search' type='text'/>
                    </div>
                    <button class='btn btn-def' type='submit'>
                      Submit
                    </button>
                  </form>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
        <!-- /.container-fluid -->
      </div>
    </nav>
Replace links with your own links and change social media urls with your facebook, twitter and other profiles.
Hope you all liked this template. If you have any suggestions or way to improve this template please share with us as comment. We are happy to help you to some extend. 

Credits

Complete article for Blogger To WordPress Migration
Enable desktop template on mobile devices to avoid bad behaviour of your blog in mobile devices.
Share this

51 comments :

  1. Oh my god, that's probably the best responsive mag for Blogger.
    Thanks so much for making it for free!

    ReplyDelete
  2. Really amazing template!! Only one question, can i put image in the main background? Thank u!!!

    ReplyDelete
    Replies
    1. Yes, you can put image background. But you need to edit template.

      Delete
  3. AMAZING! THE BEST BLOGGER TEMPLATE! THANKS :-)

    ReplyDelete
  4. Amazing tenplate!!!
    But, how I can add a background image?

    ReplyDelete
    Replies
    1. You need to do some coding to that. Edit template and add a background image to body tag using some css.

      Delete
  5. I need help! I want to change the font of this template, but when I save the changes and see the result, all the template was misaligned and looks horrible.He been using GoogleFonts and only change "font-family".
    Thanks again.

    ReplyDelete
    Replies
    1. Which font you used with this template. I tried some common fonts and looks ok. If you changed it somewhere else here it is exact place
      body {
      font-family: Roboto,Helvetica,Tahoma,Arial;
      font-size: 14px;
      }

      Delete
  6. plz how can i add a new page plz thx you

    ReplyDelete
    Replies
    1. Add new page? Its a blogger template you can add a page or post using blogger admin panel.

      Delete
  7. Hi Thank you for a Excellent responsive Template,
    I have installed WeblogMag Template for my blog Health Tips just have look http://thaimedicals.blogspot.com,
    i have a query i want to have a separate Category menu just above the News Trending Bar
    Kindly help me out in this issue, Onece again Thanks in advance

    ReplyDelete
    Replies
    1. It is not an issue. right? Right now we have some limitations to provide template customization's.

      Thanks for using our template.

      Delete
  8. Great template! It's awesome, but is this compatible with Disqus comment system? is it able to count the numbers of Disqus comments too?

    ReplyDelete
    Replies
    1. Hope it will work. We didn't check it yet.

      Delete
  9. how to edit the drop down menu? i am not able to do so ! please help me out

    ReplyDelete
    Replies
    1. Make a look 'Navbar and social media links' in article that should help you with template menu customization.

      Delete
  10. Hi, I'm trying to put the recent posts widget but neither of them is working properly, I open an HTML widget and paste what you gave us, but it's not working well, please some help, I really like this template.

    ReplyDelete
    Replies
    1. Can you please give url of your blog. So i can make a look at, what is happening with template.

      Delete
  11. I fixed it thanks, but I need help in another thing. You see, the slider can contain pictures with a specific resolution, and these pictures if they appear on the recent posts section will appear as badly formed. Is there a way to make the recent posts section only post a particular label ?
    And by the way, the recent posts problem which I had encountered earlier was fixed when I re-applied the theme, so I didn't put any "recent posts" widget. I don't know maybe this idea might help in something. Thanks a lot for this template it is the best I have ever seen !

    ReplyDelete
    Replies
    1. In this template main Recent Posts section will always recent posts.

      Delete
    2. So what is the proper use of the recent posts widget ?

      Delete
    3. I got it my bad, but what's the solution for the picture resolution problem ?

      Delete
    4. Images will always get cropped in this template to avoid stretching problems which should look weird. Sometimes images used in slider may cropped bad when it appears in recent posts section.

      Delete
  12. Can I use rating-widget below each post with this template?

    ReplyDelete
  13. Can I use Adsense with this template ?

    ReplyDelete
  14. I cannot seem to delete the attribution or move it. it this a a template thing or a blogger issue?

    ReplyDelete
    Replies
    1. I think you are not allowed to do this, because this is a free version.

      Delete
    2. If you are talking about Blogger.com attribute link, you need to edit template...

      Delete
  15. THANKS YOU!

    I HAVE 2 QUESTIONS:

    1 - LIKE MY FANPAGE I ADD A WIDGET

    2 - HOW TO CHANGE THE NAME ON EACH ENTRY ADMIN INSTEAD OF MY USERNAME FOR BLOGGER

    ReplyDelete
    Replies
    1. 1, You can easily add fan page widget by using facebook like box.
      2, It will automatically display blogger username...

      Delete
  16. Thank you for this high-octane gasoline template!!!
    I have a problem with the cursor my images do not display?
    I hope that you go to be able to help me!!!
    Jed

    ReplyDelete
  17. How can i change the language that appears in the News ticker? Cause the date appears in english and i want in another language. Thanks

    ReplyDelete
    Replies
    1. Another question: How can i make the menu fixed to the top when scroll down?
      Please help me in this two questions, thanks

      Delete
    2. I think it is not possible, date is automatically taking from feed.

      Delete
    3. You need to add some css to this .main-top-nav
      top: 0;
      width: 100%;
      position: fixed;

      It might work

      Delete
    4. Thanks for the answers, but to work, we must add:
      $(document).scroll(function(e){
      var scrollTop = $(document).scrollTop();
      if(scrollTop > 0){
      console.log(scrollTop);
      $('.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
      } else {
      $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
      }
      });
      Thus works right

      Delete
  18. My recent slider will not display more than 9 Images, although 12 under that label.

    ReplyDelete
    Replies
    1. Can you please share that blog. So i can check what is happening there.

      Delete
  19. Hi Admin,

    This is indeed a very nice template. I am trying to download this. But I am not able to download. Every time I try I get an XML file only. Could you please assist?

    Thanks.

    ReplyDelete
    Replies
    1. What you need other than XML file? Its a blogger template...

      Delete
  20. Hi, i'm having some problems using the slider. All the images appear stretched, Is there some way to fix this?

    ReplyDelete
    Replies
    1. There is no option. Because images can't crop in that particular ratio.

      Delete
    2. and how to change the size of the image in the slider?

      Delete
  21. I have the same problem, the image into the slider are no in ratio....instead in the post thumbail they're are perfet (crop automatically to fit the right dimension) can you do the same to the slider?

    ReplyDelete
  22. Hola amigo . una pregunta cuando quiero compartir mi articulo , el vinculo de compartir de facebook me lleva a otro lado que puedo hacer gracias ... aqui esta mi blog

    http://zonafilmhd.blogspot.com/2014/06/infiltrados-full-hd-en-espanol.html

    ReplyDelete
  23. cool template! but why the slider in my blog lost! can i solve it?

    ReplyDelete