LOREM IPSUM ITALIANO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent velit nisi, luctus a mollis id, imperdiet eu nunc. Nullam placerat lobortis velit, sollicitudin fringilla odio auctor id. Cras cursus sodales neque, non laoreet libero semper sed. Nulla facilisi. Cras vitae sapien non dui condimentum aliquet. Morbi quis lorem tellus. Nullam sed massa egestas dolor ultrices dictum sit amet sed nunc. Praesent sed quam in justo dictum mollis. Vivamus nec tellus ac lacus posuere condimentum id vel metus. Mauris in consectetur nunc. Praesent vulputate iaculis augue condimentum mollis. Maecenas eu nulla mauris, vel fermentum turpis. Fusce gravida adipiscing sollicitudin. Nunc sapien lectus, porttitor in bibendum ac, fringilla sed nunc. Fusce et dui et tellus dapibus semper in vitae ligula.

Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vel egestas est. Etiam scelerisque quam eu felis dapibus tempor. Sed gravida tincidunt porttitor. Donec viverra erat orci, eu gravida justo. Donec at leo blandit neque venenatis iaculis. Cras tincidunt feugiat libero. Nulla ac tellus in urna vulputate pharetra sed id mi. Phasellus id nulla arcu. Suspendisse sodales sollicitudin tellus, in vehicula nibh porttitor sed. Maecenas condimentum volutpat lorem, sit amet sodales mauris faucibus eu. Aliquam est lacus, fermentum ut vestibulum a, congue et nisi.

Vestibulum placerat lectus vitae nunc tristique ac pretium nisi sagittis. Integer vehicula aliquet est, in tempus est suscipit eu. Integer vel tortor scelerisque augue pulvinar cursus. Sed laoreet, massa vitae aliquam luctus, est ipsum elementum risus, id dictum augue nunc at eros. Curabitur pellentesque orci non odio elementum sed condimentum nisi lacinia. Donec dapibus interdum nunc nec venenatis. Maecenas mollis felis non nulla ultrices laoreet. Curabitur at quam turpis.

Duis mollis, nisl non tristique sodales, ipsum neque tincidunt lectus, sit amet scelerisque justo felis sed sapien. In feugiat nunc nec nibh mollis sagittis. Aliquam sit amet erat turpis, id congue dui. Nulla facilisi. Morbi eu metus ut arcu elementum porttitor. Sed molestie, dolor vel auctor molestie, turpis massa dictum leo, non adipiscing velit mauris et orci. Nullam in odio quis leo semper laoreet. Fusce mollis, dolor quis varius feugiat, metus nulla blandit enim, id tincidunt enim mi sit amet elit. Proin laoreet ornare sollicitudin. Morbi ligula risus, cursus ut elementum in, congue et est. Aliquam erat volutpat.

Aenean id tellus eget est dignissim auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut eu hendrerit nisi. Sed egestas volutpat tristique. Nulla sed metus sem, id tristique neque. Vivamus porta accumsan consequat. Fusce ultrices, nulla eget tempor dapibus, tortor libero laoreet sapien, et ultrices eros turpis ac mi.

Generati 5 paragrafi, 430 parole, 2883 byte di Lorem Ipsum

LOREM IPSUM ENGLISH

WHAT IS LOREM IPSUM?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

WHAT DOES IT COMING FROM?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

WHY WE DO USE IT?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

WHERE I CAN GET SOME?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

JQuery Lightbox Image Overlay Pop Out Effect For Blogger

Step 1. go to your Blogger dashboard click Design > Edit Html.
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)
]]></b:skin>

And put this code directly Above the following code.

/*start css lightbox*/
/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}
/*end lightbox css*/

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)


</head>

And put this code directly Above the following code.

<!--Start lightbox scripts info from http://www.spiceupyourblog.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.lightbox-0.5.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;a.spicebox&#39;) .lightBox({

overlayOpacity: 0.6,
imageLoading: &#39;http://1.bp.blogspot.com/-E4eaouKn-VA/TdvW6y3ZZxI/AAAAAAAAEEM/6UHhujshJsg/s1600/lightbox-ico-loading.gif&#39;,
imageBtnClose: &#39;http://2.bp.blogspot.com/-akpfLVo73Zk/TdvW4dmQALI/AAAAAAAAEEA/jn9ZWXFrYcI/s1600/lightbox-btn-close.gif&#39;,
imageBtnPrev: &#39;http://3.bp.blogspot.com/-rWUtFwoKp3M/TdvW6VzTTpI/AAAAAAAAEEI/7afUa6r4H9Q/s1600/lightbox-btn-prev.gif&#39;,
imageBtnNext: &#39;http://3.bp.blogspot.com/-LFX48wGyrqc/TdvW6Md87dI/AAAAAAAAEEE/1gec9BHuVuc/s1600/lightbox-btn-next.gif&#39;,
containerResizeSpeed: 350,
txtImage: &#39;Image&#39;,
txtOf: &#39;Of&#39;
});
});
</script>
<!--end lightbox scripts-->


