RealcomBiz

Add CSS Speech Bubble To New Blogger Threaded Comments

This another great way of styling new blogger threaded comments with cool CSS speech bubble, in my previous post i have also discuss on how to customize blogger threaded comment with cool style and color in which they were customize using CSS.
The original version of the css code was built by paul crowe and fully customize by realcombiz, so in other for you to style your new blogger threaded comments with speech bubble, simply follow the few steps below.

How To Add The Speech Bubble To Threaded Comments

Go to your blogger dashboard
Click on "Design" > "Edit HTML" > back up your template
Use ctrl F to find ]]></b:skin> and paste the following code above/before it

/* Speech Bubble For Blogger Threaded Comments By www.realcombiz.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#ffffff !important;text-align:center;text-decoration:none;background:#bc0000;border:1px solid #bc0000;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#464444;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(http://3.bp.blogspot.com/-6ewJDBHiFmY/UBLHyrJJWtI/AAAAAAAAAy8/I5vw5-XSE_8/s1600/rb+arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* Speech Bubble For Blogger Threaded Comments By www.realcombiz.com */

To change the background color of the reply and delete buttons, simply edit #bc0000
Edit #464444 if you which to change the background color of the comments header
Click "SAVE TEMPLATE" when you are done with your editing.

That's all, share this article with friends/followers, and subscribe now for you to receive all our latest posts update directly into your email.

Create a Simple Drop Down Menu In Blogger Blog

Adding drop down menu to your blog is the best way to arrange your blog/site important links, it will helps your readers to easily navigate through your blog which will definitely increase your site page views and impression.
This drop down menu comprises of CSS and html and it doesn't affect your blog load time. In my previous post, i have discuss on some cool drop down menu like how to add CSS3 drop down menu, create awesome CSS3 drop down menu and there is still lot's more on the way.

How To Add The Drop Down Menu

STEP 1

Go to your blogger dashboard
Click on "Design" > "Edit HTML" back up your template
Use ctrl F to find ]]></b:skin> and paste the following code above/before it

/*----- Drop Down Menu BY www.realcombiz.com----*/

#rbnavbar {
    background: #2a2626;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #7f7777;
        height:35px;
}

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

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



}
#rbnav li {
    float: left;
    padding: 0;
}
#rbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#rbnav li ul a {
    width: 140px;
}
#rbnav li ul ul {
    margin: -25px 0 0 161px;
}
#rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul {
    left: -999em;
}
#rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul {
    left: auto;
}
#rbnav li:hover, #rbnav li.sfhover {
    position: static;
}
#rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited {
    background: #6c6464;
    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;

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

To change the color of your background menu, simply edit #2a2626
To change the background color of the menu on mouse hover, then edit #6c6464
To change the background color of the drop down menu, edit #6c6464
Click "SAVE TEMPLATE" when you are done with your editing

STEP 2

Now we are need to add the html code

Go to "Page Elements", click "Add a Gadget" below your header
Choose "HTML/JavaScript" from the list of the options and paste the following code in the content box leaving the title blank

<div id='rbnavbar'>
      <ul id='rbnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Contact</a>
       </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Blogging</a>
        </li>
<li>
           <a href='#'>Services</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>
                <li><a href='#'>Sub Page #4</a></li>
                <li><a href='#'>Sub Page #5</a></li>
              </ul>
        </li>
         <li>
          <a href='#'>Create This ></a>
        </li>
      </ul>
    </div>

Replace all occurrence of # with the link/url of each page you want to point the menu to
Replace all text highlighted in green with the title of each menu
Click "Save" and if you need any further help, please feel free to ask using the comment box, and we will get back to you asap.

Note: If you observed that your submenu (Sub Page) is hidden, kindly read this:

How to add drop down menu in new blogger template

Hope you enjoy this articles? take few seconds to share it and subscribe for our latest posts update.

Customize Blogger Threaded Comment With Cool Style And Color

By Durodola Ridwan | Tuesday, July 24, 2012 | Comments Tricks | CSS 14 Comments

This is another great way of styling default blogger comments with cool colors, and also including a ribbon to the authors header in other to distinguish between the author comments and the visitors comments, this tutorial am sharing with you is from paul crowe, and it was design using simple CSS.

Apply Threaded Comment With Cool Color

