How To Add About Blog Widget with Beautiful Form For Blogger And Websites

In this post, we will add a beautiful about blog widget just for your blog and for free, this widget give your blog a nice touch, let me show you a preview :



so if you like it, let's go to the next step :
Step 1 : Go To Blogger.com >> Template >> Edit Template and copy paste the code bellow before the tag </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
Step 2 : Click Save Template
Step 3 : Go To Blogger.com >> Layout >> Add HTML/JavaScript and copy paste the code bellow :
<div>
<style>
.about_blog { padding: 0; overflow: hidden;background: #fff; }
.about-techgold-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-techgold-img{position:relative;max-height:140px;overflow:hidden}
.about-techgold-img img {max-width:100%;width:100%;transition:all .6s;}
.about-techgold-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-techgold-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}
.about-techgold-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.about-techgold-float{text-align:center;display:table;width:100%;height:100%}
.about-techgold-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}
.about-techgold-float:hover a{background:#fff; color: #444!important;}
.about-techgold-float a i{font-weight:normal;margin-left:5px}
.about-techgold-wrpicon{display:block;margin:0 auto;position:relative;}
.extender{text-align:center;font-size:16px; margin: 15px!important;}
.extender .about-techgold-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}
.extender .about-techgold-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}
.extender .about-techgold-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-techgold-icon.fbl a{background:#3b5998}
.about-techgold-icon.twitt a{background:#19bfe5}
.about-techgold-icon.crcl a{background:#d64136}
.about-techgold-icon.fbl a:hover,.about-techgold-icon.twitt a:hover,.about-techgold-icon.crcl a:hover{background:#313B42}
.extender .about-techgold-icon:hover a,.extender .about-techgold-icon a:hover{color:#fff;}
.about-techgold-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-techgold-info p{margin:5px 0;font: 12px Droid Arabic Naskh; color: #444;}
.about-techgold-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.about-techgold-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-techgold-info h4:before,.about-techgold-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}
.about-techgold-info h4:before {margin-right:-50%;text-align:left;}
.about-techgold-float a,.about-techgold-icon a{text-decoration:none;}
</style>
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-techgold-img">
<img alt="alwan may" class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEVg37yrsWDV9sMJ1HNrB-qwDTwgrd-4mqRl8tnuKXFmmL-vc7Rl6NoytvjfBeUB3jDL7c1UsVLR3MjUYPLLtHRzlDqokJlQcwwolNuFc6Judr8shqVbc3u1d2Xe6ijky6lcGcM_fDyc/s1600/www.tech-gold.net.jpg" width="300" height="auto">
<div class="aboutfloat-img">
<span class="about-techgold-float"><a href="https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=YourID" rel="nofollow" target="_blank"><i class="fa fa-user"></i> Join the blog</a></span></div>
</div>
</div>
<div class="about-techgold-info">
<h4>
Follow the newest of posts </h4>
Widgets4Free Community</div>
<div class="about-techgold-wrpicon">
<ul class="extender">
<li class="about-techgold-icon fbl"><a href="https://www.facebook.com/YourFB" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> Facebook</a></li>
<li class="about-techgold-icon twitt"><a href="https://twitter.com/YourTwitter" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> Twitter</a></li>
<li class="about-techgold-icon crcl"><a href="https://www.youtube.com/YourYoutube" rel="nofollow" target="_blank"><i class="fa fa-youtube-square"></i> Youtube</a></li>
</ul>
</div>
</div>

Change The Red with your blog ID, The Blue with your Facebook Page, The Green with your Twitter Account, The Yellow with your Youtube Channel and The Orange, Pink with your Text.
Step 4 : Click Save
That's all, please if you like this post please share it on social media and leave a comment here *_*.
Tags: