All Digital Guide

How To Add Hover Effect In Your Blogger Blockquote

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Learn how to customize your blockquote to make it eye catching.You can also show codes in your blockquote without the need to add syntax highlighter.You can also change the blockquote background colour and hover colour as per as your needs.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxm4j9Ncr-yq7c2PrtqHILIdlJNiiYRQT7hKgtm8KYaWz_u9l2hGfsTl-RaBy7p-qxO1C-0Aky_TsoUU9Td5XS7kNLD-oD7DPrrZFRceQcZee1c9vr4WnM9E492zpUui4Xl_7jzUlqlxE/s1600/BLOCKQUOTE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxm4j9Ncr-yq7c2PrtqHILIdlJNiiYRQT7hKgtm8KYaWz_u9l2hGfsTl-RaBy7p-qxO1C-0Aky_TsoUU9Td5XS7kNLD-oD7DPrrZFRceQcZee1c9vr4WnM9E492zpUui4Xl_7jzUlqlxE/s1600/BLOCKQUOTE.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;">                                </span></div>
<div class="success">
Add Beautiful Blockquote With Hover Effect</div>
➨Go To Blogger>>Dashboard>>Template>>Edit HTML<br />
➨Using Ctrl+F find  >><b>]]></b:skin> </b><br />
➨Paste the code given below just above <b>]]></b:skin></b><br />
<b><br /></b></div>
<blockquote>
/**************************************************
 Blockquote By All Digital Guide
***************************************************/

.post blockquote {
 font-size:15px;
 font-family:Verdana;
 font-weight:normal;
 font-style:italic;
 background-color:#F2F1F1;
 color:#000;
 margin:5px 10px;
 padding:20px 20px 20px 20px;
 border:2px dotted lightgrey;
 border-radius:10px;
 box-shadow:-1px -1px 12px 2px gainsboro;
 transition:background-color .777s;
 -webkit-transition:background-color .777s;
 -moz-transition:background-color .777s;
 -o-transition:background-color .777s;
 -ms-transition:background-color .777s;
}
 .post blockquote:hover {
  background-color:gray;
  color:#fff;
 }
 .post blockquote:active {
  background-color:lightgray;
  color:#000;
}
</blockquote>
<br />
<div class="info">
CUSTOMIZATIONS</div>
➨ To change the color of blockquote change the colour in line 25 and 29 .You can use any colour like lightgray,lightblue,black,pink,etc. OR you can use colour code.<br />
For colour codes <a href="http://alldigitalguide.blogspot.com/p/colour-codes.html">Click here</a><br />
<b>NOTE:</b>The code in blue is of  "MOUSE HOVER COLOR" and the code in red is of "MOUSE CLICKED COLOUR"           <br />
                                                         <span style="display: inline !important;"></span> <span style="display: inline !important;"><a class="LIVE DEMO" href="http://basicguides.blogspot.in/p/blockquote-demo.html" rel="nofollow" style="float: left;" target="_blank">
  <span style="display: inline-block;">
    Live Demo
  </span>
</a><br />
                            <br />
                    <br />
                                        <span style="display: inline-block;"> </span></span></div>
</div>

Blogger Widgets How To Add Hover Effect In Your Blogger Blockquote

Learn how to customize your blockquote to make it eye catching.You can also show codes in your blockquote without the need to add syntax ...

Read More>> >>

Stylish Static Facebook Like Box Widget For Blogger Blog

