Sunday, December 30, 2012

Diffuser Magazine Blogger Template
Template Name: Diffuser Magazine Blogger Template
Platform: Blogger / Blogspot
Release date : 25, December 2012
Author : www.templateism.com
License : Creative Commons Attribution 3.0

Download Preview


Diffuser is a fully mobile responsive Template for Blogger Enabled Websites, which is ready with the latest CSS3 effects and suites perfectly on Magazine, Business, Blogs and Corporate Websites. It is compatible with all browsers and works perfectly on Internet Explorer too. High Speed Google fonts are consumed which would surely magnetize the eyes of your visitors. It is fully compatible with portable devices i.e. iPhone, iPad, Android and etc. In short, It is fully compatible with mobile devices.

Diffuser Magazine Blogger Template

Features of Diffuser eMag Blogger Template: 

  1. Adapted From WordPress: The elements which have used in this Blogger template are adapted from WordPress. We are sure that there is no Blogger Template, which could match the features of this Theme.

  2. Thumbnail Related Posts: In this theme, we have added a Thumbnail Related post widget which would work on automation. The Thumbnails are of normal size so it could easily be seen by the readers. 

  3. Responsive Image Slider:  To promote your featured articles, we have included a Responsive image slider that would help a person in promotion. It could give extra limelight to a certain article. 

  4. SEO Friendly: This Blogger Template is SEO-friendly because it is pre-optimized for Search engines. According to Google Page speed it has obtained 92 score out of 100 which is indeed overwhelming for SEO. 

  5. Four Columns Footer: Unlike, other blogger themes, we have experimented with 4 columns widget in the Footer. It would allow users to add up to 4 Gadgets without facing any problem whatsoever.

  6. Static Home Page: This Theme also has Static Homepage, which shows Latest articles in different styles on homepage. However, on post pages it would continue to show articles in a well-organized manner.

  7. Auto Read More With Thumbnail: There is no need to use Read more page break tool in this template because it would automatically create summary with 1 Thumbnail, and would display them on the Home page.
More Features: 1 Sidebar, 2 columns Blog Layout,  Fixed Width, Dark Grayish Color Scheme, threaded commenting system and much more.

Customizing The Navigation Menu: 

To customize the navigation menu of this Blogger Template follow the following instructions correctly. Go To Blogger.com >> Template >> Edit Html >> Search for the following code and customize it according to your desired needs. However, if you get stuck in the middle feel free to leave your comment below.
<div id='main_container'>
<nav class='main'>
<div class='menu-header-container'><ul class='menu' id='menu-header'>
<li class='menu-item'><a href='#' title='Diffuser'><span class='nav_item'>Home</span></a></li>
<li class='menu-item'><a href='#' title='Music News'><span class='nav_item'>News</span></a></li>
<li class='menu-item'><a href='#' title='Top 10 Lists and More'><span class='nav_item'>Features</span></a></li>
<li class='menu-item'><a href='#' title='Songs'><span class='nav_item'>Songs</span></a></li>
<li class='menu-item'><a href='#' title='Videos'><span class='nav_item'>Videos</span></a></li>
<li class='menu-item'><a href='#' title='Free Music Downloads'><span class='nav_item'>Free Music Downloads</span></a></li>
<li class='menu-item'><a href='#' title='Interviews'><span class='nav_item'>Q+A</span></a></li>
</ul></div>

<div class='social_icons size_24'>
<a class='share_link facebook' href='https://www.facebook.com/templateism' target='_blank' title='Follow on facebook'><span class='social_icon'>follow on facebook</span></a>
<a class='share_link twitter' href='http://twitter.com/templateism' target='_blank' title='Follow on Twitter'><span class='social_icon'>follow on Twitter</span></a>
<a class='tip-us' href='mailto:staff@gigi.com'>Tip Us</a>
</div>
</nav>

<div class='horizontal_navigation clearfix alt_link_color' id='promo_links'>
<div class='menu-promo-links-container'><ul class='menu' id='menu-promo-links'><li class='menu-item'><a>Trending:</a></li>
<li class='menu-item'><a href='#' title=' 2012 Music Awards'> 2012 Music Awards</a></li>
<li class='menu-item'><a href='#' title='Remembering Joe Strummer'>Remembering Joe Strummer</a></li>
<li class='menu-item'><a href='#' title='Best Albums 2012'>Best Albums 2012</a></li>
<li class='menu-item'><a href='#' title='Shocking 2012 Moments'>Shocking 2012 Moments</a></li>
<li class='menu-item'><a href='#' title='Best Radiohead Songs'>Best Radiohead Songs</a></li>
</ul>
</div>

