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.  

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





Simple Related Post Widget For Blogger Blogspot

What is Related Post Widget?

Answer – Related Post widget is actually a list of posts in a blog that are related to the current blog post. This way let your blog visitor know that there are also other relevant contents that might help a visitor.

Why do each blog should have a related post widget?

Answer – This way you engage blog visitors on blog for longer time. This also helps to reduce the bounce rate of blog. Maximum bounce rate is not good for your monetized blogs. People visits your blog post from any search engines or social sites, looks only one page and then moves to some other sites.

Every blogger should include Related Post widget that ultimately helps to relatively increase your blog page views.

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)  Sign in into your blogger account. Once you logged in, blogger will show you the list of all your blogs.

2) Click on blog name to open overview page.

3) Click on Template à Edit HTML à Proceed and then tick the Expand Widget Templates. These steps are given in below image.

Blogspottips4u - Editing Blogger HTML

4) Now search </head> tag in the opened code window and just above the </head> tag paste following code.

<!--Simple Related Post Widget Starts-->

<style>

    #related-posts{ float: left; width: 480px; margin-top: 20px; margin-left: 5px; margin-bottom: 20px; font: 11px Verdana; font-weight: bold; margin-bottom: 10px;}

    #related-posts .widget{ list-style-type: none;margin: 5px 0 5px 0; padding: 0; }

    #related-posts .widget h2, #related-posts h2 { font-size: 20px; font-weight: bold; margin: 5px 7px 0; padding: 0 0 5px; }

    #related-posts a {text-decoration: none; }

    #related-posts a:hover { text-decoration: none; }

    #related-posts ul { border: medium none; margin: 10px; padding: 0; }

    #related-posts ul li { display: block; background: url(&quot;http://blogspottips4u.googlecode.com/files/Logo2_A1_For_Related_Post_Widget.png&quot;) no-repeat 0 0; margin: 0; padding-top: 0; padding-right: 0;padding-bottom: 1px; padding-left: 21px; margin-bottom: 5px; line-height: 2em; border-bottom: 1px dotted #cccccc; }

</style>

<script src='http://blogspottips4u.googlecode.com/files/simple-related-post-widget.js' type='text/javascript' />

<!--Simple Related Post Widget Ends-->

5) Next, Search following code

<data:post.body/>

6) Paste following code just above or below <data:post.body/>. If you paste above this tag then Related Post widget will appear on above of every post contents. If you paste the code below this tag then Related Posts will appear below every post contents.

<!-- Simple Related Post Widget Starts-->

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

<div id='related-posts'>

<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'>    removeRelatedDuplicates(); printRelatedLabels(5);

</script>

</div></b:if>

<!-- Simple Related Post Widget Ends-->

7) The code is configured to display 5 related post by default. If you want to increase or decrease the number of related posts then just search printRelatedLabels(5) and replace 5 with your desired number. That’s it.

8) The code is also configured to not show Related Post widget on Home page. If you want to show this widget in Home page also, then please either comment or remove highlighted code in yellow.

9) Save the template and you are done.