Blogger Tips And Tricks 2012: Web Designing

Showing posts with label Web Designing. Show all posts

Releasing Facebook Template For Custom Tabs

5. Switch to the Source mode as indicated by the blue arrow in the image above. Paste the Code you copied from the notepad inside it.

6. Now switch to Editor and make the necessary editing easiliy like you normally do in any html editor.

7. After you are done with editing, hit the save settings button and then click your Tab to see it in action!

save settings

Final View:

Facebook template design

Copyright

All rights are strictly reserved by MBT Blog. You can not redistribute the templates without our permission. If you wish to share the tutorial or code with your readers then you may first contact us.

Premier Services

We also design templates and Icons at premier level. If you want a completely unique and new design for your business website then you may [a href="http://www.mybloggertricks.com/2009/03/contact-me.html" target="_blank"]contact us[/a] for details.

Source: http://www.mybloggertricks.com/2011/07/releasing-facebook-template-for-custom.html

Download Facebook Template Design For Custom Tabs

UPDATE:[a href="http://www.mybloggertricks.com/2011/07/download-facebook-template-design-for.html"] Facebook Template Custom Tab2[/a] now available.

Releasing yet another design template for Facebook Static IFRAME Custom Tabs. This new design includes one additional feature i.e. the Navigation menu. You can now add your most important links to the menu and if you wish you can even convert it into a drop down menu by reading our previous tutorials on [a href="http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html" target="_blank"]drop down menus[/a]. The coding is kept simple so that you may easily customize the colors and fonts styles and sizes. You will need to edit the template in the Editor mode and paste this new design template code inside the source page of your [a href="http://www.mybloggertricks.com/2011/07/create-design-custom-tabs-on-facebook.html" target="_blank"]woobox's HTML Editor[/a]. I will be here to help you out with any help if needed. The template is compatible with all major browsers.

[a name='more'][/a]

[a href="https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744?sk=app_182013565195418" rel="nofollow" target="_blank"]Live Demo[/a]

To use this template first you need to create a custom Facebook IFRAME tab by reading the tutorial below:

[a href="http://www.mybloggertricks.com/2011/07/create-custom-facebook-tab-with-custom.html" target="_blank"]Create Facebook TABS[/a]

Download Facebook Template

Kindly submit your Email ID below to receive tons of such design goodies for free straight in your inbox:

Check you inbox and activate your feeds. Once you have activated the feeds then kindly post the same ID in the comments box below with which you subscribed. We share resources with subscribers only to keep things clean.

Installation

Find all installation guide and help in this post:

[a href="http://www.mybloggertricks.com/2011/07/releasing-facebook-template-for-custom.html" target="_blank"]Installing IFRAME Templates[/a]

Customization

To edit the navigation menu Find this code,

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>

