Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts
Here are some call buttons using css animation effects that I find nice to share to you. How to do it is very simple, you just go to edit template add css to ... </ b: skin>, then add html code before closing
tag revise phone number is done

Blogger alo phone ring button

1. Sample 1

blogger-alo-phone-ring-button-1

Selecting some beautiful call buttons using css animation effects

- View Demo: https://call-animation-css.blogspot.com/

+ Code Css
.suntory-alo-phone{background-color:transparent;cursor:pointer;height:100px;position:fixed;left:0;bottom:0;transition:visibility 0.5s ease 0s;width:100px;z-index:200000!important}
.suntory-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:100px;left:0;opacity:0.1;position:absolute;top:0;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:100px}
.suntory-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;border:2px solid transparent;border-radius:100%;height:70px;left:15px;position:absolute;top:15px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}
.suntory-alo-ph-img-circle{border-radius:100%;height:50px;left:25px;opacity:1;position:absolute;top:25px;transform-origin:50% 50% 0;width:50px;border:3px solid #fff000}
.suntory-alo-phone.suntory-alo-hover,.suntory-alo-phone:hover{opacity:1}
.suntory-alo-phone.suntory-alo-active .suntory-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}
.suntory-alo-phone.suntory-alo-static .suntory-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone:hover .suntory-alo-ph-circle{border-color:#00aff2;opacity:0.5}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle{border-color:#f00;opacity:1}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle{border-color:#fff000;opacity:1}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone:hover .suntory-alo-ph-circle-fill{background-color:rgba(0,175,242,0.9)}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle-fill{background-color:#02A6E8}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle-fill{background-color:#02A6E8}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone:hover .suntory-alo-ph-img-circle{background-color:#00aff2}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-img-circle{background-color:#02A6E8}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-img-circle{background-color:#02A6E8}
@keyframes suntory-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes suntory-alo-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes suntory-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}
.suntory-alo-ph-img-circle img{animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;font-size:30px;line-height:39px;color:#fff;display:block;max-width:100%;height:auto}
@keyframes suntory-alo-ring-ring{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}

2. Sample 2

blogger-alo-phone-ring-button-2

+ Code Css 
.mypage-alo-phone{position:fixed;right:0;bottom:0;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:200000!important}
.mypage-alo-ph-circle{width:90px;height:90px;top:12px;left:12px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,.4);opacity:.1;border-color:#00BBD2;opacity:.5}
.mypage-alo-ph-circle-fill{width:60px;height:60px;top:28px;left:28px;position:absolute;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:#00bcd4;opacity:.75!important}
.mypage-alo-ph-img-circle{width:50px;height:50px;top:33px;left:33px;position:absolute;background:rgba(30,30,30,.1) url(https://4.bp.blogspot.com/-Q0mmtfMrg3Y/XO6zLlEnhlI/AAAAAAAAQc8/e1qNMly6DY4YioZcqFJCA4oL2dfWWbBwQCLcBGAs/s1600/phone-icon.png) no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.7;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;background-color:#00BBD2;background-size:70%}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
@-webkit-keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
How to add a table of contents automatically under the jump break of the article in the blogger.The blog dedicated to tips, diary, ..., articles with long content should use the index to help navigate quickly to the item you want to see when clicked on that item. Similar to books, text, presentations, etc., there must be a top-level index, so the article is the same but simpler because the article is limited to words, so just divide the main items are enough to meet request. When composing a post after a few introductory paragraphs, it is usually best to use jumps, and adding the index below this is the most appropriate.

Cách thêm mục lục tự động dưới dấu ngắt nhảy của bài viết

Steps to do: 

1. Add the code below the article data tag < article : post.body />



Copy
<div class='post-body' expr:id='&quot;post-body-&quot; + data:post.id'>

  <data:post.body/>
  <!-- Chèn đoạn code hiển thị Mục lục -->
  <div class='category'>
    <span class='title'>Nội dung chính</span>
    <ul id='chapter'/>
  </div>

</div>

Insert the script before the closing </ body> tag


Copy
<b:if cond='data:view.isPost'>
<script>
postBody = document.getElementById(&quot;post-body-<data:view.postId/>&quot;);
// <![CDATA[
var titleChapter = postBody.querySelectorAll("h2, h3, h4, h5, h6");
if (titleChapter.length >= 1) {
  var i;
  var leChapteraptor = [];
  for (i = 0i < titleChapter.lengthi++) {
    if (i < 9) {
      var z = "0";
    } else {
      var z = "";
    }
    anchorChapter = "chapitre-" + z + (i + 1);
    titleChapter[i].setAttribute("id"anchorChapter);
    leChapteraptor[i] = "<li><span onclick='jump(\"" + anchorChapter + "\")' title='Xem chi tiết'>" + titleChapter[i].innerHTML + "</span></li>";
  }
  document.getElementById("chapter").innerHTML = leChapteraptor.join('');
else {
  document.getElementsByClassName("category")[0].style.display = "none";
}

function jump(z) {
  a = document.getElementById("backer");
  if (a) {
    a = a.offsetHeight || a.clientHeight;
  } else {
    a = 0;
  }
  var top = document.getElementById(z).offsetTop + (a);
  window.scrollTo(0top);
}

$(function() {
  var more = $('.post-body a[name="more"]')
  if (more) {
    $('.category').appendTo(more)
  } else {
    $('.category').empty()
  }
})
//]]></script>
</b:if>

In the script above you notice the part a = document.getElementById ("backer"); With the backer id of the top menu bar, you replace the template with the correct one.

Note: the article must use the jump after a few lines of opening, otherwise the table will not show.

3. When writing or editing posts, in the HTML editor of the article, add the tags h2, h3, h4, h5, h6. 


For example, when you write the items: Label in the article, Label in Vietnamese, Label in the breadcrumb, Label in the Label, Label in the Label, Label in the Label and Label on the label. You pass the HTML editing pane of the article in turn as follows: 

<h3> Label Label in article </ h3> 
... 
<h3> Label Label in Breadcrumb </ h3> 
. . 
<h3> Vietnam chemical Label widget Label </ h3> 
... 
<h3> Label Vietnamese goods in the script </ h3> 
... 
<h3> Vietnam chemical Label on meta tag </ h3> 
... 

you Can replace h3 with h2, h4,

4. The css for the display interface of the table, you design your own custom