Show a Message To User By Clicking on Button

When We Click on any button in some PRO website's OR in PRO blogs we show the Pop-Up message with some kind of message for user which gives some instruction about the website OR blog OR about the special notifications for user.

What is This....?

If you want to show the visitor a message when he or she clicks on a button or a link you would maybe want to try this code.

Live Demo

Click Here

Codes

• Copy below codes
• Paste where you want to show

<style>
/*--- Message To User By Click On Button By www.fblatest.in --- */

.btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
/*--- Message To User By Click On Button By www.fblatest.in --- */
</style>

<!-- This Script by www.fblatest.in, Coded By: Krishna | Designing By: Hemant Verma-->

<!-- Start of Message Alert -->
<!-- Use this button in a form to pop-up a message when the user clicks it -->
<center>
<form>
<input type="button" value="Message" class="btnLogin" onClick="alert('Write Your Message Here'); return true">
</form>
</center>
<!-- End of Message Alert -->

Make Changes....!

• Replace Message it with your button name.
• Replace Write Your Message Here it with your message

Enjoy and Have Fun With Your Messages

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Add Google's Official Translator Widget

Google always provides us new kind of services and new kinds of plugins for our website and blogs. As we previously use the Flag Translating Widget for Blogger. Now we can use this Google's New Service named as Website Translator. This is very important and updated version of Google Translating Widget for Website and Blog's and we it's very easy and simple.

Google Says....!

Since we first launched the Website Translator plugin back in September 2009, more than a million websites have added the plugin. While we’ve kept improving our machine translation system since then, we may not reach perfection until someone invents full-blown Artificial Intelligence. In other words, you’ll still sometimes run into translations we didn’t get quite right.

Add Google's Official Translator Widget

• Go to Google's Website Translator Page
• Click on Add to Your Website Now

 

• Enter Your Website OR Blog's URL

  

•  Click on Next
• Choose Display mode as Horizontal, Vertical OR Dropdown Only.

• Click on Get Code
• Now Copy the meta code and paste that code before </head> 
• Save Your Template.
• Copy Next Code and paste where you want to show your Translate Widget.

Output Looks Like This....!

• Select text and Output look like this.

Enjoy Your Translate Widget 

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Student Registration Form in HTML CSS For Project

A simple and professional Student Registration Form which is create in HTML and CSS and which has a very professional look and very easily create with using HTML and designed by the CSS language.

Codes for S.R.F

<html>
<head>
<title>Student Registration Form</title>
<style type="text/css">
h3{font-family: Calibri;
font-size: 22pt;
font-style: normal;
font-weight: bold; 
color:SlateBlue;
text-align: center; 
text-decoration: underline }
table{
font-family: Calibri; 
color:white; 
font-size: 11pt; 
font-style: normal;
text-align:; background-color: #eff3f6; 
color: #000; border-collapse: collapse; 
border: 2px solid navy}
table.inner{border: 0px}

.btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, 
    center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px; 
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, 
    rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, 
    rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, 
    rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
 padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
 background:#a1d8f0;
 background:-moz-linear-gradient(top, #7acbed, #badff3);
 background:-webkit-gradient(linear, center top, center bottom, 
 from(#7acbed), to(#badff3));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; 
}

</style>
</head>

<body>
<h3>STUDENT REGISTRATION FORM</h3>
<form action="form.php" method="POST">
  
<table align="center" cellpadding = "10">
 <!----- First Name ------------------->
<td>FIRST NAME</td>
<td><input type="text" name="First_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
 </tr>
  
 <!----- Last Name -------------------->
 <tr>
 <td>LAST NAME</td>
 <td><input type="text" name="Last_Name" 
             maxlength="30"/>
 (max 30 characters a-z and A-Z)
 </td>
 </tr>
  
 <!----- Date Of Birth ----------------->
 <tr>
 <td>DATE OF BIRTH</td>
  
 <td>
 <select name="Birthday_day" id="Birthday_Day">
 <option value="-1">Day:</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
  
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
  
 <option value="13">13</option>
<option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
<option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
  
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
<option value="26">26</option>
 <option value="27">27</option>
 <option value="28">28</option>
 <option value="29">29</option>
 <option value="30">30</option>
  
 <option value="31">31</option>
 </select>
  
 <select id="Birthday_Month" name="Birthday_Month">
 <option value="-1">Month:</option>
 <option value="January">Jan</option>
 <option value="February">Feb</option>
 <option value="March">Mar</option>
 <option value="April">Apr</option>
 <option value="May">May</option>
 <option value="June">Jun</option>
 <option value="July">Jul</option>
 <option value="August">Aug</option>
 <option value="September">Sep</option>
 <option value="October">Oct</option>
 <option value="November">Nov</option>
 <option value="December">Dec</option>
 </select>
  
 <select name="Birthday_Year" id="Birthday_Year">
  
 <option value="-1">Year:</option>
 <option value="2012">2012</option>
 <option value="2011">2011</option>
 <option value="2010">2010</option>
 <option value="2009">2009</option>
 <option value="2008">2008</option>
 <option value="2007">2007</option>
 <option value="2006">2006</option>
 <option value="2005">2005</option>
 <option value="2004">2004</option>
 <option value="2003">2003</option>
 <option value="2002">2002</option>
 <option value="2001">2001</option>
 <option value="2000">2000</option>
  
 <option value="1999">1999</option>
 <option value="1998">1998</option>
 <option value="1997">1997</option>
 <option value="1996">1996</option>
 <option value="1995">1995</option>
 <option value="1994">1994</option>
 <option value="1993">1993</option>
 <option value="1992">1992</option>
 <option value="1991">1991</option>
 <option value="1990">1990</option>
  
 <option value="1989">1989</option>
 <option value="1988">1988</option>
 <option value="1987">1987</option>
 <option value="1986">1986</option>
 <option value="1985">1985</option>
 <option value="1984">1984</option>
 <option value="1983">1983</option>
 <option value="1982">1982</option>
 <option value="1981">1981</option>
 <option value="1980">1980</option>
 </select>
 </td>
 </tr>
  
 <!----- Email Id -------------->
 <tr>
 <td>EMAIL ID</td>
 <td><input type="text" name="Email_Id" maxlength="100" />
        </td>
 </tr>
  
 <!----- Mobile Number --------->
 <tr>
 <td>MOBILE NUMBER</td>
 <td>
 <input type="text" name="Mobile_Number" maxlength="10" />
 (10 digit number)
 </td>
 </tr>
  
 <!----- Gender ---------------->
 <tr>
 <td>GENDER</td>
 <td>
 Male <input type="radio" name="Gender" value="Male" />
 Female <input type="radio" name="Gender" value="Female" />
 </td>
 </tr>
  
 <!----- Address -------------->
 <tr>
 <td>ADDRESS <br /><br /><br /></td>
 <td><textarea name="Address" rows="4" cols="30">
        </textarea></td>
 </tr>
  
 <!----- City ----------------->
 <tr>
 <td>CITY</td>
 <td><input type="text" name="City" maxlength="30" />
 (max 30 characters a-z and A-Z)
 </td>
 </tr>
  
 <!----- Pin Code ------------->
 <tr>
 <td>PIN CODE</td>
 <td><input type="text" name="Pin_Code" maxlength="6" />
 (6 digit number)
 </td>
 </tr>
  
 <!----- State --------------->
 <tr>
 <td>STATE</td>
 <td><input type="text" name="State" maxlength="30" />
 (max 30 characters a-z and A-Z)
 </td>
 </tr>
  
 <!----- Country ------------->
 <tr>
 <td>COUNTRY</td>
 <td><input type="text" name="Country" value="India" 
             readonly="readonly" /></td>
 </tr>
  
 <!----- Hobbies ------------->
  
 <tr>
 <td>HOBBIES <br /><br /><br /></td>
  
 <td>
 Drawing
 <input type="checkbox" name="Hobby_Drawing" value="Drawing" />
 Singing
 <input type="checkbox" name="Hobby_Singing" value="Singing" />
 Dancing
 <input type="checkbox" name="Hobby_Dancing" value="Dancing" />
 Sketching
 <input type="checkbox" name="Hobby_Cooking" value="Cooking" />
 <br />
 Others
 <input type="checkbox" name="Hobby_Other" value="Other">
 <input type="text" name="Other_Hobby" maxlength="30" />
 </td>
 </tr>
  
 <!----- Qualification---------->
 <tr>
 <td>QUALIFICATION <br /><br /><br /><br />
       <br /><br /><br /></td>
  
<td>
 <table class="inner">
  
 <tr>
 <td align="center"><b>Sl.No.</b></td>
 <td align="center"><b>Examination</b></td>
 <td align="center"><b>Board</b></td>
 <td align="center"><b>Percentage</b></td>
 <td align="center"><b>Year of Passing</b></td>
 </tr>
  
 <tr>
 <td>1</td>
 <td>Class X</td>
 <td><input type="text" name="ClassX_Board" 
             maxlength="30" /></td>
 <td><input type="text" name="ClassX_Percentage" 
             maxlength="30" /></td>
 <td><input type="text" name="ClassX_YrOfPassing" 
             maxlength="30" /></td>
 </tr>
  
 <tr>
 <td>2</td>
 <td>Class XII</td>
 <td><input type="text" name="ClassXII_Board" 
             maxlength="30" /></td>
 <td><input type="text" name="ClassXII_Percentage" 
             maxlength="30" /></td>
 <td><input type="text" name="ClassXII_YrOfPassing" 
             maxlength="30" /></td>
 </tr>
  
 <tr>
<td>3</td>
 <td>Graduation</td>
 <td><input type="text" name="Graduation_Board" 
             maxlength="30" /></td>
 <td><input type="text" name="Graduation_Percentage" 
             maxlength="30" /></td>
        <td><input type="text" name="Graduation_YrOfPassing" 
             maxlength="30" /></td>
 </tr>
 <tr>
 <td>4</td>
 <td>Masters</td>
 <td><input type="text" name="Masters_Board" 
             maxlength="30" /></td>
 <td><input type="text" name="Masters_Percentage" 
             maxlength="30" /></td>
 <td><input type="text" name="Masters_YrOfPassing" 
             maxlength="30" /></td>
 </tr>

  
 <tr>
 <td></td>
 <td></td>
 <td align="center">(10 char max)</td>
 <td align="center">(upto 2 decimal)</td>
 </tr>
 </table>
  
 </td>
 </tr>
  
 <!----- Course ------------->
 <tr>
 <td>COURSES<br />APPLIED FOR</td>
 <td>
 BCA
 <input type="radio" name="Course_BCA" value="BCA">
 B.Com
 <input type="radio" name="Course_BCom" value="B.Com">
 B.Sc
 <input type="radio" name="Course_BSc" value="B.Sc">
 B.A
 <input type="radio" name="Course_BA" value="B.A">
 </td>
 </tr>
  
 <!----- Submit and Reset ------>
 <tr>
 <td colspan="2" align="center">
<input type="submit" class="btnLogin" value="Submit" 
 tabindex="4">
<input type="submit" class="btnLogin" value="Reset" 
 tabindex="4">
 </td>
 </tr>
 </table>
  
 </form>
  
 </body>
 </html>

Make Changes....!

•  Replace with your own form action <form action="form.php" method="POST">

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Blogger Dynamic Page Loading Effect

Many websites like Facebook, Google, Blogger having their own loading effect, when we visit on site and site take some loading time and in that time shows the loading effects on the all sites, you can also add a diffrenet and PRO loading effect like Blogger Dynamic Loading Effect with a bar.

Add Blogger Dynamic Page Loading Effect

• Login to Blogger > Dashboard 
• Go to Design > Edit HTML
• Search for

</head>

• Paste below code above </head>

<style>
/*  Blogger Dynamic Style Page Loading Effect By www.fblatest.in */
#fb-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJ213Jl0TONL-GO09tFjdv9qsoaMG2BCJoAelsS08cgRIWCRRMA2T-wi8__e28rUNE-wWSZqBwZ_5nLSKM0QMCC_jtd_uo4QE6LlJZVWnZoUsIWR-DmdiffrsM_YNXQu_WXf4al7QnlWu/s1600/index.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.FB #fb-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#fb-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #FF6600;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#fb-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("FB");


$("#header").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#fb-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#fb-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

• Now Search for

<body>

• Paste below code after <body>

<div id='fb-loading'><div id='fb-progress-bar'></div><div id='fb-loader'>Loading...</div></div>

• Save Your Template

If Any Problem, Ask In Comment 

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Make Your Image Hover with Sliding Panel

When we add any image to blogger it seems like very simple and many times we saw that some professional blogs OR websites use CSS in their images, so that they look better and rich type content in the blogs. In this effect we add CSS in images and that seems like very rich and they comes with the sliding panel on mouse hover with image description. You can easily add the links in the sliding panel as you see in the image and it will give a professional look to your blog.

1. Add Widget to Blogger

• Login to Blogger > Dashboard
• Go to Design > Edit HTML
• Search for 

<head>

• Paste below code after <head>

<link type="text/css" href="https://dl.dropbox.com/u/63968842/Slidingpanelwithmousehover%28www.fblatest.in%29.css" rel="stylesheet" />

• Now Save Your Template.

2. Image Adding Part in the Post

• Now Go to posting area > Edit HTML
• Paste below code in it.

<div class="imagepluscontainer" style="width: 263px; height: 199px; z-index: 2;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT9lLZvYdNuaTU8uZIw_-mABG3mOv4IEGYOCzQBY3r7gGBWCwlEmABwCpjjfE-CtvJbcpx7PJXS_OVmV5g4ECEAhmWvRH4Gcb39m-N4Mupex3B37wyk091MbuQHObD4IAzHoRgxcG6tvs/s1600/stadium.png">
<div class="desc">
Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>  

Make Changes....!

• Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT9lLZvYdNuaTU8uZIw_-mABG3mOv4IEGYOCzQBY3r7gGBWCwlEmABwCpjjfE-CtvJbcpx7PJXS_OVmV5g4ECEAhmWvRH4Gcb39m-N4Mupex3B37wyk091MbuQHObD4IAzHoRgxcG6tvs/s1600/stadium.png this link with your own image link.
• Adjust the width and height according to your choice from here width: 263px; height: 199px
• Replace the description about image from here Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions. according to your description.
• If you want that sliding panel comes upper side of image then after <div class="desc"> add upslide word with a space like this ===>> <div class="desc upslide">
• If you want that sliding panel comes from right side then add rightslide 
• If you want that sliding panel comes from left side then add   leftslide

If Any Problem Comes, Ask in Comments

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Blackino Pro Blockquote for HTML, CSS Codes

As last we introduced you highly customize blockquote OR HTML CSS and Other Coding Background for blogger. Similarly today we are very happy to introduce you the very highly customized blockquote named Blackino Blockquote. It Looks like this below

Blackino Pro Blockquote

• Login to Blogger > Dashboard
• Go to Posting > Edit HTML 
• Paste below code in it.

<blockquote style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsPFpAd7ry3sj7b7xw8tMX_UAPa4rlEHbku1HGjKg0CWw5lXUIX7scy3Inzm7rFHg-ZHDVIIEZ2_alPJUxQeuazVKoSAjESaBlewRM90HP3u8jtDZgpq2Ze1BnFYt7ye9aG_2sEJHojOn/s320/blockquote+black.jpg); background-origin: initial; background-repeat: repeat repeat; border-bottom-left-radius: 6px 6px; border-bottom-right-radius: 6px 6px; border-left-color: rgb(153, 0, 0); border-left-style: solid; border-left-width: 4px; border-top-left-radius: 6px 6px; border-top-right-radius: 6px 6px; color: #dddddd; font-size: 15px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; outline-color: initial; outline-style: none; outline-width: medium; padding-bottom: 0px; padding-left: 15px; padding-right: 20px; padding-top: 0px;">


<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><i><b>Write Your Codes OR Text Here</b></i></span></blockquote>

• Now click on compose button of posting area.
• You will see a output like below.

 

• Replace this Write Your Codes OR Text Here with backspace of your keyboard and add your own Codes OR text.
• You are done.

How could We Use it....?

• We can use it as add the HTML, CSS, JavaScript and all other kind of codes when we provide codes in any tutorial.
• Also could use for the special text which we want to show that text to our visitors in special way.
• We could easy write our notification on Blackino Blockquote for our readers. etc. etc. etc.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Meta Tag Not Showing in Google Search Why?

Some times Meta Tags problem comes in the blogs like many times our meta description doesn't show in the search of the search engines be'coz of some wrong codes and some some kind of little mistakes by the author or owner in the head section of the blog. This problem can be easily solved by adding some tags in your template of HTML and if you don't know how create meta tags then use META TAG GENERATOR

How it Look in Google....?

Make it Correct

• Login to Blogger > Dashboard
• Go to Design > Edit HTML 
• Click Expand Widget Template 
• Now Search for below code using Ctrl+F

<meta content='YOUR DESCRIPTION HERE' name='description'/>

• Now replace this code with below code

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

If You Can't Find Above Code

If above code is not in their template then...

• Search for

<head>

•  and, paste below code after <head> tag

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

• Save Your Template and Say BingoooOO

 

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Remove H from Hellobar

Hello Bar is the very important and very unique widget for blog OR sites it help us to show the notifications on the top of the blog or site, but when we add that bar it shows the H logo and we can't hide that H logo but now we can do it very easily. It's very simple by adding some CSS codes in the CSS area, it will hide the H logo from Hello Bar.

Hide Hello Bar Logo for Blogger

• Login to Blogger > Dashboard
• Go to Design > Edit HTML
• Search for ]]></b:skin>
• Paste below code before ]]></b:skin>

