Tricks For Blogger :blog templates,blog hack, tricks: Blogger Tricks

Facebook Comments box for blogger installation guide

here is few step to install facebook comment box with blogger comment box this will apear on your blog in tab view

Create a Facebook App

In order to control and keep a backup of the comments made on your blog you will need to create a FB application. The steps of creating this app is very simple. Simply follow these easy steps:
Note: Facebook has changed its layout interface so the screenshots could look a little different from current interface. Steps are exactly the same.

Go To Facebook Developers Page
Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"

3. Hit "create app" button and proceed
4. After submitting the security check code you will see this page,
app-id

5. Save that FACEBOOK APP ID in a notepad because we will need that later. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"

6. One the new window that appears click the Edit Settings link ,
edit-settings

7. Then go to Website option and write your Site Domain as blogspot
website

8. Save Changes and jump to the next step of this tutorial

Creating Tabs For Facebook Comments in Blogger

For blogger comments to display next to tabbed facebook comments, your blogger comment form settings must be set to embedded below post. To show blogger comments below posts do this:

Go To Blogger > Settings > Comments
Set "Comment Form Placement" to Embedded below post

Now follow these easy steps one by one:

Go To Blogger > Design > Edit HTML
Backup your template
Click the "Expand widget templates" box
Search for <head>
Just below it add the following code,

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/> <meta content='FACEBOOK APP ID' property='fb:app_id'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(".comments-tab").addClass("inactive-select-tab");
      $(selectTab).removeClass("inactive-select-tab");
      $(".comments-page").hide();
      $(selectTab + "-page").show();
    }
    </script>

Replace Blog LOGO Image Link with the image link of your blog logo. Your logo size should be as small as 30px by 30px in size. If you don't want a logo to display whenever someone shares your comment on his wall then simply delete the yellow highlighted code.
Replace FACEBOOK APP ID with the numeric facebook app Id that you were asked to note down. You can find your Facebook App ID in settings page of the app you created earlier.

6. Search for <html and replace it with the following code,

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Note: Give a space at the end of the above code.

   7.  Now Search for ]]></b:skin>    and just above it paste the following CSS code,

/*--- Tabbed Facebook Comments By MBT ----*/ .comments-page { background-color: #f2f2f2; width:450px;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

To change the background colour of tabs content area simply edit #f2f2f2
To change the width of the comment box container change width:450px;

  8.  Next search for this

<div class='comments' id='comments'>

After the first occurrence of the above available code paste this code:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmR3OdLX-9EW9nYnDeTmFprePxdVmZ989r4F6q11CXf5Sc0QybfnivJ-AI6MgAv6JYhmoIgU_silRRLfpL23dmIkPlSx1PjN4L59nfFZRJL9tT-U26FAAPkiOKmB_QnP5Xd9vgqfTt3s/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments </div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/>
</div>

    <div class='comments-page' id='fb-comments-page'>
      <b:if cond='data:blog.pageType == "item"'>
       <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>

</b:if>
     </div>

Note: If the above code gave errors then delete the red highlighted lines from the code above.

To change the width of the comment box size change the numeric value width='450' . Keep it equal to the width of the comment box container we set earlier in step#7.
To change the footer credits size (i.e. Facebook Comments by blogger Widgets), change this value width:440px
Keep a difference of 10 pixels between the comment box size and footer size. For example if you set comment box-size to width='450' then set footer-size to width:440px
To change the text inside tabs edit Comments for Facebook Tab and Comments for Blogger Tab

9. Save your template and you are All Done!
Visit your blog to see it working just fine. :)
Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger

00:02 / 0 comments / Read more

Why This

recommendation bar help you to make user interest on you blogger its also help your visitor to stay long time on you website

Install it on Blogger

it is easy to install on blogger ,here is few step that will help you to install on blogger

Follow these easy steps:
Step1: Create a Facebook Application
For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.

Log into Facebook Apps
Click on Create New App button towards Top-right
In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.

4. Enter the captcha security code. Click Submit
5. You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.

6. You will see two strings of alpha-numerical characters. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.

Congrats App finally created! Lets proceed to step2.
Step2: Add "Recommendations Bar" To Your Blog
Follow these steps to add the bar to Blogger:

Go to Blogger > Template
Backup your template
Click Edit HTML > Proceed
Search For this :

