How to add Scrollbar within the Blogger Post contents

Sometimes your blog post contents or text gets too long and you wants to add some blog post paragraphs or certain lines of text into the ScrollBox. If you add the text in scrollbox, it improves the appearance of your blog post page length.

Look at the screenshot below for actual scrollbox within the post contents - 
Or Click on image to see the live example. 


BlogSpotHelp4u - ScrollBox

If your blog post contains long text and you want to add scrollbar then follow below steps –

1)       Log in into the blogger account.

2)       Go to you desired blog listed in dashboard.

3)       Now Click on Template which is in left pane.

4)       Click on Edit HTML.

5)       Click on Proceed.

6)       Now find below code –

/* Comments

7)       Just above it, paste following stylesheet code –

.blogspotHelp4u_ScrollBox {

height:400px;

width:480px;

overflow:auto;

}

Note: You can change the height and width of scrollbox by modifying the bolded px value in above code.

8)       Save the Template by clicking Save Template button.

9)       Now, the next step is to add actual post contents in ScrollBox. Create a new blog post or open existing post contents.

10)   Click on HTML button. Your blog post text will be displayed in HTML format.

11)   Now find the place where you want add the ScrollBox. Paste following code before the start of the contents that you want to display in ScrollBox. -

<div class="blogspotHelp4u_ScrollBox">

12)   At the end of the post contents that you want to display in ScrollBox, paste following code. –

</div>

13)   That’s all. You have added the ScrollBox successfully in blog post. Now open your blog post and check the scrollbox appearing or not.

If you want to adjust the height and width of the ScrollBox just go to step 7 and change the height and width values as per your requirement.

How to create floating social media widget for Blogger

There are so many methods available on internet; however the one that I am listing below is quite simple and more effective.

Steps – Considering you have already an account on www.blogger.com

1)  Go to your blogger account.

2)  Click on your desired blog name from the dashboard.

3)  Click on Template à Edit HTML à Proceed and then tick the Expand Widget Templates.

4)  Find below code.

<b:includable id='post' var='post'>

5)  Paste following code just below the above code.

<!-- Begin floating Social Media Bar blogspothelp4u.blogspot.com -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

    .blogspothelp4u_social_floating

    {

        position: fixed;

        bottom: 10%;

        margin-left: -60px;

        float: left;

        width: 60px;

        background-color: #f7f7f7;

        padding: 5px 0 0px 0px;

        border-top: 1px solid #ddd;

        border-left: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

        z-index: 9999px !important;

        border-radius: 5px;

        -moz-border-radius: 5px;

        -webkit-border-radius: 5px;

    }

    .blogspothelp4u_social_floating .blogspothelp4u_side_social_button

    {

        margin-bottom: 5px;

        float: none;

        height: auto;

        width: 60px;

    }

    .blogspothelp4u_social_floating .st_twitter_vcount, .blogspothelp4u_social_floating.st_plusone_vcount, .st_email

    {

        margin-left: 5px;

    }

    .blogspothelp4u_social_floating .st_fblike_vcount

    {

        margin-left: 5px;

    }

    .blogspothelp4u_social_floating .stButton_gradient

    {

        background: none !important;

        height: 21px !important;

        padding-left: 0 !important;

    }

    .blogspothelp4u_social_floating .chicklets, .blogspothelp4u_social_floating .stMainServices

    {

        background: url(&#39;http://blogspottips4u.googlecode.com/files/blogspothelp4u_social_media.png&#39;) no-repeat !important;

        height: 19px !important;

        width: 45px !important;

        padding: 0 !important;

    }

    .st_email .chicklets

    {

        background-position: 0 -77px !important;

        background-image: url(&#39;http://blogspottips4u.googlecode.com/files/blogspothelp4u_social_media.png&#39;) !important;

    }

    .blogspothelp4u_social_floating .st_twitter_vcount .st-twitter-counter

    {

        background-position: 0 -58px !important;

    }

    .blogspothelp4u_social_floating .stButton_gradient

    {

        border: none !important;

    }

    .blogspothelp4u_social_floating .stBubble_count

    {

        width: 44px !important;

        font-size: 15px !important;

        font-weight: normal !important;

        padding-top: 7px !important;

        height: 23px !important;

        background: none !important;

    }

    .blogspothelp4u_social_floating .st_twitter_vcount .stBubble_count

    {

        color: #00a6df;

        background-color: #f8fbfc !important;

    }

   

    .st_fblike_vcount

    {

        margin-bottom: 0px;

        display: block;

    }

    .st_twitter_vcount

    {

        margin-bottom: 3px;

        display: block;

    }

   

    .st_email

    {

        margin-bottom: 5px;

        margin-top: 3px;

        display: block;

    }

    .blogspothelp4u_social_floating .stBubble

    {

        background-position: 21px 31px !important;

        height: 35px !important;

    }

</style>

<div class='blogspothelp4u_social_floating'>

    <script type='text/javascript'>        var switchTo5x = true;</script>

    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>

    <script type='text/javascript'>        stLight.options({ onhover: false });</script>

    <span class='st_fblike_vcount' displaytext=''/>

    <span class='st_twitter_vcount' displaytext='' st_via='a1ashiish'/>

<div style='margin:5px 0 0px 0;'>

<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>

<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<script type='text/javascript'>

function run_pinmarklet() {

var e=document.createElement(&#39;script&#39;);

e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);

document.body.appendChild(e);

}

</script> </center>

</div>

<div style='margin:0px 0 0 5px;'>

    <span class='st_plusone_vcount' displaytext=''/>

</div>

   

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>

<a class='addthis_counter'/>

</div>

<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

<script type='text/javascript'>

var addthis_config = {

     ui_cobrand: &quot;Blogspot Help 4 You&quot;,

ui_header_color: &quot;#ffffff&quot;,

     ui_header_background: &quot;#0080FF&quot;

}

</script>

<span class='st_email' displaytext=''/>

<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>

<a href='http://blogspothelp4u.blogspot.com/2012/09/floating-social-media-widget-facebook-googleplus-tweet-pinit-for-Blogger.html' style='color:#CAC8C8;'>Widget4u</a></p>

</div>

</b:if>

<!-- End floating Social Media Bar - blogspothelp4u.blogspot.com -->

6)  Above code is customized for my tweeter id, just replace a1ashiish with your tweeter name.

7)  Now save the template by clicking on Save Template.

8)  Just check your blog. J

The original widget has been designed by MBT. I have just enhanced the code.  

How to make Blogger Title Centered of the Page

Do you know how to make your blogger blog title and Description middle of the page?

Following steps will guide you on how to make blogspot blog title and blog description center aligned.

1)   Login into your blogger account.

2)   Click on your desired blog name.

3)   Click on Template. (See below image to understand steps 3, 4 and 5)

4)   Click on Edit HTML.

5)   Click on Proceed.

Steps 3, 4 and 5 are given in below screenshot.

BlogSpotHelp4U.BlogSpot.com - Center align the Blog Title

6)   Now in opened HTML code window search following text.

.Header h1 {

7)   Just below the { paste following code.

text-align: center;

It will make your Blog Title in center/middle of the page.

8)   Now if you also want to make blog Description in center of the page then search following text.

.Header .description {

9)   Now put following code just below the {

text-align: center;

Note:

i)             If you want to display your blog title or description in left then replace center with left.

ii)           If you want to display your blog title or description in left then replace center with right.

10)               Save the template. And you are done.

Free Project and File Hosting on GoogleCode

There are time comes when you want to upload some files for your blogger blogs. The files might be some javascripts, or images, etc. As blogger.com itself doesn't allow uploading of files other than images, you would need some other free file hosting service providers. There are so many free file/project hosting service providers are available on internet. But GoogleCode is my preferred free file hosting service provider. 

1)   Log in into your Google code account with your Gmail id.

2)   On successful login following screen would appear –



blogspottips4u - googleCode DashBoard 



3)   Just fill in the details as shown in below screenshot.



blogspottips4u - GoogleCode Project details

Project Name : Name your project for ex. I have given project name as blogspottips4u

Project Summary : Enter project summary.

Description    : Enter your project description.

Version Control System : Choose your preferred version control system. Google code supports 3 types of version controls systems that are –

i)             Git

ii)           Mercurial

iii)          Subversion

      

Source Code License : Choose your license code. If do not have source code license then choose “Other Open Source”.

Project Label(s) : Add tags to your project.

4)   Once you filled all details, click on Create Project button.

5)   On successful project creation, a screen as shown in below screenshot would appear.

  

blogspottips4u - GoogleCode DownLoads Window 



6)   Click on Downloads link as shown in red circle in above screenshot.

7)   Now click on New download button.

 

blogspottips4u - GoogleCode New Download 

 

8)   Fill the details in newly opened page as shown below.

 

blogspottips4u - GoogleCode Download File Details

 

Choose a file to upload. Please remember the max upload size is 200MB per file.

Click on Submit File button.

 

9)   On successful upload, all uploaded files would appear on a page as shown in below screenshot.



blogspottips4u - GoogleCode File Downloaded list 



10)               To get the URL of a file, click on a file name.

11)               In newly opened window, right click on a file name and select the appropriate option to copy the URL. 

blogspottips4u - GoogleCode Copy the File Link 



 That’s it and your file is uploaded in GoogleCode now. Just link the URL copied on above steps in your blogger blogspot blogs. ZPPB694C87KN