Replace the hash(#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc. with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,

<li><a href="#" ><span>Link</span></a></li>

Terms of Use

All MBT resources are copyrighted content and can not be redistributed without our permission.

Source: http://www.mybloggertricks.com/2011/07/download-facebook-template-design-for.html

Create & Design Custom Tabs on Facebook - Series Tutorial

Advantages of Woobox's Custom Facebook Page Tab App

Yes there will be no ads attached! No service links, banners, icons, no nothing.

I am sure with all these features anyone would enjoy creating a landing page for their website on Facebook. You can even create a complete website on Facebook with navigation and the only thing you would need is a free template design to help you to give a start to your imagination. Make sure you don't miss any part of the tutorial and subscribe now in oder to be informed via Email whenever a new tutorial part is published.

[a href="http://feedburner.google.com/fb/a/mailverify?uri=tntbystc" rel="nofollow" target="_blank"]Click here to receive Updates Via Email[/a]

Any Suggestion?

We would highly appreciate If you want to share any idea or suggest on any thing before we start the series guide. If you have any question in mind that is troubling you then feel free to start the warm tea discussion in the comments [a href="#comments" rel="nofollow"]below[/a]

Source: http://www.mybloggertricks.com/2011/07/create-design-custom-tabs-on-facebook.html

Blogger Draft's Updated Interface Now Available for All Users

Some Areas Still In Progress

There is a lot that you can explore for yourself. Just log into [a href="http://Draft.Blogger.com" target="_blank"]Draft.Blogger.com[/a] and take the fun ride.

What are your views on this?

I personally still use the full and polished version instead of the draft version. I am much comfortable with the old look and don't want it to change. What are your views on these latest design developments. Are you now more relaxed with the new options? Has it succeeded in saving your time?

If you wish to see a video for the features introduced in 2011 and how successful Blogger is today then watch this:

[a href="http://www.mybloggertricks.com/2011/03/amazing-google-blogger-features-look-in.html" target="_blank"]2011 Amazing Features![/a]

Source: http://www.mybloggertricks.com/2011/07/blogger-draft-updated-interface-now.html

10 Ways To Create Buttons With CSS

Customize The Button Styles

To change the look and feel of the buttons below then kindly make these changes:

Edit .MBT-Buttons To Change background, border and font colors in Active mode
Edit .MBT-Buttons:hover To Change background, border and font colors when a user hovers mouse cursor on the button
Edit .MBT-Buttons a To change the link color
Edit .MBT-Buttons a:hover To change the link color on mouse hover

You can use the [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html"]Color Generator Tool[/a] For changing colors. For any help if needed just post your query in the comments box. It would be no less than a pleasure to help you along.

CSS Code For Buttons

You can use the CSS buttons below for turning [a href="http://www.mybloggertricks.com/2009/08/releasing-gorgeous-mbt-social-media.html" target="_blank"]social network[/a] links, [a href="http://www.mybloggertricks.com/2009/09/attractive-read-more-button-images-for.html" target="_blank"]read more blog links[/a], RSS links, Profile Links, any link you want into a Button. Have Fun! :>

Button#1:

.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#E22400;
margin:5px 0;
float:left;
border:3px solid #E22400;

padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#E22400;
font:bold 11px sans-serif;
color:#ffffff;
}

.MBT-Buttons a {
color:#E22400;
text-decoration:none;
}

.MBT-Buttons a:hover {
text-decoration:none;
color:#fff;
}

Button#2:

CSS button

.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#25448B;
margin:5px 0;
float:left;
border-bottom:3px solid #25448B;
border-top:3px solid #25448B;

padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
border-bottom:3px dotted #25448B;
border-top:3px dotted #25448B;
}

.MBT-Buttons a {
color:#25448B;
text-decoration:none;
}

.MBT-Buttons a:hover {
text-decoration:none;
}

Button#3:

/*---------------- Rectangle left border-----------*/
.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;

border-right:2px solid #009999;
border-left:10px solid #009999;
border-bottom:2px solid #009999;
border-top:2px solid #009999;

padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons :hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;

border-right:2px dotted #009999;
border-left:10px solid #006B6B;
border-bottom:2px dotted #009999;
border-top:2px dotted #009999;
}

.MBT-Buttons a {
color:#009999;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#009999;
text-decoration:none;
}

Button#4:

/*-------------- Pink Left right -----------*/
.MBT-Buttons {
background:#fff;
text-align:right;
cursor:pointer;
color:#FE80DF;
margin:5px 0;
float:right;
border-right:2px solid #FE80DF;
border-left:2px solid #FE80DF;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC0099;
border-right:2px solid #CC0099;
border-left:2px solid #CC0099;
}
.MBT-Buttons a {
color:#FE80DF;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#CC0099;
text-decoration:none;
}

Button#5:

/*------------- Brown top Bottom----------*/
.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#B26B00;
margin:5px 0;
float:right;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#B26B00;
border-top:2px solid #B26B00;
border-bottom:2px solid #B26B00;
}
.MBT-Buttons a {
color:#B26B00;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#B26B00;
text-decoration:none;
}

Button#6:

/*-------------- Blue Blank-----------------*/

.MBT-Buttons{
background:#0080ff;
text-align:right;
cursor:pointer;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#0080ff;
text-decoration:none;
}

Button#7:

/*------------- Red + Dark Red------------*/

