How To Add Related Post Widget For Blogger - Related Post CSS, JavaScript and HTML Codes

How To Add Related Post Widget For Blogger - Related Post CSS, JavaScript and HTML Codes

  May 15, 2018    PARTHASARATHI PANDA

---

How to Add a Customized related post widget on your Blog? Stylish Related Post Widget HTML and CSS code, How to Edit Related Post Widget or You also called it "Your Might Also Like" Widget on Blogger?

How to add a related post widget on your blog and how you can customize it to looks better? This is very informative and best tutorial about adding related post widget below blog post, which can be understand by all the blogger whether they are expert or fresher in blogging. To add a related post widget you need to edit the HTML code of the Blogger template and add the CSS, JavaScript and HTML codding in it and here we are simplified the procedure and describe it step by step which can easily understand. Google Blog or Blogger.com has a good platform to start your blog and it's easy to customize the HTML code and you can also upload your personal or third party Blogger Template to make your blog looks better. Blogger is free for everyone so start free blogging today to share your knowledge and passion with your blog online in the Internet world www. or http or https.

What is Related Post Widget?
The term "Related Post" defines it, that means it is post/article which related to the current post/article you are reading on the blog or website. The related post widget is used on website or blog to engage visitors by showing the related articles of the post/article they are reading. For example if a visitor is reading about "Mobile Flashing" topic then the related post starts the work to show any other article of your blog which is related to "Mobile Flashing" Labels and shows it at the end of the post, and you can also set the number of post should appear in the related post widget.

Stylish Related Post Widget For Your Blog - Related Post CSS, HTML and JavaScript Code

Why Use Related Post on Your Blog?

As I said before the "Related Post" widget used for user engagement by showing related articles to the users that he or she is interested to read this. If you design the related post widget or use customized widget then this will be increase the user engagement with improved look and feel. So why are you waiting just follow the below steps and use CSS and HTML code on your blog and make your blog unique.

Read Me Once:

How To Unlock Mi Account?
Blogger Tutorials For Beginners.
FRP Unlock Tutorials for All Android Smartphones.
Computer Basic Tutorials.

Steps:
1) Log in to Blogger and Choose the Blog to Edit. (Backup Blog Template before edit)
2) Then go to THEME and Edit HTML, then find </head> and paste the below CSS and JavaScrip code just above it.

Paste Related Post CSS Code Before </head> Tag Then follow the next Step

<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:100%;}
#related-posts a{background:#08008c; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
#related-posts h4{margin-top: 5px;background: #fe0000;font:18px Arial;padding:5px;color: #ffffff; text-transform:uppercase; }
#related-posts .related_img {margin:5px; border: solid white 2px;object-fit: cover;width:137px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
#related-title {color: #ffffff;text-align:center;text-transform:none;padding: 0px 5px 10px;font:16px Arial;width:137px; height: 150px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBC8j1QTnXGb-k6AQ-a1G1vvRQkafRnZ1bhqy1HQ8SsBc2TsYM9tzrgD4ywFJ6xH2pmn3pXsPWp99vg5hPvhGYmLUan5jXNBWiKu3yTOYn_YU353aYo9HJVG9lMFJmrJtdXFPgzvdzoQAe/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>120)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script></b:if>
<!--Related Posts with thumbnails Scripts End-->

3) Now find the place where you want show the related post widget on your blog or website, in My case I used it after Author Profile. So find <data:post.authorAboutMe/> and paste the below HTML code just after it.

Related Post Widget HTML Code Paste After Author Profile

<!-- Related Posts with Thumbnails HTML Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>You Might Also Like:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails HTML Code End-->

Now save the Template and visit your blog post to see the stylish Related Post Widget that implemented on your Blog or Website. So in this way you can add a Related post widget on your blog and here you can also find the Related post widget CSS, JavaScript and HTML code for your Bog. Thanks for visit this blog and please keep visiting this Knowledge Sharing Website www.FreeComputerTricks.in.

Read More

How to Solve "Your Connection To This Site Is Not Fully Secure" On Your Blog and Websites

How to Solve "Your Connection To This Site Is Not Fully Secure" On Your Blog and Websites

  May 07, 2018    PARTHASARATHI PANDA

---