Go to your blogger dashboard
Click on "Design" > "Template Designer"
Scroll down and click on "Advances" > "Add CSS"
Copy and paste the code below in the CSS box

#comments{overflow:hidden}

#comments h4{display:inline;padding:10px;line-height:40px}

#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}

#comments h4,.comments .continue a{background:#d80556}

#comments h4,.comments .user a,.comments .continue a{font-size:16px}

#comments h4,.comments .continue a{font-weight:normal;color:#fff}

#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}

#comments .avatar-image-container img{border:0}

.comment-thread{color:#111}

.comment-thread a{color:#777}

.comment-thread ol{margin:0 0 20px}

.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}

.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}

.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}

.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}

.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://1.bp.blogspot.com/-EJmwh15Urmc/T89WMFenyGI/AAAAAAAAGlg/Lt8N7DprwFU/s320/author-pink.png);width:36px;height:36px}

.comments .comments-content .inline-thread{padding:0 0 0 20px}

.comments .comments-content .comment-replies{margin-top:0}

.comments .comment-content{padding:5px 0;line-height:1.4em}

.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}

.comments .comment-thread.inline-thread .comment{width:auto}

.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}

.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}

.comments .comment-thread.inline-thread .comment-block{margin-left:48px}

.comments .comment-thread.inline-thread .user a{font-size:13px}

.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}

.comments .continue{border-top:0;width:100%}

.comments .continue a{padding:10px 0;text-align:center}

.comment .continue{display:none}

#comment-editor{width:100%!important}

.comment-form{width:100%;max-width:100%}

Click "Apply to Blog" and view your blog to see the awesome changes

Customization

To change the of color of names and comments counter box, then replace #d80556 with your preferred hex color, check here for 100's of hex color.
To change the background of the ribbon, simply edit,

http://1.bp.blogspot.com/-EJmwh15Urmc/T89WMFenyGI/AAAAAAAAGlg/Lt8N7DprwFU/s320/author-pink.png

Replace it with either of the two options

For Green Ribbon

http://3.bp.blogspot.com/-U-Dv6Xse-VI/UA7g-c_PbhI/AAAAAAAAAxQ/al6quGVQhG4/s1600/rb+green+ribbon.gif

For Blue Ribbon

http://4.bp.blogspot.com/-Tnrzp5Dosro/UA7iLbGBF8I/AAAAAAAAAxY/2tFl_egIi2U/s1600/rb+blue+ribbon.gif

That's all, hope your enjoy this articles? take few seconds to share it and subscribe for you to get our posts update directly into your email.

Add Awesome CSS3 Drop Down Menu To Blogger Blog

By Durodola Ridwan | Sunday, July 22, 2012 | CSS 6 Comments

This drop down menu am sharing with you, is made of pure CSS and HTML, and why do you have to run after scripts like jquery when you can play around with CSS and HTML. In my previous post, i have discuss on how you can also add a cool CSS3 drop down menu which is also similar to this, they both consist of two structures, the CSS and the HTML part and it doesn't affect your blog load time.

Adding The Drop Down Menu

STEP 1

Go to your blogger dashboard
Click on "Design" > "Edit HTML" > back up your template
Use ctrl F to find ]]></b:skin> and paste the following code above it

/* CSS3 Drop Down Menu By RealcomBiz.com */

#nav {

 float: left;

 font: bold 12px Arial, Helvetica, Sans-serif;

 border: 1px solid #121314;

 border-top: 1px solid #2b2e30;

 overflow: hidden;

 width: 100%;

 background: #3C4042;

 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );

 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;

}

#nav ul {

 margin: 0;

 padding: 0;

 list-style: none;

}

#nav ul li {

 float: left;

}

#nav ul li a {

 float: left;

 color: #d4d4d4;

 padding: 10px 20px;

 text-decoration: none;

 background: #3C4042;

 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );

 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;

 border-left: 1px solid rgba(255, 255, 255, 0.05);

 border-right: 1px solid rgba(0,0,0,0.2);

 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);

}

/* CSS3 Drop Down Menu By RealcomBiz.com */

#nav ul li a:hover,

#nav ul li:hover > a {

 color: #252525;

 background: #3C4042;

 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );

 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover, 

