LK Magazine v2 Premium Blogger Template

Share: TwitterFacebookPinterestRedditLinkedin

Demo
Download

Template name : LK Magazine version 2

Template type : 3 Sidebar, 4 Column, 3 Column footer, Elegant, Fixed width, Featured Section, Header Banner, Left Sidebar, Magazine, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Video, White, Web 2.0

Release date : 05-22-2010

Coder/Designer Name(s) : Lasantha Bandara

Coder/Designer URL(s) : http://www.premiumbloggertemplates.com/
http://www.bloggertipandtrick.net/

Basic Instructions : How to install a Blogger template

Advanced Details : http://www.premiumbloggertemplates.com/2010/05/lk-magazine-v2-premium-blogger-template.html

Template Features

  • Column: 4 Columns/3 Sidebars/Right Sidebars/Left Sidebar
  • Fixed Width Template (1000px width)
  • 2 Horizontal Navigation Menus
  • Auto Read More Feature with Thumbnails.
  • 468*60 Header Ads banner
  • 468*60 Header Logo with the PSD file and Fonts.
  • 1 CSS Search Box
  • 3 Column Footer section
  • Social Bookmarking Buttons/Badges installed
  • SEO friendly blogger title hack installed to help you rank higher in Google
  • Blogger Default Heading Tag has Changed for better SEO
  • Meta tags installed
  • Top Bar with Feed buttons and Display Day,Month,Year
  • Hosted images on blogger. Free use forever!
  • Favicon support so you can add your own url icon
  • Compressed CSS to speed up your page load times
  • Embedded JavaScript date code showing current day
  • Built-in Related Posts Widget to show Related posts
  • Numbered Page Navigation Hack Installed
  • Breadcrumbs Navigation Hack Installed
  • Replace "Older Posts","Home","Newer Posts" Text Navigation with Images
  • Automatically highlight author comments
  • Modified Comments Section to Enable Avatars in Blogger Comments
  • Many more ......

Template Layout Structure

3 Column Footer Section

Template Customization

Basic Template Installation:

1.First download the template and unzip the file.

2.Now, sign in to Blogger dashboard and click on the layout.

3.Here is the important step, after uploading any new Blogger template, all of the previous widgets like your google adsense ads,text,profile,poll,etc etc will be lost.
So, to avoid this to happen, in this step click on 'edit' on all the widgets and copy the codes into notepad,etc.

4.Now click on the 'Edit html' tab

5.First of all please Download Full Template.This is to back up your present template.If the new template that you are going to upload makes/gets into some errors or if you make more complex errors in that,then you will loose everthing.So make sure that you back up your template.

6.Just below that,there's an option of uploading new template.So, use the Browse button and upload the downloaded xml file.

7.Now, a message appear saying that your widgets are about to be deleted.Click on the Confirm & Save (no problem doing this because we already copied the widget codes in Step 3).

8.Now click on "confirm and save".Now you successfully installed the template.

8.Click on the 'Page elements' page now and add the codes that you copied in step3 using the 'Add a Page Element' option.

Configure Meta tags

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below codes :

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>
<meta content='never' name='Expires'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>

Replace DESCRIPTION HERE,KEYWORDS HERE,AUTHOR NAME HERE as below.

DESCRIPTION HERE:Write your blog description
KEYWORDS HERE:Write the keywords of your blog separated by comma.
AUTHOR NAME HERE:Write the author's name(Your name)

Configure First and Second Navigation Bar

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below code :

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-X</a>

Now Replace Your-Link-Here,Link-Title,Link-Name-X with your details.

Configure Header logo

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below line :

http://2.bp.blogspot.com/_T46SliM0-PI/S_VIpcB5SmI/AAAAAAAAAMs/CuJPES_Z5aE/LK+Magazine+v2.png

Now replace it with your logo address/url.

How To Configure Favicon:

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below code :

<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.

Configure Featured content slider

Go to Layout-->Page Elements and click on "Add a gadget".

Select "html/java script" and add the code given below and click save.

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 5000,
slideInfoZoneOpacity: 0.8,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>


<div id="myGallery">


<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE</a></h3>
<p>FEATURED-POST-1-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE</a></h3>
<p>FEATURED-POST-2-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE</a></h3>
<p>FEATURED-POST-3-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE</a></h3>
<p>FEATURED-POST-4-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" />
</div>

<div class="imageElement">
<h3><a href="ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE</a></h3>
<p>FEATURED-POST-5-DESCRIPTION</p>
<a href="#" class="open"></a>
<img src="FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" />
</div>

</div>

Change 5000 to change your slider speed.

NOTE : Remember to replace ,

ENTER-YOUR-POST-X-LINK-HEREs with your real post links.

THIS-IS-FEATURED-POST-X-TITLEs with your real post titles.

FEATURED-POST-X-DESCRIPTIONs with your post descriptions.

