What Makes a Blog Have so many Visitor?

What makes a blog have so many visitors? - Have you guys noticed how a blog develops!? Have you ever asked what makes a blog have high visitor traffic (traffic)!? For those of you who also have a blog, you may have understood how to get up and down a blog writer, starting from attracting visitors, looking for appropriate themes and writing materials, improving the quality of the blog, organizing and coding the syntax of the blog page builder, learning web programming (HTML, CSS, and JS).

What Makes a Blog Have so many Visitor?

Being a blog writer is not something easy and instant, there are many parts that need to be considered and many things that need to be done. Everyone has their own motivation to write and build a blog. Most blog writers are probably inspired by the income that can be earned by just writing on a blog. But whatever it is as long as it can bring benefits to others does not matter.

Today the blogging world has grown rapidly, according to statistical data has registered more than 300 million domains as of 2017. Based on this, it can be said that the competition among blog writers is becoming increasingly elite. A blog is able to develop according to the development of its author, but even so sometimes one's own blog is still unable to achieve the desired traffic. Then what makes the traffic of a blog can increase!? There are several things that become a source of energy for a blog, which can be a strength for a blog writer to create a blog the way he wants. Then what are these things, look carefully at the following things, maybe it can be a motivation for you.

Writer

Like a piece of hardware, the author is a processor for a blog. The most important and most influential part of the future of a blog. In the hands of a reliable writer, a blog will become a star in cyberspace and top rankings for relevant search results. Quality writers will certainly be able to produce quality writing, therefore the author is the first factor that affects the traffic of a blog. Friends need to know, especially for fellow blog writers, that if an author stops writing for a long time, it will be quite influential for his blog. The longer the traffic of a blog will decrease when for a long time it is not filled with writing. Therefore, a blog writer must keep his blog up to date so that blog traffic continues to increase.

If you are a writer or are going to be a blog writer, try to make small changes to yourself. First, by deciding to choose a simple and noble intention, there should be no no-no intentions, let alone bad intentions, because in fact the power of God remains even in cyberspace. Try to be sincere in helping others by providing information that is not a hoax, accurate, useful, does not vilify certain parties or individuals, does not invite ugliness, does not pit it, and most importantly does not steal the results of other people's writings. Try writing about things you like, make writing that comes from your heart, because the writing will make you comfortable and flexible in writing, don't just stick to writing about popular things because it will only make you a small part of the group of people who pursue popularity.

Make writing that is close to your life and daily life, it will make your writing sharper and wider because it has become part of your environment. The most optimal thing is to create writing that is sourced from your experience, please share your experience, then that way visitors will come by themselves. If you have expertise in a certain field, try to create a blog that focuses on discussing it, create dense and high-quality content, it doesn't need much, as sufficient and as much as you can is the best. Make writing in easy-to-understand language, expand your references by reading, it will increase your vocabulary and make your writing style stand out.

Content

The content of a blog has a considerable influence on a blog, for friends who have tried to pit their fate against Google Adsense, of course knowing how important and how much influence content has as a factor in whether or not a blog is accepted as an adsense publisher. Blog content that is not a duplicate aka plagiarism result and contains dense information will make the blog quite a lot used as a reference on Google searches.

The content of a blog will also determine whether the blog can have a high income on Google Adsense or not, this is my experience of being rejected many times by Google Adsense until finally maximizing changes to the content and trying it again until finally it was successfully accepted in the umpteenth time. So if you are also trying to be part of a Google Adsense publisher, please try to create quality content.

Template

Who would have thought that this one is a fairly important factor that affects the traffic of a blog. It is undeniable that most blog owners who start trying to increase income from blogs will start first through optimizing the appearance and code of the blog, overall called blog templates. The template of a blog will not only affect the appearance of the blog itself, but will also affect in terms of the "personality" of the blog in the eyes of search engines.

What does that mean? An optimal blog template will maximize the index results from search engines against the content of the blog. In addition, the blog template will also affect the mood of the readers. The messier and more crowded the template of a blog will interfere with the comfort of visitors, especially if it has slowed down the blog page loading process. In the worst situation, even though the blog content is very adequate, the uncomfortable condition and appearance of the blog will actually make visitors choose to look elsewhere and rush away. Of course, this will affect the blog traffic in the future.

So be good at choosing a template, or if you are able you might try to create your own template, or at least modify the template obtained in a lawful way as a true blogger. My advice in choosing a template is look for a template that is as light as possible, pay attention to the loading speed generated from the template. Pay attention to the appearance of the template, if it is too crowded, you should forget it, in my opinion, the simpler and simpler the appearance of a blog, it will make visitors more comfortable.

Sharing

Be an active person in sharing and exploring your blog content. There are many ways you can share about your blog, the easiest is probably to copy the blog link/URL to your personal social media or fan page. But in my opinion, the most optimal thing is to share blog content by joining various forums and discussions about relevant things related to the blog.

Simply put, you can try by helping people's problems through discussion forums, both local forums and international forums. The most popular ones that you often encounter are probably Kaskus and Stackoverflow which are more widely covered internationally. Try to answer the problems of the people in it then don't forget to point to your blog for more complete information, it might be enough to help you.

Cover

Those are some things that you might be able to pay attention to about how to increase the traffic of a blog. In general, there are actually still several factors that may affect your blog traffic, such as SEO Optimization by adding good and correct meta tags, blogwalking, mobile friendly optimization, responsive templates, webmaster optimization, and others that you may know more than me.

But for me some of the above will probably be very effective if developed in the right way. If you want to discuss this post, please leave your comments in the comment box at the bottom of this page. The commenting system on this blog uses the Disqus service, but you can still comment without having to have a Disqus account. Or you can also send your response via the contact page of this blog, if you are not busy the admin will immediately reply to your response. Thank you, hope it is useful and bye.

How to Add Multi Related Post in The Post

How to Add Multi Related Post in The Post - Have you ever seen a related post link that was inserted between the contents of an article on large sites? In Blogger too, of course we can add it by adding the link in the post manually, but it will be a bit troublesome if you make a post every time because you are accustomed to adding it.

Multi Related Post in this post the way it works is almost the same as the tips I've shared before, precisely in the post "How to Install Related Articles in Posts". That is, it will display an article link related to the contents of the post randomly in each paragraph.

For example like the picture below:

The picture above is an example of the contents of an article before using Multi Related Post and below is an example of the placement of a Multi Related Post link that will appear automatically in each paragraph of the post content.

That's the picture. For those of you who are interested in trying it, please follow the steps below.

