Tiny Music Player For Blogger

 

Why Mp3 Audio Players On Blogs?

Music, if properly suited to the situation can make a whole new experience, even from a normal situation. It can be a good idea to add simple music  controls to your blogs. But one should make sure that the music is not set to auto play as many might not want to listen it.
So no force playing. Let the controls be easily visible, like this simple (one buttons based mp3 player). Lets see what makes this tiny music player stand out.

Features of the Tiny Audio Player

The mp3 player is flash based, with simple code that wont make any considerable difference in your blog's load time. All you need to do is to set couple of options like auto play back, loop settings, buttons styling etc.
You could always choose from the 4 different buttons sizes and colors (white or black). In case you wish to upload your own button image, its possible too. So there are bunch of features that makes this mp3 audio player easy to use.

Add Tiny Mp3 Music Player To Your Blog

As you see in the image below, there are generally 5-6 options until we get our final code. Starting of with adding a mp3 audio file, then playing with options like  repeat, play pause, auto start etc, then finally using from buttons types.
When you're done, click generate code. Now copy the link on the box (right side) and Go to your Blogger Dashboard >> Design >> Add a Gadget >> HTML/JavaScript Gadget. Paste this code and click save.
Configure Your Mp3 Audio Player.

Hope you found this mp3 audio player useful. Just make sure that you don't put the player on auto play. That could irritate your visitors.

Read More ->>

Embed Free OutStanding Music Player To Your Blog - Dewplayer

Many people love to embed music players on their blogs, specially beginners. Indeed adding music to blogs is one of the highly searched queries on Google now days. There are various ways by which we can embed different music players on our Blogger blogs. The music player mentioned below is indeed on of my favorite and i love its clean look and easy installation method . And the best part is that they are free to use, but not for sale. So lets start out with our exciting list.

Dewplayer:

I love the clean look of the Dewplayer. The user can play the songs that are pre- added to the list by clicking the play button. The player comes in 5 different sizes and those are:

• Mini (160×20)
• Classic (200×20)
• Multi (240×20)
• Playlist (240×200)
• Bubble (250×65)

How To Install DewPlayer On Your Blog?

To use the player in your Blogger blogs, simply copy the HTML code below.

<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=Your File link.mp3" />
<param name="wmode" value="transparent" />
</object>

Now if you are using Blogger, you may go to Dashboard >> Design >> Add a Gadget >>HTML/JavaScript and paste the code within it. Finally click save and you're done.
Note that if you want to make a play list and get whole new exciting features, you have to go to DewPlayer site, where you can configure a right version for your blog. Simply use the options (playlist and bubble are advance versions, love them), and a final HTML will be ready to get copied. Then add it in the same way for the code mentioned above.
The code above is just for the test purpose. It might not suite your needs.

Read More ->>

Add nRelate Below Every Blogger Post Pages—Walk Through

 

Step 1: Register for nRelate Partner Login (Free)

Go to nRelate website and click Partner Login as shown in the picture below.

Step 2: Installation Time!

Now hover over Install button and click Blogger. A field would appear where you have to provide you blog link where you want to add nRelate widget. Then click submit.

1. Now click Advance version (to be able to edit the plugin later)
2. Now it would ask you whether you want to add it to your post pages only or on main blog page too. So people normally only use the related post widgets on post pages only, so thats recommended for you to do so as well.
Finally it would open up a widget called Add page element. There are 2 sections. Enlarge the section that says Edit Content as shown below.

You have to delete the code in orange as shown below.

