Jovel's Blog: CSS

Showing posts with label CSS. Show all posts

The Most Simple HTML Website ever.

By Jovel Sam on 02:20 in Adobe, Adobe Muse, CSS, HTML, Javascript

Hi guys,
For the past few days, I was busy working on a Template for website. Actually it does not need even few days to build it, It is that simple. I'm posting some screenshots of it below. If anyone would like to buy it, Contact me on jovelonline@gmail.com or comment below. I created this website as an experiment. I'm planning to start a website to sell such Templates. So, if anyone buys this Template, then I can conclude that this is the right time to start my Venture. And also, Please suggest a good name for my Venture. There's no much programing in it. I take only the designing side. You can manually add the content into this.(I can help with adding logo)

This is made with Adobe Muse. It uses HTML, CSS and Javascript. Its Responsive, it got Dynamic Page resizing, a Better Sitemap and rest, see for yourself.

Mint Green Share Box for websites

By Jovel Sam on 09:53 in CSS, HTML, Sharing

You might have seen our older versions of sharer boxes, this is the latest of''em. here's the code.

if your using blogger, go to layouts, then add a gadget select HTML/Javascript then paste this code. leave the Title column empty. The demo, is this blog itself.

<style>

#joelblogsharer{

position:fixed;

left:0px;

bottom:0;

background-color:#b8ff79;

border:none;

opacity:0.7;

width:auto;

height:auto;

padding:5px 10px;

box-shadow: 5px 5px 15px #888888;

}

#joelblogsharer:hover{

opacity:1;

}

</style>

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-share-button" data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u&src=sdkpreparse">Share</a></div><br /><br />

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script><br />

lang: en_US

</script>

</div>

Making Text Blurry in CSS.

By Jovel Sam on 21:30 in Blurry-Text, Codes, CSS

In this post, you'll see how to make any text blurry using CSS. its simple.

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

The CSS selector 'text-shadow' is compatible with more browsers. after making its color transparent, and having a shadow makes it appear as blurry.

Jovel's Blog Scroll bar using CSS.

By Jovel Sam on 01:57 in Blogger, CSS, HTML, Scroll Bar

Seeing your old scroll bar bores you ? No More Boring... here's a good looking scroll bar for websites and Blogs, Created with CSS.

Best Viewed in Google Chrome.

Here's the CSS code.

::-webkit-scrollbar{ width: 8px; } ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 0px; } ::-webkit-scrollbar-thumb{ border-radius: 0px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

for Blogger users,
Select your blog and go to Template -> Customize., Click the Advanced tab and select Add CSS then paste this code.

For Websites,
Paste this code before </style> Tag.

Enjoy your new look of Scroll bar.

Jovel's Blog's Sharer Box, New and updated.

By Jovel Sam on 01:56 in Code, CSS, HTML

We've recently created a sharing box for blogs and websites. this one is updated of that. Better, Less Codes, Designed by Jovel's Blog, Plugins by Addthis. See the demo at Jovel's Blog Demos

What he Got.

Facebook Like Button

Twitter Tweet Button

Google +1 button. And even more.....

How to Add this (in Blogs).

Select your Blog-> Layout -> Add Gadget -> HTML/Javascript. now paste this code in it and click Save.

How to create a custom 404 page for blogs.

By Jovel Sam on 07:59 in 404, Blogger, Codes, CSS, HTML

In this tutorial, I'm gonna show you how to create a custom 404 page for you blogs. See our 404 page here

Step 1: Go to the blogger you want to change the 404 page>Settings>Search Preferences.

Step 2: Under 'Errors and Redirections', Near 'Custom Page Not Found', Click edit.

Step 3:Copy and paste this code there.

<style>
.joediv #main {
width: 100%;
text-align: center;
margin: 3em 0 10em 0;
color: #999;
}
</style>
<div class="joediv">
    <style>
@import url(http://fonts.googleapis.com/css?family=Frijole);
      h1 {
        font-family: 'Frijole', cursive;
        font-size: 25px;
      }
    </style>
<h1>Its 404.., Go Back, There's nothing here.... :'( visit our<a href="http://joe-amis.blogspot.com">Homepage</a></h1></div>

Step 4:Replace the Orange colored text with your homepage. Click Save Changes.

Enjoy your new 404.

How to add a header image to blog.

By Unknown on 04:57 in Blogger, CSS, Template

Works perfectly with Picture Window Template.

To do this go to Blogger

Go to template and click customize.

In template designer, Click Advanced.

And select Add Css.

Paste this code in it. And enjoy with your new header. replace '[the url of your image]' with the image url. Without quotes.

body
{ 
background-image:url('[the url of your image]');
background-repeat:no-repeat;
background-attachment:scroll;
background-size:1345px 114px;
}

Popular Posts