Adding Widgets Below/Above Posts:

Sometime, users desire to add Widgets either above or below the post pages. Therefore, we have made tried our best to make things easier for everyone. To Add a Gadget only on Post Pages either above or below post follow the following instructions.

Go To Blogger.com >> Template >> Edit HTML >> Proceed and Search for the Following coding.

To Show Below Post Title:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--Google Adsense Ad Code (Below Post Title)-->
</b:if>
To Show at The end of Posts:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--Google Adsense Ad Code (At the End of Posts)-->
 </b:if>
Replace <!--Google Adsense Ad Code (Below Post Title)--> or <!--Google Adsense Ad Code (At the End of Posts)--> with your Widget coding according to your desire needs.

From The Designer's Desk:

This Theme is ideal for Multimedia and Entertainment based Blogs and website because it has all the sparks which are required to run a Successful entertainment website. What are your thoughts about this Theme? any Errors or bugs that we forgot to remove? Suggestions are more then welcomed. 

This page is Maintained by , Last Updated on: 12/30/2012

33 comments:

  1. Hi Faizan,

    I have just come across to this website of yours.The font and design is somehow similar to a famous wordpress resource wpbeginner.com.

    This is what I had been searching for.Would you mind explain how you have managed to use this kid of font in blogger blog?

    Secondly which tools you use for blogger templates, widgets etc?

    ReplyDelete
    Replies
    1. Well, We don't think so because WPbeginner is using Genesis Frame work,so the theme is available for buying. Only Header area looks a bit similar to it. Secondly, There is no rocket science behind the fonts because we have used Google Web Fonts which works on any kind of Platform.

      All The widgets we have used in our site are developed by our Developers while some widgets are from our Parent Blog mybloggerlab.com (Feel free to check it too).

      Hope that helps. Peace

      Delete
  2. I love this template, and i've been hunting for something just like this for MONTHS.

    Im trying to customise the template However, I utilize bloggers mobile site a LOT. I've followed the the embedding code under post instructions so I can use the Disqus.com plugin, but I cant seem to get to enable the code so show on the mobile site using the " mobile='yes' " code, but this seems to only work if im using a widget from the layout section on blogger.

    HELP

    ReplyDelete
    Replies
    1. As Far as mobile site is concern, It should work with or without using the Layout Section. Since, Blogger has its own Mobile Responsive site. Therefore, we give less attention to the Mobile site. However, Make sure that you are embedding the correct coding. Furthermore, provide your site URL so we can investigate more on this mater.

      Delete
    2. Thanks for getting back..

      For some reason I cant move my widgets around as im getting the error message on the layout page "error while saving, refresh and try again"

      This error is making it impossible to simply INSTALL the code right from Disqus. So im having to generate the code and pasting it into the templates html as your instructions say.

      IM BAFFLED

      www.moviekangz.com

      Delete
    3. Moving Widgets is not a Problem, Just Reload the Layout Page then, Move the Widgets accordingly and Finally Hit the "Save Button" to finish. (I can Bet, you won't find any errors).

      What Code You are pasting in the Template? It is JavaScript or jQuery? or any other HTML Coding. Make Sure that the code which you are pasting Supports the dynamics of Blogger.

      I Guess, you should stick to the Default Commenting system. At least on Mobiles. The reason is quite clear, Customizing Blogger mobile site is Dam difficult and needs lots of expertise.

      Delete
  3. Ive was using disqus for mobile as you can choose what widgets you want to run from the html code.

    As for the moving widget around in the layout theres still no joy

    ReplyDelete
    Replies
    1. I Have Rechecked the Layout and its working fine at my end. Can't understand why you are seeing errors.

      I Think you should go with Custom Commenting system for mobiles

      Delete
    2. Hey Syed, I need some more help please.

      Im trying to input adsense code into the html but the code keeps changing when i try to save.......Any Ideas?

      Delete
    3. Hey!

      Are you using Parsed Google Adsense Code?

      If Not then First Parse the Google Adsense Code From the Following URL and Paste it into the Template As we have mentioned in the tutorial.

      http://www.blogcrowds.com/resources/parse_html.php

      Delete
    4. Thanks.. Done..

      Hopefully all the questions of what im asking will help everyone else.

      However 1 more thing. How do i get the menu to work? LOL basic html I guess, But im new to the whole template editing.

      Ive managed to change the names I think, but when clicked they dont go anywhere.. i presumed they worked on labels/tags

      Delete
    5. Yap Surely, it would Help Others.

      To Add Your Links to the Categorize You Need to Replace the HASH # With the Desired Destination URL.

      For Example On your Site you are using a Category in the Nav Menu i.e. "MIXTAPES" To add a Link to that Category do as Follows.

      Search For 'menu-item'
      Then Look For Mixtapes
      Then You will See a Coding Similar to the Following

      <li class='menu-item'><a href='#' title='Mixtapes'><span class='nav_item'>Mixtapes</span></a></li>

      And Replace
      # With Your Destination URL.

      Apply the Same technique to all Categorize and it would Work Fine. Peace

      Delete
  4. Hey Syed,

    I want to add my own background but im not sure what sizes i have to use, and there seems to be a white strip behind the header i want to remove..

    Help

    ReplyDelete
    Replies
    1. Look For Fixed Website Backgrounds. Here is a Example of it.

      http://2.bp.blogspot.com/-37u9x0TOE-4/UN9yQMwhuYI/AAAAAAAAAPM/ufutP8KJWAk/s1600/home-bg.jpg

      Delete
    2. No i want to use my own.. but what size do i use, and I also dont what the background to scroll...

      Delete
    3. I have told you the Method. You can create a Background image by checking the Widget/Height of the image that i have given above.

      Yes, It would not scroll!

      Delete
  5. Hey Syed,....... Is there any way we could get a label script to generate the feature slider pics??? instead of having to change this manually??

    Thanks

    ReplyDelete
    Replies
    1. Yeah there are some scripts that does the work automatically. We will soon integrate it on our Themes. Thanks for suggestion.

      Delete
  6. I want to change the amount of posts shown on first page from 7 to 10? where do I change this in the code?

    Thanks

    ReplyDelete
    Replies
    1. You can Change them From Blogger >> Settings >> Posts and comments >> Show at most >> Enter 7 and Save.

      Delete
    2. But I want to show 10 posts... not 7... ive tried changing in settings but it still only shows 7

      Delete
  7. Hey, how do I display the dates for each blog posts on the homepage? and how to resize the image for every blog post? thanks ;p

    ReplyDelete
    Replies
    1. This is the code which is used to display Dates <data:post.timestamp/>

      For resizing Images you can use this CSS

      .post-body img { width:500px; height:300px; }

      Delete
  8. Hey Syed - I want to add a facebook banner png just above the featured slider but below the categories... But im not sure what code to use or where to place it in the script.

    also I previously asked how to add a static background image that will stretch and fit all browswer screens.. ive tried a few. But there seems to be a WHITE BANNER that runs across the screen. ( not sure how to remove that...

    Help.... Thanks in advance.

    ReplyDelete
    Replies
    1. For Background use this CSS

      body{background:#EAE3CE url(http://2.bp.blogspot.com/-37u9x0TOE-4/UN9yQMwhuYI/AAAAAAAAAPM/ufutP8KJWAk/s1600/home-bg.jpg) center top no-repeat;}

      Make sure you change the Background Image (Replace the above code with your current coding).

      For Banner:

      Just Next to this Code <div id='content-wrapper'> add your FB Banner or whatever you like.

      Delete
  9. For the post tile black label, how do I make it fixed position so that that it won't move each time when i use a portrait photo?

    ReplyDelete
  10. How do I make the post title fixed position so the alignment wont be off each time i use a portrait photo?

    ReplyDelete
    Replies
    1. If you could provide you blog URL, it would be much easier for us to help

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. "Blog has been removed" I am getting this error on your site.

      Delete
  12. My apology for sending the wrong link..here you go:- http://testtestdragon1.blogspot.com/

    ReplyDelete
    Replies
    1. Just below the </head> tag paste this code.

      <b:if cond='data:blog.pageType == "index"'>
      <style>.post-body img { width: 600px!important; } .post h2 { margin-left: 20px!important; } </style>
      </b:if>

      Delete