FEATURED-POST-X-IMAGE-ADDRESSs with your real image addresses.

More details: http://www.bloggertipandtrick.net/2010/05/mootools-featured-posts-slider-blogger.html

Configure Multi tab widget

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below lines :

ENTER-TAB1-CONTENT-HERE

ENTER-TAB2-CONTENT-HERE

ENTER-TAB3-CONTENT-HERE

Replace these lines with your tab contents.

Configure 125*125 Ad Banners

Find below code in your template.

<!-- Banner -->
<div class='banner'>
<ul>
<li><a href='http://themeforest.net?ref=wam8387' rel='bookmark' title=''><img alt='' src='https://4.bp.blogspot.com/_T46SliM0-PI/S_VK7D-QSNI/AAAAAAAAAM8/KfE0GynX7KI/tf_125x125_v4.jpg'/></a></li>
<li><a href='http://themeforest.net?ref=wam8387' rel='bookmark' title=''><img alt='' src='https://4.bp.blogspot.com/_T46SliM0-PI/S_VK7D-QSNI/AAAAAAAAAM8/KfE0GynX7KI/tf_125x125_v4.jpg'/></a></li>
<li><a href='http://themeforest.net?ref=wam8387' rel='bookmark' title=''><img alt='' src='https://4.bp.blogspot.com/_T46SliM0-PI/S_VK7D-QSNI/AAAAAAAAAM8/KfE0GynX7KI/tf_125x125_v4.jpg'/></a></li>
<li><a href='http://themeforest.net?ref=wam8387' rel='bookmark' title=''><img alt='' src='https://4.bp.blogspot.com/_T46SliM0-PI/S_VK7D-QSNI/AAAAAAAAAM8/KfE0GynX7KI/tf_125x125_v4.jpg'/></a></li>
</ul>
</div>
<!-- /Banner -->

Now replace "http://themeforest.net?ref=wam8387" and "http://4.bp.blogspot.com/_T46SliM0-PI/S_VK7D-QSNI/AAAAAAAAAM8/KfE0GynX7KI/tf_125x125_v4.jpg" with your details.

Configure "Blog Posts" Widget

Login to your blogger dashboard--> layout- -> Page elements.Click on "Edit" form "Blog Posts" Section.Now change it value as the picture below:

Configure "Timestamp Format" Format

Login to your blogger dashboard--> Settings- -> Formatting.Now set your timestamp format as the picture below.

Important !!!:

Do not remove Footer Credits.

License:

This free Blogger template is licensed under the Creative Commons Attribution 3.0 License,which permits both personal and commercial use.
However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0/

