Decorate Your Images (CSS)

This post will show you how to decorate your images
and photo galleries without editing the source images
for your blogspot post. It is very easy and flexible.
All you need is an extra <span> tag and apply a background
image to create the overlaying effect.

The Benefits Of This CSS Trick
You don’t have to manually create the decorative template in Photoshop and export the individual image.
You don’t have to worry about changing the design theme in the future.
You can have a completely different look and feel by just editing the CSS.
It Works on Any Site — This CSS trick works on any type of site, with any image size.

Preview :

And here is how it works:

Put this CSS codes on your template (Dashboard > Layout > Edit Html) :

/* ---------- DECORATE YOUR IMAGES ----------------------- */
.photo {
margin: 10px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(http://suspended.fileave.com/deelpe/images/digg-style.gif) no-repeat;
}
.photo a {
text-decoration: none;
}

.sample1 span {
width: 28px;
height: 21px;
display: block;
position: absolute;
top: -12px;
left: 90px;
background: url(http://suspended.fileave.com/deelpe/images/pin.png) no-repeat;
}

.sample2 span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(http://suspended.fileave.com/deelpe/images/tape.png) no-repeat;
}

.sample3 span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: -5px;
left: -2px;
background: url(http://suspended.fileave.com/deelpe/images/paper-clip.png) no-repeat;
}

.sample4 span {
width: 115px;
height: 32px;
display: block;
position: absolute;
top: -13px;
left: 30px;
background: url(http://suspended.fileave.com/deelpe/images/tape2.png) no-repeat;
}

.sample5 span {
width: 216px;
height: 166px;
display: block;
position: absolute;
top: -17px;
left: -18px;
background: url(http://suspended.fileave.com/deelpe/images/gold-frame.png) no-repeat;
}

.sample6 span {
width: 189px;
height: 137px;
display: block;
position: absolute;
top: -5px;
left: -5px;
background: url(http://suspended.fileave.com/deelpe/images/cut-corner.png) no-repeat;
}

.sample10 span {
width: 181px;
height: 134px;
display: block;
position: absolute;
top: -6px;
left: -6px;
background: url(http://suspended.fileave.com/deelpe/images/brush-border.png) no-repeat;
}
.sample10 img {
border: none;
padding: 0;
}

.sample11 span {
width: 122px;
height: 72px;
display: block;
position: absolute;
top: -22px;
left: -15px;
background: url(http://suspended.fileave.com/deelpe/images/floral-corner.png) no-repeat;
}

.sample12 span {
width: 186px;
height: 137px;
display: block;
position: absolute;
top: 2px;
left: 2px;
background: url(http://suspended.fileave.com/deelpe/images/watercolor-top.png) no-repeat;
}
.sample12 img {
border: none;
padding: 9px 12px 12px 11px;
background: url(http://suspended.fileave.com/deelpe/images/watercolor-bg.png) no-repeat;
}

.sample13 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(http://suspended.fileave.com/deelpe/images/mask.png) no-repeat;
}
.sample13 img {
border: none;
padding: 0;
}

.sample14 span {
width: 170px;
height: 84px;
display: block;
position: absolute;
top: 5px;
left: 5px;
background: url(http://suspended.fileave.com/deelpe/images/glossy-gradient.png);
}
/*---------------- END of CODE -----------------*/

Then insert this code on your post :

<div class="photo">
<a href="http://alltelleringet.deviantart.com/art/fishy-island-127503441"><span></span><img src="http://img18.imageshack.us/img18/5346/decor1c.jpg" alt="image" /></a></div>
<div class="photo sample1">
<a href="http://www.maslov.com/photographers/skeleton/index.html?headquarters=19.html"><span></span><img src="http://img527.imageshack.us/img527/5277/decor2.jpg" alt="image" /></a></div>
<div class="photo sample2">
<a href="http://alltelleringet.deviantart.com/art/Go-your-own-road-111657665"><span></span><img src="http://img527.imageshack.us/img527/8009/decor3j.jpg" alt="image" /></a>
</div>
<div class="photo sample3">
<a href="http://alltelleringet.deviantart.com/art/roadworkers-coffee-break-113796265"><span></span><img src="http://img12.imageshack.us/img12/6518/decor4.jpg" alt="image" /></a>
</div>
<div class="photo sample4">
<a href="http://alltelleringet.deviantart.com/art/anlagd-oversvamning-111656788"><span></span><img src="http://img18.imageshack.us/img18/7341/decor5.jpg" alt="image" /></a>
</div>
<div class="photo sample5">
<a href="http://tarelkin.deviantart.com/art/Angry-39052630"><span></span><img src="http://img35.imageshack.us/img35/1667/decor6.jpg" alt="image" /></a>
</div>
<div class="photo sample6">
<a href="http://adsoftheworld.com/media/print/tampa_cargo_truck?size=_original"><span></span><img src="http://img35.imageshack.us/img35/2259/decor7.jpg" alt="image" /></a>
</div>
<div class="photo sample10">
<a href="http://www.flickr.com/photos/joshsommers/1190779838/"><span></span><img src="http://img23.imageshack.us/img23/1706/decor11.jpg" alt="image" /></a>
</div>
<div class="photo sample11">
<a href="http://www.behance.net/Gallery/Selfreflect/52768"><span></span><img src="http://img35.imageshack.us/img35/9387/decor12.jpg" alt="image" /></a>
</div>
<div class="photo sample12">
<a href="http://lsd.eu/Site/cars/page_c/saatchi-renault-tuareg.html"><span></span><img src="http://img35.imageshack.us/img35/6463/decor13.jpg" alt="image" /></a>
</div>
<div class="photo sample13">
<a href="http://www.behance.net/Gallery/mio-gps/113621"><span></span><img src="http://img35.imageshack.us/img35/2333/decor14.jpg" alt="image" /></a>
</div>
<div class="photo sample14">
<a href="http://lsd.eu/Site/vari/page_v/dlv-purina-pit.html"><span></span><img src="http://img18.imageshack.us/img18/7316/decor15.jpg" alt="image" /></a>
</div>

Credits to : WebDesignerWall

Read more »

How to create Read More?

If your post is too long, then you think to cut some of your post. We can Expandable Post Summaries from our blog. Don't do it, because with few modification on yor layout, we can hide some post by the "read more" link. Note that you'll need to have post pages enabled in order to make this feature work and use XML blogger template.
And now let's do it.

Follow Step 1

After login with your Google Account to your blogger, lets go to Layout tab
Go to Edit HTML tab. Then click Expand Widget Templates
After that, find } ]]></b:skin code (you can press Ctrl + F from your keyboard and type } ]]></b:skin). Then Place this code following code after } ]]></b:skin

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

After that,add the following code under the code <p><data:post.body/></p>

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More...... !</a>
</b:if>

And save your work!

Follow Step 2

The final piece that we need is a little bit of code in your actual post. Each post that you want to use this feature on will need this code:

<span class="fullpost"> YOUR TEXT OR CONTENT HERE </span>

Read more »

Code Box for Blogspot

Final result :

this is for example

This tutorial assumes that you have at least little bit knowledge of working around with templates. This Professional looking Code Box can also be used with Wordpress, but here I am taking the example of Blogspot. Also this Code Box comes with a hover effect, that is when you hover your mouse over this the color changes.

Here we start:
Login to Blogspot and on your Dashboard choose the blog for which you want to Add The Code Box and then click on Layout (Tata Letak) tab:



Once there, click on Edit Html tab :



Now in Edit Html tab, before proceeding next, it would be a better idea to backup your template, by clicking on Download Full Template link.
Now just before the ]]></b:skin> add this Code:

.code {color: #998076; border : 0px solid #DADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #251e1b; width : 75%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #e48608;max-height : 500px;min-height : 16px;line-height : 16px;}
.code:hover {background-color : #2c221e;}

Save Your Template. And it is done.

Now whenever you want to put any code in your template just use the div class code as shown below to your post :

<div class="code">
YOUR TEXT OR CODE GOES HERE
</div>

Read more »