How to Add Multi Related Post in The Post

Open the Blogger page >> Click the Themes menu and click the Edit HTML button >> Add this CSS code before </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#222}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{text-decoration:underline}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
</style>
</b:if>

Next look for the <data: post.body/> code (If there are several codes <data: post.body/> select the one inside the post's conditional tag) and add the code below right below it. Also read: Blogger Conditional Tag.

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:view.isPost'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
      </b:if>
    </b:loop>
  </b:if>
<script type='text/javascript'>
//<![CDATA[
(function arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>

After that click the Save theme button and finish.

And below there are a number of color choices, here you just need to replace the CSS code

Option 1

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{color:#0984e3;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:transparent url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23000&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3}
</style>
</b:if>

Option 2

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#eaeaea;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#e3e3e3}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f5f5f5 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23888&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
.arldzgnMultiRelated:hover .icon{background-color:#f9f9f9}
</style>
</b:if>

Option 3

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#c0392b;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#e74c3c}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:rgba(255,255,255,.25) url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
.arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)}
</style>
</b:if>

Option 4

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background:#ffeaa7;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px solid #d63031;transition:all .3s}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content{padding:10px 15px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{color:#111;text-decoration:underline}
</style>
</b:if>

You can choose one of the CSS that I have provided from the 4 options above.

So many tutorials from me about How to Add Multi Related Post in The Post. Hopefully it can be useful and good luck.

How to Add Smooth Scroll Effects to Blogger

How to Add Smooth Scroll Effects to Blogger - Maybe you are familiar with the back to top button widget that will make it easy for visitors in terms of navigation on a website. This smooth scroll effect will provide a smooth transition when we scroll the page as well as a smooth scroll effect on the back to top button.

For those who are interested, you can just follow the easy steps to install it below.

How to Add Smooth Scroll Effects to Blogger

Open the Blogger page >> Click the Themes menu and click the Edit HTML button >> Add the following code before </body>

<script type="text/javascript">
/*<![CDATA[*/
// Smooth scroll
!function(){function e(){var e=!1;e&&c("keydown",r),v.keyboardSupport&&!e&&u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")>=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight<=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v.accelerationDelta){var i=(1+30/a)/2;i>1&&(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<M.length;c++){var s=M[c],d=r-s.start,f=d>=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&&(h=p(h));var m=s.x*h-s.lastX>>0,w=s.y*h-s.lastY>>0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&&(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&&(e.scrollLeft+=a),i&&(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&&/\.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&&f(i)?!0:(Math.abs(a)>1.2&&(a*=v.stepSize/120),Math.abs(i)>1.2&&(i*=v.stepSize/120),o(r,-a,-i),void e.preventDefault())}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&&e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&&(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d>0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o)return i(t,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow-y"),"scroll"===overflow||"auto"===overflow))return i(t,e)}while(e=e.parentNode)}function u(e,t,o){window.addEventListener(e,t,o||!1)}function c(e,t,o){window.removeEventListener(e,t,o||!1)}function s(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function d(e,t){e=e>0?1:-1,t=t>0?1:-1,(k.x!==e||k.y!==t)&&(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&&D[1]==D[2],o=h(D[0],120)&&h(D[1],120)&&h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e>=1?1:0>=e?0:(1==v.pulseNormalize&&(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&&K&&(u("mousedown",a),u("mousewheel",n),u("load",t))}();
/*]]>*/
</script>

Then click Save theme and finish. For the results you can check and see the difference with before using the Smooth Scroll Effect on your website.

That's a tutorial about How to Add Smooth Scroll Effects to Blogger. Hopefully with these fairly short tips, it can be useful and useful for all of you. Thank you and good luck.

Here's the Time to Update the Author Blog Profile

Here's the Time to Update the Author Blog Profile - As we have already known that Google has decided to stop the Google+ social media service by reason of leaking user data due to a bug in the service. The Google+ service is planned to be turned off in March 2019.

Of course the termination of Google+ services also affects Blogger like the author's blog profile that uses G + profiles, widgets and G + buttons, and Google+ comments.

The author's blog profile that uses the G + profile will later become a 404 error because the G + profile url is inactive, while Google+ widgets, buttons and comments will not be able to be used. Worse, Google+ comments cannot be moved to Blogger comments. Al the results of the comments will just disappear.

For that reason, now is the time for us to update our blog author's profile so as not to become a broken link 404. According to Blogger, the termination of Google+ integration on Blogger will be done on February 4, 2019.

If we don't update Blogger profiles, then the author blog profile will appear as Anonymous and without photos. So it's best before February 4, 2019, we should update the profile from the Google+ profile to the Blogger profile.

Please enter the Blogger dashboard then select Settings >> User settings >> select Blogger. Then follow the next step by giving our profile name.

Next, please refresh our Blogger dashboard page for User settings. Here we can now edit our Blogger profile. Please change your Blogger profile's avatar and so on.

If we do not change the Blogger profile avatar, while the blog displays author photos, the author's photo will be blank or not appear. Unless you previously displayed author photos manually.

And please note that replacing this blogger profile applies to all blogs that are on the same Blogger account. If in your Blogger account you have several blogs, then just do one profile change on one blog, and the profile of the other blog authors will also automatically change to the same Blogger profile.

Responsive Iframe with Multi Server

Responsive Iframe with Multi Server - This time I will share how to make responsive iframes with multi servers that can be used by blogs that provide videos or movie and anime blogs. With this multi server, visitors or viewers can choose the preferred server or choose the quality of the video provided. I made the button by displaying it in an iframe when the iframe was hovered, so that the appearance of the iframe was more neat without the buttons. I made this responsive iframe with multi server using javascript so that it would be quite light when used on a blog.

If you are interested in trying to make a responsive iframe with this multi server, just go ahead, follow these steps:

How to Create an Responsive Iframe with Multi Servers

Please add the following CSS to your blog style.

.div-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
}
.div-frame .frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 0 auto;
  width: 100%
}
.div-frame .frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0
}
.div-frame:hover ul.tab-server,
ul.sub-server,
ul.tab-server {
  transition: all .4s ease-in-out
}
ul.tab-server {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: -200px;
  z-index: 2;
  opacity: .8;
  line-height: 1
}
li.server,
ul.sub-server li {
  margin: 0;
  padding: 7px 10px;
  background: #C2185B;
  color: #fff;
  display: inline-block
}
li.server {
  position: relative;
  cursor: default;
  font-size: 16px;
  line-height: 1;
  padding-top: 9px;
  padding-right: 25px;
  width: 100px;
}
ul.sub-server {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  right: 100%
}
ul li.server,
ul li.server li,
ul.sub-server,
ul.sub-server li {
  list-style: none
}
ul li.server:hover ul.sub-server,
ul.sub-server li a {
  right: 0;
  transition: all .4s ease-in-out
}
ul.sub-server li {
  background: #C2185B;
  display: block;
  padding: 0
}
ul.sub-server li:hover {
  background: #AD1457
}
.active a {
  background: #880E4F
}
.div-frame:hover ul.tab-server {
  left: 0
}
li.server {
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='30' height='20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 30px 20px;
  background-position: right center
}
ul.sub-server li a {
  font-size: 14px;
  color: #fff;
  padding: 7px 10px 5px 30px;
  text-decoration: none;
  display: block;
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M4,1H20A1,1 0 0,1 21,2V6A1,1 0 0,1 20,7H4A1,1 0 0,1 3,6V2A1,1 0 0,1 4,1M4,9H20A1,1 0 0,1 21,10V14A1,1 0 0,1 20,15H4A1,1 0 0,1 3,14V10A1,1 0 0,1 4,9M4,17H20A1,1 0 0,1 21,18V22A1,1 0 0,1 20,23H4A1,1 0 0,1 3,22V18A1,1 0 0,1 4,17M9,5H10V3H9V5M9,13H10V11H9V13M9,21H10V19H9V21M5,3V5H7V3H5M5,11V13H7V11H5M5,19V21H7V19H5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 32px 13px;
  background-position: left center
}

Then please save the following javascript above the code </body>

<script>
//<![CDATA[
  function go(loc) {
    document.getElementById('iframe').src = loc;
  };
  var btnContainer = document.getElementById("serverid");
  var btns = btnContainer.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
  }
