Customize Blockquote

Now I want to have a cute look for my Blockquote..
Are you familiar with this one? Do you use it sometimes?

Hmm..so Blockquote is like a special formatted paragraph or line in blog post..
Sometimes it's used for quoting someone else words.. or emphasizing one's point
In my case I use it for emphasizing lines.. probably codes.. something like thtat..

This is a blockquote symbol.. when you make one on your post you simply click on that symbol,

And you got a special formatted text for that.

This template I have downloaded already have some good format for blockquote styles..

.post-body blockquote {

 line-height:1.3em; 

  padding:10px;

  background:#f3bbc2;

}

It gives a pink background. that's just it..

So I wanted to have a border in addition this style.. probabbly dotted or dashed..

Just follow this..

• Go to Dashboard > Design > Edit HTML
• Find for blockquote word (I'm not really sure if we're the same term for that.. I hope we do.)
• Then add you desired code..

So my new code is..

.post-body blockquote {

  line-height:1.3em; 

  padding:10px;

  background:#f3bbc2;

  border-style: dotted;

  border-color:#E35AA5;

  border-width:2px;

}

        So now I do have a dotted border.. (Well you can have the other 3 witches I know :)
        I also set my border color and border width for better viewing.. 

Customize Blockquote

Customize Bullet List

Anyone familiar with Bullet Lists?
You see it as either a circle, a hallow circle, square.. etc..
Hmm.. for now I wanted to see an image as alternative to the default bullet list appearances..
So..

• Go to Dashboard > Design > Edit HTML
• place the following code:

.post ul li { list-style: url("http://URLofImage"); }

       just above this code

]]></b:skin>

      Now your bullet list will have an image appearance..
if you want to have some hover effect on it.. just like what I did.. add this code again..

.post ul li:hover { list-style: url("http://URLofImage"); }

   There you go.. you got a hover effect along with the image bullet list

Customize Bullet List

Share Buttons Configuration

I figured out that blogger has its built-in share buttons already.
I remember I had it before with my other blog..
so I was wondering why I can't see it here with my new blog..

Perhaps the problem is with my new blogger template..
Perhaps the code for that was deleted when I installed this new template
(since I didn't expand the widgets in Design Page)
So I configure the code for this template
(sorry for the creator of this template :( I've been changing some of your codes)

so if you have the same problem with mine.. here's the solution

     Go to your Dashboard > Designs > Edit HTML > Expand Widget

• if you want to put share buttons right after every titles..

• find this code
<div class='post-header-line-1'> or <div class='post-header-line-1'/>

• and paste the following code after it  
<div class='post-share-buttons'><b:include data='post' name='shareButtons'/> </div>

• else (if you want to put it at the bottom of every post)

• find this code <data: post.body/>

• and paste the following code after it <div class='post-share-buttons'>

                  <b:include data='post' name='shareButtons'/>                  </div>

• Hmm ..if you want another version of this share buttons.. use this code instead of the 3-liner code I placed above

<!-- AddToAny BEGIN --><br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171' height='16'/></a><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script><!-- AddToAny END --> 

(This code from above is from AddToAny

Note:

• I have used the blogger built in share buttons right after every title of my posts
• I have used the share buttons from AddToANy at the bottom of every posts I have

Sources:

• SoBlogger
• AddToAny

Share Buttons Configuration