Save your template, that's the Css and Script added next we see how to add it to selected images.

When you add an image to your blog that you want to use the lightbox effect simply add class="spicebox" and title="Description Here".

<a class="spicebox" title="Image Description Here" href="http://image.jpg"><img src="http://image.jpg"></a>

Red - The Class Must Be Added To Images Were Shown.
Blue - Add Title And Replace Image Description Here With Your Description.

Create a Syntax Highlighter for blogger

Syntax Highlighter are generally used for blogs, which mainly focus on scripting tutorials. We could have seen in many popular blogs using script highlighter to highlight the script. It not only highlight the script, but also give us a clear idea, how the script was formulated. This javascript can be capable of displaying css, xml, jscript, python, c# and much more supported programing languages. Most of the blogs are using the older version of Syntax Highlighter created by Alexgorbatchev.  So here I am going to teach you, how to install syntax highlighter 2.1 (latest version) on your blogger / blogspot blogs. Before you could get in to the process, I recommend you to back up your template.

Step 1: I made the installation steps more simple to help people implement it without any mess. Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code.

<head>

<link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/bloggermintcom/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/bloggermintcom/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/bloggermintcom/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/bloggermintcom/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/bloggermintcom/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 2: Whenever you publish a post with script, include the script within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

For an example:
<pre class="brush: js">
<div id="tweets">
<script type='text/javascript'>
$(function(){
$('#tweets').tweetable({username: 'bloggermint', time: true, limit: 5});
});
</script>
</div>
</pre>


Will display like the below image on your blog post.

Before adding any script within <pre>, make the script postable on your blogs. In order to do that use Postable by Elliotswan. This makes your script visible more faster on your blog. I tested in all the major web browser and it works perfectly fine.

Create menubar with close and open button

Instructions for Blogger
1. Search for ]]></b:skin> and paste the following CSS code immediately before it.


#menubar {
    border-bottom:3px solid #ECF1EF;
    background:url('bg1.png') repeat-x;
    font-size:14px;
    font-family: Arial, Helvetica, Sans-serif;
    color:#FFF;
    padding:10px 0px;
    position:relative;
    top:0;
    left:0;
    z-index:2000;
    width:100%;
    text-align:center;
    height:20px;
}
#menubar a {
    color:#FFF;
    text-decoration:none;
}
#closebtn {
    background:url('close.png') top no-repeat;
    border:none;
    margin-left:15px;
    position:absolute;
    cursor:pointer;
}
#menu {
    cursor:pointer;
    position: relative;
    z-index: 1000;
}

/* Optional for subscribe box */
      
.menubar {
    margin: 0pt auto;
    width: 600px;
}
.menubar form {
    float: left;
    margin: 1px 10px 0;
    width:275px;
}
.menubar .sbox {
    border: 1px solid #555555;
    border-radius: 5px 5px 5px 5px;
    color: #888888;
    float: left;
    margin: -2px 0 0;
    padding: 3px;
    width: 155px;
}
.menubar     .go {
    float: left;
    margin: -2px 0 0 10px;
    height: 24px;
}
.menubar #closebtn {
   margin-left: -20px;
}

2. Add the following jQuery scripts before closing </head> tag.

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    function anim(duration){
        $('#menu').animate(
            {height: 'toggle'},
            {duration: duration, specialEasing: {height: 'easeOutBounce'}}
        );
    }

    $('#closebtn').click(function() {
        $('#menubar').slideUp();
        anim(800);
    });

    $('#menu').click(function() {
        anim(500);
        $('#menubar').slideDown('slow','easeOutBounce');
    });
});
</script>

3. Add the HTML code immediately after opening <body> tag.


<div id="menubar">
        <div class="menubar">
            <span style="float: left; margin: 3px 0pt 0pt; font-weight: bold;">Get the latest updates from us for free</span> 
            <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?thedoctortemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
            <input type="email" name="email" class="sbox" placeholder="Your email address here!"/>
            <input type="hidden" name="uri" value="thedoctortemplate"/>
            <input type="hidden" value="en_US" name="loc"/>
            <input type="submit" value="Subscribe" class='go'/>
            </form>
            <input type='button' id='closebtn' />
        </div>
</div>
<div id="mint" style="display:none;position:absolute;top:0;right:10px;">
    <img src="ribbon1.png" />
    <input type='hidden' id='mint' />
</div>

Simple Feedback Form Using jQuery And CSS For Blogger