#nav ul li li:hover > a {

 color: #2c2c2c;

 background: #5C9ACD;

 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );

 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );

 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );

 border-bottom: 1px solid rgba(0,0,0,0.6);

 border-top: 1px solid #7BAED9;

 text-shadow: 0 1px rgba(255, 255, 255, 0.3);

}

/* CSS3 Drop Down Menu By RealcomBiz.com */

#nav li ul {

 background: #3C4042;

 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );

 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

 left: -999em;

 margin: 35px 0 0;

 position: absolute;

 width: 160px;

 z-index: 9999;

 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

 border: 1px solid rgba(0, 0, 0, 0.5);

}

#nav li:hover ul {

 left: auto;

}

#nav li ul a {

 background: none;

 border: 0 none;

 margin-right: 0;

 width: 120px;

 box-shadow: none;

 -moz-box-shadow: none;

 -webkit-box-shadow: none;

 border-bottom: 1px solid transparent;

 border-top: 1px solid transparent;

}

.nav ul li ul {

    position: absolute;

    left: 0;

    display: none;

    visibility: hidden;

}

.nav ul li ul li {

    display: list-item;

    float: none;

}

.nav ul li ul li ul {

    top: 0;

}

.nav ul li ul li a {

    font: normal 13px Verdana;

    width: 160px;

    padding: 5px;

    margin: 0;

    border-top-width: 0;

    border-bottom: 1px solid gray;

}

#nav li li ul {

 margin: -1px 0 0 160px;

 visibility: hidden;

}

#nav li li:hover ul {

 visibility: visible;

}

/* CSS3 Drop Down Menu By RealcomBiz.com */

Click "SAVE TEMPLATE"

STEP 2

Now you will need to add the html code

Click on "Page elements" > "Add a Gadget"
Choose "HTML/JavaScript" and copy the code below in the content box, leaving the title blank.

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Services</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>
   <li><a href="#">Sub Page #4</a></li>
   <li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Create This</a></li>
</ul>
</div>

Replace # with the url on your menu
Replace all the word highlighted in green with your menu title

Note: If you are using the new blogger template, you may encounter some problem with the structure of the menu, so read how to drop down menu in new blogger template.

That's all, if you need any further help, feel free to ask through the comment box, and don't forget subscribe for our latest posts update and share this with friends/followers. bye for now

Add CSS3 Drop Down Menu To Blogger

By Durodola Ridwan | Saturday, July 21, 2012 | Blogger tips | CSS 4 Comments

Ever since The World Wide Web Consortium (W3C) introduce HTML5 and CSS3, the online web tools have took a great new shape, In this tutorial am sharing with you, you are going to learn how you can add a pure CSS drop down menu to your blog with no jQuery effect, and it is of two structures, the html and CSS part. We have created this widget with our possible best, so that the implementation will be so easy for you to understand, and we will be publishing lot's of tutorials about CSS and html structure, so that you will be able to create awesome menus with ease.

How To Add Drop Down Menu

Go to your blogger dashboard
Click on "Design" > "Page elements" > "Add a Gadget"
Copy and paste the code below in the content box leaving the title blank

</ul>

</li>
<li><a href="#">Templates</a>
<ul>

</ul>
</li>
<li><a href="http://www.realcombiz.com/">Create This >></a></li>
</ul>
</div>

Replace # with the url/link of where you want to point the menu to, and replace all sub page with your menu title.
If you look at the code above carefully, you will notice that this is the code that responsible for the drop down effect, and if you which to remove drop down effect from any of the two menu, then omit the code below for it's tag.

  <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>

   <li><a href="#">Sub page #4</a></li>

  </ul>

If you encounter any problem, may the structure of the navigation bar look scattered, then read how to add drop down in new blogger template and feel free to ask, if you need any further help, and be expecting more of our stylish drop down menu, take care of yourself till then.

How To Add Drop Down Menu In New Blogger Template

By Durodola Ridwan | Saturday, July 21, 2012 | Blogger tips | Blogger Widgets 6 Comments

Template editing have been so much difficult ever since blogger introduce new blogger template designer, especially picture window template and watermark, which have cause a great headache for most blogger newbies.
In my next post i will be publishing how you can add a drop down menu to your blog, and i know most newbies are going to experience a little difficulties in implement the code, so i think i have to share this with you before releasing my awesome drop down menu widget.

How To Add Drop Down Menu To New Blogger Template

Go to your blogger dashboard
Click on "Design" > Edit HTML" > back up your template
Now find your tab/menu tag code, it will look very similar to the code below, you can scroll through your template until you find it

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);

margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

Remove the comment quote (*/) from the top and add it the bottom of your tab tag like the example below.

/* Tabs
-----------------------------------------------
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);

margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

*/

Click "SAVE TEMPLATE" and that's all. you can reverse the case anytime.

Now you can add any drop down menu to your navigation bar without any difficulties.Hope this tricks help? take few seconds to share and subscribe to receive our free posts update into your email.

Add Drop Shadow Effect To Pictures/Images Online - 3 Ways

By Durodola Ridwan | Friday, July 20, 2012 | Blogger tips Be the first to comment!

There is a lot of site that offer tools to add a drop shadow effect to image, but am going to share with you three site where you can easily add a drop shadow effect to your pictures without using any software.
Compare the difference between the two image below, before and after shadow effect was added.

Original Image

Image Result

Site That Offer Drop Shadow Effect Tool

1. Lunapic

This is an online tool that offer a lot of effect which can apply to images, all you just need to do is to upload your image and give it any effect you like from their tool bar. you can upload image from facebook, pisaca, flickr, photobucket, and also directly from your computer, and the maximum image size supported is 50000Kb (50Mb) To add a drop shadow effect to your picture, simply upload your image and click on "Draw" from the toolbar, choose "Add DropShadow" and download your new edited image.

2. Pic Shadow

Pic shadow perform a single function, just upload your image and it will automatically add a shadow effect to your image, and the maximum image size supported is 2000Kb (2Mb). But there are some cases you don't need to use this if you have photoshop, because it already have built-in tool which you can use to add a drop shadow effect to your pictures, but if you are looking for something faster and easier, then consider using this.

3. DropShadowz

DropShadowz perform almost the same function with pic shadow, but the difference between the two is that, you can switch from one effect to the other on dropshadowz, but on pic shadow, you can only perform one action. it support jpg, gif, png format and the maximum image size you can upload is 300Kb.

That's all, you can bookmark those site for easy usage. keep uploading and enjoy more of drop shadows effect.

How To Submit Your Blog/Site URL To DMOZ (ODP)

By Durodola Ridwan | Friday, July 20, 2012 | Blogger tips | SEO Tips Be the first to comment!

DMOZ is an open directory project (ODP), this directory services for some other search engine and portals like Google, HotBot, AOL search, lycos and lot's more. you can also find RealcomBiz on DMOZ, which is file under Computer > Internet > On the Web > Weblogs > FAQs, Helps and Tutorials category. before your site can be listed under DMOZ directory, it may takes several months because any url/link from DMOZ are considered to be trustworthy site and DMOZ will have to do a thorough research about your link before getting it listed in there directory.

How To Submit Your URL To DMOZ

Go to www.dmoz.com and choose from the list of categories where you want to want to add your site url
When getting to the final stage of categories click on "Suggest URL" link at the top right corner of your screen
Enter your blog/site url, title, description and email address in the next page

Enter the captcha, read the submission agreement and click "Submit" and note that you may have to wait for a long while before your site can be listed in DMOZ directory.

Similar Articles

That's all, share with friends/followers and take care of yourself.

How To Change/Replace Blogger Header With Background Image

By Durodola Ridwan | Wednesday, July 18, 2012 | Blogger tips 1 Comment

This is the easy way to add a background image to your blogger header and exclude/hide the title from overlapping on your image, if you are using a picture window template read how to replace blogger header with image in picture window template because the header tag in picture window template is a bit different from others.

How To Replace Blogger Header With Image

Go to your blogger dashboard
Click on "Design" > "Edit HTML" > back up your template
Use ctrl F to find header-wrapper tag, it will look like the code below

#header-wrapper {width:600px;margin:0 auto 10px;border:1px solid $bordercolor;}

The width of your blog may differs from width:600px;

Now to prevent your blog title from overlapping on your image simply add display:none; behind the close bracket of the code above as shown below

#header-wrapper {width:600px;margin:0 auto 10px;border:1px solid $bordercolor;display:none;}

Now, to replace your header with image, find the code below

Paste the following code after the code above

Replace ENTER YOUR BLOG URL with your blog url/link
Replace ENTER YOUR IMAGE URL with the url of the image you want to use in place of the header, read how to host image on blogspot if you don't know how to get the direct url of your image
Preview your changes if there is anything you need to adjust, and click "SAVE TEMPLATE" when you are done with your editing.

That's all, share this post with friends/followers and subscribe to this blog now, for you to receive all our latest post update directly into your email.

Add Facebook Slide/Pop Out Like Box Widget With jQuery Effect To Your Blog

By Durodola Ridwan | Wednesday, July 18, 2012 | Blogger Widgets | Facebook | jQuery 3 Comments

Here is another stylish facebook like box, this widget is design in three awesome style and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect that i included.
In my previous post, i have discuss a lot of tutorials similar to this, like how to add facebook, twitter, google plus, youtube, rss slide out widget which is very similar to this, but the difference is that, this is a single widget, how to add facebook like box to your blog and how to add facebook like box below blog post, and you should expecting more of this. For you to add this great widget to your blog, simply follow the few steps below.

How To Add The Widget To Your Blog/Site

STEP 1

If you have already add jquery plugin to your blog, then skip the step.

Go to your blogger dashboard
Click on "Design" > "Edit HTML"
Use ctrl to find <head> and paste the following code inside/after <head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Click "SAVE TEMPLATE"

STEP 2

Go to "Design" > "Page elements" > "Add a Gadget"
Choose "HTML/JavaScript" from the list of the gadgets and paste the code below in the content box leaving the title blank.

<script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("IMAGE URL") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/realcombiz&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div><a href='http://realcombiz.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a></div>

Replace realcombiz with your facebook fan page username
Choose from any of the three style and replace IMAGE URL with the image url of the style you choose

STYLE 1

IMAGE 1 URL

http://2.bp.blogspot.com/-sUi5BzxxhmI/UAbKrgxWIII/AAAAAAAAAsA/CTAQ6r-JPm0/s1600/rb+facebook+slide+out+widget.png

STYLE 2

IMAGE 2 URL

http://3.bp.blogspot.com/-k9RUTV7I8eY/UAcEDe8OR1I/AAAAAAAAAsg/17rdoNl6umQ/s1600/rb+facebook+slide+out+widget+2.png

STYLE 3

IMAGE 3 URL

http://3.bp.blogspot.com/-ZGcQ6L_X0Nc/UAcGpOubXnI/AAAAAAAAAss/vdLAH1GoPwQ/s1600/rb+facebook+slide+out+widget+3.png

Click "Save" and you are done, check your blog to see the awesome sliding widget.

Hope you enjoy this post? take few seconds to share it with friends/followers. In my future post i will publishing a lot of tutorial on how you can spice up your blog with jQuery effect, and for you not to miss any of this, simply subscribe to this blog now, and receive all out latest posts update directly into your email.

How To Replace Blogger Header With Image In Picture Window Template

By Durodola Ridwan | Wednesday, July 18, 2012 | Blogger tips 16 Comments

This tutorial will help you on how you can replace your blogger header with a background image in picture window template, most bloggers find it difficult to do this because the process involve in replacing the header with image in window template is quite different from some other template.
If you upload the image background from the page elements, you will notice that it will affect your mobile template, except you add the header tag code to your template html and exclude the title and description to avoid overlapping of the background image and title.

How to Change Your Blogger Header

Login to your blogger dashboard
Click on "Design" > "Edit HTML" > back up your template
Use ctrl F to find the code below

.Header h1 {
font: $(header.font);

Replace it with the code below

.Header h1 {display:none;}
font: $(header.font);

Now search for the following code

/* Header
----------------------------------------------- */

Copy and paste the following code below the code above

#header { width:600px; height:100px; margin:0 auto 10px; background: #fff url(BACKGROUND IMAGE URL) no-repeat top right; }

After placement of code in the second search, your final result should look like the image below

Replace BACKGROUND IMAGE URL with the url/link of your background/header image, if you don't know where to host your image, you may read how to host image on blogspot
Edit width:600px; and height:100px; to adjust your background image size until it best suit your header size and make sure you preview your changes before you finally click "SAVE TEMPLATE"

Hope this tricks helps? Take few seconds to share it and subcribe to this blog now, and receive all our latest posts directly into your email. Stay bless