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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtlrjfG3UmVcqeIlyOQaOYIMQl-j2UPNbtu4LiOjmSZR0KCaFoR7BUmCAwPUBrzcQp6WqbtLBuWrGBYJU1MZOV0d5F-ZAHu-A6PAzTubB7RbJazSpVcgJOwdMqa71qPjwGuCpNGstpNLs/s1600/P1060030.JPG'/>

<img alt='' class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtlrjfG3UmVcqeIlyOQaOYIMQl-j2UPNbtu4LiOjmSZR0KCaFoR7BUmCAwPUBrzcQp6WqbtLBuWrGBYJU1MZOV0d5F-ZAHu-A6PAzTubB7RbJazSpVcgJOwdMqa71qPjwGuCpNGstpNLs/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtlrjfG3UmVcqeIlyOQaOYIMQl-j2UPNbtu4LiOjmSZR0KCaFoR7BUmCAwPUBrzcQp6WqbtLBuWrGBYJU1MZOV0d5F-ZAHu-A6PAzTubB7RbJazSpVcgJOwdMqa71qPjwGuCpNGstpNLs/s1600-h/P1060030.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtlrjfG3UmVcqeIlyOQaOYIMQl-j2UPNbtu4LiOjmSZR0KCaFoR7BUmCAwPUBrzcQp6WqbtLBuWrGBYJU1MZOV0d5F-ZAHu-A6PAzTubB7RbJazSpVcgJOwdMqa71qPjwGuCpNGstpNLs/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