//]]>
</script>

And the following HTML code is used to display the video iframe in the post.

<div class="div-frame">
  <div class="frame">
    <iframe src="xxxxxxxx" allow="autoplay; encrypted-media" scrolling="no" frameborder="0" allowfullscreen id="iframe"></iframe>
  </div>
  <ul class="tab-server" id="serverid">
    <li class="server">Select Server
      <ul class="sub-server">
        <li class="btn active"><a href="javascript:void" onclick="go('xxxxxxxx')">Blogger 720p</a></li>
        <li class="btn"><a href="javascript:void" onclick="go('yyyyyyyy')">Blogger 480p</a></li>
        <li class="btn"><a href="javascript:void" onclick="go('zzzzzzzz')">Vidlox 360</a></li>
        <li class="btn"><a href="javascript:void" onclick="go('wwwwwwww')">Mystream 240</a></li>
      </ul>
    </li>
  </ul>
</div>

Information :

• xxxxxxxx (there are 2 pieces) replace with the iframe video URL that is displayed by default (active iframe).
• yyyyyyyy, zzzzzzzz, wwwwwwww please replace the iframe URL that is used as the other server choice.

Such are the tips that I can share this time about Responsive Iframe with Multi Server. Hopefully with this fairly short tutorial, it can be useful and good luck.

How to Redirect Blog URL to Several Other Sites

How to Redirect Blog URL to Several Other Sites - This method of working from the Redirect Blog URL to Several Other Sites is actually almost the same as the Way to Redirect Page Not Found to Other Pages I've shared before. But there is a difference, that is, you can add several site links and will automatically switch to sites that have been determined randomly.

So by Redirecting the Blog URL to some of these other sites, it is perfect for those of you who want to create a new site but don't want to lose visitors from old sites.

Then how? The method is quite easy, just follow the steps below.

How to Redirect Blog URL to Several Other Sites

Open the Blogger page >> Click the Themes menu and click the Edit HTML button >> Add the following code before </body>

<script type='text/javascript'>
//<![CDATA[
(function(){
setInterval(function(){
var redSites = [
  "https://new-site1.blogspot.com",
  "https://new-site2.blogspot.com",
  "https://new-site3.blogspot.com",
  "https://new-site4.blogspot.com",
  "https://new-site5.blogspot.com"
];
var randomLinks = redSites[Math.floor(Math.random()*redSites.length)];
window.location = randomLinks
},9000)
}())
//]]>
</script>

Pay attention to the marked code, change the URL of the site with your site. You can also reduce or add the site URL in the code as needed and for the number 9000 (9 seconds) shows the time taken when switching to another site.

After editing click the Save theme button and see the results on your blog.

So is the tutorial that I can share this time about tips on How to Redirect Blog URL to Several Other Sites. Hopefully useful and good luck.

How to Give a Transition Effect to Post Image

How to Give a Transition Effect to Post Image - This time I will share a tutorial on tips on how to give a transition effect to post images. The way it works is actually almost the same as in the post Speeding up Loading Blog with AdSense Lazy Load, which is that the content will appear when we scroll the page down.

Immediately, for those of you who want to install it, the method is quite easy. Please refer to the following steps.

Giving Effects to Post Images

As usual, open the Blogger page >> Click the Themes menu and click the Edit HTML button >> Add this CSS code before </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
.imgani .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.imgani .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
</style>
</b:if>

Next add the following code before </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".post-body img").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("anime")})}));
//]]>
</script>
</b:if>

After that click the Save theme button and finish. And you can see the results on your blog.

Not only limited to giving effect to the image post, you can also modify and effect other parts of a template.

And this version is a little different, the transition effect will still run when scrolling the page up and down.

Add this CSS code before </head>

<style type='text/css'>
.come-in{perspective:200px;animation:hago 0.8s ease forwards}
.already-visible{left:0;animation:none}
@keyframes hago{from{opacity:.5;transform:scale(0.8)}to{opacity:1;transform:scale(1.0)}}
</style>

Next add the following code before </body>

<script type='text/javascript'>
//<![CDATA[
// Transition
!function(t){var o=t(window);t.fn.visible=function(i,e,r,f){if(!(this.length<1)){r=r||"both";var n=this.length>1?this.eq(0):this,l=void 0!==f&&null!==f,h=l?t(f):o,g=l?h.position():0,u=n.get(0),p=h.outerWidth(),s=h.outerHeight(),b=!0!==e||u.offsetWidth*u.offsetHeight;if("function"==typeof u.getBoundingClientRect){var a=u.getBoundingClientRect(),c=l?a.top-g.top>=0&&a.top=0&&a.top0&&a.bottom<=s+g.top:a.bottom>0&&a.bottom<=s,d=l?a.left-g.left>=0&&a.left=0&&a.left0&&a.right0&&a.right<=p,w=i?c||v:c&&v,y=i?d||m:d&&m;w=a.top<0&&a.bottom>s||w,y=a.left<0&&a.right>p||y;if("both"===r)return b&&w&&y;if("vertical"===r)return b&&w;if("horizontal"===r)return b&&y}else{var z=l?0:g,B=z+s,C=h.scrollLeft(),H=C+p,R=n.position(),W=R.top,j=W+n.height(),q=R.left,L=q+n.width(),Q=!0===i?j:W,k=!0===i?W:j,x=!0===i?L:q,A=!0===i?q:L;if("both"===r)return!!b&&k<=B&&Q>=z&&A<=H&&x>=C;if("vertical"===r)return!!b&&k<=B&&Q>=z;if("horizontal"===r)return!!b&&A<=H&&x>=C}}}}(jQuery);
// Transition Option
var win=$(window),allMods=$(".module");allMods.each(function(l,i){$(i).visible(!0)&&$(i).addClass("already-visible")}),win.scroll(function(l){allMods.each(function(l,i){(i=$(i)).visible(!0)?i.addClass("come-in"):i.removeClass("come-in already-visible")})});
//]]>
</script>

Note : Note the code that is marked, meaning the class "module" is the part that you want to give effect to.

For example if you want to use it in the posting section, just add the "module" class to the postup mark:

<div class='main-wrapper'>
  <div id='post' class='post module'></div>
</div>

Just a few tips that I can share this time about How to Give a Transition Effect to Post Image. Hopefully it can be useful and good luck.

Recent Post Widgets For AMP With Next Prev

Recent Post Widgets For AMP With Next Prev - Actually the recent post widget is one of the widgets that are not required to be on the blog. Because to see the latest posts, visitors can go to the homepage. But some bloggers still put up a recent post widget with the aim to make it easy for visitors to find out the latest posts on the blog.

Because the homepage displays the latest posts, the recent post widget like this should not be displayed on the homepage, but only displayed on the posting page. Immediately, if you are interested in installing it, you can immediately follow the steps below.

Recent Post Widgets For AMP With Next Prev

To save Recent Post Widgets For AMP With Next Prev in the AMP sidebar blog, please copy the following code and save it between the widgets in the sidebar via EDIT HTML.

<b:widget id='HTML97' locked='false' title='' type='HTML' version='1'>            <b:widget-settings>              <b:widget-setting name='content'><![CDATA[<!--recentpost-->]]></b:widget-setting>            </b:widget-settings>            <b:includable id='main'>  <!-- only display title if it's non-empty -->  <b:if cond='data:title != &quot;&quot;'>    <h2 class='title'><data:title/></h2>  </b:if>  <div class='widget-content'>    <data:content/><b:if cond='data:blog.pageType == &quot;item&quot;'><amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/recentpost-amp.html?fontSize=16px&amp;color=333&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='488' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' title='Recent Posts'>    <amp-img height='488' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZthqpoBjYPOL0JIb-1_Lc85b_DYwsAABvRkGWIA0Bd7NteqcLWsDjSgDLmzM52sCv-ddJNkepm3KFzaZnlOhH5aCc1tYy2W9dk_cK5oMjaMsoPjwV9W_D9feNcNrsynjWMEOROr5uSM/s1600/back-iframe.png' width='auto'>    </amp-img>  </amp-iframe>  </b:if>  </div></b:includable>          </b:widget>

Information :
I marked the 16px code to set the font size for the post title, code 333 marked to set the color of the title post (color hex code without #).

It's easy isn't it? Some tips that I can share this time, about Recent Post Widgets For AMP With Next Prev. Hopefully with this fairly short article, it can be useful for you and good luck.

Source:https://www.kompiajaib.com/2018/12/widget-recent-post-untuk-amp-dengan.html

How to Embed Chatango on the Blog AMP HTML

How to Embed Chatango on the Blog AMP HTML - It turns out that until now Chatango is still a chat box that is popular among bloggers. It can be seen from the many blogs that use Chatango as chat rooms for blog visitors.

So what about the AMP blog? Does the AMP blog allow you to embed Chatango?

As we know that in AMP HTML it is not allowed to store scripts like the Chatango embed code. Luckily Chatango doesn't need domain verification, so we can save or host Chatango's embed code elsewhere and embed Chatango in AMP with amp-iframe.

If you want to try embed Chatango on your AMP blog, please follow the steps below.

Embed Chatango on the AMP Blog

The first thing to do is please create a Chatango chat group on your Chatango account. For Embed as, please select the Box and remove the Full width ticker on mobile. For Size, please choose Responsive.

For colors and more, please adjust it to your taste. Then please copy the embed code and save it in notepad.

Next, please create a * .html file (for example chatbox.html) and use the following code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Box</title>
<style>
body{
margin:0;
padding:0;
}
.box{
width:100%;
height:100vh;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<!-- EMBED CHATANGO CODE SAVE BELOW -->
</div>
</body>
</html>

Then please host the html file you created, you can use Github to host html files.

Then please embed the html file for the chatbox created earlier on your AMP blog using the following code, you can save it in the sidebar.

<amp-iframe frameborder='0' height='450' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='HTML URL HOSTING HERE'>
<amp-img height='450' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZthqpoBjYPOL0JIb-1_Lc85b_DYwsAABvRkGWIA0Bd7NteqcLWsDjSgDLmzM52sCv-ddJNkepm3KFzaZnlOhH5aCc1tYy2W9dk_cK5oMjaMsoPjwV9W_D9feNcNrsynjWMEOROr5uSM/s1600/back-iframe.png"' width='auto'/></amp-img></amp-iframe>

""Please replace the HTML URL HOSTING HERE with the URL of the html chatbox file that you are hosting on Github. For height='450' please adjust it to your taste.""

and make sure on your blog you have used amp-iframes like the following.

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>

Finish, and you can see the results on your blog.

Thus the tips that I can share this time about How to Embed Chatango on the AMP Blog. Hopefully with these fairly short tips, it can be useful for you. Good luck.

How to Divide Pages in Writing with Navigation Numbers

How to Divide Pages in Writing with Navigation Numbers - Maybe you have visited a news site or comic reading site, which in each post is divided into several pages, usually in the post there is a Next button which when we press the button will lead to the next page. Likewise with the tips that I will give this, the way it works is to divide a number of paragraphs from the contents of the post into sections according to your wishes.

As for some benefits that can be obtained if applying these tips include:

• The page will feel neater suitable for friends who have articles with a long content and save space so that visitors are not tired of scrolling the page.
• Suitable for news sites and comic reading sites.
• Can be used as a marker for visitors on which page will continue reading later.
• Increase the number of Pageviews because there is a page refresh function when pressing the navigation button to the next page.

Well, for those of you who want to add this method on their blog, please follow the steps below.

How to Divide Pages in Writing with Navigation Numbers

As usual, open the Blogger page >> Click the Themes menu and click the Edit HTML button >> Add this CSS code before </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Divide the page in the post */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}
</style>
</b:if>

Add the following code before </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n("halaman");$(".post-content").hide(),void 0===halaman?$(".content_1").show():$(".content_"+halaman).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?halaman="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==halaman&&$(".buttonar.n1").toggleClass("arlinapage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("arlinapage")});
//]]>
</script>
</b:if>

Then click the Save theme button.

Next to the code to call it, please open the post editor and add the following markup on the HTML tab (Not Compose).

<div class="post-content content_1">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_2">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_3">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_4">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_5">
CONTENTS THE ARTICLE HERE</div>

For "CONTENTS THE ARTICLE HERE" replaced with the contents of the post content and for content_1 until content_5 indicates the navigation number of the contents of the post you want to share. To add a page that you want to share, just change the number from content_5 to content_6 and so on.

Examples like this :

<div class="post-content content_4">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_5">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_6">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_7">
CONTENTS THE ARTICLE HERE</div>
<div class="post-content content_8">
CONTENTS THE ARTICLE HERE</div>

Then add the navigation code below at the end of the post

<div class="arlinapage">
</div>
<div class="pagearl">
</div>

But if you want to bring up the navigation code in each post automatically, you can add the above code under the code <data:post.body/> (Post body specifically for posting pages). Examples of its application are like this:

<data:post.body/>
<div class='arlinapage'/>
<div class='pagearl'/>

Finish and see the results on your blog.

How, it's not easy !! That's the tips that I share this time about How to Divide Pages in Writing with Navigation Numbers. Hopefully with what I have shared, it can be useful for you. Good luck.

Source: https://www.arlinadzgn.com/2018/12/membagi.halaman.di.postingan.dengan.nomor.navigasi.html

How to Create Floating Videos When a Page is Scrolled

How to Create Floating Videos When a Page is Scrolled - How do you make a video float when the page is scrolled? Maybe you've seen videos on Youtube sites, videos or other sites that when the video is playing and you scroll the page down then the video will automatically follow where you scroll the page. The workings of the tips I will share are almost the same, but the difference is that the video will still float following the pages we scroll even though the video hasn't been played.

In this tip I will combine responsive video tips with tips on floating videos when scrolling. For those who are interested, you can follow the steps below.

Create Floating Videos When a Page is Scrolled

Open the Blogger dashboard >> Click the Themes menu and Edit HTML >> Add this CSS code before </head>

<style type='text/css'>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}.floatvideo.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:260px;height:145px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
</style>

Note : Edit in the marked code to determine the position of the video.

Then add the code below before </body>

<script type='text/javascript'>
//<![CDATA[
// Floating Videos
var $window=$(window),$floatvideoWrap=$(".floatvideo-wrapper"),$floatvideo=$(".floatvideo"),floatvideoHeight=$floatvideo.outerHeight();$window.on("scroll",function(){$window.scrollTop()>floatvideoHeight+$floatvideoWrap.offset().top?($floatvideoWrap.height(floatvideoHeight),$floatvideo.addClass("fly")):($floatvideoWrap.height("auto"),$floatvideo.removeClass("fly"))}),setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

Then click Save theme

And for the calling code, add this code in the post editor on the HTML tab (not Compose)

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//www.youtube.com/embed/tO01J-M3g0U'></div>
         </div>
      </div>
   </div>
</div>

Note : Edit the code marked with another Youtube video code

What if you want to add videos other than videos from Youtube? The answer, depends. It depends on the site where the video link came from, because after I added the video link from Dailymotion and vidio.com the video didn't appear, while for the video link from Google Drive it could appear. Examples like this:

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//drive.google.com/file/d/0B0Ay6s7CmaBAaHNXbFAtLVZ3ZFU/preview'></div>
         </div>
      </div>
   </div>
</div>

To add videos from iFrame other than Youtube the format is like this:

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <iframe width='600' height='340' src='VIDEO-LINK-HERE' frameborder='0' gesture='media' allowfullscreen></iframe>
   </div>
</div>

That's enough of me about How to Create Floating Videos When a Page is Scrolled. Hopefully these tips can make your site more interesting and bring new ideas to make other code float when scrolling, for example, like sharing buttons in the post section. Thank you for visiting and good luck.

3 Free Ways to Bring Non-stop Blog Traffic

3 Free Ways to Bring Non-stop Blog Traffic - Blog traffic is one of the important elements for a blog to be able to grow and develop. Therefore it is important for bloggers to know what developments are happening around ways to bring blog traffic. Thus we can save time in getting popular blogs.

On this occasion I want to share 3 free ways that help my blog visitor arrivals without stopping since those methods are implemented. This is a personal experience that I find useful to know if indeed blog traffic is a problem for your blogging activities. So what are the three free ways?

1. Facebook Fanpage

Facebook fanpage is a passive media that can be used for various things, one of which is to bring unlimited blog traffic. This is possible because if someone joins our Facebook fanpage, of course he will voluntarily receive the status update that we do.

In terms of bringing in traffic, you can say Facebook fanpage has a better power than sharing links on a Facebook group because fanpage followers are more focused on information shared than group followers.

If we look at a Facebook group now it is more like a place of spam links, which means many users share promotional links rather than information. That is why a Facebook fanpage is one of the good free media to bring blog traffic.

2. Free Products

Free Products Offering a free product through our blog is a very good way to invite traffic. This is due to two things.

First, from the point of view of SEO content free product information can be indexed in search engines. As a result of course invite targeted visitors. Second, from the standpoint of marketing psychology, the word "free" tends to be more interesting than the word "cheap". As a result the reader (most likely) will follow the will of the blogger. Free products are very important to get the e-mail address of the reader where this e-mail address can later play a further role in developing a long-term blog.

Furthermore the position of free products is very important in the midst of the intense competition of quality blogs today. So if we are newcomers and want to compete with big blogs then considering creating free products (of course quality) will make a lot of difference in the eyes of the reader rather than the offer of blog post updates in general.

Is my opinion correct? If you want to try typing "seo free ebook" on the google search, there will most likely be a blog link notordinaryblogger on the first page. Then on-page, the free product content is included as one of the "popular posts" where the majority of readers see the content. That's why free products can bring unlimited blog traffic.

