Blogging How To Add A Sidebar In Css

Crunchify - Create nice Follow Widget Area for your blog

WordPress site optimization is a Key goal for me and all of us at Crunchify. Faster site loading is a key factor to rank high in Google Search Result Page (SERP).

Sometime back I got an email from Sreehari Sree asking about creating Follow Sidebar Widget like we have on Crunchify. Here is a brief details about our conversion 🙂

As promised in email, here are detailed steps on how to create Nice & Stunning follow widget using custom CSS and HTML code.

Step-1

Include Font Awesome to your theme. I'm using plugin All in One Webmaster WordPress Plugin to add FontAwesome to my theme's header section.

Download All in One Webmaster.
Activate it.
Go to AIO Webmaster -> Header/Footer Section
Add below URL to Header section
Click on Update options.

Step-2

Put below HTML code into your Text Widget area.

Go to Appearance -> Widgets Section.
Put Custom HTML widget to your sidebar.
Put below code to your widget.

< div class="crunchify-follower" >

< div class="widgetheading" >

Over 16 million readers < br > < div style="font-weight:300;" > Get fresh content from Crunchify </div >

</div >

< div class="crunchify-social-share-sidebar" > < a class="crunchify-social-icon-rss crunchify-social-icon" href="https://crunchify.com/feed/" target="_blank" rel="noopener" >

< i class="fas fa-rss fa-2x" > </i > </a > < a class="crunchify-social-icon-twitter crunchify-social-icon" href="https://twitter.com/crunchify" target="_blank" rel="noopener" >

< i class="fab fa-twitter fa-2x" > </i > </a > < a class="crunchify-social-icon-googleplus crunchify-social-icon" href="https://www.google.com/+CrunchifyDotCom" target="_blank" rel="noopener" >

< i class="fab fa-google-plus fa-2x" > </i > </a > < a class="crunchify-social-icon-facebook crunchify-social-icon" href="https://www.facebook.com/Crunchify" target="_blank" rel="noopener" >

< i class="fab fa-facebook fa-2x" > </i > </a > < a class="crunchify-social-icon-youtube crunchify-social-icon" href="https://www.youtube.com/c/CrunchifyDotCom" target="_blank" rel="noopener" >

< i class="fab fa-youtube fa-2x" > </i > </a > < a class="crunchify-social-icon-wordpress crunchify-social-icon" href="https://profiles.wordpress.org/crunchify" target="_blank" rel="noopener" >

< i class="fab fa-wordpress fa-2x" > </i > </a > < a class="crunchify-social-icon-pinterest crunchify-social-icon" href="https://www.pinterest.com/Crunchify/crunchify-articles/" target="_blank" rel="noopener" >

< i class="fab fa-pinterest-p fa-2x" > </i > </a >

</div >

< div style="clear: both;" > </div >

Don't forget to change text above and social follow links 🙂

Step-3

Next thing you need is to add below code to your site's style.css file to beautify appearance.

. crunchify-follower {

background : #fff;

margin : 30px 0 10px ;

border-radius : 3px ;

box-shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , . 12 ) , 0 2px 2px 0 rgba ( 0 , 0 , 0 , . 24 ) ;

display : inline-block ;

padding : 20px 5px ;

text-align : center ;

min-width : 302px ;

max-width : 340px

}

. widgetheading {

font-size : 18px ;

font-weight : 600 ;

padding : 0 0 25px ;

color : #444

}

. widgetheading p {

font-size : 15px ;

color : #999;

font-weight : 400 ;

padding : 3px 0 0

}

. crunchify-social-icon {

margin : 1px 5px ;

font-size : 13px ! important

}

. crunchify-social-icon-home {

margin : 1px 6px

}

. crunchify-social-share-sidebar {

margin-bottom : 5px

}

. crunchify-social-icon-rss {

color : #f26522!important

}

. crunchify-social-icon-twitter {

color : #00aced!important

}

. crunchify-social-icon-facebook {

color : #3b5998!important

}

. crunchify-social-icon-pinterest {

color : #cb2027!important

}

. crunchify-social-icon-wordpress {

color : #21759b!important

}

. crunchify-social-icon-googleplus {

color : #dd4b39!important

}

. crunchify-social-icon-email {

color : #666!important

}

. crunchify-social-icon-youtube {

color : #b00!important

}

. crunchify-social-icon-linkedin {

color : #0074a1!important

}

Step-4

Clear your site cache and you are all set.

I hope you could see now nice follow widget on your site. Let me know if you face any issue.

I'm an Engineer by profession, Blogger by passion & Founder of Crunchify, LLC, the largest free blogging & technical resource site for beginners. Love SEO, SaaS, #webperf, WordPress, Java. With over 16 millions+ pageviews/month, Crunchify has changed the life of over thousands of individual around the globe teaching Java & Web Tech for FREE.