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