<style type="text/css">@import url(http://static.nrelate.com/common_b/0.01.0/nrelate-panels-default.min.css);</style>
<div id='nrelate_related_placeholder'/></div>

So now your finaly code would be:

<style type="text/css">@import url(http://static.nrelate.com/common_b/0.01.0/nrelate-panels-default.min.css);</style></div>

Step 3: Save The Widget

Click Add Widget button and its all done. :) Hope that was easy to follow.

Customization Time! (Optional)

Now see, you can play with couple of settings from nRelate website. As you apply the change there, the plugin would automaticly be updated on your blog. For customization, go to Manage Tab button (after login) >> Blogger and follow up there. When you are done playing with the settings, dont forget to click save below the very page.
Enjoy the new great plugin guys.
Cheers..
NOTE: Do not copy the codes provided here in the posts as they are only for reference purpose to explain the process. Get the widget from the website as it would be used for future customizations.

Read More ->>

Create a Drop Down Menu In Blogger

---

Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work!

 

How To Create a Drop Down Menu?

A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:

1. Go To Blogger > Design > Page Elements
2. Select a HTML/JavaScript Widget just under the header and paste the following code inside it,

<div id='bcnavbar'>
      <ul id='bcnav'>
        <li>
          <a href='#'>Home</a>
</li>
        <li>
          <a href='#'>About</a>
</li>
        <li>
          <a href='#'>Contact</a>
</li>
  <li>
           <a href='#'>Sitemap</a>

<ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
</li>

      </ul>
    </div>

Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </li>

To add another tab just paste this code above </ul>

<li>
          <a href='#'>Tab Name</a>
</li>

    3.   Now Go to Design > Edit HTML

    4.   Backup your template and search for ,

]]></b:skin>

     3.   Just above it paste the code below,

/*----- BC Drop Down Menu ----*/

#bcnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;

}

#bcnav {
    margin: 0;
    padding: 0;
}
#bcnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bcnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#bcnav li a, #bcnav li a:link, #bcnav li a:visited {
    color: #FFF;
    display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;

}
#bcnav li a:hover, #bcnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}

#bcnav li {
    float: left;
    padding: 0;
}
#bcnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#bcnav li ul a {
    width: 140px;
}
#bcnav li ul ul {
    margin: -25px 0 0 161px;
}
#bcnav li:hover ul ul, #bcnav li:hover ul ul ul, #bcnav li.sfhover ul ul, #bcnav li.sfhover ul ul ul {
    left: -999em;
}
#bcnav li:hover ul, #bcnav li li:hover ul, #bcnav li li li:hover ul, #bcnav li.sfhover ul, #bcnav li li.sfhover ul, #bcnav li li li.sfhover ul {
    left: auto;
}
#bcnav li:hover, #bcnav li.sfhover {
    position: static;
}

#bcnav li li a, #bcnav li li a:link, #bcnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;

}
#bcnav li li a:hover, #bcnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Make these changes:

• Change #060505 to change background color of the Main menu
• Change  the yellow highlighted text to change font color, size and family
• Change #BF0100 to change the background of a tab on mouse hover
• Change #BF0100 to change the background color of the drop down menu
• Change #060505 to change the background color of drop down menu on mouse hover

      4.    Save your template and you are done!

Read More ->>

CSS3 Drop Down Menu - No Images and No Scripts!

 

Why Choose This Menu?

This Widget is Simple, Supercool And The Main Part is that It Doesn’t Needs Any jQuery or JavaScript. It uses no images at all and loads extremely fast. The previous CSS3 Menu that we shared made use of images and therefore took few seconds to load but this one is far ahead in quality load time. It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

Add it to Blogger

This Navigation Uses Css3 And Has A Smooth Scrolling Effect Which Makes It Unique And Special. Have Fun and Enjoy it By Adding In Your Blog.
To Enable This You Need To Do The Following :

1. Go To Blogger > Design
2. Click on "Add a Gadget"
3. Choose HTML/Javascript widget
4. Paste the following code inside it

<style>

/*------ CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)---------*/

#mbt-menu, #mbt-menu ul {

margin: 0;

padding: 0;

list-style: none;

}

#mbt-menu {

width: 960px;

margin: 60px auto;

border: 1px solid #222;

background-color: #111;

background-image: -moz-linear-gradient(#444, #111);

background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

background-image: -webkit-linear-gradient(#444, #111);

background-image: -o-linear-gradient(#444, #111);

background-image: -ms-linear-gradient(#444, #111);

background-image: linear-gradient(#444, #111);

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;

}

#mbt-menu:before,

#mbt-menu:after {

content: "";

display: table;

}

#mbt-menu:after {

clear: both;

}

#mbt-menu {

zoom:1;

}

#mbt-menu li {

float: left;

border-right: 1px solid #222;

-moz-box-shadow: 1px 0 0 #444;

-webkit-box-shadow: 1px 0 0 #444;

box-shadow: 1px 0 0 #444;

position: relative;

}