a#hellobar-logo, a#hellobar-logo:link, a#hellobar-logo:visited {
display:none;
}

• Save Your Template.

Hide Logo in Wordpress

• Search for </head> tag.
• Paste below code above </head>

<style type='text/css'>
a#hellobar-logo, a#hellobar-logo:link, a#hellobar-logo:visited {
display:none;
}
</style>

• Save Your Template.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

5 Tips to Look Your Blog Like a Pro

Every Blogger OR Website Developer wants to make his/her blog/website very creative and looking like a Pro (Professional) and by after easy five tips you can make your blog Pro and Creative and that is very important for us.


Here are the tips to create an effective design for your blog that is user-friendly and can appeal to your blog readers.

An Attractive Header

Obviously, the header or the upper portion is the part, any visitor notices first. So, if you can design it creatively, it’ll have an impact on your visitors and readers and they’ll want to see more of your blog.


The header should look good along with the other elements used in your blog. It shouldn’t be too tall as otherwise readers with small screen sizes will have to scroll down to read your content. You shouldn’t make the header clumsy by adding too many elements like navigation, ads, etc. At Epic Magazine’s header, you can see how we have managed to keep it neat by avoiding Ads and other banners.

Strong Navigation

A strong navigation design will help your readers access different sections of your blog with ease. It’s good to have a navigation bar in the header, which will have links to major sections of your blog. Having a search feature in the header will help readers look for a certain topic and navigate within your blog. Creating a sidebar with links to your recent posts and most popular posts will help in greater page views, thus ensuring that you have better visitor experience in your blog.

