All Digital Guide: Blogger Widgets

Five New Subscription Widgets For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="success">
Below are the five stylist social subscription widgets for blogger.<br />
<br />
TYPE ONE</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-pTLclTrfAqUKrZ7IgFl55woSH2CU0GicZvt8QsYY1PyK_1HQD7UxAN0lLuo-ZejqSlLCvT_fXNQhYz2AfpQlePpnmPa36Hrhc9c1CO3WpBgKSSB0nNudH56nPrKz8gjU9aX8LWYNeM/s1600/SubscriptionWidget.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="SubscriptionWidget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-pTLclTrfAqUKrZ7IgFl55woSH2CU0GicZvt8QsYY1PyK_1HQD7UxAN0lLuo-ZejqSlLCvT_fXNQhYz2AfpQlePpnmPa36Hrhc9c1CO3WpBgKSSB0nNudH56nPrKz8gjU9aX8LWYNeM/s320/SubscriptionWidget.jpg" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<pre class="prettyprint linenums"><style>
    #sidebar-subscribe-box {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 3px;
        padding: 3px 0
    }
    .sidebar-subscribe-box-wrapper {
        background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4e38af4FsU_GvqGM-xzbxjXthAQ7jwE9lP2a8AiajkpGI8mrJByq2yE94tWU_64-caHaCZP8cZyyulShPXLYbqiJh6GnMVxL5GFZNPfofEVzlH91v9jJZSH5zHF-DpMc0vbL7Jx6hPs/s1600/background.png) repeat scroll 0 0 #f7f7f7;
        color: #111;
        font-size: 14px;
        line-height: 20px;
        padding: 1px 20px 10px;
        text-align: center;
        text-transform: uppercase
    }
    .sidebar-subscribe-box-form {
        clear: both;
        display: block;
        margin: 10px 0
    }
    form.sidebar-subscribe-box-form {
        clear: both;
        display: block;
        margin: 10px 0 0;
        width: auto
    }
    .sidebar-subscribe-box-email-field {
        -moz-border-radius: 4px;-webkit-border-radius:4px;background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fz-KdnAuHJHEATVqts8dQ-G4t8JNbAIs_26GqtOdVM1n_nIa2UBSb6-HvMtTJxj8CRoyifZr9c2QJOZQbJBuIDA6JktfMKIg1pYktuM5wulsdZd5DMPkhSMnrygP6w-DCjE6-iZjGyY/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
        .sidebar-subscribe-box-email-button {
            background: #09f;
            border: 1px solid #007fff;
            box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.3) inset, 0 1px 0 transparent;
            color: #fff;
            cursor: pointer;
            font-family: verdana;
            font-weight: 700;
            padding: 10px;
            text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, .4);
            text-transform: uppercase;
            width: 100%
        }
        .sidebar-subscribe-box-email-button:hover,
        .sidebar-subscribe-box-email-button:focus {
            background: #1ca4ff
        }
        .sidebar-subscribe-box-email-button:active {
            -moz-box-shadow: 0 1px 4px rgbaundefined0, 0, 0, 0.5) inset;
            -webkit-box-shadow: 0 1px 4px rgbaundefined0, 0, 0, 0.5) inset;
            box-shadow: 0 1px 4px rgbaundefined0, 0, 0, 0.5) inset;
            outline: 0
        }
        iframe,
        object,
        embed,
        .yt-border iframe,
        .yt-border object,
        .yt-border embed,
        table {
            width: 100%
        }
        embed {
            border-radius: 3px;
            -moz-box-shadow: 0 2px 4px rgbaundefined0, 0, 0, 0.2);
            -webkit-box-shadow: 0 2px 4px rgbaundefined0, 0, 0, 0.2);
            background: #FFF;
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgbaundefined0, 0, 0, 0.2);
            margin: 0;
            padding: 4px 4px 4px
        }
        #footer-section {
            border-top: 1px solid #aaa;
            box-shadow: inset 0 4px 6px -3px #aaa;
            font-family: cambria;
            font-size: 14px;
            height: 100px;
            margin: 10px -30px 5px;
            padding: 0 30px;
            text-align: center;
            width: 100%
        }
        a.social-icons {
            margin-right: 5px;
            height: 45px;
            width: 45px;
        }
        a.social-icons:hover {
            opacity: .7;
            filter: alphaundefinedopacity=70);
        }
