Premium Magazine II

May 19, 2009 Leave a Comment

Premium Magazine II, Blogger Magazine Templates

FEATURES:

• 3 Column Template
• FrontPage and Single Page
• Auto Summary and Thumbnail Post
• Cascading Menus
• Auto Label Pick-up and Feature Article
• DOMTAB Sidebar
• Continues Scrolling Featured Articles.
• Related Post Widget
• Breadcrumbs
• Drop cap
• Best viewed using Firefox 3, Google Chrome, Opera, Safari and Internet Explorer 8+

|


PROCEDURE AND GUIDELINES FOR INSTALLATION:


Overview:

This Premium Magazine II Template is a combination of my past two templates, the Arapaap and Structure. It was updated, enhanced and installed some powerful javascript to make it more attractive and useful to the user.

All the areas were all “self-generating fields” after installation except for the scrolling photos which need to be updated when a new feature article was published. This field is still under development and to be upgraded on the next version.

Pre-Set-up Installation Detail:

First, be sure to download PreMag2.rar and check if there are no errors appearing when clicking the file.
• Unzip the file on a separate folder.
• Upload Javascript and CSS File in a credible hosting site. (Javascript File: autoreadmore.js, jd.gallery.js, jd.gallery.css, mootools.v1.11.js, Relatedposts.js, vertical-label.js)
• Now, Log-in to your Blogger Account.
• Go to LAY-OUT, select Edit HTML, and then click “Choose File” button.
• Browse PreMag2.xml from the unzipped folder.
• If found, select it then click “Upload” button.

Now, you’re half-way done on installing this template.

INSTALLATION OF THE FIELDS:

MENUCONTAINER and LABELMENUCONTAINER:


• Go to LAY-OUT, Edit HTML
• Using Control F in your keyboard, find <div id='menucontainer'> and <div id='labelmenucontainer'>
• Replace all default links and codes.

Menucontainer: <li><a expr:href='/'> HOME </a></li>

Labelmenucontainer: (e.g. Arts – label)

<li><a href='#' title='View all posts filed under ....'>Arts</a>
<ul class='children'>
<li><a href='SUB-TITLE-LINK-ADDRESS' title='View all posts filed under .....'>Arts1</a> </li>
<li><a href='SUB-TITLE-LINK-ADDRESS' title='View all posts filed under .....'>Arts2</a> </li>
<li><a href='SUB-TITLE-LINK-ADDRESS' title='View all posts filed under .....'>Arts3</a> </li>
</ul>
</li>

• Save

FEATURE ARTICLES:


• Go to LAY-OUT, Edit HTML
• Using Control F in your keyboard, find all this codes:
<script src='http://HOSTING-SITE-LINK/Relatedpost.js' type='text/javascript'/> <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 230; summary_img = 200; img_thumb_height = 100; img_thumb_width = 100; </script>

<script src='http:// HOSTING-SITE-LINK /autoreadmore.js' type='text/javascript'/>

<script src='http:// HOSTING-SITE-LINK /mootools.v1.11.js' type='text/javascript'/>

<script src='http:// HOSTING-SITE-LINK /jd.gallery.js' type='text/javascript'/>

<link href='http:// HOSTING-SITE-LINK /jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

• Replace all HOSTING-SITE-LINK by simply copying links of the Javascript and CSS file that we uploaded earlier.
• Again using Control F in your keyboard, find this codes: <div id='myGallery'>

• Below that, you will see:

<div class='imageElement'>

<h2>1914 translation by H. Rackham</h2>

<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment...</p>

<a class='open' href='http://premium-mag2.blogspot.com/2009/05/1914-translation-by-h-rackham.html' title='Read More'/>

<img alt='' class='full' src='http://3.bp.blogspot.com/_zuSwfSxueJk/Sf6gLy1rwsI/AAAAAAAABLw/Qg1mmiEKUQI/s1600/P1060030.JPG'/>

<img alt='' class='thumbnail' src='http://3.bp.blogspot.com/_zuSwfSxueJk/Sf6gLy1rwsI/AAAAAAAABLw/Qg1mmiEKUQI/s150/P1060030.JPG'/>

</div>


• Please follow below pattern when editing the default codes and also for adding some set of this Featured Articles.

<div class='imageElement'>

<h2> POST TITLE </h2>

<p> EXCERPT OF POST </p>

<a class='open' href=' HTML LINK OF POST' title='Read More'/>

<img alt='' class='full' src='HTML LINK OF ATTACHED PHOTOS (BIGGER SIZE)'/>

<img alt='' class='thumbnail' src=' HTML LINK OF ATTACHED PHOTOS (SMALLER SIZE) '/> </div>


Are you aware of the HTML code of your photos when you upload it on your post? Let us take example on one of my article.


The HTML code of this is:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_zuSwfSxueJk/Sf6gLy1rwsI/AAAAAAAABLw/Qg1mmiEKUQI/s1600-h/P1060030.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="http://3.bp.blogspot.com/_zuSwfSxueJk/Sf6gLy1rwsI/AAAAAAAABLw/Qg1mmiEKUQI/s320/P1060030.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5331875133339189954" /></a>


Only that bold text is the code that we should get for hotlinking. s320 is the size of the photo. Here are some sizes that Blogger accept for hotlinking:

s150, s320, s400, s800 and s1600

• Save

• Go to LAY-OUT, Select Page Element
• Add this code:

<script language="JavaScript"> imgr = new Array();