You may notice when your site, blog or some other website you will get this error "Your connection to this site is not fully secure" on Google Chrome and if you are using FireFox you will get "Connection is Not Secure" (Parts of this page are not secure such as images). If you have a blog and website and face this type secure connection error over HTTPS and want to solve this, then this is the right place to solve secure connection error on your website or blog. Here we will show you the step by step way to fix this error on your Internet site.

As you know Google has implemented the HTTPS for it's Blogger users, that means Blogger can upgrade the blog from HTTP to HTTPS and it's free. If you are using custom domain on your blog, there here is good news for you, that Google also no providing HTTPS fro custom domain users and now the custom domain users can also use HTTPS instead of HTTP on their domain redirecting to the blog. But you may notice after HTTPS settings get done, you will see the secure connection error saying that "Your connection to this site is not fully secure" and Attackers might be able to see the images you are looking at on this site and trick you by modifying them. What does this error means although you have successfully apply the HTTPS instead of HTTP, it means some your website content or link is not going through the secure connection and in this article I will tell you how to solve the secure connection issue on your blog or website.

How to Solve Your Connection To This Site Is Not Fully Secure -  Blogger and Websites

How to Solve Secure Connection Error on Your Blog or Custom Redirect Domain?

• Log in to your Blogger account and select the blog.
• Now click on Theme and backup it first.
• Now click on Edit HTML and find http:// URLs for JavaScript and Images and replace with https://.
• That means search for all http:// and if you find any HTTP URLs such as link to Image, Video, Audio, Script or any other Link, then change these from http:// to https://.
• Verify all the URLs is available over HTTPS, just put the https:// URLs into a new window in your browser if everything is working fine then you can replace the http:// to https:// inside the HTML Editor of the Theme.
• Then click Save Theme.
• Now you can check your blog to verify that the error is gone.

If The Secure Connection Problem Persist.
Check if you are using any third party widgets.
Remove any insecure Advertisers on your blog.

Note: In my case I have removed the third party "Related Post" Widget and put a new one and now the website works fine over HTTPS connection.

Conclusion:
So in this way you can solve the secure connection problem to your Blog by changing all links from http:// to https:// inside the HTML code in the Blogger theme. For more information on this error you can visit the Blogger Help forum and for all other Blogger issue you can also visit Google Blogger Help Forum. If you have a website then you can also solve this issue by following the same process above.

Read More

How To Create a Text Box or Text Area In Your Blogger Post With Examples

How To Create a Text Box or Text Area In Your Blogger Post With Examples

  May 06, 2018    PARTHASARATHI PANDA

---

In this tutorial you will find the solution for how you can add a text box or text area inside your blog post and here we also given some text box HTML codes, that you can use it in your blog. As you know to use HTML code in your blog post you need to use HTML instead of Compose while create a New Post or Edit a Post. The text box or text area is used for specific content such as JavaScript codes, HTML Codes, CSS Codes etc. which made your blogger post visitor to find it out easily. 

How To Create Text Box or Text Area or Text Outline In Your Blogger Post With Examples

Why Add Textbox or Textarea

As I said before this is normally used  to separate a specific paragraph, text, sentence or words etc. to help your website users to find out the specific words easily. The Text Area or Text Box or what ever you call it no matter is used in Blogger or in a web page to add any type of codes or some special contents.

How To Create TextBox or TextArea In Your Blogger Post or in your website page with examples of Text Box or Tex Area or Text Outline HTML Codes For Blog and Website.

How to Add HTML Codes in Your Blog Post?

• Go to the Blog and Create a New Post or Edit Existing.
• Now Click on HTML Tab to edit your blog post with HTML mode and here you can add any HTML code to design your post.
• Paste any one of these below Text Box or Text Area or Text Outline HTML Codes.
• Then Click on Preview and Save or Publish Your Post.

Examples:

Text Box With Right Scroll Bar HTML Code:

<div style="overflow: auto; width:300px; height:150px; padding: 10px; border:1px solid #ccc;">
This is a test sentence from Free Computer Tricks or www.freecomputertricks.in website to test TextBox or TextArea. Example of text box or text box for blogger HTML Codes, You can replace this with your sentence or paragraph. Thank you FreeComputerTricks (www.freecomputertricks.in) with right scroll bar
</div>

Result of Text Box With Right Scroll Bar:

This is a test sentence from Free Computer Tricks or www.freecomputertricks.in website to test TextBox or TextArea. Example of text box or text box for blogger HTML Codes, You can replace this with your sentence or paragraph. Thank you FreeComputerTricks (www.freecomputertricks.in) with right scroll bar

