How To Integrate AddThis Share Button To Your Blogger Site And More - 2022

AddThis IS RETIRED❗

Follow the step-by-step integration of the AddThis share buttons to the Blogger site and more. It's pretty simple. View the video below.

Remember, to always back up your theme before integrating any HTML code in your theme. 

But! If you are just now starting a blog on Blogger and you don’t mind messing up and just practicing, then all is well.

 

CLICK ON AddThis - DASHBOARD

Go to www.addthis.com

SIGN-UP

GET CODE

COPY CODE

Go to Blogger dashboard and scroll down to theme click on theme and next to the customize button click on the arrow and scroll to EDIT HTML. Push control F within the Html theme and type </body> Tag & click enter the </body> tag appears... Paste the AddThis CODE BEFORE THE BODY </body> tag in the HTML of blogger template... As the picture is shown below. Go to - https://www.blogger.com/

View the vid for further assistance

I hope you found this helpful? Comment below for any additional help!

Thank you for visiting!

Read More »

Prevent Copy And Paste On Blogger Code - Protect Your Content

Disable Copy Paste In Blogger

Instructions on how to disable copy-paste in Blogger. Protect your content. Follow the 4 easy steps below or watch the video for better guidance. 

Step 1. Once signed in at blogger @ www.blogger.com Click on Layout. 

Step 2. Select Add a Gadget. 

Step 3. Select HTML JAVA/SCRIPT. 

Step 4. In the final step, make sure you title it., add the code provided below & add it in the content area & click save, and you are done. No more copy-paste! You can find this copy-paste code here.

Disable Copy Paste In Blogger Code Below

<script src='demo-to-prevent-copy-paste-on-blogger_files/googleapis.js'/><script type='text/javascript'>
if (typeof document.onselectstart!=&quot;undefined&quot; ) {
document.onselectstart=new Function (&quot;return false&quot; );
} else {
document.onmousedown=new Function (&quot;return false&quot; ); document.onmouseup=new Function (&quot;return true&quot; );
}
</script>

I hope you found this helpful?

Comment below for any additional help!

Thank you for visiting!

Read More »

How To Center The Text Titles In Blogger BlogSpot Gadget - 2022

Pretty simple. Simply use this code and paste it into the advanced CSS in the blogger theme.

Use the code below -

.sidebar .widget h2, .title {text-align:center;}

And make sure after pasting the code in the Advance CSS HIT ENTER TWICE AND SAVE!

Center Sidebar Gadget/Widget Titles on Blogger

I hope you found this helpful?

Comment below for any additional help!

Thank you for visiting!

Read More »

How To Post Images Side by Side In Blogger BlogSpot 2022

Pretty simple to use this code in the HTML. Instruction: Paste this code in the HTML view when creating your posts on Blogger BlogSpot.

• How do I insert the code? Copy the code below and paste it into the HTML View when creating your post.
• How to insert the images? Simply right-click on the image your desire and copy the image address and paste it into the "image 1 link here"

Watch Vid For Assistance

 

Use this table/code below.

<table>
<tr>
<td><img border="0" width="100px" height="100px" src="IMAGE 1 LINK HERE" /></td>
<td><img border="0" width="100px" height="100px" src="IMAGE 2 LINK HERE" /></td>
<td><img border="0" width="100px" height="100px" src="IMAGE 3 LINK HERE" /></td>
</tr>
</table>

HTML VIEW

Example of what it looks like.

How To Post Images Side by Side In Blogger BlogSpot 2022

I hope you found this helpful?

Comment below for any additional help!

Thank you for visiting!

Read More »

How To Add Read More To Each Of Your Blog Posts Automatically On Blogger BlogSpot

Read/follow all the steps below...

With this automatic read-more button that we are going to implement in the blogger theme, it will show the thumbnail image of your post and the post summary as well. 

We are going to look for these HTML codes highlighted in green in this post and look for them in the blogger theme as shown in the image below. You may need to replace all three of them with code highlighted in yellow in this post.

Look for: <data:post.body/>

View Video For Guidance

👇Replace it with the code below 👇

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

In the AWESOME INC theme for Blogger that I am using, I only had to change only two of the <data:post.body/>

The other themes may require changing all three <data:post.body/>. Keep this in mind!

Very Important to add the last piece of code shown below to your theme. Right above the <head> tag.

<script type='text/javascript'>

posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

BLOGGER DASHBOARD

BLOGGER THEME HTML

I hope you found this helpful? Thank you for visiting!

Comment below for any additional help!

Read More »

Center Brackets For Blogger Gadgets 2022 - Blogger BlogSpot

Blogger BlogSpot Simple HTML Codes

Center brackets are very easy to implement into the blogger layout. Choose the HTML gadget and use <center> </center> and in between the center brackets paste your code, for instance, the Twitter feed code like this one.

<a class="twitter-timeline" data-height="777" data-theme="dark" data-width="355" href="https://twitter.com/avonrep_online?ref_src=twsrc%5Etfw">Tweets by avonrep_online</a> <script async="async" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>

Example 1:

<center><a class="twitter-timeline" data-height="777" data-theme="dark" data-width="355" href="https://twitter.com/avonrep_online?ref_src=twsrc%5Etfw">Tweets by avonrep_online</a> <script async="async" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script></center>

Example 2:

<body> 

<center>

    <p>Your centered text goes here</p> 

</center> 

</body>

It's pretty neat to learn the simple HTML codes. I enjoy the simple templates in blogger because I get to learn the basic HTML codes. Overall I do like blogger Blogspot.

Example Images Below

I hope you found this helpful? Thank you for visiting!

Read More »