<html

Replace it with this code:

<html xmlns:fb='http://ogp.me/ns/fb#'

This will make the plugin compatible in older versions of internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.
5. Next search for <body> and just below this tag paste the following code:
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar byhttp://tipntricksworld.blogspot.in/
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://tipntricksworld.blogspot.in' trigger='40%'/></div>
</b:if></b:if>

You are almost done. Make these changes:

Replace *************** with your 15 digit App Id that you saved in step1.
Replace http://tipntricksworld.blogspot.in with your blog link

6. Save your template and you are all done!
Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free pageviews juice! :)

Optional Steps

Below are optional customization and control options. You can skip them if you want

max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default.
num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
read_time: As soon as the user reaches a specified location, the plugin would expand and before expanding it will take some time. I have kept it equal to 10 seconds, you can increase it to 30 or more as you wish.
side: You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left
trigger: On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisible, X% or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines paste it just below data:post.body tag and use the value onvisible instead of 40%.
The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.

Troubleshooting : Since Most templates are not well structured and require installation of meta tags to tell Facebook to fetch correct page titles, thumbnails and blog title. To do this simply paste the following code just below <head> tag inside your template

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook.

Your views?

22:48 / 2 comments / Read more

this widgets is for popular posts in popular posts slide look in images ,this very useful to your blog visitor and you can keep your visitor for long time on your blog

Let see how install this in your blog

This script very easy to install, you only have to put the script to the new Gadget

Login to Blogger Dashboard and navigate to Design – Page Elements
Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
Put all script bellow to the “Content” of HTML/Javascript Gadget
If you have already jQuery in your Template please delete from my script
Done- your popular post now with animation

<style>
* {
 margin: 0;
 padding: 0;
}

body {
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
 border: 10px solid #ccc;
}

.scroll {
 overflow: hidden;
 width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
 position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
 height: 318px;
}

#left-shadow {
 position: absolute;
 top: 0;
 left: 0;
 width: 12px;
 bottom: 0;
 background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
 position: absolute;
 top: 0;
 right: 0;
 width: 12px;
 bottom: 0;
 background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
 padding: 10px;
 border: 1px solid #999;
}

.inside img {
 display: block;
 border: 1px solid #666;
 margin: 0 0 10px 0;
 width: 250px;
}

.inside h2 {
 font-weight: normal;
 color: #111;
 font-size: 16px;
 margin: 0 0 8px 0;
}

.inside p {
 font-size: 11px;
 color: #ccc;
}

a {
 color: #999;
 text-decoration: none;
 border-bottom: 1px dotted #ccc;
}

a:hover {
 border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

11:01 / 3 comments / Read more

Do you want your visitor enjoy your blog with music they listen music when your visitor stay on your blog you can do this just by adding little code in your blog,here are few thing that you have to do in your blog ,you can change your music time to time

Ensure that you have installed Apple Quick time plugin in your browser as well.

Now, Follow the Steps below to add background music in your blogger blog. :.

Upload your music into web space and get its URL , Or Copy down your favorite songs Location Link from any music Websites/file hosts.
[I Recommend Google Sites to upload your Music]
Copy down the Below code and replace that RED URL with your music URL (that have uploaded in Google sites/file hosts).

<embed style="width:1px; height:1px; visibility:hidden" autostart="true" loop="true" volume="100%" src="https://sites.google.com/site/blogknol/blogknol/Blogknol_jingle_bells.mp3"/></embed>

Then, Login to Blogger.com by typing your Email ID and Password . From Dashboard Go toDesign Section where you can customize your Blog appearance.

Now Click on any 'Add a Gadget' button under the Page Elements Tab.

Choose "HTML/JAVASCRIPT" Gadget from the List and Paste Down the Code.

Done! Refresh your Blog and Starts to hear music whenever your blog Loaded.

Trouble Shoot :

Q: I done all the steps you have mention , Still i couldn't Hear Music fom my blog , Why ?
- Check whether Apple QuickTime is Installed or Not.
- The Music URL (Extension must be: mp3,wav,mp4, .. )that you have copied might be broken.
- Give time to music get loaded in your blog. So i prefer you to use short music .
- Turn on Your Speaker !

11:52 / 1 comments / Read more

in previous posts i already discuses this but some user have problem with that so i decide to posts this again with modification lets see how we can add this slider that slide with category that you will use you have to add below code and need to made little change in this code and your slider will ready in your blog lets we install this gadget in your blog

Login to blogger with your account
Then click the Layout > select Edit HTML check expand widget templates
Do not forget to backup your template first by clicking Download Full Template.
Place the following code in the code ]]> </ b: skin>

