Add Auto Attribution with JavaScript on Blogger Blogs

This time I created a plugin by utilizing the feature. With a simpler level, it will be easy to apply to Blogger, which I think will be useful especially for writers who do not like if the article is copied by other authors without including the original source link.

This plugin does not guarantee that content copyers will include your links in their articles, but at least this may give a little warning. In addition, this plugin also has some features, one of which is this plugin will not automatically add attribution links when the copied text is inside the <pre> and <code> elements. I added this feature because based on my experience I used to use similar kind of plugin from the outside (if not Tynt name), but every time I copy the code (the purpose is to be copied) for I use, when I put the code in somewhere, the attribution link opens in it, so the uninformed will assume that the attribution is necessary when it is likely that the additional attribution will actually render the code error. This plugin will also return the selection to its original position shortly after the copy action.

To enable this feature on your blog, just copy this code and paste it above </ body>:

<script>
//<![CDATA[
!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>
</script>

Save changes. May be useful...

How to Display Reaction Buttons On AMP HTML Blogs

One way to get feedback for blog posts is from the reaction button of the reader. And actually Blogger itself has provided feedback post facility with the reaction button for each blog post, but only a few bloggers who use it.

For whatever reason, many bloggers who do not take advantage of this blogger post feedback button. Could be the reason may be because it does not know it or maybe because it looks less attractive.

Well if you are interested to try the reaction button to find out how readers react to your post, please follow the way below. For DEMO please try the reaction button below this post.

This reaction button is for AMP HTML template users.

Please copy the code below and save it below your blog post in HTML edit.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <span class='reactions-label'><data:top.reactionsLabel/></span><span class='reactions-iframe'><amp-iframe allowtransparency='' expr:src='data:post.reactionsUrl' frameborder='0' height='21' layout='fixed' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' scrolling='no' width='300'>
</amp-iframe></span>
        </b:if>
      </div>
</b:if>

And for the NON AMP blog please replace the amp-iframe code with HTML5 iframe.

Then to look neat, please add the CSS below in custom CSS for post view.

.reaction-buttons{margin:20px 0}
.reactions-label{margin-right:.7em}
.reactions-iframe{overflow:hidden}
.reactions-iframe amp-iframe{vertical-align:-5px;margin-left:-0.7em}

And make sure you have js amp-iframe installed for the post page.

Then please go to layout then click edit on Blog Posts gadget and please check for reaction.

And Good Luck....

Add Related Posts Side By Side With Adsense In Blogger AMP HTML

Actually this is the result of experiments in laying adsense ads in order to increase revenue. One of them tried a 600px high ad unit in the posting area on desktop and mobile.

Finding the right location to implement a 600px high ad, finally the right place is saved adjacent to the related posts. But for mobile viewing, ad units are under related posts, but still show a 600px high ad.

For the appearance can be seen below this post or on the thumbnail above.

If you want to try it too, please copy the code below.

Please save HTML code below post in HTML edit

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post'>
<h4>Related Posts:</h4>
<div class='underpost1'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/kompiajaib/kompi-html/master/relatedposts_light.html?url=https://wdbloggerina.blogspot.co.id/&amp;label=&quot; + data:label.name' frameborder='0' height='620' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>
   </b:if>
 </b:loop>
</b:if>
</div>
<div class='underpost2'>
<amp-ad data-ad-client='ca-pub-2124282593xxxxxx' data-ad-slot='xxxxxxxxxx' height='600' layout='fixed-height' type='adsense'>
</amp-ad>
</div>
<div class='clear'/>
</div>
</b:if>

Replace the code https://wdbloggerina.blogspot.co.id/ with your blog's domain. Then adjust the data-ad-client and data-ad-slot with your adsense.

Then please save the CSS below in the amp-custom style for the post page.

.related-post{margin:20px 20px 0;padding:0}
.related-post h4{font-size:20px;margin:0 0 10px;}
.related-post .underpost1,.related-post .underpost2{width:50%;display:inline-block;float:left;}
.related-post .underpost1{margin-bottom:10px;}
.related-post .underpost2{margin:20px 0;}
.clear{clear:both;}
@media screen and (max-width:414px){
.related-post .underpost1,.related-post .underpost2{width:100%;display:block;float:none;}
.related-post .underpost1{margin-bottom:0;}
.related-post .underpost2{margin:20px 0 0;}
}

Some AMP Shortcodes To Make Some Elements Easier

