Add Stylish Social Scrolling Bar Using CSS and HTML without Using Plugin

This tutorial is for the beginners who even just don’t know the basics of WordPress so don’t feel as i am explaining a little bit more childish so some people use plugin for social scrolling bar to get likes and to get famous through the social media and some people use these social scrolling bar to give look on their website now some of the common problem with the social scrolling bar is that doesn’t scroll when you scroll down the page this is because some these are not compatible with these kinds of social scrolling bar so there is a simple method  and solution to add social scrolling bar without plugin you will just need to  follow the steps and copy and paste the first i will show you a screen shot to see social scrolling bar implemented on my own website.

 

Social Scrolling bar wihtout using pluign

 

 

First open your dashboard and and move your cursor over Appearance then you will see the following Catagories in menu Themes , Widgets , Menus , Edit Css and Editor Click on Edit CSS and then you will see a page like the one shown below as an example.

 

CSS Stylesheet Editor

 

 

Now when you see this copy  the code in this CSS Editor like the one Shown below and don’t worry i will provide you the code and if you see on 19 line there’s a warning message don’t worry about the warning just follow the steps and ignore the warning errors are important warnings are negligible in programming so here is the screen shot below after copying your text click on Save Stylesheet

 

CSS Stylesheet Editing tutorial

Now Don’t worry about just copy this code directly from below or if somehow its not working you can use a downloading link to download this

Download

.buttonsWrap {

display: block;

margin: 40px 0 0 -90px;

float: left;

position: fixed;

padding: 10px;

width: 60px;

margin-top: -81px;

background-color: #333;
}

.tweetmemeBtn, .facebookBtn, .stumbleUponBtn .googleplusBtn {
display:  block ;

float:  left ;
}

.facebookBtn {
margin:  15px  0  10px  2px;
}

.googleplusBtn {
margin: 13px  0  0;
}

 

Now After Getting all this done moves towards the next what we have done is we have assigned styles to button this was all about styling and reason of telling you all this is you can later change the style of your social scrolling when ever you want it

Now click on Appearance then on Editor  after then click on Single post .php if you are unable to find this just scroll down after clicking appearance and then on editor you will see a page like the one shown below .

 

Singlepost dot php

 

Now after clicking on singlepost.php you will see a code just like the code shown below

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(‘g post’); ?>>

 

if You are unable to find this then use this screenshot to help your self

 

edit theme add social scrolling bar without plugin

 

Now after finding this code just copy and paste the below text after the line which is marked by reddish lines in the above screen shot

just like i show i place my code

edit theme add social scrolling bar without plugin

 

Now if there is problem in copying the code from the just use downloading link below

Download

 

<!– www.stylebizz.com –>
<div class=”buttonsWrap”>
<!– Tweetmeme button –>
<div class=”tweetmemeBtn”>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-count=”vertical”>Tweet</a><script type=”text/javascript” src=”//platform.twitter.com/widgets.js”></script>
</div>
<!– Facebook button –>
<div class=”facebookBtn”><iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&width=450&action=like&font&colorscheme=light&height=65″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:50px; height:65px;” allowTransparency=”true”></iframe>
</div>
<!– StumbleUpon button –>
<div class=”stumbleUponBtn”>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php the_permalink()?>”></script>
</div>
<!– Google Plus button –>
<div class=”googleplusBtn”>
<g:plusone size=”tall”></g:plusone>
</div>
</div>

Just copy this and click on Update this is all you have done now if you have any query regarding this please comment or if you any solution better than this then you can also comment and share your knowledge with us.

One thought on “Add Stylish Social Scrolling Bar Using CSS and HTML without Using Plugin”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>