|
| 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="http://2.bp.blogspot.com/_lxBSX0YJV58/SwQlWwTYYlI/AAAAAAAAAmM/3X3rSfq7a1A/s1600/play.png" height="7"/></div>
<div id="pause_btn" class="control_btn"><img alt="Pause" width="8" src="http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlOqgywtI/AAAAAAAAAmE/lWd29uMFFe0/s1600/pause.png" height="7"/></div>
<div id="prev_btn" class="control_btn"><img alt="Previous" width="8" src="http://4.bp.blogspot.com/_lxBSX0YJV58/SwQlXGDpsDI/AAAAAAAAAmU/h_JEGKzs4Hw/s1600/prev.png" height="7"/></div>
<div id="next_btn" class="control_btn"><img alt="Next" width="8" src="http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlOC7grvI/AAAAAAAAAl8/qH1ivA6na6I/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="http://2.bp.blogspot.com/_lxBSX0YJV58/SwQlWwTYYlI/AAAAAAAAAmM/3X3rSfq7a1A/s1600/play.png" height="7"/></div>
<div id="pause_btn" class="control_btn"><img alt="Pause" width="8" src="http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlOqgywtI/AAAAAAAAAmE/lWd29uMFFe0/s1600/pause.png" height="7"/></div>
<div id="prev_btn" class="control_btn"><img alt="Previous" width="8" src="http://4.bp.blogspot.com/_lxBSX0YJV58/SwQlXGDpsDI/AAAAAAAAAmU/h_JEGKzs4Hw/s1600/prev.png" height="7"/></div>
<div id="next_btn" class="control_btn"><img alt="Next" width="8" src="http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlOC7grvI/AAAAAAAAAl8/qH1ivA6na6I/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 = http://3.bp.blogspot.com/_lxBSX0YJV58/SwDm0GHomeI/AAAAAAAAAg8/o65sLBcHdQA/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="http://2.bp.blogspot.com/_lxBSX0YJV58/SwQlFuK1k_I/AAAAAAAAAlM/FogVGTbLfxo/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="http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlF1t9jOI/AAAAAAAAAlU/fVwRHX67YGo/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="http://2.bp.blogspot.com/_lxBSX0YJV58/SwQlFuK1k_I/AAAAAAAAAlM/FogVGTbLfxo/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="http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlF1t9jOI/AAAAAAAAAlU/fVwRHX67YGo/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="http://4.bp.blogspot.com/_PyrykGGhB88/SunCcDFoveI/AAAAAAAAG_M/98aALM5pLFg/s1600-h/2009_04250211d.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_PyrykGGhB88/SunCcDFoveI/AAAAAAAAG_M/98aALM5pLFg/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="http://4.bp.blogspot.com/_PyrykGGhB88/SunCcDFoveI/AAAAAAAAG_M/98aALM5pLFg/s1600-h/2009_04250211d.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_PyrykGGhB88/SunCcDFoveI/AAAAAAAAG_M/98aALM5pLFg/s320/2009_04250211d.JPG" /></a><br />
</div>
JUST REMOVE THE "CLASS='SEPARATOR'" CODE.
60 comments:
TEŞEKKÜRLER
Thanks, Nice one dear. Hoping you will come up with yellow and white shades too.
nice templates. i share your template on my blog. just a shortage on the footer, ad that shown on the left side footer is not tidy. hope you can fix the problem.
fyi, i use firefox 3.0.15.
@Kumkum: i'll think about it first ;)
@Gre: it's because i did not add any title for that element.
@FBT, WOW!! that's nice. I think that will be the best of yours.
nice template.
But i have a problem, when you select a post the image apears behind de text.
Can you help?
@Duarte : tell me your blog url. I will check it
Its a test blogger.
you can visit in http://testeterceirataurina.blogspot.com/
thanks
@Duarte : Are you sure did not do anything with this template?
Your images code look like this
------------------------------------------------
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_PyrykGGhB88/SunCcDFoveI/AAAAAAAAG_M/98aALM5pLFg/s1600-h/2009_04250211d.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_PyrykGGhB88/SunCcDFoveI/AAAAAAAAG_M/98aALM5pLFg/s320/2009_04250211d.JPG" /></a><br />
</div>
------------------------------------------------
can you explain to me, how the "bold" code appear in your blog?
I do not do any changes on this template.
When i read your feedback i create a new blog test and he do the same thing with the images.
thank you for suport
This time your own Blog's template is really appreciable. Wow what a background.
Is it possible to slow the sliding of the featured section? Thanks for the skin, by the way.
Duarte Bettencourt
I had the same problem, I did two things. First go under settings > formatting the set Enable float alignment to no. Then edit your post switch to edit html take out that line --"div class="separator" style="clear: both; text-align: center;"-- not really a fix but it will make it work.
nice template, thanx. I put a little modification if u don't mind. can u tell me how to erase a feature post please?
http://2fool4u.blogspot.com/
How do I insert an image in place of the header and get it centered in the header? the image header is 960px and 985px, please send me an email teaching (gmartins1309@gmail.com), therefore an urgent need to know for now use the template on my blog (www.dotaisfun.com) thanks for everything, congratulations on your site!
HI, Nice template but Iam facing a problem while I was testing it for a blog of mine.
The problem is when you expand the post the picture in the post overlaps the post writings.
see it happening here
http://maapstest.blogspot.com/
Kindly helpe me out.
I read the above comments written by rick and tried the same but did not work.
Please clear that bug in the template. Its quite a good work of yours and I love the template.
I tried to validate the template using the http://validator.w3.org
But it reported about 302 errors could you rectify those
Maapss - I am posting again just in case this doesn't get fixed. I can assure you that the work does work. I took a look at your site and still have the wrong code in there. In your first post you have the following line, which is put in by default when you add a post:
div class="separator" style="clear: both; text-align: center;"
This line above should be replace with the following:
div style="clear: both; text-align: center;"
Basically it looks like this occurs because of the class="separator". So really just take that class out of the html when you are doing a post by clicking on edit html. It should be the very first line.
Just in case you don't believe the test site is here
http://rickketcham.blogspot.com
Hope this helps.
Thank you Rick
It does work
What you have got to do is just remove the class separator as you said.
CLick edit html search for this piece of code
.separator {
width:545px;
float: left;
height: 3px;
margin: 5px 0px;
padding: 0px 0px;
display: inline;
background: url(http://4.bp.blogspot.com/_lxBSX0YJV58/SwQk0u1fWeI/AAAAAAAAAj8/KZzJfqsEaNg/s1600/dot.gif) repeat-x bottom;
}
and remove it.
HI Rick
There is another hitch in the template hope you will be able to correct it.
I tried to change my old blogs template to the wpboxedtech. But it seems the search box will search and find items on posts only made after the template is installed.
Means the previous posts already exisiting on the blog are not searched. And you cannot edit the time of post or date of post in the edit posts postoptions. Even if you change the date and time. It reverts back to the new one as soon as you publish.
Hope you can find a solution for this.
hi rick..
why did all the pics for the slider stretched
how to adjust it?
my blog :
htpp://pibgsktpp.blogspot.com
and how to include facebook in the bookmark/share widget?
how to change link on header menu ?(advertis,themes)
@All: Please wait for "new file" of this template. I Will fix the problem.
Thanks
Bravo..bravo...
thanks matte,
Finally you've fixed it
thanks...
great job bro ! thanks.. im using now, thanks..
I wanna enlarge left column that is blog post side. How can I do this
thanks in advance
@Whodidwhat: sorry, out of support.
i get error message in IE like title is null or no object and this is cause of friend connect gadget
is there any way to get rid of this
Its nice template..
www.akhpuji.blogspot.com
i want to remove all 'featured section' related code from this template plz help me..........
I want to remove all 'featured posts' related code from this template plz help....
I would like to add header image to this template, please provide the directions on modifying the code and recommended image size.
Thanks
-V!
hey dude, this is a great template! blends beautifully with mine, thanks a lot :)
k, there is a small glitch for me. My slide feature is not working... mind helping me out please?
mantab !
i want to use Drop Down Menu with WPBoxedTech Free Premium Blogger Template, pls help me
great template
thanks documents :)
thanks for this excelent themplate, i love the "featured posts" gadget
Hi, I really love this template! However, I would like to know how to add sub-menus. Can that be done?
Thanks!
(tnmccask@hotmail.com)
I am having trouble with the search feature. It is not seaching the whole blog. Can you please help me solve this problem?
Hey I really enjoyed using this template for my blog check it out http://www.e-swastya.com. My archives are going little outside from the page. I need those archives my menu bar . How should I do it .Any help would be appreciable .Thanks
hey admin really u did a great job yaar i really appreciate u
the trick to change "underline" instead of seperator is mind blowing
thanks a lot man
have a nice day
www.ppcfusion.co.cc
i just want to add third column plz someone guide how can i do that..?
i would like to use this if i am manage to add third column.
Thank u.
www.desionlinemovies.net
Hi every one....
I Want to add drop down menu like the original theme http://www.technologytricks.com/themes/wpboxedtech/
Can anyone tell me the script ?
Thanks for the info. :)
Thank you very much. Is there any red colored themes for blogspot. I want one.
Great template!!!
My problem:
How translate this: READ MORE...
I can not find in html.
Thanks for the template it is awesome
Hello from greece! i downloaded your excellent template, and i have a couple of questions.
1. how can i fix the wrong displayof favicons of twitter and stumbleupon? (on the right footer on my blog)
2. Can i remove the gadget "search" before the posts? Or are there would be aftermaths as far as the gadget of FEATURED POSTS?
( I did not add this latter gadget in my blog yet)
greetings, and excellent job! thx a lot
Thank FBT, I use this template on http://bukantipsinfo.blogspot.com
T.Y.V.M [Thank You Very Much]
Great theme, thanks
used it in http://ssdtanay.blogspot.com/
I have add some pictures more at the Slide Feature Element.
How can I change the TOTAl number of pictures? This remain the same, i.e. 5.
Thank you and regards.
Hello again, anopther thing more
I Want to add drop down menu (submenus) like the original theme http://www.technologytricks.com/themes/wpboxedtech/
Can you please hjelp me.
Thank you and Regards
Hello FreeBlogTemplate,
I don’t know if I can ask you this because I use your nice “Woothmes News Magazine” of Bloganol.com and made an adaptation with READ MORE of this blog but somethings is going wrong ;-(
I tried to modify the READ MORE with a nicer one but … ;-) … now I have the post in double ?
I take the READ MORE on this blog here:
http://wpboxedtech-btemplates.blogspot.com/
I’ m sure I need to take some code away but I can’t see which one …
Can you help. I know that for hight specializ blogger like you it’s just a question of minutes but for us beginner it’s a little bit hard.
My blogger laboratorium is here:
http://blogger-laboratorium.blogspot.com/
It’s a blogger design that i make for a girl friend of mine. I didn’t know what offer him as special gift. I decide to make her a special template ;-) Why not ! But little be hard …
Thanks to take attention to my request.
if you need my email, just ask it to me
MTS
Hi again! i followed exactly your advice as far as the slide feauture is concerned, but this gadget does not show the post's images. Why is that? please help me! (i use firefox)
thanks really u r the best but please tell me how to expand the template pleaseeeeee
http://goooglehacker.blogspot.com/
actually i need my blog template to display full screen , so please help me out with this annoying problem
Post a Comment