Blogger Magazine Templates

Wibiya is one of hottest toolbar that the web has today or should I say the first toolbar that innovated and revolutionized websites and blogs.

This toolbar is often located below a sites. It floats or hangs. This can be seen on different colors depending on the preference of the owner. It come-up with search button, translation, recent posts/random posts, rss feed icon, social bookmarking sites like Facebook and Twitter, etc.





For you to install this tool, you should be invited or directly go to Wibiya Website and request for invitation. After sending your request, wait for 24 hours or even longer. They will send a notification to the email your provided to them, it has a link and a beta code.

After clicking the link, you will be prompted to a new window like this:



Provide those necessary informations. And a new window will be open.



Select the color of your toolbar. And continue to click "Next". Then, you will again see this window:



Select Blogger icon with the "Install on Blogger" wordings, and since this is our platform for blogging. Don't directly proceed.



Copy the Javascript code on the "Edit Content":



1. Go to your Blogger Dashboard.
2. Click LAY-OUT/EDIT Html.
3. Just before the </body> code. Paste the javascript code.
4. Save.

Arthemia Blogger V2 Template is the latest collection so far that I have today. This is also the second Wordpress conversion that I have after the first attempt of converting Structure Theme by Justine Tadlock.

PROCEDURE AND GUIDELINES FOR INSTALLATION:

|

• Log-in to your Blogger Account.
• Go to LAY-OUT, select Edit HTML, and then click “Choose File” button.
• Browse Arthemia Blogger V2.xml from your files.
• Select, then click “Upload” button.

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


imgr[0] = "http://jake.ilac.googlepages.com/thumb1.jpg";
imgr[1] = "http://jake.ilac.googlepages.com/thumb2.jpg";
imgr[2] = "http://jake.ilac.googlepages.com/thumb3.jpg";
imgr[3] = "http://jake.ilac.googlepages.com/thumb4.jpg";


showRandomImg = true;


tablewidth = 570;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 300;
imgheight = 250;

fntsize = 22;
fntsize1 = 6;
acolor = "#3C78A7";
bcolor = "#3C78A7";
ccolor = "#000000";
aBold = true;
icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 500;
summaryFontsize = 12;
summaryColor = "#000000";
icon2 = " ";
numposts = 1;

label = "Headline";

home_page = &quot;<data:blog.homepageUrl/>&quot;;

</script>
<script src="http://www.sigmirror.com/files/43478_usiwx/headline5.js" type="text/javascript"></script>

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



imgr[0] = "http://jake.ilac.googlepages.com/thumb1.jpg";
imgr[1] = "http://jake.ilac.googlepages.com/thumb2.jpg";
imgr[2] = "http://jake.ilac.googlepages.com/thumb3.jpg";
imgr[3] = "http://jake.ilac.googlepages.com/thumb4.jpg";


showRandomImg = true;


tablewidth = 300;
cellspacing = 3;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 100;
imgheight = 70;

fntsize = 11;
fntsize1 = 2;
acolor = "#3C78A7";
bcolor = "#000000";
ccolor = "#000000";
aBold = true;
icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 0;
summaryFontsize = 8;
summaryColor = "#000000";
icon2 = " ";
numposts = 4;

label = "Feature";

home_page = "<data:blog.homepageUrl/>";

</script>
<script src="http://www.sigmirror.com/files/43477_r7g0l/featured.js" type="text/javascript"></script>

<b:section class='category' id='cat-1' showaddelement='no'>
<b:widget id='Text3' locked='false' title='template' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><a href='http://magazine-templates.blogspot.com/search/label/Template'><data:title/></a></h2>
</b:if>
<div class='widget-content'>
<a href='http://magazine-templates.blogspot.com/search/label/Template'><data:content/></a>
</div>

This will be my second conversion of template from Wordpress to Blogger. After the successful launching of Structure theme which originally produce by Justine Tadlock, now I have something new again for everybody. So watch-out for the upcoming Arthemia which powered by Blogger.

To all the visitors that are interested in Arthemia just subscribe to my feeds.

Text shadowing is one of the rarely use decoration for fonts of a website and sometimes they come unnoticeable when incorporated into a site.

A shadow on a text makes the title easy to read and view by the reader, they catch attention and looks prettier than a normal font.

Adding text shadow does not takes you a couple of minutes. With just one line of html code you can make the font different from the other.

Here is a complete sample:

text-shadow: #FFFFFF 2px 2px 2px

Explanation:

#FFFFFF - color of the shadow (be sure to make it different from the existing font and also consider the background so that you can see the effect).

2px 2px 2px - this are the distance of the shadow. The arrangement of the code is 2px on the top, 2px on the right and 2px on the bottom.

As a result of the feedbacks that Blogger got from their avid subscribers/users, they are now undergoing a quite reconstruction by adding some gadget that was long time have been used.

There are lots of this Label Cloud HTML code that circulating around the cyberspace. Sometimes they are difficult to set-up or a little bit tricky to all beginners.



Blogger had simplified this cloud by adding a gadget. You can configure the labels, instead of using the normal way (list) you can now select the cloud button.



