Breadcrumbs Navigation Widget For Blogger

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.The original breadcrumbs idea is given by the HOCTRO and Aneesh of bloggerplugins futher worked on it.

Add Breadcrumbs Navigation To Blogger

1. Go to Blogger Dashboard > Template
2. As always download a copy of your template
3. Click on Edit HTML
4. Hit Proceed
5. Now find below code,

<b:include data='top' name='status-message'/>

just above it copy and paste below code,

<b:include data='posts' name='breadcrumb'/>

Now find below code (if you find two occurrences of this, then locate the second one)

<b:includable id='main' var='top'>

just above it paste below code,

blogger.com/ -->

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">

 <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>

 <b:loop values='data:post.labels' var='label'>

 <b:if cond='data:label.isLast == "true"'>

 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

 </b:if>

 </b:loop>

 » <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>

</div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<div class='breadcrumbs'>

 <b:if cond='data:blog.pageName == ""'>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

 <b:else/>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

 </b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<!-- Breadcrumb Navigation By http://www.helperblogger.com/ -->

* This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove the code in line number 16 and 18.
Now find below code,

]]></b:skin>

add below CSS code just above it,

.breadcrumbs {

background: #F7F7F7;

float: left;

border: 1px solid #E6E6E6;

width: 575px;

font-size: 11px;

margin: 10px 10px 10px 10px;

padding: 5px 10px 5px 10px;

}

Now save your changes and you are done.

read more

Add Translation Tool to Your Blog or Website in Several Languages

This tool needs all bloggers and those interested in promoting his blog for foreigners, the tool shape beautiful and wonderful includes 7 languages ​​is essential in the world.

Its code

<style> 

.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style> 

<div> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQkdu5vOIR1Ycug3m1mKpuaNJyCwiqVeagMD8urjKAkBOe9b1xvoFhv0vXdw70buIbkBpkKst9KP8G952jVKt877cvLc7BjeBBTrAwWfScJdLkG3WvCZ_S4Fi67sW8CTbOWTS5qI9UMis/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIzVO80ij-RjfKJks5uia43rNAX1M-cTsIgO_xwu8hLN77024adfEAIZ5cotDhFe_xBY63oXm9Lc_5Og33fuqCxxPqVsj7AnOKni1a4yos1ZMfaJEDmsJBq5is8jZiSTTk9X5a1KGu8Q/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRYzB5J3nCLRhPvr-U8fR7Qhlh2cvbg7JbIf6PYSCmFWgKnuAolnVfp4FqwA2a6J30L5IPbDEnu9O-ZW4WOlEbyvs-UCCYNHiK_VQBcU7t2Hp35x1HjkiTAorT4zAN-QNkWpRhvRLcmAnl/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAJ7CE3cKZKXgSsheqjQ17g9wbcXk0jC9SvCTBTiUUpfySnVGp1DWnKXE2fCtf0RUr1Z5Or4GkIsRusteSrYCfRmY1OKnt-Av72-YaBZpgkEGt4RrV50k7cnEhPJqHSlOGtxYXZGiBDRiu/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZnOZg_BMn4sS9PZE15zo6JAIUon8o8eCq97OXNtX1Wve9C4dmBJM_p3PGmyHr4Z2t-C0zLLH7h6emsTA_m_6uyRczmlHKk7U4iWu1wYG8WgEhqJgSiIUbDm_h1oP-eOBIETWrkIVefzo/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj90ZRJBxi-ngwJ3bXimwuGZ0ZxfyuDQShVGquzCn3xz3_hEf2XMus7YYriApibWr8GAmo1RcKUny7o8t1Ia5Uls9UozZVHELeNGzzRzRUlhyphenhyphenow1KXgAO9bz9vObR02YKHKUzJkaXEKgnw/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<br/><br/>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi526kkYvA11nD2f_JUuazbGhiZ7RNW28I6b4cvz6Q7dQzQ-lOhBfVFJCTNTthmkp8I5Sz8yG6WMU-HCSOFJns2A-gRM-Pw1AP61zRLj91KToa5cMTfXq3cNfmab3tKUZm_X6iplxzH0Zc/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNCjKsvqB3YjU-ERvmFGCRb8p_OqaUPVMn3145dOzxgg3CcnYe9s_m_qdeG4EsPIrbIIbBvh1dktuBMChlz6yS9N6zrM0pwhUp50rzSsI1L2XbA5URDhylWIPFDlN7CqOSBImFwlFYzs/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6KKjwB6CPj5_SPEgjulBwoWkkvhd57HkirnavHccC7Au1OPxi2-7JqhldjJyDICNCi7s8gwwXbDmKSjNJhC1voDcWSMSzM8wtWBpOh66nWD3m0Tz8XHVAceBeXv176qc2acXvF6lil-Dx/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZCgASLPtjv2gddyLmZ8ZxyILRxv3ANF25XEdLDpxfkQiPhJRbn7IEsyAoQHF7ziq3oVMhLIVrYB3ewl1Fk2uMO7eyuDWuvMKWJZg0Kjk8z6w6Yr_eBVu9IdxvRbgl3t6Fh0H_q4Bhos4/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYBlOwVuejATyqDnsJkcd8TDkgx9ywjC6mf_Ps6PcVgNnqnnJE3ST6N274vk9zHcOTA_osTOhxTKbpu3FpVNdeRy0yOvHs0LC392tfZUS3Ba-t6DHu_i79efOtiM7ulpRbPI9YxGWcCM/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjqtBWC282uAnM2eT7ofX_Wj4NCBQFa_gjpXEkn-s8suwuuq5Zhg4vEfQIcKE5fzafLze7861UAr0Ydbi0TgmOpM55c3WibCSrpbm0giPQwLhowQSUQEyU8iguJ_vRAihJaKyAoq2D0C4/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 