Text Border With Blue Line HTML Code:

<div style="border: 1px solid #0118FC; padding: 10px;">
This is a blue line border for your text, for text border decorating on your blog, use the above HTML Code for this border and use it on Blogger.com (www.freecomputertricks.in)</div>

Result of Blue Border Text Box:

This is a blue line border for your text, for text border decorating on your blog, use the above HTML Code for this border and use it on Blogger.com (www.freecomputertricks.in)

Blue Left Border and Light Blue Background Text Area HTML Code:

<div style="border-left: 20px solid #0174df;">
<textarea cols="50" rows="3" style="-moz-border-radius: 7px; background: #eff5fb; border: 1px solid #ccc; color: black; line-height: 1.5em; padding: 5px;">  TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS </textarea></div>

Result of Blue Left Border with Light Blue Text Background:

TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Black Text Area With White Letters:

<textarea cols="42" rows="3" style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; border: 2px inset rgb(204, 204, 204); color: white; height: 68px; line-height: 1.5em; padding: 0px 7px; width: 396px;"> TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS  </textarea>

Result of Black Text Area with White Letters:
TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Green and Red Border Text Area HTML Code:

<textarea cols="40" rows="3" style="-moz-border-radius: 10px; background: #e0ecf8; border-bottom: 4px solid #fe2e2e; border-left: 4px solid #fe2e2e; border-right: 4px solid #01df01; border-top:4px solid #01df01; color: red; line-height: 1.5em; padding: 5px;"> TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS </textarea>

Result or Green and Red Color Text Box:
TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Dashed Lines Border Text Area HTML Code:

<textarea cols="42" rows="3" style="background: #a9f5a9; border: 2px #295f00 dashed; color:#295f00; line-height: 1.5em; padding: 5px;"> TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS </textarea>

Result or Dashed Line Text Box:
TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Conclusion:
So in this way you can create or add a text box or text area or text outline or text border inside you blog post to separate a specific paragraph or some texts. Here in this tutorial you will get to decorate a text box with examples and also you can get the text box HTML codes.

Read More

How to Add Text Border in Blogger HTML - Colored Left Border with Text Background Color

How to Add Text Border in Blogger HTML - Colored Left Border with Text Background Color

  May 06, 2018    PARTHASARATHI PANDA

---

Hi Welcome to another tutorial from Free Computer Tricks, The tutorial is about HTML coding for Blogger, if you have a blog and want to customize is with various styles using HTML code, then here you can get the HTML tutorial for such customization of your Blog. Here is the tutorial about How to ad text border in Blogger with HTML code. Here is the example of how you can add a left border with color along with any text background color.

How to Add Text Border in Blogger HTML - Colored Left Border with Text Background Color (HTML Code For Blog and Website)

If you are a Blogger, then you must need this tutorial about text border. Sometimes you need to add some text lines in your blog such as HTML Codes, CSS Codes, Some Log text, Error Quotes, JavaScript Code, Special Notes etc. and you want to add a style text border and background, which is easily find out by the visitors and also it looks better on your blog. Here we will show you how to add a colored left margin and text background color with various style on your blog.

Here we will show you how to add a Colored Left Border and some text background color with text align, padding, font style, left border color, text background color and margin. To add this style text box on your blog you need to edit your blog post with HTML Mode and paste the below HTML codes in it then come back Compose Mode.

Example:

HTML Code:

<div style="border-left: 4px solid red; background-color: lightgrey;">
Sample text line 1
Sample Text Line 2
</div>

Result:

Sample text line 1
Sample Text Line 2

HTML Code: Change the Color of the Left Border

<div style="background-color: lightgrey; border-left: 5px solid #16DE25;">
Sample text line 1
Sample Text Line 2
</div>

Result:

Sample text line 1
Sample Text Line 2

HTML Code: Add Space After Left Border

<div style="background-color: lightgrey; border-left: 5px solid #16DE25;">
<div style="margin-left: 15px;">
Sample text line 1
Sample Text Line 2
</div></div>

Result:

Sample text line 1
Sample Text Line 2

HTML Code: Padding Top and Bottom

<div style="background-color: #EAECEA; border-left: 5px solid #16DE25;">
<div style="margin-left: 15px;">
<div style="padding-bottom: 15px; padding-top: 15px;">
Sample text line 1
Sample Text Line 2
</div>
</div>
</div>