Clarity and Readability

Making your site User-Friendly is an important factor. Readers those who find the content not arranged properly or unreadable may leave your blog. Your blog design needs to have a good clarity, that is elements like links, images, etc must look epic on your theme. You need to take care of the background color in your blog such that it blends with the text color.

Also, you need to emphasize certain elements like post headlines and important points in your blog post. Use of bullets, numbering and subtitles in your content will make your post’s  readability much better. You should give enough space in between lines and paragraphs, and use appropriate font size (12-14px) for your text. These elements assure good readability in any browser used by your readers.

Effective Usage of Visual Elements

Certain blog posts may require visual elements like images and graphs. So, make sure that you have such attractive visuals to help visitors get a grasp of your content easily. But avoid using too many images in your content. Make sure the images aren’t distorted. You should also avoid images having a variety of sizes and alignments. In short, the visual elements should complement the text.

The comment section should have a great design, as it will tell your readers that you care for their feedback. Good design will help you promote the comment section provided your content is good enough to attract the readers’ attention.

An Attractive Footer

Your blog should have a footer with helpful links leading to important and interesting sections of your blog. This will make readers browse through your blog once they finish reading a post. The footer can have links to the pages like Contact Us OR About Us as well as pages where you talk about promotions/rewards for your readers and guest bloggers. There can be a blogroll with links to useful external blogs with similar interests as yours. All such things can help define a brand for your blog.

