THEBOEGIS: Javascript
THEBOEGIS

Free Software & Template Full Tutorial.

Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Friday, December 13, 2019

How To Install Recent Comment Disqus + Back To Top

How To Install Recent Comment Disqus + Back To Top. surely you already know with this style that many have used. and especially the template users commenting on disqus ... one of them is the famous blog Arlina Design uses Recent Comment Disqus + Back To Top

Step 1
First As usual Login to Blogger> click Themes> Click Edit Theme. after you enter the editing template Search</head> or &lt;/head&gt;&lt;!--<head/>--&gt;for faster Press Ctrl + F on your computer keyboard
After meeting Place the Code below right above the Code</head> or &lt;/head&gt;&lt;!--<head/>--&gt;

Monday, December 2, 2019

How to Change the Look of the First Image to Beautiful or Make a First Image

Hi all !! I am crazy about making articles, even though I have discussed many articles, and copying articles this time. I am currently posting gas2 .
Okey, this time I will discuss Tutorial:  How to Change the First Image to Be Beautiful or Make First Image , this tutorial has been discussed with one of Bogger's masters, Ms  Rhinokage Rio admin from  Idblanter.com , I re-discussed because there were many requests from 2 Blogger friends to make the First Image Tutorial, even though it was clearly discussed at Idblanter.com

First Image There are 2 versions of the first version of the Invert Pro Template  made by  arlinadzgn.com and the second is First Image from Idblanter.com
- Ok ... straight on its making

Monday, September 17, 2018

Easy Ways to Install Smart SEO Links on Blogs

Easy Ways to Install Smart SEO Links on Blogs
Easy Ways to Install Smart SEO Link on Blog - This time Arlina Design will share theSEO Smart Link  plugin which is a WordPress plugin that serves to change every word specified in an article into a link.

How the SEO Smart Link Plugin Works


This plugin will read every word you specify in the article. For example, if you add the word SEO or Blogger to the plugin, then automatically every word will change to a link if there is a word in your blog article.

How to Install SEO Smart Links


Open Blogger> Templates> Then add the code below before </body>

<script type='text/javascript'>
function smartLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;

content = newstr;

}

}

}

}

this.startScript = function(){

var onLoad = window.onload;

window.onload = function(){

if(onLoad){onLoad();}

setTimeout(&quot;f.createAnchor()&quot;, 100);

}

}

}

</
script>
<script type='text/javascript'>
var f = new smartLink();