#mbt-menu a {

float: left;

padding: 12px 30px;

color: #999;

text-transform: uppercase;

font: bold 12px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#mbt-menu li:hover > a {

color: #fafafa;

}

*html #mbt-menu li a:hover { /* IE6 only */

color: #fafafa;

}

#mbt-menu ul {

margin: 20px 0 0 0;

_margin: 0; /*IE6 only*/

opacity: 0;

visibility: hidden;

position: absolute;

top: 38px;

left: 0;

z-index: 9999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 -1px rgba(255,255,255,.3);

-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-ms-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

#mbt-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#mbt-menu ul ul {

top: 0;

left: 150px;

margin: 0 0 0 20px;

_margin: 0; /*IE6 only*/

-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#mbt-menu ul li {

float: none;

display: block;

border: 0;

_line-height: 0; /*IE6 only*/

-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#mbt-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#mbt-menu ul a {

padding: 10px;

width: 130px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#mbt-menu ul a:hover {

background-color: #0186ba;

background-image: -moz-linear-gradient(#04acec, #0186ba);

background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background-image: -webkit-linear-gradient(#04acec, #0186ba);

background-image: -o-linear-gradient(#04acec, #0186ba);

background-image: -ms-linear-gradient(#04acec, #0186ba);

background-image: linear-gradient(#04acec, #0186ba);

}

#mbt-menu ul li:first-child > a {

-moz-border-radius: 3px 3px 0 0;

-webkit-border-radius: 3px 3px 0 0;

border-radius: 3px 3px 0 0;

}

#mbt-menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 40px;

top: -6px;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #444;

}

#mbt-menu ul ul li:first-child a:after {

left: -6px;

top: 50%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#mbt-menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#mbt-menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

#mbt-menu ul li:last-child > a {

-moz-border-radius: 0 0 3px 3px;

-webkit-border-radius: 0 0 3px 3px;

border-radius: 0 0 3px 3px;

}

</style>

<ul id="mbt-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

The widget is extremely easy to be edited. To change links title simply replaced the bolded text with your page titles and replace the hash sign (#) with respective links.

5. Click save and Done! :)

Read More ->>

14 Amazing Examples To Customize Blockquote Style In Blogger!

A block quote or block quotation is an extract in a written document, set off from the main text as a distinct. We all quote great authors but we all must present these great words in an extra ordinary way using a beautiful blockquote. We have created simple CSS codes for around 14 Blockquotes, which are outstanding in look and feel. These blockquotes will give you an idea on how to create your own customized blockquote for your blogs and web pages.

Have a Look at each one of them. Details of adding the blockquote to your blogs and websites are given in the implementation and customization section.

Blockquote With a Fancy Border and Owl Image

Blockquote Code:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYA4iRFgYUUnEVRpqE1RA6bEIiK2qWMEz9j3_LcA9QOrbKUxMIB6FCXjpu3qc0UehvjmPhghL2ZNF1VogUZ3D8pK2t7p7SQDNJkrnXu1ZucHwiStndohFNUzrKjuoAdIuSdKKkpMAw6aY/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote With a Purple Corner Label and Border At Bottom

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDB_pkYm8v2Fl3SGBVbKbR_GsEWUk30M26Iro1qlV5PICD8u0lj0plDODSOFsZUAWVjcFhheVcXj6ofVbLQrdR1xKnmA_W_iuqPv0xiJcoE_hOC1vD4_dlhvCHJlfJrgsswxLjk3DTgmo/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Jigsaw Blockquote With An Image At Right Corner

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjEok_BgWGCFPEFJ7IIJ_QRFCr3yOBZSirF4qGhyphenhyphengnswVe0emr5N2qL6LHVHq68CWubcTbOhYO8SDQfspCMfylvignMWN6P4mQgWB1lwlvyep56UMl9Lqr9f98NwUlDMextUfkdfSmVg/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquotes With Classic Left Borders

Blockquote Code:

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmi5em00QP9H7NcMYa-IhjPej2-TJNNsNw1tnEcmRGJL27gB4neNP2IY8PjMF-_mCqZeQhWUHbKCKLQglB9eWUCQJNSBwawpJ-kW9rMVvQjNYisPel5CM1si9nb8rRlpaMW8maoQMziU/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Blockquote Code:

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVhLbvJoUMeFNYD1ueJ6sVCQJ957EgriKQ5E28q6paotFUzxnX9BBOTGGHqOQbQeqivhhlGnL2h_qmn8kdpgCO0cOFif1oeLV_u_Jisu1GtQBp1TJO7fsVVTYOY3J5uvNvIR_MgOpEVZw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Blockquote With A Brown Corner Label

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGcPg5LZsYlp3lUTg7CSAz2fQaH6rtUGaJ29N0cpkHorv0hHc_KJTDYWJp_mVj7PFe0wssAGALQi67-6iuoeOwcl8Kb8xvPar0ocjKOVtOM1oo0yQ_Czw_hb41XaseSxPAXtL2_FX7dY/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquotes With Inverted Commas

Blockquote Code:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihH0CZkWyHhBZbON4Q8THMaupu9i59HkmZ5riCDb0N3o9hx44rJvQXKVVsecs6G0HyPeSlz-oZqlRkL8AJh5F2m4THrhOSW89N38ZXvSZ6l63IxvksQLiBbQi6PEcpOvmO8sAqAi4yqWU/s400/comma-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27BKzUVgSIispq2kHxh7WAYbFJ24v8QVS4bfYXE7Y0LDlEidJt58kWy1QcuFyx-02eso0SKZ6IXfb3Iqh6qvMooTNRC3qg2b7bnAJorDFiZfT5FnNaWkjJclIHrpCmb8S3tTImeR4OeY/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote Code:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6pHj8LjAcWOqwYJwY5p69jzlETweauUoom9nKHkpxBSx1OrppGNc_epttopyei-0zaXtN8xUW0ofRhNN4iQDDM2p89EuQiuYY_TZWIyfZv9qe9QC6F6JzzNA0x6AhHhgxUlGQo-JgCE/s400/comma1-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmiuFLqEuowNme7vTpzj_rpqBKx1CS22WYkhBBVcdX4UHLh3n6rLfRlzgW391coI5ipjyYr-6XYiCebIwlHoTW6u_dAZ8PhRTA7alKKfFhlykxJ6cNgwM-pkaOO4LvC09whUkk1VYQy4/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote Code:

.post blockquote {
  font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 25px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisHDt0po7jI3BQcBCCWs8QK-NMbickT0qoBFwxaIphqWN5ECylkxfKMIBfLTSxd1abV-QXYi1bDjWtuUd-18q45bEmQFRaLtjXByrlzaZI5fSjF9S_pjKp6TwkxjolD3q2OlnZdkWTul0/s400/left.gif) no-repeat top left;
  text-indent: 65px;
color:#6299E4;
  }
  .post blockquote div {
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswb7T0mpKov5hcddb5ed5A1DQuenlAQKHUsn54CFHK3g8u5YXwmdxX-KvXzOGvh1Gky6Irr-128b-JeGqN9GChm41wSpY190AvapznliaZ2jWsj_llkEcvfXLu3dY4vVsBeYE1LQnkl0/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote Code:

.post blockquote {
  font: italic 1em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DiZ3ftRVj96wAua2hGlgleJwwsQeZduF5WZCnk_-7wJyqSGJGIs1Ur8k8Wt2IqndroL87NTPIGZXlTBewpsprm7UturpH8zCiOrTn8DOZrmQYioe5fvxtLCahqg31LO8NTx5AG8CLM4/s400/comma2-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWAbrN8PedegSVh4M2O7MS_dL6ulc6JzERXhX8ko2yd-Czs9y48hiutOkcLeSGfMHFGkL84vkeyPIQukeWhnpqfrmQ-95hbzq2BEBlweepA5QL8u_6QgumWHXgZijvy_QjCsu66DzEY_4/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote With Well Aligned Image At Top

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj00no5LLoA69azR_rCXHcojR9V6QYH-d96WV6MgdhSgUEpFXzX9Dz_0F2KA7sVlSexmwfDCHoahw0O7basjWfnirGw6r1WBAD28yx9dYbjAwcxwjTqJskkOEH1ptRrENVDtVvlUvcE32s/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote With Canopy Style Image At Top and Bottom

Blockquote Code:

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Rs9Iewzg7iZVk5hgJoFjqBGAbbXKdB0k41rZ-pyD95pbMKZOatsVlted-d5r4dWmrSefov5rnmyOaK5MwoXIjOG8eXcW7SRyOAJmV2HUhzuErPQYbYyAvtDumiSzhIecd0Da85m6_NQ/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}

.post blockquote div{
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Way3ldt68262LCzKvvUP8ejIZvHFqXon2DrdeCQz0FuhPKhPd_dhOMcXjQGp8Caz1hcET8e-3qAkyczEgFL094HXgowQWxh5bgp_xFUMqjSTCIOHH61h9AMDWaZGcNRMqNhXBZ9-6ms/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Box Style Blockquote Surrounded By Borders

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9JGPNdkHS5nROiI8UdJpA4hzYvvkXJrDAplNOmqaeDv2To-ngLUCFZ8uXdR24gOnaSaZ1JnuYlDUJnO-wQ3JR9nCo2cgFPBcbLsB3EcGoz0Ik4D4U4Fc_em1tP22vj4EfEUhuPZpnSY/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

The Monkey Man Blockquote!!!

Once you get an idea on how to use these blockquotes then you can create artistic and some funny blockquotes like the one below,

Blockquote Code:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjas3SDaoDRzPJpLjF2_aG66163GZsVSA4W0tgr2-GpVTLtdRU9jfDEPUOz44snGvAY8HbtbqTwq0nkd1XGmbI7EYJqcKrljAoBOCcmuotSA8XBf-ttk3N1PFjBbU1_jO5u0FpitiwEPwg/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}

.post blockquote div{
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAH7vCv3keBYg7DjFzHooL2zQ2hyphenhyphenMPwu1N-8u0iSJOrac_B7TMVZMQHRI49gmRseqb5qseWAWPaEHBSx2eooCiWu9qKNp4CixrmbF9fWWC_dMwMSQN8OPeSmISEIKKyg30dKFbY3TCdWM/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding: 20px;
}

Implementation and Customization:-

Implementaion:-

Now To add One of these amazing and unique blockquotes to your blogs, do the following,

1. Go to Blogger > Layout > Edit HTML
2. Backup your template
3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,

   .post-body blockquote { line-height:1.3em; }
   OR
   .post blockquote{ bla bla bla}

   If you couldn’t find such code then it is OK.
4. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code for one of your favourite blockquotes. I am giving a sample code below

.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(Paste Image Link here) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border: 8px dotted #DAB547;

}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Customization:-