The key to a great design is to include all elements that can make your blog user-friendly. This is to ensure that visitors find it simple and easy to scan through our blog.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Rolling Sharing Widget with Mouse Hover

Buy Exclusive Watches(Ads)

-7 color lights LED alarm snooze clock  - Features LED color changing lights and nature sounds  - Includes time/ alarm/ snooze/ timer/ temperature/ music and color backlight function  - Display year, month, date, hour, minute, weekday and temperature in one screen, easy to read  - Temperature displays in Centigrade/ Farhenheit - Optional 12/24hr display mode  - Adjustable snooze interval: 1-60 minutes - Light and highly fashionable design  - Powered by 3 x 1.5V "AAA" battery (Battery not included) - Material: Plastic - Size: 100 x 90 x 85mm

One More Sharing Widget for blogger with Mouse Hover Effect and it seems like very professional for your site it can be add  in blog/website also. A very Pro widget which is made by using scripts with HTML format.

It is simple works with the all kind of HTML documents like blog, website, notes which is made by the HTML codes.

Rolling Sharing Widget

• Login to Blogger
• Click on "Add to Blogger" button.

Add Widget Manually

• Login to Blogger > Dashboard
• Go to Design > Edit Html
• Search for </body>
• Paste below code before </body>

                 <!-- Start

    Shareaholic Sassy Bookmarks

    HTML www.fblatest.in-->

    <div class="shr_ss

    shr_publisher">

    </div>

    <!-- End Shareaholic Sassy

    Bookmarks HTML -->

    <!-- Start Shareaholic Sassy

    Bookmarks settings -->

    <script type="text/javascript">

      var SHRSS_Settings =

    {"shr_ss":

    {"src":"//dtym7iokkjlif.cloudfr

    ont.net/media/downloads/sassybo

    okmark","link":"","service":"5,

    7,2,313,38,201,88,74","apikey":

    "b87f5899d80a5edce8b5e55f58542e

    f0f","localize":true,"shortener

    ":"bitly","shortener_key":"","d

    esigner_toolTips":true,"tip_bg_

    color":"black","tip_text_color"

    :"white","viewport":true,"twitt

    er_template":"${title} -

    ${short_link} via

    @Shareaholic"}};

      </script>

     <!-- End Shareaholic Sassy

    Bookmarks settings -->

    <!-- Start Shareaholic Sassy

    Bookmarks script -->

    <script type="text/javascript">

           (function() {

                var sb =

    document.createElement

    ("script"); sb.type =

    "text/javascript";sb.async =

    true;

                sb.src = ("https:"

    == document.location.protocol ?

    "https://dtym7iokkjlif.cloudfro

    nt.net" :

    "http://cdn.shareaholic.com") +

    "/media/js/jquery.shareaholic-

    publishers-ss.min.js";

                var s =

    document.getElementsByTagName

    ("script")[0];

    s.parentNode.insertBefore(sb,

    s);

            })();

            </script>

    <!-- End Shareaholic Sassy

    Bookmarks script www.fblatest.in-->

• Save Your Template

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

HTML CSS and Other Coding Background

Many professional Bloggers use the backgrounds to show their special text OR codes of HTML, CSS, JavaScripts, C, C++, C#, Java, PHP, Cobol, Ajax etc. It seems like that very pro and unique and it gives a very good impression on the visitor. This is specially made by CSS and HTML coding with some images.

Without Mouse Hover Effect

Mouse Hover Effect

Make Coding Background in Different Style

• Login to Blogger > Dashborad
• Go to Design > Edit HTML
• Click on Check Expand on Template.
• Search for </head>
• Paste below code before </head>

<link type="text/css" href="https://dl.dropbox.com/u/63968842/html%20codes%20css%20background%20%28www.fblatest.in%29.css" rel="stylesheet" />

• Save Your Template.

Cardboard Effect Style Sheet 

Where you want to insert codes in your posts always put it between <div class=”fb2”> and </div> and Replace HTML CODE HERE with Your Codes.

<div class="fb2">
HTML Code Here
</div> 

Result

margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #EEEEEE url() repeat-y top left; border-top : 1px solid #AAAAAA; border-right : 1px solid #AAAAAA; border-bottom : 1px solid #AAAAAA; border-left : 1px solid #AAAAAA;

Rolling Effect on Mouse Hover

Where you want to insert codes in your posts always put it between <div class=”fb7”> and </div> and Replace HTML CODE HERE with Your Codes.

<div class="fb7">

HTML Code Here

</div>

Result

margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #EEEEEE url() repeat-y top left; border-top : 1px solid #AAAAAA; border-right : 1px solid #AAAAAA; border-bottom : 1px solid #AAAAAA; border-left : 1px solid #AAAAAA;

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Automatically HTML Editor for Websites and Blogs

HTML Editor tool is very important for us because it give us very easiness to play with HTML or CSS codes and it also very important for us because it makes enable us to save our time, and give the fastest result. Website and Blog owners also can embed it in their site and can easily get the more and more visitors get improve their rank. See our Offical HTML Editor which is made from collaboration of Mohamad.

Codes for HTML Editor

<!DOCTYPE html>

<html>

<head>

<title>HTML Editor by Face Blog</title>

<script type="text/javascript">

<body>

<a href="http://www.fblatest.in"><img style=" -moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px; border:5px solid #666666; float:left; padding:5px; box-shadow: 5px 5px 5px #CCCCCC; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZgoldNvRurpBwOden8AXVIlBxgiaVHzJHuKuoJu36HHuDoMsbCp_so74toheU6sRg6_XIIUrZ5pn5nvfF1SKTpxLIYPXRQuXX3NhnDBEgtNFE5qZBnCNzHVHLoN6IuhhL4Rkeo2cjbe5/s1600/FaceBlog%2527s+Header.png" width="941" height="150" alt="HTML Edtior" /></a>

</body>

var editboxHTML =

'<html class="expand close">' +

'<head>' +

'<style type="text/css">' +

'.expand { width: 100%; height: 100%; }' +

'.close { border: none; margin: 0px; padding: 0px; }' +

'html,body { overflow: hidden; }' +

'<\/style>' +

'<\/head>' +

'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +

'<form class="expand close" name="f">' +

'<textarea class="expand close" style="background: #def;" name="ta" wrap="hard" spellcheck="false">' +

'<\/textarea>' +

'<\/form>' +

'<\/body>' +

'<\/html>';

var defaultStuff = '<h3>Welcome To Face Blog  HTML Editor!<\/h3>\n' +

'<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';

// I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.

var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n  Created by <a href="http://www.fblatest.in" target="_top">Face Blog<\/a> and Hosted on <a href="http://www.dropbox.com" target="_top">Drop Boxx<\/a>.\n<\/small><\/div>';

var old = '';

       

function init()

{

  window.editbox.document.write(editboxHTML);

  window.editbox.document.close();

  window.editbox.document.f.ta.value = defaultStuff;

  update();

}

function update()

{

  var textarea = window.editbox.document.f.ta;

  var d = dynamicframe.document;

  if (old != textarea.value) {

    old = textarea.value;

    d.open();

    d.write(old);

    if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))

      d.write(extraStuff);

    d.close();

  }

  window.setTimeout(update, 150);

}

</script>

</head>

<frameset resizable="yes" rows="50%,*" onload="init();">

  <!-- about:blank confuses opera, so use javascript: URLs instead -->

  <frame name="editbox" src="javascript:'';">

  <frame name="dynamicframe" src="javascript:'';">

</frameset>

</html>

Warning :- Don't Change Anything from codes otherwise output could be wrong.

How to Use these codes....????

• Copy codes and paste in the notepad.
• Save that notepad file with any name but remember after name write .html like HTML-Editor.html
• Save it on desktop.
• Go to Desktop a Internet file will show, open it and write your HTML OR CSS coding in blue background.
• Your output will be comes automatically in white background area.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.