170 thoughts on “LK Magazine v2 Premium Blogger Template”

  3. Lasantha aiiya ..mata podi awlak tiyenwa...meke kohomada vidiyo tab ekata video ekak dnne,,,eka mara awlak ne...ENTER-TAB3-CONTENT-HERE kiyana thanata kohomada api kamati vedio ekak danne..mata ikmanatta ma rep ekak one..plese aiiya..template ekanam maru,,,podi podi awl nattemat na...

    Reply

  4. Hello sameera,

    Below I have expained how to add a youtube video to your tab view widget.

    Go to you http://www.youtube.com/.

    Select your video and get EMBED code for your video(set video width to 280px or less).It will like this:

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

    Now convert your youtube code from here:

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

    Now your code will look like this:

    &lt;object width=&quot;280&quot; height=&quot;275&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/tWkpfvd_XI0&amp;hl=en_US&amp;fs=1&amp;&quot;&gt;&lt;/param&gt;&lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;/param&gt;&lt;embed src=&quot;http://www.youtube.com/v/tWkpfvd_XI0&amp;hl=en_US&amp;fs=1&amp;&quot; type=&quot;application/x-shockwave-flash&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;280&quot; height=&quot;275&quot;&gt;&lt;/embed&gt;&lt;/object&gt;

    Now replace, "ENTER-TAB1-CONTENT-HERE" with your converted youtube code.

    Now save your template.

    Reply

  7. lasantha bro it work..thanks...now tel me how to post Resent post and popular post thear...it big help....

    Reply

  8. Hello sameera,

    To add a recent post widget use below code:

    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.YOURBLOG.blogspot.com%2Ffeeds%2Fposts%2Fdefault&amp;num=10" type="text/javascript"></script>

    Remember to replace YOURBLOG with your blog name.

    To add a popular post widget use below code:

    <script language='javascript'>
    aBold = true;
    numposts=200;
    maxshowresult=10;
    home_page = "http://YOURBLOG.blogspot.com/";
    </script>
    <script language="JavaScript" type="text/JavaScript">
    var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
    </script>

    Remember to replace YOURBLOG with your blog name.

    Reply

  9. Hi there,

    Thanks for this beautiful template.
    I need help. I want "full post" to appear on the front page instead of the "read more" style. How do I adjust the template? thanks!

    Reply

  10. Hello thor,

    "Full post" to appear on the front page instead of the "read more" style,follow the steps below:

    1.Login to blogger dashboard-->Layout-->Edit html.

    2.Click on "Expand Widget Templates".

    3.Now find below code block:

    <p><script type='text/javascript'>
    summary_noimg = 450;
    summary_img = 280;
    img_thumb_height = 200;
    img_thumb_width = 200;
    </script>
    <script type='text/javascript'>
    //<![CDATA[

    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }

    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }

    //]]>
    </script>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://3.bp.blogspot.com/_T46SliM0-PI/S_OAcXPAZZI/AAAAAAAAAMM/rUsEdh1P7_o/24-large-allblogtools.jpg' style='border-style:none;'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

    4.Now replace it with below code:

    <p><data:post.body/></p>

    5.Save your template.

    Reply

  11. la plantilla es de lo mejor, gracias... Solo que no he resuelto el menù, ... espero me ayuden... soy novato...

    Reply

  14. Hello guillermo_sg,

    There are 2 navigation menus in this template.

    To configure black color menu find this code:

    <div id='catmenucontainer'>

    <div id='catmenu'>

    <ul>

    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1c</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2c</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2d</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3c</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5c</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5d</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6b</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>

    </ul>

    </div>

    </div>

    Now

    Replace Your-Link-Here with your real links
    Replace Link-Title with your link titles
    Replace Link-Name-x with your link names.(x=1,2,3,...)

    To configure white color menu find this code:

    <div id='foxmenucontainer'>
    <div id='menu'>

    ........

    </div>
    </div>

    Now

    Replace Your-Link-Here with your real links
    Replace Link-Title with your link titles
    Replace Link-Name-x with your link names.(x=1,2,3,...) in above 2 code blocks.

    I think you will be able to understand this.

    Reply

  15. thank you very much, thanks for the support ... The template is excellent... excuse my English proficiency

    Reply

  17. To add recent comments,use the code given below:

    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.YOURBLOG.blogspot.com%2Ffeeds%2Fcomments%2Fdefault&amp;num=10" type="text/javascript"></script>

    Remember to replace YOURBLOG with your real blog name.

    Reply

  18. hey thanks...bro...i found u r tempate problem..it is ...i add Yahoo Smiley Emoticons my blogger but it not worl..i add it another blogger..but it work...hey bro....plese tel me..how fix it work this template...http://bloggerstop.net/2009/01/add-smiliey-emotions-to-bloggerblogspot.html

    Reply

  19. Sameera,

    To Add Yahoo Smiley Emoticons to your blogger comments follow the steps given below:

    1.Login to blogger dashboard-->Layout-->Edit html.

    2.Click on "Expand Widget Templates".

    3.Now find below code:

    <b:if cond='data:post.embedCommentForm'>

    4.Copy the code in below text file and paste it just after the above code:

    http://pwam.googlecode.com/files/smiley%20code.txt

    5.Now find </body> tag.

    6.Copy below code and paste it just before the </body> tag.

    <script src='http://pwam.googlecode.com/files/smiley.js' type='text/javascript'/>

    7.Save your template.

    You are done.

    Reply

  21. aiiya thawa case ekak tiyenwa.....api post ekak liyapuwama ai post eke letters ath wela wage tiyenne eka hadanna baida,,,post eka atulata giyapuwama nam hari,,et eliyen baladdi letters athwela ne...mokda karanne letters lagata karala fanna..?

    Reply

  22. post eke letters ath wela pennana ekka nati karanna nam remove the code below from your template( you can find it inside #main-wrapper{} ):

    text-align:justify;

    Yahoo smileys emotions hariyata weda karanawa.I test it.Use the code in below text file.

    http://pwam.googlecode.com/files/smiley%20code.txt

    Download it and open.Now copy its code and paste it just after <b:if cond='data:post.embedCommentForm'>.

    Now copy below code and paste it just before the </body> tag.

    <script src='http://pwam.googlecode.com/files/smiley.js' type='text/javascript'/>

    Yahoo emotions add karaganna bari nam template eka mata email karranna.

    Reply

  23. hari aiiyamama oyata mail karannam dan mata oyage Email eka denwada.....mata oya hadala mage tempate ka ewanna ok...smile wada na appa...

    Reply

  24. Send your template through this form:

    https://www.premiumbloggertemplates.com/2009/06/submit-your-templates-here.html

    Reply

  25. hari aiiyamama oyata mail karannam dan mata oyage Email eka denwada.....mata oya hadala mage tempate ka ewanna ok...smile wada na appa...

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Need a New Theme Design / Theme Customization?

We offer hundreds of free Blogger templates / Blogspot themes. However, if you want a unique theme or need to customize your current theme, please let me know. The end result will undoubtedly satisfy you.
Ask for Support