Important areas to be customized are bolded. Where,

• padding: It refers to the distance of the text from blockquote borders. Which goes in this order –> Top Right Bottom Left
  
• background :- This includes Blockquote background color and image used in it. The six digit value is the background color and image link is inserted in place of bolded text in this part-> url(Paste Image Link here)
• font :- It includes font style, size and type respectively. Match the colours with the code above for reference.
• color :- This refers to text colour. You can use a different font colour using our color chart
• border :- This refers to border width, style and colour respectively.
• All other blockquotes can be customized in similar way.

     5.      After customizing finally save your template and preview it to see the interesting new change.

Note:- For Blockquotes with inverted commas, canopy style and the Monkey Man, there is a little more coding required. Read below

Guide:- For above mentioned blockquotes you need to add some extra tags inside blogger editor as explained below,

Now Whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below,

<blockquote><div>Your Quote Will Be Here</div></blockquote>

Play With Each Blockquote Code!

To get more used to the codes above you need to play with some CSS using our HTML Editor.

Inside MBT HTML Editor paste the any of the blockquote codes above between <style> and</style>  and just below </style> paste this code,

<blockquote>Write Anything Here As a Text</blockquote>

For example for the Owl Blockquote paste the codes in this pattern,

<style>

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(file:///c:/Documents%20and%20Settings/mustafa.MYBLOGGERTRICKS/Desktop/blockquote/owl-icon-48.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

</style>

<blockquote>Write Anything Here As a Text</blockquote>

Read More ->>

VideoBlog

DEMO  |  DOWNLOAD

INSTALLING TUTORIAL

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below
<ul id='dmenu'>
<li class='cat-item'><a href='/'>home</a></li>
<li class='cat-item'><a href='#'>EDIT</a>
<ul class='children'>
<li class='cat-item'><a href='#'>EDIT</a></li>
<li class='cat-item'><a href='#'>EDIT</a></li>
<li class='cat-item'><a href='#'>EDIT</a></li>
</ul>
</li>
<li class='cat-item'><a href='/search/label/Blog?&amp;max-results=8'>Blog</a></li>
<li class='cat-item'><a href='/p/test-static-page.html'>Test Static Page</a></li>
</ul>
Pagination "show post number" default is "8". Always add "?&amp;max-results=8" after your category url.

# HOW TO POST
There are no posting rules, up to you want to use this template for blogging, images/videos gallery. Just post as usual, add images, add video, write articles, all you wish to post. To post a video, just copy and paste the embed code to your post editor. This template automatically create thumbnail for Youtube videos, support new and old embed code. Use "video width = 640px" to match with "post width".

*How to floating video if I want to use small video width?
General new Youtube embed code,
<iframe width="400" height="200" src="http://www.youtube.com/embed/xBzoBgfm55w" frameborder="0" allowfullscreen></iframe>
Floating code for left,
<iframe style="float:left;margin:0 10px 10px 0;" width="400" height="200" src="http://www.youtube.com/embed/xBzoBgfm55w" frameborder="0" allowfullscreen></iframe>
Floating code for right,
<iframe style="float:right;margin:0 0 10px 10px;" width="400" height="200" src="http://www.youtube.com/embed/xBzoBgfm55w" frameborder="0" allowfullscreen></iframe>
*Post Videos from another site (besides Youtube)
This template can't create automatic thumbnail for video besides Youtube. So, you need to upload image thumbnail for the video.
Always use use the image html code below to show thumbnail for video besides Youtube,
<img class="thumbvideo" src="YOUR-IMAGE-URL" />
class="thumbvideo" <- this is important
Example,
Video embed code from Metacafe,
<embed flashVars="playerVars=autoPlay=no" src="http://www.metacafe.com/fplayer/7361775/gigantic_rotating_cloud_vortex_meoter_or_ufo.swf" width="640"height="338" wmode="transparent" allowFullScreen="true" allowScriptAccess="always" name="Metacafe_7361775" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed><div style="font-size:12px;">
<a href="http://www.metacafe.com/watch/7361775/gigantic_rotating_cloud_vortex_meoter_or_ufo/">Gigantic Rotating Cloud Vortex! Meoter or UFO</a> - <a href="http://www.metacafe.com/">The top video clips of the week are here</a></div>
then you need to upload the image thumbnail for that video, copy the image url then paste to the image code like below.
<img class="thumbvideo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7NW-eBY-ptmCJbKNWIiR1eRrWuyJVJ9C4dJZjhw2KJrRkKheftwCcCQxi32t4-2hPCgB259HXHnFqc0lS3yGGSroptlIcnQmd_ztflRlP2Md6DAVRE-QJlsRQ6FE8b5hcSmmzbzCgWw/s400/metacafe1.JPG" />
Look like this,

#RECENT VIDEO BY CATEGORY UNDER POST
"Add a Gadget" -> "HTML/JavaScript"

Copy and paste the code below,
<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/YOURCATEGORYHERE?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Change "YOURCATEGORYHERE" with your own category/label.
#RELATED POSTS/VIDEO BY CATEGORY ON SIDEBAR AUTOMATIC SHOWN
*How to control the number of related posts to show?
Go to "Edit HTML" then search this code
var relmaxposts = 10;
var numchars = 80;
relmaxposts = 10; <- Number of posts to show
numchars = 80; <- Number of characters for summary
#POPULAR POSTS/VIDEO USE BLOGGER DEFAULT WIDGET

Read More ->>