f.add(&quot;
SEO&quot;, &quot;http://stressthinking.blogspot.com/&quot;);
f.startScript();

</script>

If you want the plugin above to only appear on the posting page, please add a special conditional tag on the post page. 

References: Some Conditional Tag Functions in the Save Templates Widget

In the marked code, replace SEO with the keywords that you specify and replace https://stressthinking.blogspot.com/ with your blog url.
In the code above you can add other keywords below, for example 

f.add(&quot;SEO&quot;, &quot;http://stressthinking.blogspot.com/&quot;);
f.add(&quot;Template&quot;, &quot;http://stressthinking.blogspot.com/&quot;);
f.add(&quot;Blogger&quot;, &quot;http://stressthinking.blogspot.com/&quot;);

You can also add words to bold, for example

f.add(&quot;&lt;b&gt;SEO&lt;/b&gt;&quot;, &quot;stressthinking.blogspot.com/&quot;);

Note


It is recommended not to add excessive keywords, 1 to 3 keywords are enough.

Application example


Pay attention to the word Mobile and Friendly in the article on the demo page

So about the Easy Way to Install Smart SEO Links on a Blog , hopefully useful.

Sunday, September 16, 2018

Replacing Post Summary on the Minima Template

Replacing Post Summary on the Minima Template
Changing Post Summary to Minima Template - A few days ago there was a blogger friend asking about how to add posts in post summary template new minima colored.

Okay, just follow the application method:

First log in to Blogger> Template> Click Edit HTML

Search and delete the code below
:

/* CSS Read More */
a.adreadmore {position:absolute;display:inline-block;bottom:20px;background:#fff;color:#666;padding:5px 10px;font-family:'Open Sans';font-size:12px;font-weight:400;border-radius:2px;border:1px solid #e9e9e9;transition:all .1s;}
a.adreadmore:hover,a.adreadmore:active {text-decoration:none;background:#f9f9f9;color:#444;}
a.adreadmore:after {content:'\f0da';font-family:Fontawesome;font-weight:normal;text-align:center;margin-left:5px;display:inline-block;line-height:10px;transition:all .1s;}

Then find the code below

<div>
<data:post.snippet/>
</div>
<a class='adreadmore' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> Read More </a>

Delete and replace the above code with this code

<div>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
</div>

Next add the script below just before the closing tag </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
snippet_count = 160;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i}
//]]>
</script>
</b:if>
</b:if>

Save the template.

To increase or decrease the number of posts in a post summary, please edit this code in the script above

snippet_count = 160;

The above method, you can apply to all the templates that I share here and do not rule out the possibility that you can apply to other templates.

After applying the above code, you can:
  • Save space on the main page of the blog
  • The appearance of the blog becomes more neat and interactive
  • Add an anchor link to the title keyword
And you are advised to:
  • Add a jump break to each post after the first paragraph
  • Change the blog site feed settings to prevent it from auto post blogs

So about How to Change Post Summary on Minima Template, if there are difficulties you can ask via the comments column. thank you

Saturday, September 15, 2018

How to delete IFrame on a blog

How to delete IFrame on a blog
How to Remove IFrame on a Blog - What is the use of this anti IFrame script?

This anti IFrame script is used to break the iframe function itself. A simple analogy like this, I have an image that has been indexed by Google Image, when other people want to see the image or image, usually Google Image will display the image of the search results on the front and the site where the image is in the background. In other words, we will not normally be taken directly to the image site.

Now if you have installed the anti iframe script in your blog template when the image was clicked it will automatically be redirected directly to the URL of your blog. Thus we will also get additional traffic from the image search results on the Google Image.

Okay, just go ahead. The application method is quite easy, copy and paste the code below above the code </head>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
if (top.location != self.location) {
top.location = self.location
}
</script>

</b:if>

With a little extra conditional tags, the above iframe script will only work on the blog posting page. therefore, the latest blogger dashboard will not experience errors. Because the blogger dashboard only shows the index page / homepage only.


May be useful

How to Optimize Images for SEO Automatically

How to Optimize Images for SEO Automatically
How to Optimize Images for SEO Automatically - This is done so that the images on your blog page are automatically indexed by search engines like google so you are not bothered by adding them manually (adding a description to <img alt="description of the image" height="125" scr="/image.png" width="125" /> when posting a picture).

This method can be said to be troublesome. With this automatic method, each image has the same description as the image title. Therefore, you must provide the appropriate name for each image that will be posted.

Why do you have Image Optimization to Automatically SEO?

Because the image on the blog page is one of the media that can be used for traffic on search engines because some internet users like to search or just browse to see pictures.

Here's how to install an automatic SEO code in the image

Look for the code </body> in your blog template, then copy and paste the code below just above the code </body>


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/
javascript'>
//<![CDATA[
$(document).ready(function() {
$('
img').each(function(){
var $img = $(this);
var filename = $img.attr('
src')
$img.attr('
title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='
text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('
#scroll').height() / 2;
$('
#scroll')
.css('
top', distance)
.text('
(' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('
#scroll').fadeOut();
}, 1500);
});
//]]>
</script>

Next save the template.

Every blog image that you install in an article will automatically have an SEO friendly code.

May be useful.

How to Make a Table of Contents in Blogger Posts

How to Make a Table of Contents in Blogger Posts
Table of Contents is a list consisting of points or parts of the subject contained in an article. We can use the Table of Contents as a breakdown of the contents of the article in the form of a link so that it will make it easier for the reader to choose what part of the subject they will read. We often encounter this Table of Contents on the Wikipedia, Encyclopedia, and also PDF files from E-Book which are usually placed after the preface or the main idea of ​​an article.

Well, here I will provide tips on how to make a Table of Contents in Blogger Posts easily.

How to Make a Table of Contents in Blogger Posts

To make it please friend follow the steps below.

Open Blogger> Click the Theme menu> Click the Edit HTML button> Then add this CSS code before </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

The next step, add the code below before </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>          
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>

Click the Save theme button.

Next to the posting section, create a post in the blogger post editor. Add the code below on the HTML tab (not Compose)

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="
Subheading 1">Subheading section 1</a></li>
<li><a href="#toc_2" title="
Subheading 2">Subheading section 2</a></li>
<li><a href="#toc_3" title="
Subheading 3">Subheading section 3</a></li>
<li><a href="#toc_4" title="
Subheading 4">Subheading section 4</a></li>
<li><a href="#toc_5" title="
Subheading 5">Subheading section 5</a></li>
</ol>
</div>
</div>

Edit writing marked with your own writing. Then add id="toc_1" in each heading according to the ID in the code above. For example like this
<h4>
How to make a table of Contents in Blogger Posts</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Add ID to headings like this

<h4 id="toc_1">
How to make a table of Contents in Blogger Posts</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Perhatikan kode yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang sobat buat. Contohnya

<h4 id="toc_1">
Heading Bagian 1</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4
id="toc_2">
Heading Bagian 2</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'
s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_3">
Heading Bagian 3</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4
id="toc_4">
Heading Bagian 4</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'
s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4 id="toc_5">
Heading Bagian 5</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Then add this code at the end of each paragraph in each section

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Then the result becomes like this

<h4 id="toc_1">
Heading Part 1</h4>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

When finished, please click the Publish post button and see the results on your blog.

And this is an example of a Table of Contents that I have added to the blog template

Thus tips on How to Make a Table of Contents in Blogger Posts, hopefully useful and cautious.

How to Disable Inspect Element on Blog

How to Disable Inspect Element on Blog
Yesterday there were blogger friends who asked about how to disable Inspect Element on Blog like on this Arlina Design blog?

Brief explanation, Inspect Element is one of the useful features of the default desktop version of the browser that is able to show, edit, and even change the HTML code taken from the site source. Inspect Element is often used by blog designers to find out code like CSS code, HTML, javascript on the blog.

If you don't want your theme code in the Inspect Element to be known by others, you can prevent that from happening by installing a debugger script that your blog will become safer from copying certain code directly through Inspect Element.

How to Disable Inspect Element on Blog

Here's How to Deactivate Inspect Element on Blog, please follow the easy steps below.

Open Blogger> Click the Theme menu> Click the Edit HTML button and add the following code just before the body </body> or closing code &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
// Inspect
!function t(){try{!function t(n){1===(""+n/n).length&&0!==n||function(){}.constructor("debugger")(),t(++n)}(0)}catch(n){setTimeout(t,5e3)}}();
//]]>
</script>

Then click the Save theme button and finish.

For the results, you can check on your blog by opening the Inspect menu (right-click on the blog page).

Of course this is not an effective way to protect your blog's theme code. Many roads lead to Rome, so there are still many ways to find out the theme theme of the blog, one of which is to disable Javascript on your blog in the browser as I have shared in this post. Add Adsense Adblocker Notifications on the blog

To prevent this, you can add the code below.

Add the following code before </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

<noscript>
<style type='text/css'>
/* No Script */
body,html{overflow:hidden}
.noscript{background:#e74c3c;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden}
.noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:700}
.noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal}
</style>

</noscript>

Then add the following code just below the <body>

<noscript>
<div class='noscript'>
<p><span>&#9888;</span></p>
<p>Please Enable Javascript to view our site content</p>
<p>Thank you</p>
</div>
</noscript>

Click the Save theme button.

To be better protected, you can also install the Anti code right click and deactivate the CTRL + U function on a blog like this.

Change the <body> with the code below
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;' ondragstart='return false' onselectstart='return false' style='user-select:none;cursor:default'>
Or it could also be with the Javascript code below, add before </body> or &lt;!--</body>--&gt;&lt;/body&gt;
<script type='text/javascript'>
//<![CDATA[
// Anti Klik Kanan
var message="Function Disabled!";function clickIE4(){if(2==event.button)return alert(message),!1}function clickNS4(e){if((document.layers||document.getElementById&&!document.all)&&(2==e.which||3==e.which))return alert(message),!1}document.layers?(document.captureEvents(Event.MOUSEDOWN),document.onmousedown=clickNS4):document.all&&!document.getElementById&&(document.onmousedown=clickIE4),document.oncontextmenu=new Function("alert(message);return false");
//]]>
</script>

Click the Save theme button.

But by installing the Anti code right click and deactivating the CTRL + U function on this blog I don't recommend it. Because according to me personally if finding a site that installed the code will make me uncomfortable in exploring every post in it, so as a result I always close the site immediately. But if you think it's useful, please install it, adjust it back to your needs.

All right, for the post from I about how to disable Inspect Element on the Blog. Hopefully useful and cautious.
Notification
This is just an example, you can fill it later with your own note.
Done