</div><div style="font-size:10px;margin:10px 0px 3px 0px">

</div>

Installation Procedure

To begin using this new gadget, go to Layout>and click "Add a Gadget" and

select HTML/JavaScript , In the latter save tool.

Drop Your Comments And Questions Below.

read more

Submit Your Website or Blog for the Best Search Engines in the World

 Add your blog or website to the world's best engines; to get a quick archiving and visitors from all parts of the world, everyone works with these sites, especially google,yahoo,msn

First: Search Engines

google
http://www.google.com/addurl/?continue=/addurl
yahoo 
http://search.yahoo.com/info/submit.html
msn
http://search.msn.com/docs/submit.aspx

Second: Find the Evidence

addme

http://www.addme.com/submission/free-submission-start.php

read more

Add the Search Box in Your Blogger - Six Forms

                                    

There are many blogs that used a small rectangle to search in the blog, but the form of plain does not attract attention to him, especially visitors, many visitors and even when I was browsing through some websites and blogs do not pay attention to the rectangle for research, so these boxes for research are colorful and all tastes.

So followed me this explanation is a simple way:

To begin using this new gadget, go to Layout> and click "Add a Gadget" and
select HTML/JavaScript


Figure I

Its code

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhODGyv4RJXq-yvnhoHjbkbfG0XDxEbjly-R94iEq9A5H-fTZv1XRoBnoHYCOmBHEvfCqwqGcaNhDRqQBEGnirz0sEje21lhX8XqUU0mdWyNtziP_2CIry4f4fhtkpD39KMHMZkHS3i1sQS/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Figure II

Its code

 <style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHe1KS_eOvfv4tLtKZckNyE45QgVsB9y1q2Rm6d0eXtHQQULcm6pjRF2rQD7hOoURw-pddWILsTquvF1OMzFLZ0XMjHzn0agHhT5H5yLNPrkwWTTLavYaw_rZLeXYe0xMfPdAzF8kSRIo0/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Figure III

Its code

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-wIm8vMBU4JvwfPQF87zOXVeMtcky7iGwXKsoYPdAroQE8P5eBmPbLOY6HUITFEoFp9iphv97LLwKcknlND5kZYDz37QjhTSOkcbMrsIJVGTWTqHk2NoRwQH-6QWKNYGUplJ5F4rwX9G/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Figure IV

Its code

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUKihh_ck5TVP-5fzxCys53K8VfJtms5sx63XU7kN_u25zzedys9d0OYQy8i-dK7e8aTwbMD8JN-2RuxEYUG1A3zX9y3Zm0ZBJ1Tb6elieIdyxqN0CqGkwcaqJRoMMFWjjwbV4hC22RLd/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Figure V

Its code

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVatWdWZpd7OV7RpO-xMVxgkUy99EjManmxl-yT7uEKmwmtMUrzv74fCeG6A1FdPQ_4MjtmbEdGAl4CpRv4TlkYzmszGY2Bus37yK7U_KsR7tcThx-mLeSZ15GaQJRP7_or8hUiZbCvPDn/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

 Figure VI

Its code

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Btc92Ji9H5ieoi5WbQ1q7eyeUISjp7KjITs8A-NXSReXBlIs1V58v5lIT_UrPMtA9ZsiIhl1MvH0jg9lEHVpY2eltq5tkIOENp9zMexYrIHkAjp4vs2EJ-HoC2MB1YSRyRSkvDGudbxi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

In the latter save tool

Drop Your Comments And Questions Below.

read more

How to add a "Follow Me By Email" in Blogger

This tool, which we will address them are beautiful and necessary tool for all codes that seek to increase their subscribers, this tool is the solution.
 So followed me this explanation is a simple way:

To begin using this new gadget, go to Layout>click "Add a Gadget" in the section where you'd like the email form to appear.

In the following menu, select "Follow by Email" from the list of default gadgets which will bring up a pop-up box like this:

When setting up the Follow by Email gadget for the first time, a Feedburner Feed URL is created for you. Usually this is based on the name of your blog (so long as this feed name is not already in use).

We can change the name of the feed URL in order to:

Create a new Feedburner account using an alternative feed name to the one suggested

Use the name of an existing Feedburner feed if you have already set up Feedburner for your site

Once added, the Follow by Email gadget will appear like this in the blog layout, using a grey "Submit" button and text input field which stretches to fit the available space:

                                          

Drop Your Comments And Questions Below.

read more

How to Add "RANDOM POSTS" Widget On Blogger

This tool is one of the best tools that will send a new breath in your posts, how? This tool go to your post and a different lables of the blog topics, and as I said it is good for those who want to revive some of the topics that had 
stopped her visits and Views.

Installation Procedure

1- In your dashboard click 'Layout' > 'Add A Gadget'
2- Choose Html/Javascript Gadget and paste the following code into the area provided :

<div id='myLuckyPost'></div> <script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Posts'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>

<style type='text/css'>

@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );

#myLuckyPost a {

position: relative;

color: rgba(255,255,255,1);

text-decoration: none;

background-color: rgba(219,87,5,1);

font-family: 'Yanone Kaffeesatz';

font-weight: 700;

font-size: 30px;

display: block;

padding: 4px;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);

-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);

box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);

margin: 10px auto;

width: 200px;

text-align: center;

-webkit-transition: all .1s ease;

-moz-transition: all .1s ease;

-ms-transition: all .1s ease;

-o-transition: all .1s ease;

transition: all .1s ease;

}

#myLuckyPost a:active {

-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);

-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);

box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);

position: relative;

top: 6px;

}

</style>

Preview and experimentation

Random Posts

read more