It turns out that in AMP there are some standard action codes or shortcodes to make it easier to give certain commands to an element such as redirect, print, show, hide, toggle, scroll to, and focus on input.

With these commands we do not need an AMP plugin to perform its function.

The commands are as below.

AMP.navigateTo ()

 <button on="tap:AMP.navigateTo(url='http://google.com')">google.com</button>

AMP.print ()

 <button on="tap:AMP.print">Print</button>

Show, Hide, Toggle Visibility

 <button on="tap:normal-element.show">Show</button>
<button on="tap:normal-element.hide">Hide</button>
<button on="tap:normal-element.toggleVisibility">Toggle Visibility</button>

<div id="normal-element" hidden>
  I was initially hidden.
</div>

Scroll To

   <button on="tap:normal-element2.scrollTo">ScrollTo</button>
  <button on="tap:normal-element2.scrollTo('position' = 'bottom')">ScrollTo Bottom</button>
  <button on="tap:normal-element2.scrollTo('position' = 'center')">ScrollTo Center</button>
  <button on="tap:normal-element2.scrollTo('duration' = 5000)">ScrollTo Slowly</button>

<div id="normal-element2">
  You have to scroll to see me.
</div>

Focus

 <button on="tap:input-element.focus">Focus</button>

Combining Commands

 <button on="tap:normal-element2.scrollTo('position' = 'center'), input-element.focus">ScrollTo and Focus</button>

Please use as needed ...

Above is an example in HTML code and you can modify a button with your own CSS code.
 

How to Fix “Error” Pinterest Share Button on AMP Blog

Actually the error on the AMP social share button for this Pinterest button I have felt from a few days ago.

However I think this may be an update or an improvement from AMP or maybe from Pinterest.

But it turns out the error on the Pinterest button for AMP continues. Finally I was curious to find the cause of this error Pinterest button.

This error occurs when the Pinterest button clicks, the popup share box is out as usual, but there is an odd number on the image post it like unreadable and can not save post.

Finally I found the solution, and now the Pinterest button on AMP social share back to normal and can save post.

If you are using an AMP template and experience something similar, please follow the steps to fix the error.

Please find the social amp amp share for Pinterest like / similar code below.

 <amp-social-share type='pinterest'/>

Then add the expr code: data-param-media = 'data: post.firstImageUrl' on Pinterest's social amp code so it looks like below.

 <amp-social-share expr:data-param-media='data:post.firstImageUrl' type='pinterest'/>

Done, now please try to share the post to Pinterest.

Good luck....

How to Fix “overflow:hidden” Doest not Work on Mobile Device

Have you ever tried giving style overflow:hidden; On the body to remove the page scroll? And does the function of hiding the scroll on the body work when attempted with a mobile device?

Usually as a scroll example on a page is omitted when using elements with position: fixed; such as fixed menus, fixed widgets, or others. So when the fixed element is activated the page scroll disappears so the focus of attention on the fixed element.

If you find overflow: hidden; Or remove the scroll on the body does not work on the mobile device, please try this trick by adding also position: relative; On the body. This trick I've tried and work on mobile devices.

We can use the javascript function toggle to give class to body like below and also with CSS style.

 function toggleClassbody() {
  var body = document.body;
  "flow" !== body.className ? body.className = "flow" : body.className = "";
};

Then add the following CSS:

 .flow {
    overflow: hidden;
    position: relative;
}

With the following HTML:

 <button onclick="toggleClassbody()">Hidden scroll</button>

Good luck and hopefully useful.

SVG icons in Blogger Does not appear In Firefox Browser

SVG is actually a W3C recommended image file for the web as it supports all modern browsers on desktops and mobile, but there are still many developers who have not used it yet. SVG has a small size but still good when appearing on the retina screen or when in zoom.

Instead of SVG supporting all modern browsers, then why exactly does SVG background not appear in the Firefox browser?

Yes, we can use SVG as background-image in the CSS style by using URI or base64 data, but if we are not careful then the background does not show fi Firefox browser.

SVG can be used as background-image in CSS with URI data like the example below.

.social-icon-fb { background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#4867aa' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat; }

If you want to set the size of the icon, can add the background code: 50px 50px; (The original size is 24x24).

But with the CSS code as above, then the icon as background-image will not appear in firefox browser, while in chrome browser appear without problems.

The reason is the #hash code in the hex color code in the code style = 'fill: # 4867aa' (this code to give color to SVG).

Well the solution to this SVG background appear in Firefox browser, please replace hash code # with% 23 so it becomes like this style = 'fill:% 234867aa'

May be useful.