Like the normal label cloud, which ever label had the major usage it has the bigger font and the least used is the smallest one.



We can also select which label we want to show by simply checking the list, unlike the traditional one where in it shows all.

I hope Blogger will be adding some major gadgets soon. How about Picture Caption, Drop Cap, Static Pages, etc? I know you wanted also this.

FEATURES:

• FrontPage and Single Page
• Auto Summary, Autoreadmore and Thumbnail Post
• Featured Articles.
• Related Post Widget
• Printer Friendly
• Breadcrumbs
• Drop Cap
• Social Bookmarking Buttons
• PDF Conversion Articles
• Best viewed using Firefox 3.5.1, Google Chrome 2, Opera 10, Safari 4 and Internet Explorer 8+

|

• Log-in to your Blogger Account.
• Go to LAY-OUT, select Edit HTML, and then click “Choose File” button.
• Browse premag4.xml from your files.
• Select, then click “Upload” button.

• Go to LAY-OUT, Edit HTML
• Using Control F in your keyboard, find <div id="topbarmenu">
• Replace all links and codes.
• Save

• Go to LAY-OUT, Edit HTML
• Using Control F in your keyboard, find all this codes:

• Replace YOUR-BLOGNAME with your own link.
• Save

• Go to SETTING, select “Formatting”.
• Add this codes on the Post Template:

• Save

Unlike Wordpress which had already offer captions on post images, Blogger still far way behind about this plug-ins. One of the best example that I saw on captioning an image is from Amit Agarwal, this are the standard that BBC and Wikipedia (see sample at the right) or even Wordpress used today.

Captions on post article images can drive more traffic from a search engine, they will rank better than those images that's just plain. Even without reading the whole article, with a simple one (1) sentence they express a lot to the story. They embodied the summary, the description and information that we can't visualize.



Steps:

1. Go to Lay-out /Edit HTML.

2. Add the following CSS code, before </head>

<style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 10px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>

3. then, Save

4. When posting an article, be sure to enclose your images using the following HTML code.

<div class="picture left" style="width:246px;"> <img src="http://IMAGELINK.COM" width="242" height="320" alt="Flower Sample" /> <br /> Image Caption</div>

You can align your images to the left of right. The size of the <div> width should always be +4.

Actual Sample:

Different kinds of flower

When JS-Kit acquires Haloscan I have discontinued using their services because of feeling uneasiness about their services, specially when integrating this into a template. Unlike Haloscan before, there no complication of copying and pasting, it automatically update your comments.

But since Wordpress have also shifted in using this comment platform from their typical embedded comment form and they added gravatars which makes this more fitted to the subscribers, I think it would also be the right time to review it and incorporate this to my next template.

Up to now, I can't find a detailed explanation on how to install JS-Kit Comment. And I hope this article of mine can help those who are looking for a step-by-step guide.

STEPS:

1. Sign-up for free account to JS-Kit (http://js-kit.com)



2. Fill-up the require field.


3. Log-in to your new account.

4.Select "Comment" from the rest of the services they offer.

5. Click "INSTALLATION" button.

6. Under Pricing, select "JS-Kit Free".


7. Again Select "Installation" from the menu.


8. Click "add new site".


9. select the code(universal code).

10. Log-in to your Blogger Acount.

11. Go to Lay-out, Edit HTML.

12. Click "Download Full Template" button.

13. Using control F in your keyboard, search this code:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

FEATURES:

• FrontPage and Single Page
• Auto Summary, Autoreadmore and Thumbnail Post
• Continues Scrolling Featured Articles.
• Related Post Widget
• Printer Friendly
• Breadcrumbs
• Drop Cap
• Social Bookmarking Buttons
• PDF Conversion Articles
• Best viewed using Firefox 3, Google Chrome, Opera, Safari and Internet Explorer 8+

PROCEDURE AND GUIDELINES FOR INSTALLATION:

|

<script src='http://HOSTING-SITE-LINK/Relatedpost.js' type='text/javascript'/> <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 280; img_thumb_height = 150; img_thumb_width = 150; </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'/>

<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>

<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>

<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>

<li><a href='http://YOUR-BLOGNAME.blogspot.com'>Content Feed</a></li>
<li><a href='http://YOUR-BLOGNAME.blogspot.com/?feed=comments-rss2'>Comment Feed</a></li>

<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>

FOOTER LINKS:



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

FOLLOWERS:



• Go to “LAY-OUT / PAGE ELEMENTS”
• Click “Add a Gadget”
• Select “Followers”
• Then, Save

RECENT POSTS:



• Go to “LAY-OUT / PAGE ELEMENTS”
• Click “Add a Gadget”
• Select “Feed”
• Paste this code : http://YOUR-LINK.blogspot.com/feeds/posts/default
• Then, Save

RECENT COMMENTS



• Go to “LAY-OUT / PAGE ELEMENTS”
• Click “Add a Gadget”
• Select “Feed”
• Paste this code: http://YOU-LINK.blogspot.com/feeds/comments/default
• Then, Save