# Featured {margin-bottom: 8px}
. sliderwrapper {position: relative; overflow: hidden; height: 240px}
. sliderwrapper. contentdiv {visibility: hidden; position: absolute; left: 0; top: 0; padding: 0px; height : 100%;}
. pagination {text-align: left; padding: 8px 0px}
. pagination a {font-size: 11px; color: # fff; padding: 3px 6px; background: # 1b75d6}
. pagination a: hover, . pagination a.selected {color: # dedde5; background-color: # 535 352}
. featuredPost {width: 360px; padding: 10px 10px
a {color: # fff}
. featuredPost a: hover {color: # dedde5}
. featuredPost h2 {margin: 0; font-size: 12px; line-height: 1}
. featuredPost span {font-size: 10px}
. featuredPost p {font-size: 11px}

Step Two

Still in the position of the Edit HTML. Now place the following code in the code </ head>

<script>
/ / <! [CDATA [
/ * Script from: http://simplexdesign.blogspot.com/ * /
imgr = new Array ();
imgr [0] =
= True;
aBold = true;
summaryPost = 100; numposts1 = 5; label1 = "mysteries"; function removeHtmlTag (strx, chop) {var s = strx.split ("<"); for (var s} showrecentposts1 function (json) {j = (showRandomImg)? Math.floor ((imgr.length +1) * Math.random ()): 0; img = new Array (); for (var i = 0; i <numposts1; i + +) {var entry = json.feed.entry [i]; var posttitle = entry.title. $ t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var ("Content" in entry) { var postcontent = entry.content. $ t;} else if ("summary" in entry) { var postcontent = entry.summary. $ t;} else var postcontent = ""; postdate = entry . published. $ t; if (j> imgr.length-1) j = 0; img [i] = imgr [j]; s = postcontent; a = s.indexOf ("<img"); b = s. indexOf ("src = \" ", a); c = s.indexOf (" \ "", b +5); d = s.substr (b +5, cb-5); if ((a! = - 1) && (b! = -1) && (c! = -1) && (d! = "")) img [i] = d; var month = [1,2,3,4,5,6, 7,8,9,10,11,12]; var day = postdate.split ("-") [2]. substring (0.2); var m = postdate.split ("-") [1]; var y = postdate.split ("-") [0] ; for (var u2 = 0; u2 <month.length; u2 + +) {if (parseInt (m) == month [u2]) {m = month2 [u2]; break; }} var daystr = day + '' + m + '' + y; var trtd = '<div class="contentdiv"> <div class="sliderPostPhoto"> <a href="'+posturl+'"> <img width = "370" height = "240" class = "alignnone" src = "'+ img [i] +'" /> </ a> <div class="sliderPostInfo"> </ div> </ div> class="featuredPost"> <h2> < a
Notice the code that I gave bold label1 = "mystery"; it is a label or category to be displayed on the slider, here I choose the label of mystery. You'll only replace with the desired label. Note also the code img width = "370" height = "240" is the width and height of the slider, please adjust your template.
After that, place the following code before the code </ body> (put on top only)

<Script "Slider1", / / id of play slider DIV contentsource: ["inline", ""], / / Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "# increment ", / / Valid values:" # increment "," markup ", [" label1 "," label2 ", etc] NextPrev: ["Previous", "Next"], / / labels for "prev" and "next" links. Set to "" to hide. enablefade: [true, 0.5], / / [true / false, fadedegree] autorotate: [true, 6000], / / [true / false, pausetime] onChange: function (previndex, curindex) { / / event handler fired Whenever the script changes slide / / previndex holds index of last slide viewed b4 current (1 = 1st slide, 2nd = 2nd etc) / / curindex holds index of currently shown slide (1 = 1st slide, 2nd = 2nd etc )} }) / /]]> </ script>
The final step, namely to call for the slider on the front you find the code <div id='main-wrapper'> if you want a slider appears on the main-wrapper and put the following code below:

<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write (" <script class = 'pagination' id = 'paginate-Slider1'> </ div> </ div> </ b: if>
The final step Save / store the template, making image sliders are finished by a certain category.

Noteworthy here is the code label1 = "mysteries" in the second step the first point, the mystery is a label that is displayed in the slider. You can replace it with the desired label or category.

11:56 / 0 comments / Read more

Hello friend in this posts you will learn how add thumbnails and related box in you posts pages here you can see this image in whic related posts and subscibe button is showing you can add this following set up

related post feedburner

First you must first login to blogger
Then click on Template > select Edit HTML check expand widget templates
Do not forget to backup your template first, just in case if there are errors in the editing later.
After that, place the following code in the code ]]> </ b: skin>

# Related {background: # 222; border: 1px solid # 000; border-bottom: 1px solid # 444; border-right: 1px solid # 444; text-shadow: 0 1px 0 # 000; margin: 0 0 5px; padding : 10px}
# related-posts ul {font: bold 11px Arial; list-style: none; text-transform: none; margin: 10px 0; padding: 0}
# related. related-posts {font-weight: 400; width : 50%; float: right}
# related. related-posts p {margin: 0}
# related-posts ul li {float: left; height: auto; list-style-type: none; margin: 0 5px; padding: 2px 1px}
* html ul.rp # related-posts li {margin: 0 13px}
# related-posts ul li a {-moz-box-shadow: 0 1px 2px RGBA (0,0,0,0.15); border: 2px solid 1px 0 # 000}
# related-posts ul li. overlay {height: 66px; line-height: 16px; position: absolute; width: 66px; z-index: 10; padding: 6px 0 0 6px}
ul # related-posts li a: hover. overlay {background: # 000; display: block! important; opacity: 0.7}
# related-posts ul li img {bottom: 0; padding: 0! important}
# related-posts ul li a: hover { -moz-box-shadow: 3px 1px 0 rgba (0,0,0,0.25)}
# related. subscribe {width: 43%; float: left; color: # bdbdbd;}
# related. subscribe p.intro {font -weight: 400}
# related. subscribe 0 50%
Still in the position of the Edit HTML , place the code below after <data:post.body/> (if there are 2 or 3 select the final code)

<b:if cond='data:blog.pageType == "item"'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p> Related Articles </ p>
<script type='text/javascript'>
var
maxresults = 6;
</ script>
<script src='http://johnytemplate.googlecode.com/files/related.js' type='text/javascript'/>
<b: loop values = 'data: post.labels 'var =' label '>
<b:if cond='data:label.isLast != "true"'>
</ b: if>
<script expr: src = '"/ feeds/posts/default/- / "+ data: label.name +"? alt = json-in-script & callback = related_results_labels_thumbs & max-results = 6 "'type =' text / javascript '/>
</ b: loop> <script class = 'subscribe'> <p class='intro'> If you enjoyed this article just <a href = "http://feeds.feedburner.com/ myTemplat 'target =' _blank 'title =' feedburner '> <b > click here </ b> </ a>, or subscribe to receive more great content just like it. </ p> <p class='feed'> <a href = ' http://newtricksforblogger.blogspot.com/ / feeds / posts / default '> Subscribe via RSS Feed </ a> </ p> <form action = 'http://feedburner.google.com/fb/a/mailverify' method = 'post' onsubmit = 'window. open ('http://feedburner.google.com/fb/a/mailverify?uri = myTemplate ',' popupwindow ',' scrollbars = yes, width = 550, height = 520 '); return true' target = 'popupwindow'> <input name = 'uri' type = 'hidden' value = ' myTemplate '/> <input name='loc' type='hidden' value='en_US'/> <input id = 'botsub 'name =' email 'onblur = "if (this.value ==" ") {this.value =' Enter your email";} 'onfocus = "if (this.value ==" Enter your email " ;) {this.value = "";} 'type =' text 'value =' Enter your email .... '/> <input id = 'botsubbutton' type = 'submit' value = 'Submit' / > <br/> <small> Your information will not be shared. Ever. </ Small> <br/> <a href = "http://feeds.feedburner.com/ btb '> <img alt ='' height = '26' src = 'http://feeds.feedburner. com / ~ fc / btb ? ceaa6c & bg = fg = 444 444 & anim = 1 'style =' border: 0 'width = '88' /> </ a> </ form> </ div> </ div> < / b: if>

Description:
color blue : replace with your feed address.
color red : replace with your URL.
Last Save Templates , and see the results on the bottom of your posts.

Tutorial make a feature related post above thumbnail to FeedBurner suitable for blogs that have a background color or black background. But if your blog has a background color of white or bright colors you just modify the CSS code number 4 above. Thus this tutorial, good luck and hopefully useful.

11:48 / 0 comments / Read more

Some time you look that your blog page become so long and take much time to come up so that if your blog page is long you can add this button to go from bottom to top this will help you to go top from bottom easily

Now lets learn on how to plant the TNT of adding a floating back-to-top button to your blog.
==>>Sign in your blogger account

==>>Go To Layout > Page Elements

==>>Click on add a Gadget

==>>Click on HTML/JavaScript

==>>Now Copy paste the code below into the HTML/JavaScript widget,

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='URL Of Your Larger Button Image'" src="URL Of Your Smaller Button Image" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a>

Note:- Remember to replace the required detail with specific URLs of your Back-to-top buttons
Just save your widget and view your blog with a floating Back-To-Top button at the bottom-right corner of your homepage.

11:05 / 0 comments / Read more

This widgets will help you to ask your user to leave suggestion for you if they have any idea or suggestion they can leave for you by this they can access your feedback page .by floating feedback button if visitor go down and come up feedback button easily and friendly float and catch eyes of visitor for adding this you need this two images

small image :

Large Image :

or you can also make your own images

Now host this images own hosting site and get url for this image

==>>Sign in your blogger account

==>>Go To Layout > Page Elements

==>>Click on add a Gadget

==>>Click on HTML/JavaScript

==>>Now Copy paste the code below into the HTML/JavaScript widget,


<a style="display:scroll;position:fixed;bottom:5px;left:0px;" href="URL Of Feedback Page" title="Your Feedback is always welcomed!"><img onmouseover="this.src='URL of your Larger Feedback button'" src="URL Of Your Smaller Feedback button" onmouseout="this.src='URL Of Your Smaller Feedback button'"/></a>


Note:- Remember to replace the Colored text with the required detailed specified. You can change the text “ Your Feedback is always welcomed! “ with any message you like. You must have a Contact page, where users could fill up an Email form to send you their Suggestions.

for this you can see our this posts how add contact from in blog Click Here

10:56 / 0 comments / Read more

1. Log in to your Blogger Account
2. Go to Design>>>Page Elements>>>Add Gadget
3. Choose HTML/Java Script, copy and paste your butterfly code choice

05:53 / 0 comments / Read more

Make your blog your blog easy to load in this tricks we will learn how we can load our blog easy friend we know that loading time of our blog also effect on blog
1. avoid displaying Large images size in your blog larze size of images in your blog take long time to load in your blog so always avoid this use small images in your blog
2.Widget
at this time so many widget available there thousand of large and small widgets avoid using widgets that is large script and and unused widgets .unused widgets such as clock, music player, pet, games, and so on. Use useful widget such as related posts, most popular articles, or maybe Google Friend Connect

CSS and Javascript
As we knew, CSS and javascipt can make our blog become good looking. But the side effect is it can make our blog become slowly. So you should decrease the usage or compress it for your blog. To compress Javascript, you can use Javascript Compressor.

05:48 / 0 comments / Read more

this will look like this

Lepas of all, I have to undergo the gloomy staircase for the ideals of my childhood. As Om Sting (The Police) says "A gentleman will walk but never run ...." until I return to my activities here everyday as members of the academic community. Lecture as usual, wrote the exam if you want to learn, make the task of the lecturers, presentations in front of the class did not even know the answer when asked, hanging out with friends, going out or whatever his name until now have not understood the intent of the emotional relationship between man and man man the woman. One night I was involved in conversations with friends over coffee kostku. Talks to the philosophy of life.Philosophy of life can be referred to as a principle of life, namely the principle that we choose in life. A friend had a philosophy of life, time is money . A true materialist.These people are really busy looking for money. Anything that can be used as money in duitin yes. For him, to achieve a quality of life must have lots of money. Another friend had the philosophy of do not worry be pleased . person always looks happy, always smile (not crazy).

He wants to live a happy life, he always tried to be happy in a variety of conditions, the key is to always think positive, he said. P ositif Make positive thinking feeling .. Another friend had the philosophy be useful . On each occasion he wanted to be useful to others. People are generous, kind and not arrogant (in-law's dream). He loves to share ideas, knowledge, energy and materials.Another friend, a true spiritualist. The philosophy is faith and devotion to God is the first. him Hereafter is far more important than the life of a world filled with drama. So everyday dipenuh with ibadah.Saat asked my philosophy, I can only smile senyam. I've never had a philosophy of life. This is too serious for me. One by one they offered for me to use his philosophy of life. Due to bad choice, I asked them the same: What can I use the philosophy of your life as well? They spontaneously responded, "may". Then I ask again what is the need to have a philosophy of life? They agreed to answer, so we have a standard of behavior that we prioritize in life. With our philosophy is our life will be known. The philosophy of our lives is our brand.

Well , for those who want to make as it is very easy. Please create a new post and use the following code in the Edit HTML mode of posting.

<Table cellpadding = "10" cellspacing = "10" > <tbody>
<tr> <td align = "justify" valign = "top" width = "240" >
article on the left </ td> <td align = " justify "valign =" top "width = "240" > article on the right </ td> </ tr>
</ tbody> </ table>

Description:

cellpadding: set the distance between the edge of the column with the words
cellspacing: set the distance between two columns
width: there are two width, at the same time the same code using the number 240. If you want to be different please replace it.
align: the text alignment ( justify for the average right-left, left to the left, right for right-justified andcenter for the average middle)
valign: verikal alignment ( top to flat top , a bottom for the flat bottom and middle to middle average)

Let us see what you think about this please leave a comment

12:00 / 1 comments / Read more

1.Way To Get Back “Home”
One of the simplest ways to improve your site’s navigation, is to include a link back to the home page on every page of your site.

Platforms like Wordpress will do this for you, by default.

2.Leave Breadcrumbs For Your Visitors
“Breadcrumbs” are a navigation feature that let your visitors know where they are on your site.

It also serves as a reminder of how they navigated to a specific page.

Ex. Home > Blog > Marketing Tips > SEO

3.Link To Related Content In Each Post
When writing content, certain phrases may relate to previous posts you’ve created.

Turn these relevant phrases into text links, allowing visitors to jump right to the content.

This is also an extra way to boost your search engine rankings for specific keywords, especially “long-tail” keywords

11:21 / 1 comments / Read more

In my last post i tell you how you can increase traffic to your blog see here,in this posts i am posting how you can drive traffic from other site to your site, this site will drive their traffic to you blog free
visit this site and get more traffic from this site to your blog
what happen here here they display your blog or website in their directory and when some one visit there they refer them to your blog

00:06 / 0 comments / Read more

To add flying twitter bird in your blog just follow this things

Go To Blogger > Design > Edit HTML
Backup your template
Search for </body>
And just above it paste the code below

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = "Myblogtricks";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>

5. Replace MyBlogTricks with your twitter account username.

6. Save your template and you are done!

7. View your blog to see it flying. :)

08:13 / 0 comments / Read more

in this posts we know that how we can share our posts with our friends automatically,
when you write you think that i want to share this with my friends,and you subscriber auto you think that how it can be possible
That's were ping service Ping.Fm comes in.Ping.Fm can automatically update 35 social network and bookmarking websites with one click.So when you publish your latest post you can auto update Facebook, Facebook Pages, Twitter, Google Buzz, Myspace, LinkedIn, Posterous, Delicious and more..

Auto Share And Manual Share

You can auto share on as many of the services as you like and even set up groups to Ping selected sites with different links.I would suggest connecting the services you are already a member of like Twitter and Facebook and joining the others and connecting them.This way your Blog is 'Pinged !' to over 30 sites every time you publish.

You can add one Blog Feed to auto share in the tools section and share to all services with one click from your dashboard.Also Ping.Fm have an extension for Firefox to allow you to ping with one click, personally i added the Ping.fm button to the Google Toolbar and find it the quickest.

Screenshot

See How Ping.Fm has updated my Facebook page below :

Here is the link to go to Ping.Fm and take the work out of sharing your posts.

if you like this posts you can share your mind here

00:44 / 0 comments / Read more