Skip to main content

Posts

Showing posts from February, 2013

Customized Blockquote Style In Blogger Blog

If your post has different headers and something important to say, then you can use blockquote, But styling a blockquote will look more stunning as shown in image above.
How to Edit ? # First Go to Blogger Dashboard, # Navigate to Template # Backup your Template for Safety # Click on Edit Html # Find ]]> and Just above it paste The Code Written in Snippet Below(Any One Style),
1. Red Blockquote Follow the steps from above and copy the code,

blockquote
{
margin: 10px auto;
padding: 15px;
border: 1px solid red;
border-left: 25px solid;
border-radius: 20px;
color: red;font-size: 25px;
box-shadow: 2px 2px 2px #222;
}
2. Blue Blockquote Code Snippet :
blockquote
{
margin: 10px auto;
padding: 15px;
border: 1px solid blue;
border-left: 25px solid;
border-radius: 20px;
color: blue;
font-size: 25px;
box-shadow: 2px 2px 2px #222;
}
3. More Custom Color If you want more custom colors in blockquote, then copy the above css but carefully change the Yellowed text into your desired color [For Ex…

Customized Author's Comment in Blogger

You might have seen that when there are too many comments in a article, You can easily find out which comment is by admin due to different design of admin's / author's comment.

How it will look like,

What will you have to do ?
You can do this with the help of CSS3, Here is a step by step tutorial, Follow the tutorial and get your comment customized!

Live Demo
You can see Live demo in this blog's comments, This blog has customized style for author comments.

Start Editing # Open Blogger Dashboard
# Navigate to Template
# Backup Your Template
# Click Edit Html
# Search For  ".comments .comments-content .icon.blog-author"
# Now Delete this Line and also delete its within brackets contents(Whole Css for selected text), it will be in { } brackets.
# Now copy below css in that place where you deleted that code,

.comments .comments-content .icon.blog-author
{
position: absolute;
height: 30px;
width: 100%;
top: 0;
left: -10px;
background: rgba(246, 29, 255, 0.3);
}
# Sav…

Add NEW Ribbon To Your Latest Blogger Post

You might have seen that "New" named ribbon in the latest post of a blog.
In this article, I will guide you how to implement it in your blog.
It's useful to interact your visitors with newest updates and releases.
How to add this widget on your blog?1. Go to your blog dashboard and go to Template tab .
2.Back up your template.
3. After back up click on Edit HTML.
4. Search for ]]></b:skin> and paste this code above it.

.wrappercbt12
{
  margin: 50px auto;
  width: auto;
  height: auto;
  background: transparent;
  position: relative;
}
.ribboncbt123
{
  font: bold 20px Sans-Serif;
  text-align: center;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -25px;
  top: 7px;
  width: 160px;
  background-image: linear-gradient(top, #129, #12f);
  background-image: -o-linear-gradient(top, #129, #12f);
  backgroun…

6 Useful CSS3 Properties For CSS Beginners

1. @import@import property is very useful to call external css in your style sheet, When your stylesheet contains fonts or you can link external stylesheet, then you can try @import instead of using link tag. You can link stylesheet and fonts by using this property as shown in snippet below!

@import url(http://linktoastylesheetorwebfont);
/* The more css goes here...*/ 2. cursor "cursor" is a property for giving style to cursor (default,pointer,help,wait,etc...), This property can be given inside stylesheets. you can give property as shown below.

h1
{
cursor:default; /* all h1 elements will have default cursor instead it has text. */
}
p
{
cursor:pointer; /* all p(paragraph) elements will have hand pointer cursor instead it has text in it. */
}
em
{
cursor:wait; /* all em elements will have loading cursor. */
}
a
{
cursor:help; /* all a(link) elements will have help arrow cursor. */
}
Visulisation Matters [ See Live Demo Of Cursors Below ]
Default Cursor [Hover Here]
Pointer …

Must have widgets for your blogger blog

Blogger have many widgets its own but some are also from third party, But here is an list of some widgets from blogger and non-blogger owned widgets that should be on your blog for spicing up your blog, Many blogs have widgets that are toOoOoO lazy to load..., visitors hate that type of widgets, So let's start with some essential widgets...,
Search Box Search box widget is really essential to let everyone find some on your blog what they're looking for...,
Google custom search provides search result in your blog, so you can put google custom search box in your blogger blog as a widget, or inside a menu(Right Float Search Bar).
Social Information Box Are you on facebook ?, Are you on Google ?, Are you on twitter ? then why shy to say infront of visitors, Go and link your social account in your blog, Make your blog available on social media(If You're Opting Out..),Like Box,twitter tweets are available to easily embed in your blog.
Popular Post Widget Popular Post widget is …

Arrow with PureCSS

Have you ever thought or seen a arrow in website which is not an image but created with the help of css ? So now,
we are going to learn how to make a arrow with purecss.
You can see arrows crafted with PureCSS3 in image above.
Arrow Left
.arrowleft
{
  position: relative;
  height: 0px;
  width: 0px;
  border: 20px solid;
  border-color:transparent #444 transparent transparent;
} Arrow Right  .arrowright
{
  position: relative;
  height: 0px;
  width: 0px;
  border: 20px solid;
  border-color:transparent transparent transparent #444;
} Arrow Top  .arrowtop
{
  position: relative;
  height: 0px;
  width: 0px;
  border: 20px solid;
  border-color:transparent transparent #444 transparent;
} Arrow Bottom  .arrowbottom
{
  position: relative;
  height: 0px;
  width: 0px;
  border: 20px solid;
  border-color:#444 transparent transparent  transparent;
}
You can adjust arrow size with increase and decrease the size of border property which is now 20px.
If you want arrow placed at angle then …