12:34 am 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeQS9i8zL83dhqShwdiEu8aj8x396qmITupnf_UQCJj-7qHx-E9__XglTByGobbHRXGwTbtmTnf7edM1Nu42z88K8ukHIgZT5nF9U_rhFRLyLv0INCM07Us7ME3Q4iD6WgHbbK3p3Oqc/s1600/New+Picture.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="369" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeQS9i8zL83dhqShwdiEu8aj8x396qmITupnf_UQCJj-7qHx-E9__XglTByGobbHRXGwTbtmTnf7edM1Nu42z88K8ukHIgZT5nF9U_rhFRLyLv0INCM07Us7ME3Q4iD6WgHbbK3p3Oqc/s1600/New+Picture.bmp" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 14px; line-height: 20.591999053955078px;">Make it easier for your blog visitors to follow your facebook page with a single click with facebook like box widget .</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 14px; line-height: 20.591999053955078px;">The facebook follow button let's them follow you straight from your blog without having to visit facebook if they are logged in.</span></span></div>
<div style="text-align: left;">
Lets us start with the simple tutorial now!</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
>>Go to Blogger>>Dashboard>>Layout>>Add a gadget</div>
<div style="text-align: left;">
and paste the code given below</div>
<div style="text-align: left;">
<br /></div>
</div>
<pre class="prettyprint linenums"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FAllDigitalGuide&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true">
</iframe></pre>
>><b>CUSTOMIZATIONS</b><br />
>Replace <span style="color: red;">AllDigitalGuide </span>with your facebook page username.<br />
<span style="color: red;"><br /></span></div>

Blogger Blogger Widgets Stylish Static Facebook Like Box Widget For Blogger Blog

Make it easier for your blog visitors to follow your facebook page with a single click with facebook like box widget . The facebook ...

Read More>> >>

Professional Contact Form For Blogger

8:57 pm 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7L4PFQ45zXFcxORxGp5ZdDQuBOXi0yIscBi3-dEHH37J50EfU_l1IMf6079_PXuxWfxZNl95_hd5LvYUYtoEbNT6uZ18Gf63Nzq1hl69MzrMIKX1q9gvuFSjF_l6Ds_Se-bhbJUtkjO0/s1600/contactform.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7L4PFQ45zXFcxORxGp5ZdDQuBOXi0yIscBi3-dEHH37J50EfU_l1IMf6079_PXuxWfxZNl95_hd5LvYUYtoEbNT6uZ18Gf63Nzq1hl69MzrMIKX1q9gvuFSjF_l6Ds_Se-bhbJUtkjO0/s1600/contactform.jpg" width="293" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Learn how to add beautiful contact form in blogger blog easily with the help of following tutorial.<br />
<br />
Lets start with the tutorial!<br />
<h2 style="text-align: left;">
<b>STEP:1</b></h2>
>>Go to Blogger>>Layout>>Add a gadget<br />
>>Click on <b>MORE GADGETS</b><br />
Add Contact Form & Save.<br />
<h2 style="text-align: left;">
<b>STEP:2</b></h2>
Now the real work starts<br />
>>Go to Blogger>>Template>>Edit HTML<br />
Paste the following code before <b><span style="color: red;">]]></b:skin> </span></b><br />
<br />
<pre class="prettyprint linenums">#ContactForm1 {
 display:none;
}
#contact_wrap {
 margin:auto;
 width:321px;
 height:380px;
 padding:25px;
 border-radius:1em;
 border-top:1px solid #dbdbdb;
 border-right:1px solid #b2b2b2;
 border-left:1px solid #dbdbdb;
 border-bottom:1px solid #9d9d9d;
 background-color:#cccccc;
 filter:progid:DXImageTransform.Microsoft.gradientundefinedGradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
 background-image:-webkit-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
 background-image:-moz-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
 background-image:-ms-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
 background-image:-o-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
 background-image:linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
 box-shadow:1px 1px 5px #ccc;
}
 #contact_wrap h3 {
  color:#e8f3f9;
  font-family:Georgia;
  font-size:20px;
  font-style:italic;
  font-weight:bold;
  margin:0 -36px 20px -36px;
  padding:12px;
  text-align:center;
  text-shadow:2px 0 0 #1f4962;
  -webkit-box-shadow:inset 0 0 25px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
  -moz-box-shadow:inset 0 0 25px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
  box-shadow:inset 0 0 25px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
  background-color:#3689b9;
  position:relative;
 }
  #contact_wrap h3:before {
   content:' ';
   position:absolute;
   bottom:-10px;
   left:0;
   width:0;
   height:0;
   border-style:solid;
   border-width:10px 0 0 10px;
   border-color:#333 transparent transparent transparent;
  }
  #contact_wrap h3:after {
   content:' ';
   position:absolute;
   bottom:-10px;
   right:0;
   width:0;
   height:0;
   border-style:solid;
   border-width:0 0 10px 10px;
   border-color:transparent transparent transparent #333;
  }