Its been a long time I written a tutorial for Blogger. All these days you can see me into Blogger templates and WordPress themes, but I love creating tuts more than making themes or templates whatever. Ok, so today I will take to you to a simple feedback form tutorial for Blogger users using the jQuery and CSS. The original source of this tutorial was from Tutorialzine, we made some modification, changed the form method and made it work smoothly for blogger. So lets get started.


Step 1: Open your Blogger Dashboard and navigate to Edit HTML and check on Expand Widget Templates

Step 2: Now search for ]]></b:skin> and paste the below code before ]]></b:skin>


#feedback{
    background-color:#9db09f;
    width:310px;
    height:330px;
    position:fixed;
    bottom:0;
    right:120px;
    margin-bottom:-270px;
    z-index:10000;
}

#feedback .section{
    background:url('http://3.bp.blogspot.com/-1s7LCeIriZs/TanIgBrHbZI/AAAAAAAABVQ/e6cFn2YVs3g/s1600/bg.png') repeat-x top left;
    border:1px solid #808f81;
    border-bottom:none;
    padding:10px 25px 25px;
}

#feedback .color{
    float:left;
    height:4px;
    width:20%;
    overflow:hidden;
}

#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}

#feedback h6{
    background:url("http://2.bp.blogspot.com/-a5wMSPFePGA/TanHp_VULEI/AAAAAAAABVI/LrbmO6lhi6I/s1600/feedback.png") no-repeat;
    height:38px;
    margin:5px 0 12px;
    text-indent:-99999px;
    cursor:pointer;
}

#feedback .message{
    font-family:Corbel,Arial,sans-serif;
    color:#5a665b;
    text-shadow:1px 1px 0 #b3c2b5;
    margin-bottom:20px;
}

#feedback .arrow{
    background:url('http://1.bp.blogspot.com/-bi7tAyJaufA/TanIZhJbV_I/AAAAAAAABVM/7hPa9lLKLAI/s1600/arrows.png') no-repeat;
    float:right;
    width:23px;
    height:18px;
    position:relative;
    top:10px;
}

#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}

<div id='feedback'>

    <!-- Five color spans, floated to the left of each other -->

    <span class='color color-1'/>
    <span class='color color-2'/>
    <span class='color color-3'/>
    <span class='color color-4'/>
    <span class='color color-5'/>

    <div class='section'>

        <!-- The arrow span is floated to the right -->
        <h6><span class='arrow up'/>Feedback</h6>
<p class='message'>Drop in your suggestions about our blog. We appreciate your feedback.</p>
FORM SCRIPT GOES HERE
    </div>
</div>

Step 3: Search for &lt;div id='main-wrapper'&gt; and place the below before &lt;div id='main-wrapper'&gt;

Step 4: In order to ensure the smoothness when its clicked, we are adding a little script. If jQuery is initialized previously initialized in your blog template, add only the second script after <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='http://sites.google.com/site/bloggermint/script.js'/>

Stickybar Tutorials

Step 1:Lets start with the HTML section which has the content to be display on your blog or website.

<div id='stickybar'>
        Trending: <a href='YOUR POST URL'>Your blog title goes here</a>
<input type='button' id='closebtn' >
</div>

WordPress user add it to the footer before </body> ,change the information appropriately and save it. Blogger users can also follow the same process.

Step 2: In order to give a visual appeal to the sticky bar, we are going to design the sticky bar using CSS.

#stickybar {
        border-bottom:1px solid #ECF1EF;
        background:#151715;
        font-size:16px;
        color:#FFF;
        padding:10px 20px;
        position:fixed;
        bottom:0;
        left:0;
        z-index:2000;
        width:100%;
        text-align:center;
}
#stickybar a {
       color:#FFF;
       text-decoration:none;
}
#closebtn {
       background:url('http://3.bp.blogspot.com/-yl6foC85E0U/TbRPUVi8GPI/AAAAAAAABWI/yd3Bi5BkHoY/s1600/close.png') top no-repeat;
       border:none;
       margin-left:15px;
       position:absolute;
}


If you want to change the background color from default black to any color which you like, use our color code picker and change the color code values for the background.

Step 3: Now in order to achieve the opacity and close button action, we are using this jQuery code. Before adding this ensure that you already have jQuery initialized on your blog. If not add <script src="http://code.jquery.com/jquery-1.5.js"></script> before </head>

<script type='text/javascript'>
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var sibar = function() { $('#stickybar').fadeTo(fadeSpeed,1); }, stbar = function() { $('#stickybar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add mouseover events
stbar();
$('#stickybar').bind('mouseenter',sibar);
$('#stickybar').bind('mouseleave',stbar);
inside = true;
}
});
//close
$('#closebtn').live('click', function(event) {
$('#stickybar').toggle('show');
});
})();
});
</script>

If you want to speed up the fading speed and the percentage of opacity, change the values under //settings in the code. WordPress and Blogger users ensures that the code is placed within </head>