Result:

Sample text line 1
Sample Text Line 2

HTML Code: Font Style and Text Align

<div style="font-family: arial; "text-align: justify;">
<div style="background-color: #EAECEA; border-left: 5px solid #16DE25;">
<div style="margin-left: 15px;">
<div style="padding-bottom: 15px; padding-top: 15px;">
Sample text line 1
Sample Text Line 2
</div>
</div>
</div></div>

Result:

Sample text line 1
Sample Text Line 2

Conclusion:
In this way you can add a decorated text border with a background color, which make your blog to looks better and it's also easy to find out by your visitor if there is any special note on your blog. So use the above HTML codes for border and text background and enjoy.

Read More

How to Customize Blogger Comment Box?

How to Customize Blogger Comment Box?

  May 06, 2018    PARTHASARATHI PANDA

---

Hi friends, If you are blogging on Blogger and want to know how you can customize the comments box, then you are in right place where you can get the CSS code to design or customise the Blogger comments box. As you know the default comment box of blogger is simple and you may not like it very much, but if you can customize the comment box using CSS codes then it will look very much pretty. So why are you waiting for, please go through the tutorial and customize the comments box.

What to Do For Comment Box Customization?
Do not worry you can easily do this customization and we will briefly describe it. If you are new to Blogger and recently starts your blog, then you can also learn how to customize comment box here. For comment box customization you need to add some bunch of CSS code in your Blogger XML template then save the template and see the magic.

How to Customize Blogger Comments Box

How to Customize Comments Box Blogger?

• Log in to your Blogger account and choose the blog you want edit.
• Then select Theme and then click on EDIT HTML.
• Now press CTRL+F and find <b:skin> and paste the below CSS code just below <b:skin>

Comments Box Source Code:

#comments h4{font-size:22px;margin-bottom:10px}
.comments .comment-block { background: #fcfcfc; color: #474040; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 55px; padding: 10px; border: 4px solid #EEEEEE !important; border-radius:10px; font: 1.190em/1.2 Cambria,Georgia,sans-serif;}
.comment-thread li .comment-block:before { position: absolute; display: block; left: -25px; color: #EEEEEE; content: "\25C4"; font-size: 30px;}
.comments .avatar-image-container { width: 60px; height: 60px; max-height: 60px; margin:0px 0px 0 -28px; padding: 0px; border: 6px solid #d5f2d0; border-radius:60px;}
.comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:25px;}
.comments .comment-thread.inline-thread { background: none;} .comments .continue { border-top: 0px solid transparent;}
.comments .comments-content .datetime { float: right; font-size: 11px;} .comments .comments-content .user a{ font-size: 15px; color: #498EC9;}
.comments .comments-content .datetime a:hover{ color: #777; text-decoration: none;}
.comments .comments-content .comment:first-child { padding-top: 0px;}
.comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px;} .comments .continue a { padding: 0px;}
.comments .comments-content .icon.blog-author { background-image: none;}

Now save the Template and visit a page with comments then see the comments style, it's really cool. So this the simple comments box customization code to help you to design the Blogger comments box to looks better.

How to Customize Blogger Comment Box - CSS Code

Read More

How to Add a Special Paragraph Automatically at the End of Each Post Appear in All Post Pages

How to Add a Special Paragraph Automatically at the End of Each Post Appear in All Post Pages

  May 05, 2018    PARTHASARATHI PANDA

---

So here is another interesting tutorial fro Blogger, that how you can automatically add a special paragraph or some special line or Note etc. at the end of the each post and it will appear in all post page. That means if you need to add a paragraph at the end of your post/article such as you want to add an request to comment about your blog and for that you have write the same in each and every post but here is the easiest way through which you can add the same request in each and every post automatically.

How to Add a Special Paragraph Automatically at the End of Each Post Appear in All Post Pages

How to Edit Blogger HTML?

• Log in to your Blogger account and choose your blog.
• Now click on Theme (on the left sidebar).
• Then click on Edit HTML (Before that please backup your Blog Template).
• Now it will open the Blogger HTML Editor and where you can edit your HTML, CSS and JavaScript etc.

Note: Before going to the HTML editor please backup your Blogger template, it anything wrong happen you can easily restore the template.

How to Add a Special Para at End Of the Post - Blogger

How to Add a Special Para at End Of the Post?

• Open Edit HTML on your blog template.
• Now find <data:post.body/> (You may find many occur try the last one)
• Now paste the below code just below of it.

</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
      WRITE YOUR SPECIAL PARAGRAPH HERE
</b:if></div>

• If not success then you can try the second <data:post.body/> from the last. 
• Or If you are using Social Share link or icon, then find the section in your blogger template and paste the code just above it.

Text Decoration HTML Codes

Bold and Justify Text HTML Code:

You can also decorate the text of your paragraph, if you need the text should be bold with justify alignment then use the following code.

</div>
<div style="text-align: justify;">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b>

WRITE YOUR SPECIAL PARA QUOTE HERE

</b>

</b:if></div>

Change Font HTML Code:

</div>
<div style="text-align: justify;">
<span style="font-family: &quot;verdana&quot; , sans-serif;">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b>
WRITE YOUR SPECIAL PARAGRAPH HERE
</b>
</b:if></div></span>

Text Background Color HTML Code:

</div>
<div style="text-align: justify;">
<span style="background-color: #ffe599;"><span style="font-family: &quot;verdana&quot; , sans-serif;">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b>
WRITE YOUR SPECIAL PARAGRAPH HERE
</b>
</b:if></div></span></span>

CONCLUSION:
In this way you can add a special paragraph or a special Note or some words you want to add at the end of the each post. With the above condition the paragraph will appear on post page only, if you want to show the quote on your home page then just remove the <b:if cond=....> tag, write the only the paragraph.

Read More

How to Adjust Entire Blog and Side Bar Width Of Your Blog : Blogger CSS Code

How to Adjust Entire Blog and Side Bar Width Of Your Blog : Blogger CSS Code

  May 03, 2018    PARTHASARATHI PANDA

---

Hi Welcome all, Here is the another tutorial about how you can Adjust or resize your Blogger blog width and sidebar width with various conditions using CSS code. Adjust the blog width is very important to look better as per your choice and it should be Responsive compatible. Here you can easily adjust blog width using CSS please follow the below tutorial.

How to Adjust Entire Blog and Side Bar Width Of Your Blog

There are two method to adjust widths of your blog, the first one is you can adjust width of entire blog and right side bar using "Blogger Template Designer" or "Blogger Theme Designer" but if you are using customised Blogger Template or third party Blogger Template, then you may not have this option in that case you need to use CSS and the second one is by using "Cascading Style Sheets" (CSS) Programming language which is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

Adjust Entire Blog and Right Side Bar Widths (Blogger Theme Designer):

Adjust Entire Blog and Right Side Bar Widths Using Blogger Theme Designer

• Log in to your Blogger account and select the Blog you want adjust Widths.
• Now click on Theme on the left side panel of the blog.
• Then Click on Customize it will open the Blogger Theme Designer Page.
• Now click on Adjust Widths you well see two options Adjust width of Entire Blog and Right Side Bar. If you are using 3 Column layout Blogger template then you will have 3 parts of your blog to adjust.
• Adjust widths by dragging the button left or right or you can enter the size in pixel. 

Adjust Entire Blog and Right Side Bar Widths Using CSS:

Adjust Entire Blog and Right Side Bar Widths Using CSS

• Go to Theme ----> Edit HTML.
• Then find Ctrl+F .containernbt (in your case it's may different)
• Now add the below CSS code after it.

.mainblogsec {max-width: 800px;}
.sidebarrightnbt {max-width: 320px;}

It will set the blog post section width to maximum 800 pixel and side bar width to maximum 320 pixel, that means width of your blog should not exceed to the size you have set.


.mainblogsec {width: 800px;}
.sidebarrightnbt {width: 320px;}

It will fix the width of blog on any screen size, that means, the blog post section width will be 800 pixel and side bar width will 320 pixel which are fixed in any condition or size of the device screen.

Examples of Blog Width Adjust:

Style 1

/*--------------------------------------[CONTAINER]
*/
.containernbt {width: auto; max-width: 100%; margin: 100px auto; float:left; margin-left: 20px;}
.mainblogsec {max-width: 800px;}
.sidebarrightnbt {max-width: 320px;}
@media (max-width: 47.938em) {.containernbt {margin: 80px auto; }}
@media (max-width: 47.938em) {aside {margin-top:30px }} 

If you use this CSS coding in your blog to adjust width, where width=auto and max-width-100%  that means it will fit with the full size of the device screen and with the condition of left alignment and left margin 20px and your blog post width will be maximum 800px and right side bar width will be 320 pixel.

Style 2

/*--------------------------------------[CONTAINER]
*/
.containernbt {max-width: 1120px; max-width: 100%; margin: 100px auto; float:left; margin-left: 20px;}
.mainblogsec {max-width: 800px;}
.sidebarrightnbt {max-width: 320px;}
@media (max-width: 47.938em) {.containernbt {margin: 80px auto; }}
@media (max-width: 47.938em) {aside {margin-top:30px }}

In this case the size of the entire blog should not be exceed to 1120 pixel width with 800 pixel post section and 320 pixel right side bar and others will be same such as left alignment with 20 pixel margin.

If you want to center your whole blog then remove the float left and margin left, then the entire blog will center align with other width same as above described.

Read More

How to Make Blog Post Images Responsive : Automatically Resize Blogger Images

How to Make Blog Post Images Responsive : Automatically Resize Blogger Images

  April 30, 2018    PARTHASARATHI PANDA

---

How to Make Blog Post Images Responsive? that means how you can Automatically Resize Blogger Images to fit on various screen resolution. As you know you can fix the size of an image in your blog when you insert an image in to your blog, it can be small, medium, large, X-large and original size and this is best for desktop and laptop or any other device having minimum 900px resolution, but when you browse the site on the smart phone or tablet etc. the image is not resize to fit the screen and the image overflow to left or right, which may cause a bad user interface. So here we will show you how you can automatically resize all the images in your blog to fit with various screen resolution, which called responsive image.

How to Make Blog Post Images Responsive : Automatically Resize Blogger Images HTML/CSS Code

How To Convert Blogspot Images to Responsive Size?

You can do it by adding a simple CSS code in your blogger template. the below are some example of CSS code to make responsive image for your blog. Edit HTML and find CSS coding section and put these codes. Please do backup the template and then edit the HTML of your blog, if any error occurs you can easily restore the blog with the downloaded template .xml file.

Steps:

• Log in to your Blogger and choose your blog you want to edit HTML.
• Now click on Theme and click on Edit HTML.
• Now press Ctrl+F to open search box and type CSS and hit enter key.
• Stop where you find .CSS (See the above image for reference)
• or you can also search for <b:skin><![CDATA[/*
• Now you can add the below CSS codes their as per your requirements.

To Resize All Images:

img {
    width: 100%; height: auto
}

( It will resize all the images in the blog including profile image and button images etc. so it's not suitable for all blogger templates)

To Fix Maximum Size of All Images:

img {
    max-width: 100%; height: auto
}

(It will resize all the images in your blog up to the maximum size of the container, that means it will not exceed the post body margin) 

Responsive Images CSS Code of Post Body Blogger:

Resize all images to 100% width of the blog post body container:


.post-body img { width: 100%; height: auto }

(It will resize all images to 100% width and auto height with ratio, but one demerit you face after implementing the CSS code, which is if the image size is small it will resized to 100% and the image became unclear)

Resize all Post Body img (Recommended)

.post-body img { 
          max-width: 100%; height: auto 
}

(This is the best CSS code and you can use it in your blog to make the blog post images responsive, the CSS code has a condition that max-width can not be exceed 100%, when insert an set it to Original Size and now view the blog post and you will see the difference)

In this way you can make blog post images responsive or to fit automatically with any screen resolution, so use the CSS code to make blog image responsive and enjoy.

Read More

How to add automatic Read More Button with thumbnail in Blogger

How to add automatic Read More Button with thumbnail in Blogger

  September 05, 2013    PARTHASARATHI PANDA

---

Here is the post about how you can add automatic Read More button with thumbnail and summary of the post on your home page. Follow the below steps to add automatic read more widget for each post and you can also find the solution how to justify the text appear on the home page of the blogger.

Read More button on Blogger

• Log in to your Blog
• Click on Template
• Then Click on Edit HTML

Find </head> 

and replace it with the below code 

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://bloggergadgets.googlecode.com/files/excerpt_min.js' type='text/javascript'/>
</head> 

Then find <data:post.body/> and replace with below code 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>
<br/><img src='YOUR IMAGE URL'/></a>
</b:if>
</b:if> 

Replace 'YOUR IMAGE URL' with the Read More image URL of yours, i.e. 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQDYjvMG3YBtKSmi1rsDqy-6N8CmESJQ4cOpAVsqHprht8f6p9_sPIkUfI5ldD_fB9yu-pVw_pxhPFrgGdSlJqqJ4e5skRMUqlmgZ5RmpBRskCoOsJ230ZOhO1vp5IPfdZxPnJeMFS8Xz/s191/Read+More.png' and now you have the auto read more plugin for your blog.

Variations:

summary_noimg = 230;

Here you can set the number of characters (with space) to be shown, when do not have an image on the post(change the number 230 as per your choice)

summary_img = 140;

Set the number of characters (including space) to be shown in the summary with thumbnail

img_thumb_height = 100;

img_thumb_width = 100;

Here you can customize the size of the thumbnail image

How to justify the text on Read More thumbnail summary

Go to Template --> Customize --> Advanced --> Scroll Down and click Add CSS

enter the below code
.post-body {text-align:justify;}
and press Enter.

Read More

LinkWithin Gadget Not Showing Thumbnails of Related Posts - Blogger - LinkWithin Widget Problem

LinkWithin Gadget Not Showing Thumbnails of Related Posts - Blogger - LinkWithin Widget Problem

  September 05, 2013    PARTHASARATHI PANDA

---

As we know linkwithin widget is used to show related posts with thumbnail on the blog post. The LinkWithin widget is free to use and show related content of the blog under each post.

How to add linkwithin widget to Blog

1) Go to LinkWithin website

2) No need to sing up just fill the form and click on "Get Widget!" see the below image.

How to add linkwithin widget to blogger

3) Enter you Email address, Blog Link, Choose your platform (Blogger) and choose how many stories you want to show under the post 

4) Now click on "Get Widget"

5) Click "Install Widget"

6) Then Click on Add Widget

Add Linkwithin widget to blogger

7) Put the Gadget below to the Blog post, Now save the Save Arrangement and view your blog.

LinkWithin Widget Problem

If you have unable to view the related post using LinkWithin widget, do not worry it may be the LinkWithin server problem, Today I have seen the same problem. So if you have this problem then ignore it, this will be automatically fixed after server maintenance. 

LinkWithin Widget Problem - Website down

If you visit the LinkWithin website you will find 'We are currently down for system maintenance. Please check back in a few hours!' this message.

Read More

How To Add a Table In Blog Post - Add Excel Table To Website/Blogger Without HTML Knowledge

How To Add a Table In Blog Post - Add Excel Table To Website/Blogger Without HTML Knowledge

  August 21, 2013    PARTHASARATHI PANDA

---

                    With the use of Online tool TABLEIZER you can easily convert your excel table to HTML format, which can be used on your website or blogger without having knowledge of HTML. So you do not have to be an expert in HTML coding to use this online tool for creating HTML tables out of your excel sheet or any other spreed sheet.

To use online converting tool TABLEIZER for convert Excel to HTML, just copy the table from the Microsoft Excel and paste then Click on "Tableize It!" now you will get the HTML code for the table, copy the HTML code and paste it in the Website or Blog in HTML Mode.


 

Steps To Add Table to the Post:

 

1) Create a table using Microsoft Excel, Open Office or any other spreadsheet software or You can also use Microsoft Word. After completing the table select it and copy.

2) Go to TABLEIZER website to convert the table to HTML code, and paste your table in the text box.

Paste your table in the text box (Tableizer)

There you can also customise the font, font size and Header color.

Click on "Tableize It" to convert your excel sheet to HTML code, after that this tool will generate HTML and CSS code for you, copy the code. You can also see a preview of your table here.

Copy the HTML code to add table to post (Tableized)

3) Now create a new post on your blog or edit a post in which you want to add the table, Click on HTML and paste the code which you have copied, then preview your post and publish. 

If you want use the codes for your website, just paste it in your post HTML.

Paste the HTML code in the HTML post editor

That's all now your table has been successfully added to your website or blogger.

Search Terms:

• how to add table to blog
• how to covert excel table to HTML format
• how to add a table to your blog post
• convert excel table to HTML code online
• how to add a table to your blog post blogger
• Google blog how to add table to your post
• add spreed sheet table to website/blogger without HTML knowledge
• step by step process to add table to blog
• how to insert a table in blog/blogger/blog post/website 

Read More