imgr[0] = "http://i39.tinypic.com/4keej5.jpg";
imgr[1] = "http://i43.tinypic.com/2q2lkoz.jpg";
imgr[2] = "http://i43.tinypic.com/2ef4zrl.jpg";
imgr[3] = "http://i42.tinypic.com/2nrhkbd.jpg";

showRandomImg = false;
tablewidth = 199;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 75;
imgheight = 65;
fntsize = 11;
fntsize1 = 2;
acolor = "#5D502C";
bcolor = "#000066";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#444444";
icon2 = " ";
numposts = 5;
label = "Feature";
home_page = "http://HOMEPAGE.blogspot.com/"; </script>

<script src="http:// HOSTING-SITE-LINK /vertical-label.js" type="text/javascript"></script>


• Replace this default codes: prefer number of post to display (numposts), your label (label), home_page; and paste the link of the javascript that you uploaded earlier.
• Save

Do this for the rest of the fields.

DROP CAP:


Drop Cap is a big letter that found on the first part of a paragraph or a sentence. It is not often use to a blog or even in a website, but with this template I have manage to incorporate this feature.

• Go to SETTING, select “Formatting”.
• Add this codes on the Post Template:
<span class="drop-cap"> </span>
• Save

When you post an article, be sure to embed the first letter between those two (2) codes:

<span class="drop-cap">T </span>he quick brown fox�.

FEATURE VIDEO:

This field is optional or it can be replace with other widgets that you want to include. But if you prefer to add this with your own video, then you should be familiar with the codes of embedding videos. There are lots of sites now that offer video embedding. One of them is the famous Youtube. But do you know how to customize the size of your video?

Example:
<object width="300" height="244"><param value="http://www.youtube.com/v/hkwN_48ycTU&hl=en&fs=1" name="movie"/><param value="true" name="allowFullScreen"/><param value="always" name="allowscriptaccess"/><embed allowscriptaccess="always" width="300" src="http://www.youtube.com/v/hkwN_48ycTU&hl=en&fs=1" allowfullscreen="true" height="244" type="application/x-shockwave-flash"></embed></object>

Since the width of our sidebar is only 320px, make it sure also that your video should not go beyond this dimension or else it might overflow. Those bold texts on the codes are the safest sizes for this field. Take a look on the Live Demo.

LINKS:


• Go to LAY-OUT, select Page Element
• Click “Add Gadget”
• Select “Blog List” or “Link List” from the listed widgets.
• Fill-up
• Save

SIDEBAR TABS:


Domtab offers a clean and multi-handle field in just one column. Tabs performs the task separately by clicking individually and they show different results accordingly.

This field has a similarity with the above field (Links). Fill-up those tabs using the above procedure but use different widgets or even paste your own codes.

---
Keep coming back, next time I will share also my next template: PREMIUM MAGAZINE I

Stumble
Delicious
Technorati
Facebook
Digg

6 comments »

  • rasitha said:  

    hi! nice blog. this template is simply super.
    more templates
    http://www.itemplatez.com

  • Jake said:  

    thanks for dropping by.

  • Reynold Hugh said:  

    Keep the Both Thumbs Up!
    http://www.TemplateMagician.com

  • jake said:  

    thanks Reynold!

  • manish saluja said:  

    Hi..
    I have tried this template on my website www.poorjokes.in
    Everything looks ok apart from the SELECTED LABELS feature. Is there a bug?? Whenever I fill that information the whole page gets distrorted.
    The sidebar tab explanation given by you is insufficient. How does one add text to the sidebar tab??
    The layout does not allow to add new page element.
    How should I go further with this????

    Regards,
    Manish
    manishsaluja@gmail.com

  • Guest said:  

    Hi Manish,

    Thanks for this info. As I read your comment, I cant find the SIDEBAR that your talking that has SELECTED LABELS FEATURE. Is this on the left side? If it so, then kindly review your codes again, you might misinclude something, as far as I know I have supplied all the info. Take a look on my demo: http://premium-mag2.blogspot.com/ 

    But if you cant do and it does work please follow this:

    To fill up the left sidebar please copy and paste this codes:

    <span style=" white-space: pre-wrap;"><script language="JavaScript"> imgr = new Array(); imgr[0] = "http://i39.tinypic.com/4keej5.jpg"; imgr[1] = "http://i43.tinypic.com/2q2lkoz.jpg"; imgr[2] = "http://i43.tinypic.com/2ef4zrl.jpg"; imgr[3] = "http://i42.tinypic.com/2nrhkbd.jpg"; showRandomImg = false; tablewidth = 199; cellspacing = 8; borderColor = "#ffffff"; bgTD = "#ffffff"; imgwidth = 75; imgheight = 65; fntsize = 11; fntsize1 = 2; acolor = "#5D502C"; bcolor = "#000066"; aBold = true; icon = " "; text = "comments"; showPostDate = false; summaryPost = 50; summaryFontsize = 11; summaryColor = "#444444"; icon2 = " "; numposts = 5; label = "Feature"; home_page = "http://HOMEPAGE.blogspot.com/"; </script> <script src="http:// HOSTING-SITE-LINK /vertical-label.js" type="text/javascript"></script></span>

    These codes are sensitive, be sure that you have the specific label and posted atleast 5 posts using that label. And even those javascript file (.js) should be self-hosted.

    These are some of the problem that occur when you don't follow the given instructions.

  • Leave your response!

    Add your comment below,or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.