#ContactForm1_contact-form-name {
 width:270px;
 height:auto;
 margin:5px auto;
 padding:10px 10px 10px 40px;
 background:#f6f6f6 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyGjFiBemGwo_N_x1ATcLF6tHk4E-dKJgLUvQSo154k9W2nKCYNY1oO8ZZmVM9MCOd3ae4oypgRuTO-m1FpTiSSbgvibcAikrF5X4_-k9Kcp9ZCAdIKP36db7F5dHevaFu4FRaSYoUGks/s1600/user.png)no-repeat 10px center;
 color:#777;
 border:1px solid #ccc;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
 box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email {
 width:270px;
 height:auto;
 margin:5px auto;
 padding:10px 10px 10px 40px;
 background:#f6f6f6 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5nMSdLSaWuXci8c-goHC7IJJ1IeYDX8ficX2rf9mWcjvVad8WMNo0knV5RfquRXTmBJD2joJYwUA_1LbiiSmhHO_Z1MZ0hM1F690eG7VG9o5EmFvR87iPH4OFTwUYAOnEamSTxJG7sI4/s1600/pen.png)no-repeat 10px center;
 color:#777;
 border:1px solid #ccc;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
 box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message {
 width:270px;
 height:150px;
 margin:5px auto;
 padding:10px 10px 10px 40px;
 font-family:Arial, sans-serif;
 background:#f6f6f6 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3h8mJK_ZF6YSxZG3HYAcjeOSW4g5dU_vowbvy3DqLjyPYylNv0BLeN8zZtLyX6X7gB7e8gQPVkbcFMcmGmn1kXJQVISJpNJJXrYYnsuZHBOaww-HKlI2eDynAgJNPdERmNpn6gzaXaU/s1600/msg2.png)no-repeat 10px 10px;
 color:#777;
 border:1px solid #ccc;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
 box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
 width:95px;
 height:30px;
 float:right;
 color:#FFF;
 padding:0;
 cursor:pointer;
 margin:25px 0 3px 0 0;
 background-color:#005a8a;
 border-radius:4px;
 text-shadow:1px 0 0 #1f4962;
 -webkit-box-shadow:inset 0 0 35px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
 -moz-box-shadow:inset 0 0 35px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
 box-shadow:inset 0 0 35px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
 background-color:#3689b9;
 border:1px solid #194f6d;
}
 #ContactForm1_contact-form-submit:hover {
  background:#4c9bc9;
 }
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
 width:320px;
 margin-top:35px;
}
</pre>
>>Save your template<br />
<br />
>>Now create a new page(you can name it as CONTACT)>>click on HTML and paste the code given below!<br />
<br />
<pre class="prettyprint linenums"><!DOCTYPE html>

<body>
    <div id="contact_wrap">
        <h3>Contact Us</h3>

<div id="ContactForm1_contact-form-success-message"></div>
            </div>
        </form>
    </div>
</body>
</html></pre>
                                              <br />
                                                 <span style="display: inline !important;"><a class="demobutton button" href="http://alldigitalguide.blogspot.in/p/contact-us.html" rel="nofollow" style="display: inline !important;" target="_blank"> Live Demo</a></span><br />
>>Publish your page<br />
Thats all!!<br />
If you face any problem then let me know in comments.</div>

