Kinetic Magazine Blogger Template

Kinetic Magazine is a Free Premium Blogger Template with 1 Sidebar/2 Columns. Kinetic Magazine Blogger Template has Featured Post Content Slider, Featured Post Carousel, Top Navigation Menu, Social Buttons, Header Ad Banner, and More Features.

How To Configure Top Navigation Menu

Go to "Layout". Click on "Edit" link of "Edit This Menu" widget.

Now add your links to that link list widget.

How To Configure Featured Content Slider:

Find this in "Edit HTML":

<div id='slidewrap'>
<ul class='kwicks horizontal'>

   <!-- slide 1 code start -->
   <li id='kwick_1'>
      <div class='excerpt'>
         <h2><a href='ENTER-SLIDE-1-LINK-HERE'>Enter Slide 1 Title Here</a></h2>
         This is slide 1 description. You can replace this with your own words. Blogger template by NewBloggerThemes.com...                
      </div>
      <img height='314' src='http://1.bp.blogspot.com/-LBsI5_Xxc9Q/Uo7xd0w_TpI/AAAAAAAAIms/jjrxNzaIAUk/s1600/slide-image-1.jpg' width='600'/>
   </li>
   <!-- slide 1 code end -->
   
   <!-- slide 2 code start -->
   <li id='kwick_2'>
      <div class='excerpt'>
         <h2><a href='ENTER-SLIDE-2-LINK-HERE'>Enter Slide 2 Title Here</a></h2>
         This is slide 2 description. You can replace this with your own words. Blogger template by NewBloggerThemes.com...                
      </div>
      <img height='314' src='http://2.bp.blogspot.com/-iIxhKfDOVBE/Uo7ximZuiNI/AAAAAAAAIm0/_Xpe3pYxhCE/s1600/slide-image-2.jpg' width='600'/>
   </li>
   <!-- slide 2 code end -->
   
   <!-- slide 3 code start -->
   <li id='kwick_3'>
      <div class='excerpt'>
         <h2><a href='ENTER-SLIDE-3-LINK-HERE'>Enter Slide 3 Title Here</a></h2>
         This is slide 3 description. You can replace this with your own words. Blogger template by NewBloggerThemes.com...                
      </div>
      <img height='314' src='http://4.bp.blogspot.com/-BP33DOakzz8/Uo7xkluDt0I/AAAAAAAAIm8/mWvCSltuYAI/s1600/slide-image-3.jpg' width='600'/>
   </li>
   <!-- slide 3 code end -->
   
   <!-- slide 4 code start -->
   <li id='kwick_4'>
      <div class='excerpt'>
         <h2><a href='ENTER-SLIDE-4-LINK-HERE'>Enter Slide 4 Title Here</a></h2>
         This is slide 4 description. You can replace this with your own words. Blogger template by NewBloggerThemes.com...                
      </div>
      <img height='314' src='http://2.bp.blogspot.com/-xPUCEBEli8g/Uo7xs5-xqZI/AAAAAAAAInE/edz2QWAla3c/s1600/slide-image-4.jpg' width='600'/>
   </li>
   <!-- slide 4 code end -->
   
   <!-- slide 5 code start -->
   <li id='kwick_5'>
      <div class='excerpt'>
         <h2><a href='ENTER-SLIDE-5-LINK-HERE'>Enter Slide 5 Title Here</a></h2>
         This is slide 5 description. You can replace this with your own words. Blogger template by NewBloggerThemes.com...                
      </div>
      <img height='314' src='http://2.bp.blogspot.com/-pPmWfUzcbEQ/Uo7xzWmBtkI/AAAAAAAAInM/dAiPb2zbbNw/s1600/slide-image-5.jpg' width='600'/>
   </li>
   <!-- slide 5 code end -->
   
</ul>
</div>

There are 5 slides in the slider. You can add a remove more slides if you want.