</style>
<div id="sidebar-subscribe-box">
    <div class="sidebar-subscribe-box-wrapper">
        <br/>
        <a class="social-icons" href="https://facebook.com/alldigitalguide">
            <img src="http://i42.photobucket.com/albums/e324/alldigitalguide/facebook_zps8700b3d7.png" />
        </a>
        <a class="social-icons" href="https://twitter.com/hasanali737">
            <img src="http://i42.photobucket.com/albums/e324/alldigitalguide/twitter_zps47e6ab32.png" />
        </a>
        <a class="social-icons" href="https://plus.google.com/118067472090521095383">
            <img src="http://i42.photobucket.com/albums/e324/alldigitalguide/googleplus_zps432c8afe.png" />
        </a>
        <a class="social-icons" href="http://www.feedburner.com/blogspot/qwzKq">
            <img src="http://i42.photobucket.com/albums/e324/alldigitalguide/rss_zps655044d2.png" />
        </a>
        <p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
        <div class="sidebar-subscribe-box-form">
            <form action="http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide" class="sidebar-subscribe-box-form" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
            target="popupwindow">
                <input name="uri" type="hidden" value="AllDigitalGuide" />
                <input name="loc" type="hidden" value="en_US" />
                <input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address" />
                <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" />
            </form>
        </div>
    </div>
