Posts

Free Copyblogger-V2 Blogger Template

Image
Download     Live Preview The Main Features Of  Copyblogger  Blogger Template Nice and Simple Design Responsive theme SEO Optimized Fast loading Theme Low Errors In W3C Validation 2 Drop down Navigation Menus Custom Search bar Custom Designed Follow by Email Widget Custom About me widget Page navigation Widget Stunning Threaded Comments Section Custom Email subscription widget Customized heading tags (h1 to h6) How To Upload The Blogger Template Go to  Blogger Dashboard  > Locate your Blog if you have more then one blog. Click on  More Options  Drop Down and choose Template Click on the  Backup/Restore  button on Top Right Corner Click on  Download Full Template  button to backup your Old template for safety  Click the  Browse  button and locate Copyblogger-V2 blogger template. Click on the  Upload  Button. And you are Done! Customization Basic Steps : These are basic steps you need to follow for each customization.
Post a Comment
Read more

How To Add Social Sharing Widget In Blogger?

Image
Go to Blogger > Template > Edit HTML In Edit HTML got to Jump Break > Blog1 Now Find <data:post.body/>  using ctrl+f Paste the below code after <data:post.body/ Save your template and you are done ! <b:if cond='data:blog.pageType == "item"'> <table border='0'> <tr> <td><div style='margin-right:5px;'> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td> <td><div style='padding-top:6px;'> <script type='text/javascript'> tweetmeme_style = &quot;compact&quot;; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> </div></td> <td><div style='margin-right:25px;'> <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div>
Post a Comment
Read more

Add Stylish Subscribe Box In Your Blog

Image
Go to  Blogger  →  Layout  →  Add Gadget  →  HTML/JavaScript Add the following code into it. <style type="text/css"> #subscribe-wrapper { background: url(http://softglad.at.ua/images/border.png) repeat scroll 0 0 transparent; padding: 3px; } #subscribe-box { background: url(http://softglad.at.ua/images/bg.png) repeat scroll 0 0 #F7F7F7; border-radius: 15px; padding:5px; overflow: hidden; } a.linkopacity img { filter:alpha(opacity=75); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -webkit-transition:All .5s ease; -moz-transition:All .5s ease; -ms-transition:All .5s ease; -o-transition:All .5s ease; transition:All .5s ease; padding: 3px; border: 1px solid #999; } a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity: 1; -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44); -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44); box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44); } #subscribe-box:hover table {  
Post a Comment
Read more

Recent Post Widget With Thumbnail and Tooltip For Blogger

Image
Blogger > Layout > Add Gadget > HTML/JavaScript Add the following code in it and Save it. <style type="text/css"> #post-gallery {   width:304px;   margin:0px auto;   font:normal 11px Arial,Sans-Serif;   color:#494848;   padding:8px;   background-color:#17B986;   -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);   -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);   box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);   -webkit-border-radius:4px;   -moz-border-radius:4px;   border-radius:4px; } #post-gallery h2 {   font:20px Arial,Sans-Serif;   color:white;   text-shadow:0px 3px 2px black;   text-transform:uppercase;   margin:2px 2px 2px;   padding:7px 14px;   background-color:#48D;   text-align: center; } #post-gallery .rp-item {   float:left;   display:inline;   position:relative;   margin:2px;   padding:0px 0px;   background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;   width:72px;   height:72px; } #post-gallery .rp-ite
Post a Comment
Read more

Popular Post with Carousel Slider

Image
Blogger widget : Popular Post with Carousel Slider Login to Blogger Dashboard and navigate to  Design – Page Elements Click “Add Gadget” and Choose “Popular Posts” After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript” Put all script bellow to the “Content” of HTML/Javascript Gadget Done- your popular post now with animation <style> #slider ol,#slider ul,#slider li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } .popular-posts img { margin: 0 !important; padding:0 !important; width:150px; height:120px; } ol, ul { list-style: none; } .wrapper { width: 720px; margin: 0 auto; position:relative; } .clear { clear: both; } .display-none { display:none; } #slider { position: relative; top: -2px; z-index: 1; } #slider .prev { position: absolute; width: 21px; height: 21px; display: block; background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat
Post a Comment
Read more

Add Facebook Like Box on the Bottom of Posts

Image
Adding Facebook Like Box Below Blogger Posts Go To Blogger > Design > Edit HTML Backup your template Check the "Expand widget Templates" box Search for this <data:post.body/> Just after it paste the code below, <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href= http%3A%2F%2Fwww.facebook.com%2FA2zHackers&amp ;width=590&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/> Make this change please: Replace the  bolded blue text  with your Facebook Like Page Link (Do not include http://) In your Page URL replace all back slashes i.e (  /   ) with  %2F then after replacing the back slashes with %2F it will look like this, www.facebook.com%2FA2zhackers To change the width, just adjust
3 comments
Read more

How To Add Recent Comment Widget With Avatar in Blogger

Image
1 . Go to Blogger > Template > Edit HTML. 2 . Find   ]]></b:skin>   and add one of the following CSS code before it. .sg_recent_comments li {      -webkit-transition: . 5 s;      -moz-transition: . 5 s;      -ms-transition: . 5 s;      -o-transition: . 5 s;      transition: . 5 s;      border : 2px solid transparent ; } .sg_recent_comments li:hover {      -webkit-transform: scale( 1.2 ) translate( 15px );      -moz-transform: scale( 1.2 ) translate( 15px );      -ms-transform: scale( 1.2 ) translate( 15px );      -o-transform: scale( 1.2 ) translate( 15px );      transform: scale( 1.2 ) translate( 15px );      box-shadow: 0 0 20px 1px #aaa ; } I hope you like this widget. If you got anything wrong from this widget you can comment on below..
Post a Comment
Read more