Jumat, 27 Mei 2011
 | Template Name : WPBoxedTech |
| Original Designer : Technology Tricks | |
| Bloggerize by : Free Blogger Template | |
| Demo Url : CLICK HERE | |
| Download : WPBoxedTech.zip(UPDATE) |
Instalations Guide :
Here we go, WPBoxedTech Free Premium Blogger Template. I think you all already understand how to setup the navigation menu. So, I only guiding you for "slide feature" and "subscribe feature".
See the element picture below[click the picture for full size]
There are two special element widget[red box in the picture].
1. Slide Feature Element
Click "Add A Gadget" => "HTML/JavaScript Add"
No need to write a title for this element
Place the code below in the "Content box" and change the red code as you want
<!-- featured section -->
<div class="box"><div class="box_outer"><div class="box_inner"><div class="box_bottom_right"><div class="box_bottom_left">
<div class="box_content">
<h5>Featured Posts</h5>
<div id="carousel_control">
<div id="play_btn" class="control_btn"><img alt="Play" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD_NjWjrIDmfk1chhDGCwOlKhWlQ239COA70P7hA52mVl6tJUn2kyuttFUz0WvfqPafDphmEQgOKFnfMtwLiXNA_PWXMIJ0lfh3zZZ1-9QnYb8FpIJJu60anq_roFv7rVIEycXdBHnMy2B/s1600/play.png" height="7"/></div>
<div id="pause_btn" class="control_btn"><img alt="Pause" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYStBA94qtVreUw8VRd5CPffm_i5BYYGWDUx_9Epc-wt9jHQ0BF_ossz42KBLWFRtSUiJWZIU_cHqs32ef9pgWV4v_L3Vi67qIh4Glsh-oX_Rfc9YR8PYiwMARk9HFzoQZ_YFZGE1K-cC/s1600/pause.png" height="7"/></div>
<div id="prev_btn" class="control_btn"><img alt="Previous" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrd1hO0OAP7P1YXSRHD4NGYiNS8R9g6eQkiLvczm4yx_RIgOCQIYAc-pjFWLhvsZzcwPSNrsvOj5KbAmq25Kou6SGnOhlhT9D6k5KxxCqXBuz-Yf1zka6abGD6wIG-sPf9ZtMzWYsvu0ye/s1600/prev.png" height="7"/></div>
<div id="next_btn" class="control_btn"><img alt="Next" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGuJq-KOuWHp9Q-3rN3i-hUiTRpe5I2bYG7GIgUsWWHyKOwRHr0iJ_BDKLw0Rwdm7x90v9O4PFF-nvu_hsQhLmdjMpFw2QjLs8qpzW_4CSdj6iqJ55mI3Kk5jvG1Wa_FHMAbm4NkKSGMYv/s1600/next.png" height="7"/></div>
<div id="featured_number"/></div>
</div>
<ul id="featured_posts" class="jcarousel-skin-tango">
<li>
<div id="featured_1" class="featured_item">
<h4><a href="POST URL HERE1" title="POST TITLE HERE1">POST TITLE HERE1</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE1" width="535" src="IMAGE URL HERE1" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE1</div>
<div class="featured_more"><a href="POST URL HERE1" title="POST TITLE HERE1">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_2" class="featured_item">
<h4><a href="POST URL HERE2" title="POST TITLE HERE2">POST TITLE HERE2</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE2" width="535" src="IMAGE URL HERE2" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE2</div>
<div class="featured_more"><a href="POST URL HERE2" title="POST TITLE HERE2">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_3" class="featured_item">
<h4><a href="POST URL HERE3" title="POST TITLE HERE3">POST TITLE HERE3</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE3" width="535" src="IMAGE URL HERE3" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE3</div>
<div class="featured_more"><a href="POST URL HERE3" title="POST TITLE HERE3">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_4" class="featured_item">
<h4><a href="POST URL HERE4" title="POST TITLE HERE4">POST TITLE HERE4</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE4" width="535" src="IMAGE URL HERE4" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE4</div>
<div class="featured_more"><a href="POST URL HERE4" title="POST TITLE HERE4">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_5" class="featured_item">
<h4><a href="POST URL HERE5" title="POST TITLE HERE5">POST TITLE HERE5</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE5" width="535" src="IMAGE URL HERE5" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE5</div>
<div class="featured_more"><a href="POST URL HERE5" title="POST TITLE HERE5">Read More...</a></div>
</div>
</li>
</ul>
</div></div></div></div></div>
<!-- end featured section --></div>
<div class="box"><div class="box_outer"><div class="box_inner"><div class="box_bottom_right"><div class="box_bottom_left">
<div class="box_content">
<h5>Featured Posts</h5>
<div id="carousel_control">
<div id="play_btn" class="control_btn"><img alt="Play" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD_NjWjrIDmfk1chhDGCwOlKhWlQ239COA70P7hA52mVl6tJUn2kyuttFUz0WvfqPafDphmEQgOKFnfMtwLiXNA_PWXMIJ0lfh3zZZ1-9QnYb8FpIJJu60anq_roFv7rVIEycXdBHnMy2B/s1600/play.png" height="7"/></div>
<div id="pause_btn" class="control_btn"><img alt="Pause" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYStBA94qtVreUw8VRd5CPffm_i5BYYGWDUx_9Epc-wt9jHQ0BF_ossz42KBLWFRtSUiJWZIU_cHqs32ef9pgWV4v_L3Vi67qIh4Glsh-oX_Rfc9YR8PYiwMARk9HFzoQZ_YFZGE1K-cC/s1600/pause.png" height="7"/></div>
<div id="prev_btn" class="control_btn"><img alt="Previous" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrd1hO0OAP7P1YXSRHD4NGYiNS8R9g6eQkiLvczm4yx_RIgOCQIYAc-pjFWLhvsZzcwPSNrsvOj5KbAmq25Kou6SGnOhlhT9D6k5KxxCqXBuz-Yf1zka6abGD6wIG-sPf9ZtMzWYsvu0ye/s1600/prev.png" height="7"/></div>
<div id="next_btn" class="control_btn"><img alt="Next" width="8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGuJq-KOuWHp9Q-3rN3i-hUiTRpe5I2bYG7GIgUsWWHyKOwRHr0iJ_BDKLw0Rwdm7x90v9O4PFF-nvu_hsQhLmdjMpFw2QjLs8qpzW_4CSdj6iqJ55mI3Kk5jvG1Wa_FHMAbm4NkKSGMYv/s1600/next.png" height="7"/></div>
<div id="featured_number"/></div>
</div>
<ul id="featured_posts" class="jcarousel-skin-tango">
<li>
<div id="featured_1" class="featured_item">
<h4><a href="POST URL HERE1" title="POST TITLE HERE1">POST TITLE HERE1</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE1" width="535" src="IMAGE URL HERE1" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE1</div>
<div class="featured_more"><a href="POST URL HERE1" title="POST TITLE HERE1">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_2" class="featured_item">
<h4><a href="POST URL HERE2" title="POST TITLE HERE2">POST TITLE HERE2</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE2" width="535" src="IMAGE URL HERE2" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE2</div>
<div class="featured_more"><a href="POST URL HERE2" title="POST TITLE HERE2">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_3" class="featured_item">
<h4><a href="POST URL HERE3" title="POST TITLE HERE3">POST TITLE HERE3</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE3" width="535" src="IMAGE URL HERE3" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE3</div>
<div class="featured_more"><a href="POST URL HERE3" title="POST TITLE HERE3">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_4" class="featured_item">
<h4><a href="POST URL HERE4" title="POST TITLE HERE4">POST TITLE HERE4</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE4" width="535" src="IMAGE URL HERE4" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE4</div>
<div class="featured_more"><a href="POST URL HERE4" title="POST TITLE HERE4">Read More...</a></div>
</div>
</li>
<li>
<div id="featured_5" class="featured_item">
<h4><a href="POST URL HERE5" title="POST TITLE HERE5">POST TITLE HERE5</a></h4>
<div class="featured_image">
<img alt="POST TITLE HERE5" width="535" src="IMAGE URL HERE5" height="175"/>
</div>
<div class="featured_desc">POST SUMMARY HERE5</div>
<div class="featured_more"><a href="POST URL HERE5" title="POST TITLE HERE5">Read More...</a></div>
</div>
</li>
</ul>
</div></div></div></div></div>
<!-- end featured section --></div>
Example :
POST URL HERE = http://www.freebloggertemplate.info/2009/11/coming-soon-wpboxedtech-free-premium.html
POST TITLE HERE = Coming Soon : WPBoxedTech Free Premium Blogger Template
IMAGE URL HERE = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh58vCl8uj_6gzIS5rw2fhF1RhHduX9zhnf_MEErtpGRovhyphenhyphengR1EursuTUMt8T1VkI0PIsmcRNFQoRpryYOWZn0pZU1b7CNs2EgdwG7uAPzoFWQ33bnyiVBZUX6Hcde3jkMUWRhVFOqn4o/s400/wpboxedtech.gif
POST SUMMARY HERE = WPBoxedTech is one of Free Professional Premium Wordpress Theme by technologytricks.com and fast load theme. It is a 3 column professional clean and sleek design layout which can be used for all tech niche blogs. Now I convert this theme for Blogger Community.
2. Subcribe element at the bottom
Click "Add A Gadget" => "HTML/JavaScript Add"
TITLE BOX = SUBCRIBE or else
Place the code below in the "Content box" and change the red code WITH YOUR OWN URL
<div class="subscribe_content">
<div class="subscribe_item">
<div class="subscribe_img"><img alt="Subscribe to RSS Feed" width="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4XdrKITG_ZXCej7S71yaV7tLQvzSoiHuhx0Zw7_k-0DbPB_Sryi50TOAh6ylDPjFcM2-tKY05nEo39tPFit0X9_RVZLVWTE7gnLJ9LYvRNAPFmE0vUf5slBE9efX82hTGXfmx8mfO4pUl/s1600/ico-rss.jpg" height="32"/></div>
<div class="subscribe_desc">
<a href="FEED SUBSCRIBE URL">Subscribe to RSS Feed</a>
Receive feed updates via your feed reader
</div>
</div>
<div class="subscribe_item">
<div class="subscribe_img"><img alt="Email Subscription" width="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaCgV_klmnc7vff2UJZVvrDD54zsGVcZeiyAqMpp9oFv1o3V38SvnPjZ5R205s6cdq8Eno4gzkZiRfgRXCVkP8oJfoaxbL2jwthiLqa2Ubu3ziIBJ-uQCUe7cT8DFPQtcNViAiUgHVFj2p/s1600/ico-subscribe.jpg" height="32"/></div>
<div class="subscribe_desc">
<a href="EMAIL SUBSCRIBE URL">Email Subscription</a>
Receive feed updates via email
</div>
</div>
<h4>Be My Friend?</h4>
<div class="network_list">
<ul>
<li class="first"><a href="YOUR DIGG URL">Digg</a></li>
<li class="second"><a href="YOUR TWITTER URL">Twitter</a></li>
<li class="third"><a href="YOUR FACEBOOK URL">Facebook</a></li>
<li class="fourth"><a href="YOUR LINKADIN URL">LinkedIn</a></li>
<li class="fifth"><a href="YOUR STUMBLEUPON URL">StumbleUpon</a></li>
<li class="sixth"><a href="YOUR YOUTUBE URL">YouTube</a></li>
<li class="seventh"><a href="YOUR MYSPACE URL">MySpace</a></li>
<li class="eigth"><a href="YOUR GOOGLE VIDEO URL">Google Video</a></li>
</ul>
</div>
</div>
<div class="subscribe_item">
<div class="subscribe_img"><img alt="Subscribe to RSS Feed" width="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4XdrKITG_ZXCej7S71yaV7tLQvzSoiHuhx0Zw7_k-0DbPB_Sryi50TOAh6ylDPjFcM2-tKY05nEo39tPFit0X9_RVZLVWTE7gnLJ9LYvRNAPFmE0vUf5slBE9efX82hTGXfmx8mfO4pUl/s1600/ico-rss.jpg" height="32"/></div>
<div class="subscribe_desc">
<a href="FEED SUBSCRIBE URL">Subscribe to RSS Feed</a>
Receive feed updates via your feed reader
</div>
</div>
<div class="subscribe_item">
<div class="subscribe_img"><img alt="Email Subscription" width="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaCgV_klmnc7vff2UJZVvrDD54zsGVcZeiyAqMpp9oFv1o3V38SvnPjZ5R205s6cdq8Eno4gzkZiRfgRXCVkP8oJfoaxbL2jwthiLqa2Ubu3ziIBJ-uQCUe7cT8DFPQtcNViAiUgHVFj2p/s1600/ico-subscribe.jpg" height="32"/></div>
<div class="subscribe_desc">
<a href="EMAIL SUBSCRIBE URL">Email Subscription</a>
Receive feed updates via email
</div>
</div>
<h4>Be My Friend?</h4>
<div class="network_list">
<ul>
<li class="first"><a href="YOUR DIGG URL">Digg</a></li>
<li class="second"><a href="YOUR TWITTER URL">Twitter</a></li>
<li class="third"><a href="YOUR FACEBOOK URL">Facebook</a></li>
<li class="fourth"><a href="YOUR LINKADIN URL">LinkedIn</a></li>
<li class="fifth"><a href="YOUR STUMBLEUPON URL">StumbleUpon</a></li>
<li class="sixth"><a href="YOUR YOUTUBE URL">YouTube</a></li>
<li class="seventh"><a href="YOUR MYSPACE URL">MySpace</a></li>
<li class="eigth"><a href="YOUR GOOGLE VIDEO URL">Google Video</a></li>
</ul>
</div>
</div>
UPDATE:
PLEASE RE-DOWNLOAD THIS TEMPLATE IF YOU ALREADY DOWNLOAD IT BEFORE. THE OLD TEMPLATE HAVE A PROBLEM WHEN USING "BLOGGER IN DRAFT MODE" TO UPLOAD AN IMAGE TO YOUR POST.
HERE IS THE RULES IF YOU WANT TO FIX THE OLD VERSION BY YOUR SELF :
*HARD MODE*
1. GO TO "EDIT HTML"
2. CHECK "EXPAND WIDGET TEMPLATE"
3. PRESS CTRL+F AND SEARCH "SEPARATOR" (WITHOUT QUOTE)
4. CHANGE ALL "SEPARATOR" WORD WITH "UNDERLINER"
5. SAVE.
*EASY MODE*
EXAMPLE:
WHEN YOU UPLOAD IMAGE FOR YOUR POST, YOU WILL GET THE CODE LIKE THIS (BLOGGER IN DRAFT MODE ONLY):
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvSs4HKTg7MhEnrV1H-1o0xY8Wmcn4guvRD01icyomjFgTfxXJhUDKojxzV7dXAWrM6MRmL4b8LpBLWK221LNsdNb4zwER5re2ugn8XbyBQsDPXqvETrBWvwh1yCy93a1u8-gccd8R8k/s1600-h/2009_04250211d.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvSs4HKTg7MhEnrV1H-1o0xY8Wmcn4guvRD01icyomjFgTfxXJhUDKojxzV7dXAWrM6MRmL4b8LpBLWK221LNsdNb4zwER5re2ugn8XbyBQsDPXqvETrBWvwh1yCy93a1u8-gccd8R8k/s320/2009_04250211d.JPG" /></a><br />
</div>
JUST REMOVE THE "CLASS='SEPARATOR'" CODE.
PLEASE RE-DOWNLOAD THIS TEMPLATE IF YOU ALREADY DOWNLOAD IT BEFORE. THE OLD TEMPLATE HAVE A PROBLEM WHEN USING "BLOGGER IN DRAFT MODE" TO UPLOAD AN IMAGE TO YOUR POST.
HERE IS THE RULES IF YOU WANT TO FIX THE OLD VERSION BY YOUR SELF :
*HARD MODE*
1. GO TO "EDIT HTML"
2. CHECK "EXPAND WIDGET TEMPLATE"
3. PRESS CTRL+F AND SEARCH "SEPARATOR" (WITHOUT QUOTE)
4. CHANGE ALL "SEPARATOR" WORD WITH "UNDERLINER"
5. SAVE.
*EASY MODE*
EXAMPLE:
WHEN YOU UPLOAD IMAGE FOR YOUR POST, YOU WILL GET THE CODE LIKE THIS (BLOGGER IN DRAFT MODE ONLY):
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvSs4HKTg7MhEnrV1H-1o0xY8Wmcn4guvRD01icyomjFgTfxXJhUDKojxzV7dXAWrM6MRmL4b8LpBLWK221LNsdNb4zwER5re2ugn8XbyBQsDPXqvETrBWvwh1yCy93a1u8-gccd8R8k/s1600-h/2009_04250211d.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvSs4HKTg7MhEnrV1H-1o0xY8Wmcn4guvRD01icyomjFgTfxXJhUDKojxzV7dXAWrM6MRmL4b8LpBLWK221LNsdNb4zwER5re2ugn8XbyBQsDPXqvETrBWvwh1yCy93a1u8-gccd8R8k/s320/2009_04250211d.JPG" /></a><br />
</div>
JUST REMOVE THE "CLASS='SEPARATOR'" CODE.