</div></pre>
<br />
<div class="success">
TYPE TWO</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYHPlmvG-QqSXi20PTtlwb5WjOy2t3pBCyksIDvsnTEQnAGl02GDRzsBLYVNGkm67kU4NhFJM7GJuccR_H6e-uVPTIFzGqONLur32l30LMBLuJ0ggjAQ5O4iCB_xAkytLAb5t5HMLbBs/s1600/SubscriptionWidget.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYHPlmvG-QqSXi20PTtlwb5WjOy2t3pBCyksIDvsnTEQnAGl02GDRzsBLYVNGkm67kU4NhFJM7GJuccR_H6e-uVPTIFzGqONLur32l30LMBLuJ0ggjAQ5O4iCB_xAkytLAb5t5HMLbBs/s1600/SubscriptionWidget.jpg" width="320" /></a></div>
<pre class="prettyprint linenums"><style>
    #socialnetworking {
        border: 1px solid #ebebeb;
        width: 280px;
    }
    .fb-likebox {
        padding: 10px 10px 0 10px;
        border-bottom: 1px solid #ebebeb;
    }
    .googleplus {
        background: #787c7b;
        border-top: 1px solid white;
        border-bottom: 1px solid #ebebeb;
        font-size: 12px;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;
        font-family: Verdana, Geneva, sans-serif;
    }
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        margin: 9px 70px;
        width: 280px;
    }
    #widgetbox {
        background: #EBEBEB;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;
    }
    #widgetbox .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration: none;
    }
    .g-plusone {
        float: left;
    }
    .twitter {
        background: #b1dff5;
        border-top: 1px solid #fff;
        padding: 10px;
    }
    .fb {
        background: #0a94d4;
        border-top: 1px solid white;
        border-bottom: 1px solid #ebebeb;
        font-size: 12px;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;
        font-family: Verdana, Geneva, sans-serif;
    }
    .fb span {
        color: #000;
        font-size: 11px;
        position: absolute;
        margin: -12px 100px;
        width: 280px;
    }
    .pterest {
        background: #EFF5FB;
        border-bottom: 1px solid #ebebeb;
        font-size: 12px;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;
        font-family: Verdana, Geneva, sans-serif;
        border-top: 1px solid #ddd;
    }
    #email-news-subscribe .email-box {
        padding: 5px 10px;
        font-family: "Arial", "Helvetica", sans-serif;
        border-top: 0;
        border-image: initial;
        height: 35px;
        background: #fbfbfb;
        width: 260px;
    }
    #email-news-subscribe .email-box input.email {
        background: #FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial", "Helvetica", sans-serif;
    }
    #email-news-subscribe .email-box input.email:focus {
        color: #333
    }
    #email-news-subscribe .email-box input.subscribe {
        background: -moz-linear-gradientundefinedcenter top, #afafaf 0, #FF9B00 100%);
        background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0, #FFCA00), color-stopundefined1, #FF9B00));
        background: -moz-linear-gradientundefinedcenter top, #FFCA00 0, #FF9B00 100%);
        -pie-background: linear-gradientundefined270deg, #ffca00, #ff9b00);
        font-family: "Arial", "Helvetica", sans-serif;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border: 1px solid #cc7c00;
        color: white;
        text-shadow: #d08d00 1px 1px 0;
        padding: 7px 14px;
        margin-left: 3px;
        font-weight: bold;
        font-size: 12px;
        cursor: pointer;
        border-image: initial;
    }
    #email-news-subscribe .email-box input.subscribe:hover {
        background: #ff9b00;
        background-image: -moz-linear-gradientundefinedtop, #ffda4d, #ff9b00);
        background-image: -webkit-gradientundefinedlinear, left top, left bottom, fromundefined#ffda4d), toundefined#ff9b00));
        filter: progid: DXImageTransform.Microsoft.GradientundefinedstartColorStr=#ffffff, endColorStr=#ebebeb);
        outline: 0;
        -moz-box-shadow: 0 0 3px #999;
        -webkit-box-shadow: 0 0 3px #999;
        box-shadow: 0 0 3px #999 background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0, #ffda4d), color-stopundefined1, #ff9b00));
        background: -moz-linear-gradientundefinedcenter top, #ffda4d 0, #ff9b00 100%);
        -pie-background: linear-gradientundefined270deg, #ffda4d, #ff9b00);
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border: 1px solid #cc7c00;
        color: #FFFFFF;
        text-shadow: #d08d00 1px 1px 0
    }
</style>
<div id="socialnetworking">
    
    <div class="fb-likebox">
        
        <center>
            <a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/110774830949115484638" target="_blank">
                <img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/google_plus.png" />
            </a>
            <a style="margin-right: 10px;" href="http://www.facebook.com/alldigitalguide" target="_blank" rel="nofollow">
                <img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/facebook.png" />
            </a>
            <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/AllDigitalGuide" target="_blank" rel="nofollow">
                <img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/rss.png" />
            </a>
            <a style="margin-right: 10px;" href="http://twitter.com/alldigitalguide" target="_blank" rel="nofollow">
                <img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/twitter.png" />
            </a>
        </center>
    </div>
    <div class="googleplus"> <span><font><font color="white">Recommend Us On Google </font></font></span> 
        
        
        <g:plusone size="medium"></g:plusone>
        
        <script type="text/javascript">
            undefinedfunction undefined) {
                var po = document.createElementundefined'script');
                po.type = 'text/javascript';
                po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagNameundefined'script')[0];
                s.parentNode.insertBeforeundefinedpo, s);
            })undefined);
        </script>
        <script type="text/javascript">
            gapi.plusone.renderundefined'plusone-div', {
                "size": "medium",
                "count": "true"
            });
        </script>
    </div>
    <div class="fb">
        
        <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Falldigitalguide&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no"
        frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"></iframe> <span><font color="white">Like Us On Facebook</font></span> 
    </div>
    <div class="twitter">
        
        <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=alldigitalguide&amp;show_count=true&amp;show_screen_name=true&amp;size=m"
        class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"></iframe>
        <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
    <div id="email-news-subscribe">
        
        <div class="email-box">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                <input class="email" type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;"
                />
                <input type="hidden" value="AllDigitalGuide" name="uri" />
                <input type="hidden" name="loc" value="en_US" />
                <input class="subscribe" name="commit" type="submit" value="Subscribe" />
            </form>
        </div>
    </div>
    </pre>