Blogger Widgets Professional Contact Form For Blogger

Learn how to add beautiful contact form in blogger blog easily with the help of following tutorial. Lets start with the tutorial! ...

Read More>> >>

Official Twitter Follow Button For Blogger

8:19 am 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; line-height: 20.591999053955078px;">
<div class="separator" style="clear: both; font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtyo26P_pDlU_eQoqT3XOerE7Gp6Bn7h3HVNbEiMlqbvGPLwm_4oBWgcZVaA2Lv1rrQkD1ivTVPjWdRP2WtuBuXdrJs4tUpJEihUFVZzO2WOxUTiq-Pxambuf7TnnEdq0KB9FZ4iP2l1Q/s1600/Twitter-Follow-Button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtyo26P_pDlU_eQoqT3XOerE7Gp6Bn7h3HVNbEiMlqbvGPLwm_4oBWgcZVaA2Lv1rrQkD1ivTVPjWdRP2WtuBuXdrJs4tUpJEihUFVZzO2WOxUTiq-Pxambuf7TnnEdq0KB9FZ4iP2l1Q/s1600/Twitter-Follow-Button.jpg" width="320"></a></div>
<div style="font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;">
<br></div>
<span style="font-family: Trebuchet MS, Trebuchet, Verdana, sans-serif;">○ </span><span style="font-family: Georgia, Times New Roman, serif;">Make it easier for your blog visitor to follow you on Twitter with a single click.</span><br>
<span style="font-family: Georgia, Times New Roman, serif;">The Twitter follow button(with counts) let's them follow you straight from your blog without having to visit Twitter.</span><br>
</div></div></div>

Blogger Blogger Widgets Official Twitter Follow Button For Blogger

○ Make it easier for your blog visitor to follow you on Twitter with a single click. The Twitter follow button(with counts) let'...

Read More>> >>

How To Add A Download and Demo Button

9:57 am 0

Blogger Blogger Widgets How-to Useful Sites How To Add A Download and Demo Button

TYPE ONE (WITHOUT ANY EFFECT) Learn how to add a download/demo button in blogger or website ea...

Read More>> >>

10 Teenagers Who Built Million Dollar Companies

4:44 am 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="padding: 5px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLeW8Zr2jgJTgUSeCj-fGJLzscxXulSk4v8jSSJ2wAoR_iwKWgY3eFjaW89v_ipxQ_VH0XDJEq9iZ3zBuJgeHhPK2iT-iEFCXS4FTZg3Vj3b5Z-ezGfHp_npxqMkIK2jjthx9P8dXdtYg/"><img height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLeW8Zr2jgJTgUSeCj-fGJLzscxXulSk4v8jSSJ2wAoR_iwKWgY3eFjaW89v_ipxQ_VH0XDJEq9iZ3zBuJgeHhPK2iT-iEFCXS4FTZg3Vj3b5Z-ezGfHp_npxqMkIK2jjthx9P8dXdtYg/ cursor: pointer;" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid; padding: 5px;" width="320"></a></div>
<div dir="ltr">
When most of the boys and girls of their age were glued to the TV screen, busy playing video games or tensed about the year-end exams; these people set out to do something different. They built websites, developed mobile apps, sold lemonade and made millions of bucks for themselves,brought significant changes in our lives,built world class institutions and gave employment to thousands of their peers.Let’s meet 10 of them.</div>
<div dir="ltr">
<br></div>
<div dir="ltr">
○ <b><span style="font-size: large;">Mark Zuckerberg</span></b>(Facebook)<br>
As a teenager in Harvard,he used to write programmes for fun and was already known as a computer prodigy. ‘Facemash’ was one such fun endeavor started out of his dorm and grew on to become-what we now call- ‘Facebook’.  He became a billionaire at the age of 23.His personal net worth is $27.9 billion.Facebook has market capitalization of $134billion with 1.23 billion active users.<br>
</div></div>