Showing posts with label Blogger Guide. Show all posts
Showing posts with label Blogger Guide. Show all posts

How to add responsive search box for Blogger?

How to add responsive search box for Blogger?

Here, I am going to show you that how to add a responsive and good looking search box for your blogger website. This search box is totally based on HTML and CSS language. This responsive search box is suitable for Blogspot website.

Add responsive custom search box for Blogger

Code link of search box for Blogger

http://codepad.org/npegLX7n
After watching this video. You can easily setup a custom CSS search box for your Blogspot website. Hope, you will like this video. Thank you!

Add responsive author box on Blogger post

Add simple light blue author box on Blogger post

How to add simple author box widget below on Blogger's post? Author box widget for Blogger. Blogspot author box widget codes. Best responsive and simple author box widget for Blogger's blog.
Hello Bloggers! Welcome back on HowToLearnBlog. Here, I am going to share a simple light blue author box blogger widget to setup your author box, below to the every post of your blog. As we know that author box plays very important role to promote your identity and your contents on your blog. So let's go to set up a simple and responsive Author box for your blogger blog.

Follow these instructions to setup simple and responsive light blue author box widget below every posts of Blogger

  • Log on www.blogger.com 
  • Click on Layout 
  • Click on "Add a Gadget" just below of post (main) block.

  • Select HTML/JAVASCRIPT

  • Modify the below codes.
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <style type="text/css">
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
.authorboxwrap{margin:auto;padding:20px;overflow:hidden}
.avatar-container{background:rgba(0,0,0,.03);float:left;padding:7px;margin:0 20px 0 0;border:1px solid rgba(0,0,0,0.05)}
.avatar-container amp-img{width:90px;height:auto;max-width:100%!important;transition:all .3s}
.author_description_container h4{font-size:18px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#30373c}
.author_description_container p{margin:0;font-size:14px;margin-bottom:8px;line-height:22px;font-weight:400}
.author_description_container p a{color:#3498db;}.author_description_container p a:hover{color:#30373c;text-decoration:underline}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:#3498db;color:#fff;font-size:12px;text-align:center;display:inline-block;padding:10px 5px;margin:0 10px 0 0;width:32px;border-radius:5px}
.social-links li a:hover{background:#34495e;color:#fff;}</style>

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img alt='Author Name' class='author_avatar' height='90' src='http://2.bp.blogspot.com/-_0qyTMr2uYI/VIuQL9jbCDI/AAAAAAAAH2U/vPhwdobq9NE/s1600/Userava.png' title='Author Name' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'>Author Name</a>
<i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px' title='Verified Author'></i></h4>
<p>
Blog ini dibuat atas ketertarikan dan minat kami dengan website dan juga sebagai media sosial berbagi Info Menarik serta Hiburan lainnya.<b></b>
</p>
<span class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'></i></a></li>
</span>
</div>
</div>
</div>
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
  • Replace yellow marked image URL with your image URL.
  • Replace yellow marked Author Name with your name.
  • Replace yellow marked author description details with your details.
  • After replacing codes. Put the final code on html/javascript box.

  • After pasting your codes. Click on Save button.

Final touch for setting Author box on Blogger's blog.

I hope everything is clear. If you have any kind of problem regarding to setup author box on Blogger's blog. Then, Please write your problem below on comment box.

Add simple author box below on Blogger post

Add simple responsive author box widget below your Blogger post

How to add simple author box widget below on Blogger's post? Author box widget for Blogger. Blogspot author box widget codes. Best responsive and simple author box widget for Blogger's blog.

Hello Bloggers! Welcome back on HowToLearnBlog. Here, I am going to share a simple author box blogger widget to setup your author box, below to the every post of your blog. As we know that author box plays very important role to promote your identity and your contents on your blog. So let's go to set up a simple and responsive Author box for your blogger blog.

Follow these instructions to setup simple and responsive author box widget below every posts of Blogger

  • Log on www.blogger.com
  • Click on Layout
  • Click on "Add a Gadget" just below of post (main) block.

  • Select HTML/JAVASCRIPT

  • Modify the below codes.
<style type="text/css">
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
.sora-author-box {
overflow: hidden;
margin: 10px 0;
}
.sora-author-box img {
float: left;
margin-right: 10px;
object-fit:cover;
}
.sora-author-box p {
padding: 0 10px 10px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
.sora-author-box b {
font-weight: 700;
font-style: normal;
letter-spacing: 1px;
font-size: 20px;
}
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
     </style>
        <div class="sora-author-box">
            <img alt="Author Image" class="avatar avatar-60 photo" height="100" src="http://2.bp.blogspot.com/-_0qyTMr2uYI/VIuQL9jbCDI/AAAAAAAAH2U/vPhwdobq9NE/s1600/Userava.png" width="110" />
            <p style="text-align: justify;">
                <span style="font-family:verdana,geneva,sans-serif;"><b>About Author</b></span><br />
                <span style="font-size:16px;"><span style="font-family: verdana,geneva,sans-serif;"><span>This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.</span></span></span></p>
        </div>
  • Replace yellow marked image URL with your image URL.
  • Replace yellow marked About Author with your name.
  • Replace yellow marked author description details with your details.
  • After replacing codes. Put the final code on html/javascript box.

  • After pasting your codes. Click on Save button.

Final touch for setting Author box on Blogger's blog.

I hope everything is clear. If you have any kind of problem regarding to setup author box on Blogger's blog. Then, Please write your problem below on comment box.

How to add author box below on Blogger's post?

Add responsive author box widget below your Blogger's post

How to add author box widget below on Blogger's post? Author box widget for Blogger. Blogspot author box widget codes. Best responsive and cool stylish author box widget for Blogger's blog.
Hello Bloggers! Welcome back on HowToLearnBlog. Today, I am going to share a very cool blogger widget to setup your author box below to the every post of your blog. As we know that author box plays very important role to promote your identity and your contents on your blog. So let's go to set up a cool, stylish and responsive Author box for your blogger blog.

Follow these instructions to setup responsive author box widget below every posts of Blogger

  • Log on www.blogger.com
  • Click on Layout
  • Click on "Add a Gadget" just below of post (main) block.

  • Select HTML/JAVASCRIPT
  • Modify the below codes.
<style type="text/css">
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#4791d2;padding:0;margin:1px;margin-bottom:0;border:double #fff;}
.authorLeft{overflow:hidden;float:left;margin-right:10px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{background:#222;display:inline-block;}
.authorDetails{overflow:hidden;margin:10px 0 0 0;}
.authorDetails h2{font-size:14px;color:#fff;font-weight:400;text-transform:uppercase;}
.authorDetails h2 a{color:#fff;background:#6bb1ee;padding:4px 8px;display:inline-block;font-size:14px;margin-left:5px;border:double #4791d2;}
.authorDetails h2 a:hover{color:#6bb1ee;background:#fff;border:double #4791d2;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{color:#fff;line-height:20px;margin:0 10px;font-size:12px;}

.single-img-wrap{max-width:1100px;margin:0 auto;padding:0 20px;min-height:350px;margin-top:40px;overflow:hidden}
.single-img{width:100%;min-height:350px}
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */        </style>
        <div class="articleAuthor">
            <div class="authorContent">
                <div class="authorLeft">
                    <div class="authorAvatar">
                        <img alt="" class="avatar avatar-120 photo dontshowit showit" height="120" src="http://2.bp.blogspot.com/-_0qyTMr2uYI/VIuQL9jbCDI/AAAAAAAAH2U/vPhwdobq9NE/s1600/Userava.png" width="120" /></div>
                </div>
                <div class="authorDetails">
                    <h2>
                        <span style="font-family:verdana,geneva,sans-serif;"><strong><a href="#" rel="author" title="Posts by Admin">YOUR NAME</a></strong><span style="font-size: 16px;">This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.</span></span></h2>
                </div>
            </div>
        </div>
  • Replace yellow marked image URL with your image URL.
  • Replace yellow marked YOUR NAME with your name.
  • Replace yellow marked author description details with your details.
  • After replacing codes. Put the final code on html/javascript box.

  • After pasting your codes. Click on Save button.

Final touch for setting Author box on Blogger's blog.

I hope everything is clear. If you have any kind of problem regarding to setup author box on Blogger's blog. Then, Please write your problem below on comment box.

How to Convert CSS/HTML Website to Blogger Templates?

Learn here to convert any CSS or HTML website template in to Blogger template 

Learn here to convert any CSS or HTML website template in to Blogger template. Best tricks for all bloggers.
CONVERSION OF WEBSITE TEMPLATES INTO BLOGGER TEMPLATES

Hello Bloggerians, as we know that Blogger templates contains lots of format to work properly on Blogger.com's CMS. It is very complicated to convert any website templates to Blogger templates. 

Before converting any website template to Blogger template, you should have proper knowledge of Scratch Blogger Template Designing. If you need to covert single page website template to Blogger template then it is very simple.

How to convert any website template in Blogger template?

  1. Login your Blogger account.
  2. Go to "Template" tab.
  3. Scroll down and click two times on "Revert to classic templates".
  4. Press CTRL+A and press BACKSPACE button.
  5. Now copy your static or other website template source codes and just paste in the box.
  6. And click on save template.
  7. If website is not working properly it mean you should edit file path (.jpg, .png, .css and .js) with source URL.
If you really want to become a professional Blogger template designer the use Template Toaster or Artisteer software. If you want to convert your any website template into Blogger template, write that website URL and your email ID. Its 100% free service.