Now replace,
"ENTER-SLIDE-X-LINK-HERE"s with your real slide link,
"Enter Slide X Title Here" with your real slide title,
"This is slide 1 description. You can replace this with your own words. Blogger template by NewBloggerThemes.com..." with your real slide description,
Slide image URL,
for each slide. (X = 1 or X = 2 or X = 3 or X = 4 or X = 5)

How To Configure Featured Post Carousel:

Find this in "Edit HTML":

<div class='stepcarousel' id='mygallery2'>
<div class='belt'>
   
   <!-- panel 1 code start -->
   <div class='panel'>
      <a href='ENTER-FEATURED-POST-1-LINK-HERE'> <img height='122' src='http://2.bp.blogspot.com/-gzjNkOwB-5o/Uo7xW-31MwI/AAAAAAAAIl4/MPA4ztkaywM/s1600/panel-image-1.jpg' width='153'/> </a>
   </div>
   <!-- panel 1 code end -->
   
   <!-- panel 2 code start -->
   <div class='panel'>
      <a href='ENTER-FEATURED-POST-2-LINK-HERE'> <img height='122' src='http://2.bp.blogspot.com/-eFyQvY2GG_o/Uo7xXt9l_FI/AAAAAAAAImE/QCJiNqz0OtI/s1600/panel-image-2.jpg' width='153'/> </a>
   </div>
   <!-- panel 2 code end -->
   
   <!-- panel 3 code start -->
   <div class='panel'>
      <a href='ENTER-FEATURED-POST-3-LINK-HERE'> <img height='122' src='http://2.bp.blogspot.com/-x_iTCoP83Vg/Uo7xYMl6XwI/AAAAAAAAImI/9e8SC_wj-ow/s1600/panel-image-3.jpg' width='153'/> </a>
   </div>
   <!-- panel 3 code end -->
   
   <!-- panel 4 code start -->
   <div class='panel'>
      <a href='ENTER-FEATURED-POST-4-LINK-HERE'> <img height='122' src='http://3.bp.blogspot.com/-pNrb3vi5rkc/Uo7xYQ_IUCI/AAAAAAAAImQ/XPl6iPDzlRw/s1600/panel-image-4.jpg' width='153'/> </a>
   </div>
   <!-- panel 4 code end -->
   
   <!-- panel 5 code start -->
   <div class='panel'>
      <a href='ENTER-FEATURED-POST-5-LINK-HERE'> <img height='122' src='http://4.bp.blogspot.com/-3AIgR1TbUxE/Uo7xZaQSh-I/AAAAAAAAImc/czmXlEXye18/s1600/panel-image-5.jpg' width='153'/> </a>
   </div>
   <!-- panel 5 code end -->
   
   <!-- panel 6 code start -->
   <div class='panel'>
      <a href='ENTER-FEATURED-POST-6-LINK-HERE'> <img height='122' src='http://2.bp.blogspot.com/-GbQSlSvDV3E/Uo7xZtp-xwI/AAAAAAAAImg/2jRVs76jO-s/s1600/panel-image-6.jpg' width='153'/> </a>
   </div>
   <!-- panel 6 code end -->
   
</div>
<a class='prev' href='javascript:stepcarousel.stepBy(&apos;mygallery2&apos;, -1)'/>
<a class='next' href='javascript:stepcarousel.stepBy(&apos;mygallery2&apos;, 1)'/>
</div><!-- /mygallery -->

There are 6 panels in the carousel. You can add a remove more panels if you want.

Now replace,
"ENTER-FEATURED-POST-X-LINK-HERE"s with your real featured post link,
Panel image URL,
for each panel. (X = 1 or X = 2 or X = 3 or X = 4 or X = 5 or X = 6)

How To Configure Social Buttons

Find this in "Edit HTML":

<div class='side-widget'>
<h3>Follow Us</h3>
<ul id='topsoc'>
<li class='first'>
   <a href='#' id='socrss'>Subscribe via RSS</a>
</li>
<li class='second'>
   <a href='#' id='twitter'>Follow my tweets</a>
</li>
<li class='third'>
   <a href='#' id='email'>Subscribe via Email</a>
</li>
</ul>
</div>

Add your own social links replacing "#" marks.