3. Email Newsletter

Continuing from the free product above, if we succeed in getting the email address of the reader, it is time we maintain the trust of the reader. Email addresses that have been hard-earned do not be misused by providing information that is not qualified.

The e-mail address of the reader is a gateway to our trust in us If the reader already believes, of course blog promotion can be run more freely. To run an email newsletter we can use third party services or do it yourself manually. But of course managing email newsletters manually will take more time, but the results are still satisfying.

Some tips that I can share this time about 3 Free Ways to Bring Non-stop Blog Traffic. Hopefully with the tips that I share, it can be useful and can be a reference to be able to increase blog traffic that you have. Good luck.

Remove Author Name and Post Date without Error Blog Data Structure

Remove Author Name and Post Date without Error Blog Data Structure - Each blog post certainly has an author or author who is responsible for the posts he made. Author posts are displayed on the blog page using meta tags which are the most basic SEO elements. For that the meta tag author is very important in the post.

The author's Meta tag cannot be removed from the post because if it is removed it will cause a data structure error that indicates the loss of the key element of a post.

But some bloggers have reasons to remove or delete the author's name and the date of posting on the blog. For example, with aesthetic reasons, omitting the author's name and posting date on the homepage to make the appearance of the post on the homepage simpler or eliminate the author's name and posting date on the static page to make it more neat.

But of course to remove the author name and date of this post can not be done just because it will cause an error in the blog data structure.

Previously I had made a post on how to remove the posting date on the blog and search results page, now I complete it by removing the author's name posting without the error of the blog data structure.

And in order to better understand this tutorial, you should also learn about Blogger conditional tags. And in this tutorial I combine it by removing the posting date.

Showing Author Names only on Index and Static Pages

This means that only displays the author's name on the posting page. Please copy the following code:

<b:includable id='author-post' var='post'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<meta expr:content='data:post.author' itemprop='name'/>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<meta expr:content='data:post.authorPhoto.url' itemprop='image'/>
</span>
<span class="vcard">  <abbr class='fn' expr:title='data:post.author'/></span><abbr class='updated' expr:title='data:post.timestampISO8601'/>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
By: <span class='fn author'><a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author noopener' title='author profile'><span itemprop='name'><data:post.author/></span></a></span>
<meta expr:content='data:post.authorPhoto.url' itemprop='image'/>
</span>
<abbr class='updated' expr:title='data:post.timestampISO8601'/>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
</b:if>
</b:includable>

Then please save the code below the following code:

<b:includable id='main' var='top'>
..............
..............
..............
</b:includable>

Then please change the code that displays the author's name on your blog template with the code below.

<b:include data='post' name='author-post'/>

And also delete the code that displays the posting date.

If in your blog template you use a conditonal tag to display the author's name for the index page, post page, and static page, please change everything with the code.

Remove Author Names on All Pages

Immediately, please copy the following code:

<b:includable id='author-post' var='post'>
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<meta expr:content='data:post.author' itemprop='name'/>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<meta expr:content='data:post.authorPhoto.url' itemprop='image'/>
</span>
<span class="vcard">  <abbr class='fn' expr:title='data:post.author'/></span><abbr class='updated' expr:title='data:post.timestampISO8601'/>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
</b:includable>

Then please save the code below the following code:

<b:includable id='main' var='top'>
..............
..............
..............
</b:includable>

Then please change the code that displays the author's name on your blog template with the code below.

<b:include data='post' name='author-post'/>

And also delete the code that displays the posting date.

If in your blog template you use a conditonal tag to display the author's name for the index page, post page, and static page, please change everything with the code.

But of course this is not absolute, every blog template can have different codes, so please adjust it to your blog's template if there is a change or inappropriate view.

Then please check the structure of your blog data here.

These are tips that I can share this time about Remove Author Name and Post Date without Error Blog Data Structure. Good luck and hopefully useful.

What's up with the Blogger Comment Reply Button?

Quoted from the article www.bungfrangki.com entitled "Blog Error Comment, Reply Not Working Button, What's the Solution?". Here I try to check it turns out that it's true that the reply button on Blogger's comments isn't running as it should. Now here I am confused how come? There may be changes in bloggers that I don't know about.

For those of you who experience this on their blogs especially for templates that have been optimized, you can restore some of these optimizations to the beginning like in this post How to Delete CSS, Javascript, and Blogger Bundle Widgets. So for those who previously did tips on how to delete CSS, JavaScript, and Blogger Bundle Widgets you can restore it as before.

All you have to do is return all the code that was optimized to the beginning.

Head opening code

Change this code

<head>

With this code

&lt;head&gt;

Code to hide CSS Reset

Change this code

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>

With this code

<b:skin><![CDATA[

Change this code

</style>

With this code

]]></b:skin>

Code of head cover

Change this code

&lt;/head&gt;&lt;!--<head/>--&gt;

With this code

</head>

Code of body cover

Change this code

&lt;!--</body>--&gt;&lt;/body&gt;

With this code

</body>

But you don't need to change this code

<HTML>

And this

</HTML>

The rest is replaced all. If you have returned the default CSS and JavaScript blogger, then you can do this to fix it.

Open Blogger >> Click the Themes menu >> Click the Edit HTML button and search for this code:

<b:includable id='comment_picker' var='post'>...</b:includable>

Change the markup with this version

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:elseif cond='data:post.showThreadedComments'/>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:includable>

Next, add this CSS code before </head>

<style type='text/css'>
/* Fix Comments */
#comments h4,#comments h3{display:block;background:#fff;padding:10px 15px;border-radius:2px}#comment-holder{overflow:hidden}#comment-holder ol{margin:0;padding:0}#comment-holder li{background:#fff;margin-left:0;padding:15px;border-radius:5px}#comment-holder .comment-replies{background:#f7f7f7;margin:0}#comment-holder .datetime{float:right;font-size:11px;font-weight:normal}#comment-holder .datetime a{color:#999}#comment-holder .datetime a:hover{color:#000}#comment-holder .user{font-weight:500}#comment-holder .comment-reply{background:#e74c3c;text-align:center;color:#fff;font-weight:normal;padding:6px 10px;margin:0 auto 10px auto;border-radius:2px}#comment-holder .comment-actions a{display:inline-block;background:#e74c3c;text-align:center;color:#fff;font-weight:normal;padding:0 10px;margin:0 5px 10px auto;border-radius:2px}#comment-holder .comment-actions a:hover,#comment-holder .comment-reply:hover,#comment-holder .comment-actions a:focus,#comment-holder .comment-reply:focus{text-decoration:none;background:#c0392b;color:#fff}#comment-holder .comment-content{margin:0 0 5px 0;color:#222;word-wrap:break-word;padding:10px 0}#comment-holder .thread-count{display:table;margin:5px auto 0 auto;text-align:center}#comment-holder .thread-count a{background:#fff;font-size:12px;padding:3px 10px;color:#999;text-align:center}#comment-holder li:before,#comment-holder .thread-arrow,.comment-form p{display:none}
</style>

If so, click the Save theme button and to see the results you can try pressing the reply comment button on his blog. By doing the above, it should be resolved and also comments from Google+ you can reactivate.

According to my suggestion, one of the best solutions is to switch to the Disqus commenting system, like the article that I shared earlier, namely Disqus comments with the Onclick Event. Because Disqus has many advantages compared to the default Blogger comment system, but all of that returns to your own choice.

That's tips that I can share about What's up with the Blogger Comment Reply Button. Hopefully useful and good luck.

How to Add jQuery Migrate on Blogger

What is jQuery Migrate?

Quoted from dotlayer.com, jQuery Migrate is a javascript library that allows to maintain the compatibility of jQuery code that was developed for the older version of jQuery from jQuery version 1.9. This basically returns functions and features so that older code will still run properly on the latest jQuery versions and so on.

Usually if there is an old code that only runs on the old version of jQuery library (such as version 1.7.1) in the Blogger template the code will not run on the latest version of jQuery library (Current version 3.3.1). So installing jQuery Migrate allows you to re-run the old code installed even though your template uses the latest version of jQuery library.

For example, such as the Backward Compatibility system on PlayStation 3 game consoles, besides being able to play PlayStation 3 games, PS3 game consoles can still play games from PlayStation 2. That's an example.

Of course it will be better if there is no old code in your blog template and no need to install the code that I will share.

How to Add jQuery Migrate on Blogger

For those of you who want to add the old code and still want to maintain the code but want to use the current jQuery library, you can install the jQuery Migrate code below before the code </head> on your template.

<script type='text/javascript'>
//<![CDATA[
/*! jQuery Migrate v3.0.1 | (c) jQuery Foundation and other contributors | jquery.org/license */
void 0===jQuery.migrateMute&&(jQuery.migrateMute=!0),function(e){"function"==typeof define&&define.amd?define(["jquery"],window,e):"object"==typeof module&&module.exports?module.exports=e(require("jquery"),window):e(jQuery,window)}(function(e,t){"use strict";function r(r){var n=t.console;a[r]||(a[r]=!0,e.migrateWarnings.push(r),n&&n.warn&&!e.migrateMute&&(n.warn("JQMIGRATE: "+r),e.migrateTrace&&n.trace&&n.trace()))}function n(e,t,n,o){Object.defineProperty(e,t,{configurable:!0,enumerable:!0,get:function(){return r(o),n},set:function(e){r(o),n=e}})}function o(e,t,n,o){e[t]=function(){return r(o),n.apply(this,arguments)}}e.migrateVersion="3.0.1",t.console&&t.console.log&&(e&&!/^[12]\./.test(e.fn.jquery)||t.console.log("JQMIGRATE: jQuery 3.0.0+ REQUIRED"),e.migrateWarnings&&t.console.log("JQMIGRATE: Migrate plugin loaded multiple times"),t.console.log("JQMIGRATE: Migrate is installed"+(e.migrateMute?"":" with logging active")+", version "+e.migrateVersion));var a={};e.migrateWarnings=[],void 0===e.migrateTrace&&(e.migrateTrace=!0),e.migrateReset=function(){a={},e.migrateWarnings.length=0},"BackCompat"===t.document.compatMode&&r("jQuery is not compatible with Quirks Mode");var i,s=e.fn.init,u=e.isNumeric,c=e.find,l=/\[(\s*[-\w]+\s*)([~|^$*]?=)\s*([-\w#]*?#[-\w#]*)\s*\]/,d=/\[(\s*[-\w]+\s*)([~|^$*]?=)\s*([-\w#]*?#[-\w#]*)\s*\]/g;e.fn.init=function(e){var t=Array.prototype.slice.call(arguments);return"string"==typeof e&&"#"===e&&(r("jQuery( '#' ) is not a valid selector"),t[0]=[]),s.apply(this,t)},e.fn.init.prototype=e.fn,e.find=function(e){var n=Array.prototype.slice.call(arguments);if("string"==typeof e&&l.test(e))try{t.document.querySelector(e)}catch(o){e=e.replace(d,function(e,t,r,n){return"["+t+r+'"'+n+'"]'});try{t.document.querySelector(e),r("Attribute selector with '#' must be quoted: "+n[0]),n[0]=e}catch(e){r("Attribute selector with '#' was not fixed: "+n[0])}}return c.apply(this,n)};for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e.find[i]=c[i]);e.fn.size=function(){return r("jQuery.fn.size() is deprecated and removed; use the .length property"),this.length},e.parseJSON=function(){return r("jQuery.parseJSON is deprecated; use JSON.parse"),JSON.parse.apply(null,arguments)},e.isNumeric=function(t){var n,o,a=u(t),i=(o=(n=t)&&n.toString(),!e.isArray(n)&&o-parseFloat(o)+1>=0);return a!==i&&r("jQuery.isNumeric() should not be called on constructed objects"),i},o(e,"holdReady",e.holdReady,"jQuery.holdReady is deprecated"),o(e,"unique",e.uniqueSort,"jQuery.unique is deprecated; use jQuery.uniqueSort"),n(e.expr,"filters",e.expr.pseudos,"jQuery.expr.filters is deprecated; use jQuery.expr.pseudos"),n(e.expr,":",e.expr.pseudos,"jQuery.expr[':'] is deprecated; use jQuery.expr.pseudos");var p=e.ajax;e.ajax=function(){var e=p.apply(this,arguments);return e.promise&&(o(e,"success",e.done,"jQXHR.success is deprecated and removed"),o(e,"error",e.fail,"jQXHR.error is deprecated and removed"),o(e,"complete",e.always,"jQXHR.complete is deprecated and removed")),e};var f=e.fn.removeAttr,y=e.fn.toggleClass,m=/\S+/g;e.fn.removeAttr=function(t){var n=this;return e.each(t.match(m),function(t,o){e.expr.match.bool.test(o)&&(r("jQuery.fn.removeAttr no longer sets boolean properties: "+o),n.prop(o,!1))}),f.apply(this,arguments)},e.fn.toggleClass=function(t){return void 0!==t&&"boolean"!=typeof t?y.apply(this,arguments):(r("jQuery.fn.toggleClass( boolean ) is deprecated"),this.each(function(){var r=this.getAttribute&&this.getAttribute("class")||"";r&&e.data(this,"__className__",r),this.setAttribute&&this.setAttribute("class",r||!1===t?"":e.data(this,"__className__")||"")}))};var h=!1;e.swap&&e.each(["height","width","reliableMarginRight"],function(t,r){var n=e.cssHooks[r]&&e.cssHooks[r].get;n&&(e.cssHooks[r].get=function(){var e;return h=!0,e=n.apply(this,arguments),h=!1,e})}),e.swap=function(e,t,n,o){var a,i,s={};h||r("jQuery.swap() is undocumented and deprecated");for(i in t)s[i]=e.style[i],e.style[i]=t[i];a=n.apply(e,o||[]);for(i in t)e.style[i]=s[i];return a};var g=e.data;e.data=function(t,n,o){var a;if(n&&"object"==typeof n&&2===arguments.length){a=e.hasData(t)&&g.call(this,t);var i={};for(var s in n)s!==e.camelCase(s)?(r("jQuery.data() always sets/gets camelCased names: "+s),a[s]=n[s]):i[s]=n[s];return g.call(this,t,i),n}return n&&"string"==typeof n&&n!==e.camelCase(n)&&(a=e.hasData(t)&&g.call(this,t))&&n in a?(r("jQuery.data() always sets/gets camelCased names: "+n),arguments.length>2&&(a[n]=o),a[n]):g.apply(this,arguments)};var v=e.Tween.prototype.run,j=function(e){return e};e.Tween.prototype.run=function(){e.easing[this.easing].length>1&&(r("'jQuery.easing."+this.easing.toString()+"' should use only one argument"),e.easing[this.easing]=j),v.apply(this,arguments)},e.fx.interval=e.fx.interval||13,t.requestAnimationFrame&&n(e.fx,"interval",e.fx.interval,"jQuery.fx.interval is deprecated");var Q=e.fn.load,b=e.event.add,w=e.event.fix;e.event.props=[],e.event.fixHooks={},n(e.event.props,"concat",e.event.props.concat,"jQuery.event.props.concat() is deprecated and removed"),e.event.fix=function(t){var n,o=t.type,a=this.fixHooks[o],i=e.event.props;if(i.length)for(r("jQuery.event.props are deprecated and removed: "+i.join());i.length;)e.event.addProp(i.pop());if(a&&!a._migrated_&&(a._migrated_=!0,r("jQuery.event.fixHooks are deprecated and removed: "+o),(i=a.props)&&i.length))for(;i.length;)e.event.addProp(i.pop());return n=w.call(this,t),a&&a.filter?a.filter(n,t):n},e.event.add=function(e,n){return e===t&&"load"===n&&"complete"===t.document.readyState&&r("jQuery(window).on('load'...) called after load event occurred"),b.apply(this,arguments)},e.each(["load","unload","error"],function(t,n){e.fn[n]=function(){var e=Array.prototype.slice.call(arguments,0);return"load"===n&&"string"==typeof e[0]?Q.apply(this,e):(r("jQuery.fn."+n+"() is deprecated"),e.splice(0,0,n),arguments.length?this.on.apply(this,e):(this.triggerHandler.apply(this,e),this))}}),e.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(t,n){e.fn[n]=function(e,t){return r("jQuery.fn."+n+"() event shorthand is deprecated"),arguments.length>0?this.on(n,null,e,t):this.trigger(n)}}),e(function(){e(t.document).triggerHandler("ready")}),e.event.special.ready={setup:function(){this===t.document&&r("'ready' event is deprecated")}},e.fn.extend({bind:function(e,t,n){return r("jQuery.fn.bind() is deprecated"),this.on(e,null,t,n)},unbind:function(e,t){return r("jQuery.fn.unbind() is deprecated"),this.off(e,null,t)},delegate:function(e,t,n,o){return r("jQuery.fn.delegate() is deprecated"),this.on(t,e,n,o)},undelegate:function(e,t,n){return r("jQuery.fn.undelegate() is deprecated"),1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return r("jQuery.fn.hover() is deprecated"),this.on("mouseenter",e).on("mouseleave",t||e)}});var x=e.fn.offset;e.fn.offset=function(){var n,o=this[0],a={top:0,left:0};return o&&o.nodeType?(n=(o.ownerDocument||t.document).documentElement,e.contains(n,o)?x.apply(this,arguments):(r("jQuery.fn.offset() requires an element connected to a document"),a)):(r("jQuery.fn.offset() requires a valid DOM element"),a)};var k=e.param;e.param=function(t,n){var o=e.ajaxSettings&&e.ajaxSettings.traditional;return void 0===n&&o&&(r("jQuery.param() no longer uses jQuery.ajaxSettings.traditional"),n=o),k.call(this,t,n)};var A=e.fn.andSelf||e.fn.addBack;e.fn.andSelf=function(){return r("jQuery.fn.andSelf() is deprecated and removed, use jQuery.fn.addBack()"),A.apply(this,arguments)};var S=e.Deferred,q=[["resolve","done",e.Callbacks("once memory"),e.Callbacks("once memory"),"resolved"],["reject","fail",e.Callbacks("once memory"),e.Callbacks("once memory"),"rejected"],["notify","progress",e.Callbacks("memory"),e.Callbacks("memory")]];return e.Deferred=function(t){var n=S(),o=n.promise();return n.pipe=o.pipe=function(){var t=arguments;return r("deferred.pipe() is deprecated"),e.Deferred(function(r){e.each(q,function(a,i){var s=e.isFunction(t[a])&&t[a];n[i[1]](function(){var t=s&&s.apply(this,arguments);t&&e.isFunction(t.promise)?t.promise().done(r.resolve).fail(r.reject).progress(r.notify):r[i[0]+"With"](this===o?r.promise():this,s?[t]:arguments)})}),t=null}).promise()},t&&t.call(n,n),n},e.Deferred.exceptionHook=S.exceptionHook,e});
//]]>
</script>

Or with this link

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js'/>

If you have already added the code using jQuery library version 1.7.1 can replace it with the current version in your template.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Replace with this version

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Easy isn't it !! These are the tips that I share this time about How to Add jQuery Migrate on Blogger. Hopefully with what I share, it can be useful and good luck.