.MBT-Buttons{
background:#fffff;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFf;
font:bold 12px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.MBT-Buttons a {
color:#FE8080;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#FF0000;
text-decoration:none;
}

Button#8:

/*------------ White + Green -----------*/

.MBT-Buttons{
background:#fffff;
text-align:right;
cursor:pointer;
color:#008000;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#008000;
font:bold 11px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.MBT-Buttons a {
color:#008000;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#fff;
text-decoration:none;
}

Button#9:

/*---------- Black --------------*/
.MBT-Buttons{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#000800;
text-decoration:none;
}

Button#10:

/*----------Orange One 1 ----------------*/

.MBT-Buttons {
background:#EB7F17;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFB93C;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#fff;
text-decoration:none;
}

Source: http://www.mybloggertricks.com/2011/07/10-ways-to-create-buttons-with-css.html

Create a Drop Down Menu In Facebook Style With Rounded Borders

The [a href="http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html" target="_blank"]Drop Down Menu[/a] code that I provided earlier can be used as a structure to design any navigation menu you like. I have designed a drop down menu using Facebook as inspiration. You can fully customize this menu and can add colors and fonts of your preference too. The new thing about this menu is that it also contains a sub drop down menu and all menus have rounded borders. So now you organize your pages even more beautifully. I have made the installation even more easier. If you use the watermark template or any other Blogger Designer Template then you must read the post below after applying this tutorial,

[a name='more'][/a]

Adding Drop down menu to New [a href="http://www.mybloggertricks.com/2011/07/add-custom-drop-down-menu-to-templates.html" target="_blank"]Blogger Designer Templates[/a]

[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKvA_V6ch6ZT1VlYyFNUnD1gthEK3OMgNYwCrC4j-HHnaqYrOunMC0GtnhSoEuE-cEPdW8OhuRHMaj1eeSLy-ulbDZ3oSOdIPonXhXeSDM6IUZNeKxiC_KaHeCIUH9CBn58Gpwb6Zelrc/s1600-h/image%25255B11%25255D.png"] Facebook Drop down menu [/a]

[a href="http://zailab.blogspot.com/" rel="nofollow" target="_blank"]Live Demo[/a]

Adding The Drop Down Menu To Blogger

1. Go To Blogger > Design and select a HTML/JavaScript widget

2. Paste the following code inside it,

<style>
#mbtnavbar {
    background: #3B5998;
    width: 100%;

    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;

}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;

}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:bold 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 11px 12px;
        text-decoration: none;
        border-right:0px solid #627AAD;

}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 11px 12px;



}

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

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 1px 0 0 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;

-moz-border-radius:4px;
-webkit-border-radius:4px;


}
#mbtnav li li a:hover, #mbtnav li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;

}

#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {

    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
    margin: 1px 0 0 -14px;


}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
}

</style>
<div id='mbtnavbar'>
          <ul id='mbtnav'>
            <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>
                   <ul>
                    <li><a href='#'>Sub Sub Page #1</a></li>
                    <li><a href='#'>Sub Sub Page #2</a></li>
                    <li><a href='#'>Sub Sub Page #3</a></li>
                  </ul>
</li>
                  </ul>
            </li>

          </ul>
        </div>

The colors and font family and size can be changed in the same way as in the previous post. The only thing you need to understand is how to control the number of link lists. The code in purple is responsible for the appearance of the first drop down menu and the highlighted yellow code controls the sub drop down menus. If you wish to increase or decrease the number of tabs then simply add or remove a code like this,

<li>

<a href="#">Tab Name</a>

</li>

Where # should be replaced with Page Link and the corresponding text should be replaced with the Tab name.

I will creating more menus using the same HTML structure. The above code is created without using any Jquery, Images or scripts. It is pure CSS and html and it will help you [a href="http://www.mybloggertricks.com/2011/06/compress-css-and-html-to-reduce-site.html" target="_blank"]speed up your website[/a] load time too. Feel free to ask for any help if needed.

Source: http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-facebook-style.html

Blogger Tips And Tricks 2012