Wednesday, October 20, 2010
0
Wednesday, October 20, 2010
Anonymous
Read more...
40 Fresh Modern Logo Inspiration For The Designers
As a designer when we get a new logo designing project we tend to search for logo inspiration to brush up our creativity and also to develop a unique logo which ain’t seen anywhere. Logo are the ideal product to tag your presence and to brand your product. So, I thought of coming up with an inspirational logo’s to help designer to create more creative logo, which is all about branding.
0
Anonymous
Read more...
15 Killer Free WordPress Personal Blog Themes
As a blogger, we do love to maintain a personal blog to share their thoughts irrespective of a topic and WordPress is one of the best platform to have a personal blog. So, this post is about the best of WordPress personal blogging theme that are available for FREE download. The list has a mixed formation of minimalistic theme to designer theme to help you choose a better theme for your personal blog.
If you have any template suggestion under personal theme category, share your template suggestions with us. In the meantime you can also check out Free Premium WordPress Theme Collection.
0
Anonymous
Read more...
Royale Note Blogger Template
Its been a while I was planning to release a simple elegant Blogger template and today I got some time to release it for the Blogger fans. The template name is gonna be Royale Note, which is a simple elegant blogger template based on the inspiration from a Tumblr theme Royal Ribbon. I have made this template keeping in mind of the personal blogging template. So let have a live demo and look at the template.
Blogger template specifications
- One column
- Elegant design
- Page navigation navbar
- Social sharing buttons
If you have any trouble in installing this template, drop in your comments here and also share your views about this template here.
0
Anonymous
Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code
]]></b:skin>
Now the place the below code before ]]></b:skin>
Step 3: This step involves the featured content structure. Search for the code
<div id=’content-wrapper’> and place the below code just before
<div id=’content-wrapper’>
Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.
Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>
You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo
Read more...
Featured Content Slider for Blogger Using jQuery
Blogger is not more a blogging platform for beginners, there are lot more can be made with a blogger / blogspot blogs. Featured content sliders are seen in many Wordpress blogs and when coming to blogger it is certainly not much seen. Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs.
Step 1: Let get into the coding part. Here I just made a CSS stylesheet, to make the installation pretty simple. So all you need to do is just copy the below code and paste it after
<head>
1<link href='http://sites.google.com/site/bloggermintcom/style.css'rel='stylesheet'type='text/css'/>
Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code
]]></b:skin>
Now the place the below code before ]]></b:skin>
01#featured{
02width:400px;
03padding-right:250px;
04position:relative;
05border:5px solid#ccc;
06height:250px;
07background:#fff;
08}
09#featured ul.ui-tabs-nav{
10position:absolute;
11top:0; left:400px;
12list-style:none;
13padding:0; margin:0;
14width:250px;
15}
16#featured ul.ui-tabs-nav li{
17padding:1px 0; padding-left:13px;
18font-size:12px;
19color:#666;
20}
21#featured ul.ui-tabs-nav li img{
22float:left; margin:2px 5px;
23background:#fff;
24padding:2px;
25border:1px solid#eee;
26}
27#featured ul.ui-tabs-nav li span{
28font-size:11px; font-family:Verdana;
29line-height:18px;
30}
31#featured li.ui-tabs-nav-item a{
32display:block;
33height:60px;
34color:#333; background:#fff;
35line-height:20px;
36}
37#featured li.ui-tabs-nav-item a:hover{
38background:#f2f2f2;
39}
40#featured li.ui-tabs-selected{
41background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
42}
43#featured ul.ui-tabs-nav li.ui-tabs-selected a{
44background:#ccc;
45}
46#featured .ui-tabs-panel{
47width:400px; height:250px;
48background:#999; position:relative;
49}
50#featured .ui-tabs-panel .info{
51position:absolute;
52top:180px; left:0;
53height:70px;
54background: url('http://i50.tinypic.com/11rgghl.jpg');
55}
56#featured .info h2{
57font-size:18px; font-family:Georgia, serif;
58color:#fff; padding:5px; margin:0;
59overflow:hidden;
60}
61#featured .info p{
62margin:0 5px;
63font-family:Verdana; font-size:11px;
64line-height:15px; color:#f0f0f0;
65}
66#featured .info a{
67text-decoration:none;
68color:#fff;
69}
70#featured .info a:hover{
71text-decoration:underline;
72}
73#featured .ui-tabs-hide{
74display:none;
75}
<div id=’content-wrapper’> and place the below code just before
<div id=’content-wrapper’>
01<div id='featured'>
02<ul class='ui-tabs-nav'>
03<li class='ui-tabs-nav-item ui-tabs-selected'id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1'src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
04<li class='ui-tabs-nav-item'id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger'src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove "showing postwithlabel"inBlogger</span></a></li>
05<li class='ui-tabs-nav-item'id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz'src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
06<li class='ui-tabs-nav-item'id='nav-fragment-4'><a href='#fragment-4'><img alt='chat'src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat livewithyour blog visitors using Yahoo Pingbox</span></a></li>
07</ul>
08<!-- First Content -->
09<div class='ui-tabs-panel'id='fragment-1'style=''>
10<img alt='mac'src='http://i47.tinypic.com/rsbi80.jpg'/>
11<div class='info'>
12<h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
13<p>Description goes here,thisis just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
14</div>
15</div>
16<!-- Second Content -->
17<div class='ui-tabs-panel ui-tabs-hide'id='fragment-2'style=''>
18<img alt=''src='http://i50.tinypic.com/33kprh5.jpg'/>
19<div class='info'>
20<h3><a href='#'>How to remove "showing postwithlabel"inBlogger</a></h3>
21<p>Description goes here,thisis just a test description....<a href='#'>read more</a></p>
22</div>
23</div>
24<!-- Third Content -->
25<div class='ui-tabs-panel ui-tabs-hide'id='fragment-3'style=''>
26<img alt=''src='http://i47.tinypic.com/2191lqt.jpg'/>
27<div class='info'>
28<h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
29<p>Description goes here,thisis just a test description....<a href='#'>read more</a></p>
30</div>
31</div>
32<!-- Fourth Content -->
33<div class='ui-tabs-panel ui-tabs-hide'id='fragment-4'style=''>
34<img alt=''src='http://i48.tinypic.com/10pwp3o.jpg'/>
35<div class='info'>
36<h3><a href='#'>Chat livewithyour blog visitors using yahoo</a></h3>
37<p>Description goes here,thisis just a test description....<a href='#'>read more</a></p>
38</div>
39</div> </div>
Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.
Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>
Step 5: This is an optional step, if your blog already includes the jQuery and jQuery UI libraries. If not, follow this instructions. Copy the code below and paste it after <head>
01<script type='text/javascript'>
02$(document).ready(function(){
03$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
04$("#featured").hover(
05function() {
06$("#featured").tabs("rotate",0,true);
07},
08function() {
09$("#featured").tabs("rotate",5000,true);
10}
11);
12});
13</script>
1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'type='text/javascript'/>
2<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js'type='text/javascript'/>
You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo
Subscribe to:
Posts (Atom)