<div class="success">
TYPE THREE</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3YhnrptGWvCeLw2jLHEvvHGW0XG-Ae3vN40faO-LEHytA-5CsoxYFlVokFQAUowSqdjdoO7accSOmobt1qZpZJSgWUC-1htROtLxaizweDxGxgipRZEcROeRxe0-EwJ1Qf0gsBI0wTys/s1600/SubscriptionWidget3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3YhnrptGWvCeLw2jLHEvvHGW0XG-Ae3vN40faO-LEHytA-5CsoxYFlVokFQAUowSqdjdoO7accSOmobt1qZpZJSgWUC-1htROtLxaizweDxGxgipRZEcROeRxe0-EwJ1Qf0gsBI0wTys/s1600/SubscriptionWidget3.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<pre class="prettyprint linenums"><div class="subscribe_outer">
<div class="subscribe_wrapper">
<h5>Subscribe Via Email</h5>

<p>Enter your email to get free Updates</p>
<div id="adgEmailsub">
<form class="adgEmailform" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="AllDigitalGuide" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input class="emailText" type="text" value="Enter your email..." onfocus="if undefinedthis.value == " enter your email...") {this.value="" }" onblur="if undefinedthis.value == " ") {this.value="enter your email..." ;}" name="email" />
<input class="emailButton" type="submit" value="Signup Now! undefinedFREE)" title="" />
</form>
</div>
</div>
</div>

<style>

.subscribe_outer {
    background: urlundefined"http://i42.photobucket.com/albums/e324/alldigitalguide/Mobile%20Uploads/strips_zps666b2962.jpg") repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
.sidebar .subscribe_wrapper h5 {
    color: #FFFFFF;
}
.sidebar h5 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;
    padding: 4px 0 10px;
}
h5, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sidebar .subscribe_wrapper h5 {
    color: #FFFFFF;
}
.sidebar h5 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;

padding: 4px 0 10px;
}
h5, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.subscribe_wrapper {
    background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4e38af4FsU_GvqGM-xzbxjXthAQ7jwE9lP2a8AiajkpGI8mrJByq2yE94tWU_64-caHaCZP8cZyyulShPXLYbqiJh6GnMVxL5GFZNPfofEVzlH91v9jJZSH5zHF-DpMc0vbL7Jx6hPs/s1600/background.png") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
    padding: 38px 50px 18px 38px;
}
.emailButton {
    background:#249334;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: urlundefined"http://i42.photobucket.com/albums/e324/alldigitalguide/Mobile%20Uploads/msg_zpsfec161c4.jpg") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgbaundefined0, 0, 0, 0.05) inset;
    color: #444444;
    padding: 10px 40px;
    margin: 0 0 15px;

text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family: Georgia,"Times New Roman",Times,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.post-body .emailButton {
    width: 300px;
}
.emailButton {
    background: -moz-linear-gradientundefinedcenter top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4);
    width: 100%;
}
</style></pre>
<br />
<div class="info">
CUSTOMIZATIONS</div>
➨Replace <span style="color: red;">Alldigitalguide</span> with your feed url and <span style="color: blue;">alldigitalguide</span> with your social networks usernames.<br />
<br />
Please Note:I am working on remaining two and will update soon!<br />
Keep Visiting!!!!<br />
<br /></div>

Blogger Widgets Five New Subscription Widgets For Blogger

Below are the five stylist social subscription widgets for blogger. TYPE ONE <style> #sidebar-subscribe-box { wid...

Read More>> >>

How To Add Hover Effect In Your Blogger Blockquote

7:10 pm 0

<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>