Tạo hiệu ứng sóng chuyển màu tại các trang nhãn cho Blogspot

LongAnIT 11/30/2019 Bình luận

Hello các bạn. Tìm kiếm trên mạng thấy code này khá hay của bác Huỳnh Phi Phụng nên mình muốn mang về chia sẻ cho các bạn. Code tên là hiệu ứng sóng chuyển màu tại các trang nhãn cho blogspot. Nói thì khó hình dung ra đúng không thôi thì các bạn xem demo ngay trong link bên dưới mình đưa luôn.
https://www.longanit.com/search/label/SEO
Ok như vậy là các bạn đã thấy được demo hiệu ứng của nó rồi đúng không vậy cách để chúng ta làm nó cho trang blogspot của mình thế nào thì các bạn hãy thực hiện như theo hướng dẫn của mình nhé.

Bước 1: Xác định vị trí chúng ta chèn code: Thường thì code này là dạng kiểu code intro tại trang tĩnh. Vậy thì tôi sẽ đặt code này nằm dưới menu trong blogspot và chèn thêm thẻ điều kiện là chỉ hiển thị ở trang nhãn.

Bước 2:  Đăng nhập vào Blogger - Chủ đề - Chình sửa HTML
Bước 3: Copy toàn bộ đoạn code bên dưới và dán vào phía dưới menu trong blogspot của bạn thường thì nó nằm dưới phần Header trong blog.

<b:if cond='data:blog.searchLabel'>
<style>
.breadcrumbs{display:none}
div#label-intro{z-index:20;margin:0;color:#fff;text-align:center;height:100%;position:absolute;width:100%}
.label-intro{z-index:2;position:absolute;width:100%;height:100%}
div#label-intro div.noi-dung{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:1080px;max-width:100%;text-align:left;padding:0 0 0 8em;box-sizing:border-box}
div#label-intro div.noi-dung i.labels{left:0;position:absolute;top:50%;transform:translate(0,-50%);font-size:6em;font-weight:100;opacity:.3}
div#label-intro div.noi-dung div.title{font-weight:700;font-size:2.5em;text-shadow:6px 6px 0 rgba(0,0,0,0.1)}
div#label-intro div.noi-dung div.content{width:600px;max-width:100%}
/*div#label-intro div.noi-dung div.title small.cap{display:block;font-size:14px;font-weight:300}*/
@keyframes bsw-wave2{0%{transform:translateX(0) translateZ(0) scaleY(1)}50%{transform:translateX(-25%) translateZ(0) scaleY(0.55)}100%{transform:translateX(-50%) translateZ(0) scaleY(1)}}
.waveWrapper{z-index:0;overflow:hidden;position:relative;left:0;top:0;margin:auto;width:100%;height:420px;user-select:none;-webkit-user-select:none}
.bsw-wavebg{position:absolute;width:100%;overflow:hidden;height:100%;bottom:0;background:linear-gradient(-45deg,#f5efef, #EE7752, #E73C7E, #23A6D5, #23D5AB,#764ba2,#7577a9);background-size:400% 400%;-webkit-animation:Gradient 50s ease infinite;-moz-animation:Gradient 50s ease infinite;animation:Gradient 50s ease infinite}
.bsw-bgt{z-index:15;opacity:0.5}
.bsw-bgm{z-index:10;opacity:0.75}
.bsw-bgb{z-index:5}
.wave{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat no-repeat;background-position:0 bottom;transform-origin:center bottom}
.bsw-wavetop{background-size:50% 100px}
.bsw-wave-ani .bsw-wavetop{animation:move-wave 3s;-webkit-animation:move-wave 3s;-webkit-animation-delay:1s;animation-delay:1s}
.bsw-wave-mid{background-size:50% 120px}
.bsw-wave-ani .bsw-wave-mid{animation:bsw-wave2 10s linear infinite}
.bsw-wave-bot{background-size:50% 100px}
.bsw-wave-ani .bsw-wave-bot{animation:bsw-wave2 15s linear infinite}
.bsw_wrapper{margin-top:15px}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
</style>
<div class='waveWrapper bsw-wave-ani'>
<div id='label-intro'>
<div class='label-intro'>
<div class='noi-dung'>
<i class='labels fa fa-folder-open'/>
  <div class='title'><!--<small class='cap'>CHUYÊN MỤC</small>--><span><data:blog.pageName/></span></div>
  <div class='content'>Nơi chia sẻ những bài viết, tài liệu, thủ thuật và mẹo vặt hay nhất về &#39;<span style='font-weight:700'><data:blog.pageName/></span>&#39; giúp bạn nhanh chóng tìm ra thứ mình cần!</div>
  </div>
  </div>
</div>
  <div class='bsw-wavebg bsw-bgt'>
    <div class='wave bsw-wavetop' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-top.png&apos;)'/>
  </div>
  <div class='bsw-wavebg bsw-bgm'>
    <div class='wave bsw-wave-mid' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-mid.png&apos;)'/>
  </div>
  <div class='bsw-wavebg bsw-bgb'>
    <div class='wave bsw-wave-bot' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-bot.png&apos;)'/>
  </div>
</div>
  </b:if>
 Bước 4: Save template và thử truy cập vào chuyên mục tại các trang nhãn trong blog của bạn để kiểm tra kết quả nhé.
Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Tạo recent bài viết theo nhãn theo kiểu mới

LongAnIT 11/07/2019 Bình luận

Đăng nhập vào blogger - Chù đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào trước thẻ đóng </head>
<div id='newminanlabel1-wrapper'>
        <b:section class='newminanlabel1' id='newminanlabel1' maxwidgets='3' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Thủ thuật máy tính' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>SEO</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='newminanlabel2-wrapper'>
        <b:section class='newminanlabel2' id='newminanlabel2' maxwidgets='3' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='Tiện ích dành cho văn phòng' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Ebook</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>   
<div id='newminanlabel2-wrapper'>
        <b:section class='newminanlabel3' id='newminanlabel3' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML82' locked='false' title='Blogging tips' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Android</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</div> </div>      </div>
</b:if></b:if>
Bước 3: Phần code Javascript copy toàn bộ code bên dưới dán vào trước thẻ đóng </head>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newminan_left">'),document.write('<ul class="newminan_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newminan_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newminan_meta">'),1==showpostdate&&(v=v+'<span class="newminan_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newminan_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newminan_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newminan_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newminan_right">'),document.write('<ul class="newminan_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newminan_title newminan_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newminan_meta newminan_meta2">'),1==showpostdate2&&(v=v+'<span class="newminan_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newminan_meta_comment newminan_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newminan_meta_more newminan_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=15,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!0,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb=&quot;http://3.bp.blogspot.com/-bP9BhHzcg3c/VulaYI1KgPI/AAAAAAAADlY/an6hlFHd5BQAUhNQbriNvTLripE4v5EQA/s320/blanter_thumb.png&quot;,no_thumb2=&quot;http://2.bp.blogspot.com/-9deKCtKRtvU/VulaYPTKW6I/AAAAAAAADlU/wb9d_4ysGPIC-ytki80VChZiMPrz7Af2w/s1600/blanterthumb_small.png&quot;;
</script>
</b:if>
</b:if>
Bước 4: Một chút CSS để hoàn thiện
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Recent Post by Label */
.newminanlabel1 ul,.newminanlabel2 ul, .newminanlabel3 ul{list-style:none;margin:0;padding:0}
.newminanlabel1 li,.newminanlabel2 li, .newminanlabel3 li{margin:0;padding:0;}
.newminanlabel1 .widget,.newminanlabel2 .widget, .newminanlabel3 .widget{margin:0;padding:0;border-radius:4px;background:#fff;margin-bottom:20px;border-bottom: 5px solid #337ab7;box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);}
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content ,.newminanlabel3 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.newminanlabel1 h2,.newminanlabel2 h2,.newminanlabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}
.newminanlabel2 h2,.newminanlabel3 h2{margin:20px 0 0 0;}
.newminanlabel1 h2:before,.newminanlabel2 h2:before,.newminanlabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.newminanlabel2 h2:before{content:&#39;\f0c3&#39;;}.newminanlabel3 h2:before{content:&#39;\f143&#39;;}
.newminanlabel1 .index,.newminanlabel2 .index, .newminanlabel3 .index{font-size:10px;float:right;font-weight:400;}
.newminanlabel1 .index a,.newminanlabel2 .index a, .newminanlabel3 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.newminanlabel2 .index a{color:#ef6c00;border-color:#ffa726}
.newminanlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.newminanlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.newminanlabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.newminanlabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.newminanlabel2 span.newminan_meta_comment a:hover{color:#38761d!important}
.newminanlabel2 ul.newminan_thumbs li a:hover,.newminanlabel2 ul.newminan_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.newminan_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.newminan_right{width:250px;width:47.5%;float:right;margin:0;padding:0;height: 320px !important;overflow: auto;}
ul.newminan_thumbs{margin:0;padding:0}
ul.newminan_thumbs li,ul.newminan_thumbs2{margin:0;padding:0}
ul.newminan_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:400px;height:200px}
ul.newminan_thumbs .cat_thumb img{height:auto;max-width:100%;transition:all 0.2s;padding: 4px;border: 1px solid #ccc;box-shadow: 0 0 2px #bbb;
-moz-box-shadow: 0 0 2px #bbb;-webkit-box-shadow: 0 0 2px #bbb;border-radius:5px}
ul.newminan_thumbs .cat_thumb img:hover{opacity:.9;}
ul.newminan_thumbs2 li{margin:0 0 10px;padding:0 0 25px;border-bottom:1px solid #e9e9e9}
ul.newminan_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.newminan_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;overflow:hidden}
ul.newminan_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s;border-radius:5px}
ul.newminan_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.newminan_title{font-family:Roboto;font-size:17px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.newminan_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.newminan_title a{color:#333}
span.newminan_title a:hover{color:#ff675c;text-decoration:none}
span.newminan_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.newminan_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.newminan_meta a{color:#aaa;display:inline-block}
span.newminan_meta_date,span.newminan_meta_comment,span.newminan_meta_more{display:inline-block;margin-right:10px}
span.newminan_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.newminan_meta_comment a:hover{color:#ff675c!important}
span.newminan_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.newminan_thumbs2 li a:hover,ul.newminan_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.newminanlabel1 .widget-content, .newminanlabel2 .widget-content {padding:20px 25px;}
.newminan_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.newminan_right {width:46%;float:right;margin:0;padding:0;}
ul.newminan_thumbs .cat_thumb {width:100%;height:auto;}
ul.newminan_thumbs .cat_thumb img {width:100%;height:auto;}
ul.newminan_thumbs li {margin:0;padding:0;}
span.newminan_title2 {font-size:20px;line-height:1.2em;}
span.newminan_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content{padding:10px 20px}
.newminan_right{width:100%;float:left;margin:0;padding:0}
ul.newminan_thumbs2 li{border-bottom:0}
span.newminan_summary,.newminan_left{display:none}
span.newminan_title{margin:0 0 5px}
ul.newminan_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.newminan_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#newminanlabel1-wrapper,#newminanlabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content{padding:10px 20px}
.newminanlabel1 h2,.newminanlabel2 h2{padding:10px 20px 1px 20px}
.newminan_right{width:100%;float:left;margin:0;padding:0}
ul.newminan_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newminan_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.newminanlabel1 .widget-content,.newminanlabel2 .widget-content{padding:10px}
.newminanlabel1 h2,.newminanlabel2 h2{padding:10px 10px 1px 10px}
.newminan_right{width:100%;float:left;margin:0;padding:0}
ul.newminan_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newminan_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
 Bước 5: Vào bố cục xuất hiện 3 Widgets. Click vào chình sửa và thay thế nhãn mà bạn muốn hiển thị trên web nhé.

Thay thế nhãn bạn cần hiển thị trên blog

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Tạo recent bài viết cho blogspot theo 2 kiểu default và label

LongAnIT 11/06/2019 Bình luận
Hello các bạn hôm nay quay lại với chuyên mục thủ thuật blogspot. Trong bài viết ngày hôm nay tôi xin chia sẻ với các bạn code để chúng ta tạo recent post ( bài viết gần nhất ) của blogspot theo cả 2 kiểu là mặc định và theo từng nhãn như hình minh họa bên dưới.

recent bài viết cho blogspot theo 2 kiểu default và label
Recent bài viết cho blogspot theo 2 kiểu default và label 

Các bạn vui lòng thực hiện theo các bước mà tôi hướng dẫn như bên dưới nhé

Bước 1: Đầu tiên chúng ta cần tạo một Widget

  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Tìm một vị trí đẹp đề đặt widget và copy đoạn code bên dưới vào

<b:if cond='data:view.isHomepage'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
<b:section id='laslide'/>
   </div>
</div></div>
</b:if> </b:if> 
Chú ý: Tôi sử dụng 2 thẻ điều kiện là chỉ hiển thị trên trang chủ và không hiển thị trên mobile và các class sử dụng tiện ích hệ thống lưới có sẵn trong bootstrap. Click save và sau đó quay lại phần Bố cục lúc này bạn sẽ thấy có một  Widget với tên là slide.

Bước 2: Thêm tiện ích - HTML & Javascript
Bước 3: copy toàn bộ đoạn code bên dưới dán vào
  <div id="longanit-seo" class="longanit-seo">
<h2><a href="https://www.longanit.com/"><i class="fa fa-bullhorn"></i> BÀI VIẾT MỚI NHẤT </a></h2>
<style>
a{text-decoration:none}
.blue{display:none}
.longanit-seo h2{background:#0073aa;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold;}
.longanit-seo ul{list-style:none;margin:0;padding:0}
.longanit-seo li{text-indent:0;background:url(https://4.bp.blogspot.com/-TVFMWMC-lZw/UasMPl5QstI/AAAAAAAADVw/Th-PSA_b3SI/s1600/tag_blue.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px;}
.longanit-seo h2 a:link, .longanit-seo h2 a:visited {color:#fff;}
#laslide{padding: 5px;border-bottom: 5px solid #337ab7;    margin-bottom: 20px;background: #fff;border-radius: 4px;box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);overflow: hidden;transition: all ease-in-out 125ms;    border-right: 3px solid #f1f1f1;}
.featured-post {
max-width: 1170px;
margin: auto;
font-family: Roboto
}
#featured-posts-section{
overflow: hidden;
background: white;border:1px;
}
.post-label, .post-labels {display: none !important;}
.featured-post a{font-size:1em;color:#fff}
.main-post.featured-post a{margin:0;font-size:15px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.featured-post .secondary-post{ float: right;width:23%;margin:3px; }
.featured-post .secondary-post:nth-child(2) {width:23%;}
.featured-post .main-post{width:51%;padding:0}
.featured-post span{font-family: Roboto; background-color:rgba(0,0,0,0.7);padding:5px 6px;color:#fff;text-transform:uppercase;font-size:10px;font-style:normal;top:10px;left:10px;z-index:2;font-weight:500;position:absolute}
.featured-post img{height:100%;transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover}
.featured-post .secondary-post img{height:170px;object-fit:cover;width:100%}
.featured-post header{position:absolute;bottom:0;left:0;padding:20px;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(59%,rgba(0,0,0,0.59)),color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#000000',GradientType=0);
width: 100%;
padding: 10px 15px;}
.featured-post h4{font-size:14px;font-family:Roboto;font-weight:500}
@media screen and (max-width:768px) {
h1.post-title.entry-title a, h2.post-title.entry-title a {display:inline-block;margin:15px 0;}
#featured-posts-section{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="100" width="220"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=10,numposts1=10,featured_numposts="5";
//]]>
</script>
<div class="ct-wrapper" id="featured-posts-section">
<div class="featured-post padding clearfix">
<script type="text/javaScript">
document.write("<script src=\"/feeds/posts/default?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>
</div>
</div></div>
Bước 4: Nhấn save và bắt đầu xem kết quả

Kết luận: Như vậy với cách trên tôi đã hướng dẫn các bạn cách tạo bài viết mới nhất với Style tiêu đề và hình ảnh dạng Thumb. Dựa vào code trên chúng ta sẽ cải tiến nó một chút để nó hiển thị theo từng nhãn quy định bạn chỉ cần sửa đoạn code mà tôi to màu đỏ đậm bên trên thành như sau:
 /feeds/posts/default/-/tên nhãn
Ví dụ trong blog của tôi muốn hiển thị nhãn SEO ra ngoài thì code nó sẽ như thế này:
/feeds/posts/default/-/SEO

Chúc các bạn thành công!

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Tổng hợp các kiểu slider bài viết blogger

LongAnIT 9/27/2019 Bình luận
Hello các bạn đã lâu không viết bài về thủ thuật blogspot. Hôm nay rãnh rỗi search trên google thấy mấy code slider bài viết blogspot khá hay với nhiều kiểu hiệu ứng cũng như tùy biến khá hay nên muốn chia sẽ cho các bạn nào cần nhu cầu sử dụng.
Tổng hợp các kiểu slider bài viết blogger
Tổng hợp các kiểu slider bài viết blogger 

Thực hiện các bước như tôi hướng dẫn dưới đây


Bước 1:  Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào trước thẻ đóng </head>

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");
/* Preloader */
.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}
.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}
.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.flexslider a {
    text-decoration: none;
}

/* Caption/Post Title */
.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}
.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}
.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}
.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}
ul.slides li a {
    display: block;
    overflow: hidden;
}

/* blogger css conflicts fix */
.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}
.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}
.flexslider ul li {
    margin-bottom: 0 !important;
}
.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
ul.flex-direction-nav {
    position: static;
}
ul.flex-direction-nav li {
    position: static;
}
.error {
    font-family: monospace, sans-serif;
}
@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>
Bước 3: Tìm một nơi đẹp để đặt vị trí slider bài viết mà bạn muốn hiển thị thường code này hay để dưới header của blog. Tùy bạn có thể chọn nơi khác để đặt code. Ở đây tôi chia sẻ 3 code với tùy chỉnh khác nhau:

Code 1


<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        blogURL: "https://www.longanit.com/", // thay địa chỉ url thành địa chỉ blog của bạn
    });
});
</script>

Code 2:


<div id="slider2"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider2").BloggerDynamicSlider({
        blogURL: "https://www.longanit.com/", // thay url thành địa chỉ blog của bạn
        labelName: "nhãn của bạn", // Thay nhãn của bạn muốn hiển thị
        maxItem: 9, // Số bái viết tối đa cần hiển thị
        showPostTitle: true, // Hiển thị tiêu đề bài viết (true/false)
        postTitleStyle: "overlayDark", // Các kiểu hiển thị  "default, "overlayDark" or "overlayLight"
        imageWidth: 704, // Độ rộng ảnh bài viết
        imageHeight: 440, // Chiều cao ảnh hiển thị tính bằng px
    });
});
</script>

Code 3:


 <div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Chiều rộng ảnh tính bằng px
        imageHeight: 398, // Chiều cao ảnh tính bằng px
        maxItem: 6, // Số bài viết tối đa cần hiển thị
        animation: "slide", // Lựa chọn kiểu slider "fade" or "slide"
        showPostTitle: true, // Hiển thị tiêu đề bài viết  (true/false)
        postTitleStyle: "overlayLight", // Hiển thị kiểu khung slider "default, "overlayDark" or "overlayLight"
    });
});
</script>

Trường hợp bạn muốn đưa tất cả vào một Widget thì copy toàn bộ các code trên vào chung cũng được nhé. Chú ý là phần code 1, code 2 và code 3 bạn chỉ chọn 1 trong 3 code thôi.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Hướng dẫn cách tạo Subdomain cho blogspot

LongAnIT 9/10/2019 1 Bình luận
Hello! Xin chào các bạn. Đã lâu không viết bài về thủ thuật blogspot. Hôm nay tìm kiếm trên google thấy anh em công đồng blogger có chia sẻ một template bán hàng khá đẹp nên ý định tạo ra một tiên miền phụ (subdomain) để tạo một trang web bán hàng.

Hướng dẫn cách tạo Subdomain cho blogspot
Tạo subdomain(tên miền phụ) cho blogspot

 Việc tạo subdomain cho blogspot cực kỳ đơn giản, và bạn có thể tạo rất nhiều subdomain hay tên miền phụ mà không bị giới hạn và có thể tạo cả ngàn subdomain đó nha. Blogger thật tuyệt vời đúng không nào. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách để chúng ta tạo và add subdomain vào tên miền blogspot.

1. Tên miền phụ hay subdomain là gì?

Tên miền phụ hay subdomain có thể được ví dụ như sau. Ví dụ longanit có tên miền chính là www.longanit.com và giờ longanit sẽ tạo một website khác, nhưng ở cùng trên tên miền longanit.com thì sẽ tạo một tên miền dạng subdomain.abc.com. Như trong bài viết thì tôi tạo một subdomain có tên là shop.longanit.com

2. Cách tạo subdomain cho blogspot?

Bước 1:  Thêm IPCNAME vào quản trị DNS tên miền

Bước này thật sự không khác gì là bước chúng ta cài đặt tên miền cho blogspot mới mà tôi đã có bài hướng dẫn trước đây. Các bạn tham khảo cách cài đặt tên miền riêng cho blogspot ở link dưới đây nhé
https://www.longanit.com/2019/05/huong-dan-cai-dat-ten-mien-rieng-cho-blogspot.html
Đầu tiên bạn đăng nhập vào quản trị tên miền của bạn. Mỗi Cpanel của trang quản trị sẽ có giao diện khác nhau chút xíu. Tuy nhiên về cơ bản các tính năng của một trang quản trị tên miền là khá giống nhau. Bây giờ tôi bắt đầu tạo add tên miền phụ ví dụ tôi đặt tên miền phụ là shop thì tôi sẽ khai báo nó như sau:

Hướng dẫn cách tạo sub domain tại trang quản trị tên miền
Hướng dẫn cách tạo sub domain tại trang quản trị tên miền

Tại trang quản lý DNS của tên miền tôi thêm 01 bản ghi CNAME với giá trị như trên hình

  • Host: shop (tên miền phụ)
  • Loại giá trị: CNAME 
  • Giá trị: ghs.google.com
Sau khi tạo xong nếu hoàn thành thì tôi sẽ có một tên miền phụ với tên như sau: shop.longanit.com. Để kiểm tra các bạn có thể ping nó từ CMD

Kiểm tra ip của subdomain sau khi tạo xon
Kiểm tra ip của subdomain sau khi tạo xong

Bạn có thể nhìn thấy trên màn hình với tên miền phụ thì ip của nó khác với ip của tên miền chính như vậy là bạn đã hoàn thành bước số 1 là tạo xong subdomain.

Bước 2: Bạn tạo một blog mới sau đó tiến hành add tên miền này vào là xong nhé. Các bước tiến hành cũng giống như bài hướng dẫn trước nó chỉ khác là lần này bạn không chọn chuyển hướng nhé.

Hoàn thành add tên miền phụ vào cho blogspot
Hoàn thành add tên miền phụ vào cho blogspot


Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Thêm các button liên hệ cực chất cho blogspot

LongAnIT 9/04/2019 Bình luận
Dạo qua một số trang thủ thuật blogger thấy code này hay nên muốn chia sẻ với anh em nào có nhu cầu sử dụng. Code này sử dụng plugin của trang whatshelp lấy ra nó có thể sử dụng cho blogspot rất đơn giản nhằm làm đẹp cho blogspot của bạn giúp tiếp cận với nhiều khách hàng nếu như bạn sử dụng website bán hàng hay giới thiệu sản phẩm.
Thêm các button liên hệ cực chất cho blogspot
Thêm các button liên hệ cực chất cho blogspot

Đầu tiên các bạn thêm link css của button vào trước thẻ Tiếp theo các bạn thêm đoạn code sau trước thẻ đóng

Lưu ý: mình chỉ lấy css của button thôi nhé, nghĩa là button kèm link ngoài ra chả có tính năng gì khác. Nếu bạn thấy đẹp thì cũng lấy về mà dùng, dưới đây là cách thực hiện:

Đầu tiên các bạn thêm link css của button vào trước thẻ </head>

<link href='https://vietblogdao.github.io/css/contact-button-widget.css' rel='stylesheet'/>

Tiếp theo các bạn thêm đoạn code sau trước thẻ đóng </body>
<!--Contact Button Widget-->
<div class='wh-widget-send-button-desktop'>
  <div class='wh-widget-send-button-wrapper wh-widget-right'>
    <div class='wh-widget-hello-popup-wrapper wh-popup-right wh-hide popup-slide popup-slide-in'>
      <div class='wh-widget-hello-popup'>
        <div class='wh-widget-hello-popup-close'>
          <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
            <path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path>
            <path d='M0 0h24v24H0z' fill='none'></path>
          </svg>
        </div>
      </div>
    </div>
    <div class='wh-animation-in' id='wh-call-to-action' style='top: 29px;'>
      <a href='javascript:void(0)' title=''>
        <div class='wh-call-to-action-content'>Liên hệ hỗ trợ 24/7</div>
      </a>
    </div>
    <div class='wh-widget-send-button-wrapper-list'>
      <!--Các button liên hệ đặt tại đây-->
      <a class='wh-widget-button wh-widget-button-activator' href='javascript:void(0);'>
        <div class='wh-widget-button-icon wh-messenger-bg-activator' style='background-color:#129BF4;'>
          <div>
            <svg class='wh-messenger-svg-close wh-svg-close' viewBox='-9 -10 41 44' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
              <path d=' M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill-rule='evenodd'></path>
            </svg>
            <i class='wh-icon-whatshelp wh-svg-icon'></i>
          </div>
        </div>
        <div class='clear'></div>
      </a>
    </div>
    <div class='clear'></div>
  </div>
</div>
<script>//<![CDATA[
$('.wh-messenger-bg-activator').on('click', function() {
  $(this).parent().parent().toggleClass('wh-widget-show-get-button wh-widget-activator-as-close wh-widget-activate');
  var call_to_action = $(this).parent().parent().parent().find('#wh-call-to-action');
  var widget_button = $(this).parent().parent().find('.wh-widget-button');
  if ($(call_to_action).hasClass('wh-animation-in')) {
    $(call_to_action).removeClass('wh-animation-in').addClass('wh-animation-out wh-hide');
  } else {
    $(call_to_action).addClass('wh-animation-in').removeClass('wh-animation-out wh-hide');
  }
  if ($(widget_button).not('.wh-widget-button-activator').hasClass('button-slide-out')) {
    $(widget_button).not('.wh-widget-button-activator').removeClass('button-slide-out').addClass('button-slide');
  } else {
    $(widget_button).not('.wh-widget-button-activator').addClass('button-slide-out').removeClass('button-slide');
  }
});
//]]></script>
<!--/Contact Button Widget-->

Các biểu tượng icon sau khi thêm code vào
Các biểu tượng icon sau khi thêm code vào


Các bạn thay <!--Các button liên hệ đặt tại đây--> thành các button dưới đây tùy thích, nhớ thêm link vào mỗi button các bạn nhé.


+ Facebook
<a class='wh-widget-button button-slide-out' href='#' rel='noopener nofollow' target='_blank' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-facebook'>
    <div>
      <svg class='wh-messenger-svg-facebook wh-svg-icon' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
        <path d=' M16 6C9.925 6 5 10.56 5 16.185c0 3.205 1.6 6.065 4.1 7.932V28l3.745-2.056c1 .277 2.058.426 3.155.426 6.075 0 11-4.56 11-10.185C27 10.56 22.075 6 16 6zm1.093 13.716l-2.8-2.988-5.467 2.988 6.013-6.383 2.868 2.988 5.398-2.987-6.013 6.383z' fill-rule='evenodd'></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Facebook Messenger</div>
  <div class='clear'></div>
</a>

+ Zalo
<a class='wh-widget-button button-slide-out' href='#' rel='noopener nofollow' target='_blank' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-zalo'>
    <div>
      <svg class='wh-messenger-svg-zalo wh-svg-icon' viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
        <path d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'></path>
        <path d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'></path>
        <path d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Zalo Chat</div>
  <div class='clear'></div>
</a>
+ Viber
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-viber'>
    <div>
      <svg class='wh-messenger-icon wh-messenger-bg-viber' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
        <path d=' M21.176 27c-.208-.062-.618-.13-.987-.303-6.476-3.02-11.18-7.972-13.853-15.082-.897-2.383.04-4.396 2.298-5.22.405-.147.802-.157 1.2.002.964.383 3.404 4.022 3.458 5.11.042.835-.48 1.287-1 1.67-.983.722-.988 1.638-.568 2.66.948 2.308 2.567 3.895 4.663 4.925.76.374 1.488.337 2.007-.515.925-1.518 2.06-1.445 3.3-.502.62.473 1.253.936 1.844 1.45.8.702 1.816 1.285 1.336 2.754-.5 1.527-2.226 3.066-3.7 3.05zm-4.76-20.986c4.546.166 8.46 4.677 8.406 9.543-.005.478.153 1.185-.504 1.172-.628-.015-.464-.733-.52-1.21-.603-5.167-2.786-7.606-7.52-8.394-.392-.066-.99.026-.96-.535.044-.833.754-.523 1.097-.576zm6.072 8.672c-.045.356.147.968-.385 1.056-.72.118-.58-.595-.65-1.053-.48-3.144-1.5-4.297-4.423-5.005-.43-.105-1.1-.032-.99-.75.108-.685.71-.452 1.164-.393 2.92.38 5.307 3.126 5.284 6.144zm-2.222-.573c.013.398-.026.818-.46.874-.314.04-.52-.245-.553-.597-.12-1.296-.75-2.062-1.95-2.27-.36-.063-.712-.19-.544-.715.11-.352.408-.387.712-.396 1.297-.036 2.815 1.647 2.794 3.103z' fill-rule='evenodd'></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Call Viber</div>
  <div class='clear'></div>
</a>
 + Phone
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-call'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-call" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-72 -72 704 704">
        <path d=" M166.156,512h-41.531c-7.375-0.031-20.563-8.563-20.938-8.906C37.438,437.969,0,348.906,0,255.938 C0,162.719,37.656,73.375,104.281,8.219C104.313,8.188,117.25,0,124.625,0h41.531c15.219,0,33.25,11.125,40.063,24.781l2.906,5.844 c6.781,13.594,6.188,35.563-1.344,48.75l-27.906,48.813c-7.563,13.219-26.188,24.25-41.406,24.25H110.75 c-36.813,64-36.813,143.094-0.031,207.125h27.75c15.219,0,33.844,11.031,41.406,24.25l27.875,48.813 c7.531,13.188,8.156,35.094,1.375,48.781l-2.906,5.844C199.375,500.844,181.375,512,166.156,512z M512,128v256 c0,35.344-28.656,64-64,64H244.688c-1.25-11.219-3.969-22.156-9.156-31.25l-27.875-48.813 c-13.406-23.406-42.469-40.375-69.188-40.375h-8.156c-20.188-45.438-20.188-97.719,0-143.125h8.156 c26.719,0,55.781-16.969,69.188-40.375l27.906-48.813c5.188-9.094,7.906-20.063,9.156-31.25H448C483.344,64,512,92.656,512,128z M328,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S328,381.25,328,368z M328,304c0-13.25-10.75-24-24-24 s-24,10.75-24,24s10.75,24,24,24S328,317.25,328,304z M328,240c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24 S328,253.25,328,240z M392,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,381.25,392,368z M392,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,317.25,392,304z M392,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S392,253.25,392,240z M456,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,381.25,456,368z M456,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,317.25,456,304z M456,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S456,253.25,456,240z M456,144c0-8.844-7.156-16-16-16H296c-8.844,0-16,7.156-16,16v32c0,8.844,7.156,16,16,16h144 c8.844,0,16-7.156,16-16V144z" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Call now</div>
  <div class='clear'></div>
</a>
+ SMS
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-sms'>
    <div>
      <svg class='wh-messenger-icon wh-messenger-bg-sms' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
        <path d='M21 23h4.01c1.1 0 1.99-.893 1.99-1.994V8.994C27 7.894 26.11 7 25.01 7H6.99C5.89 7 5 7.893 5 8.994v12.012C5 22.106 5.89 23 6.99 23h9.566l3.114 3.504c.73.82 1.33.602 1.33-.5V23zM10.515 12.165c.36.11.682.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.536.054-.707.16a.512.512 0 0 0-.256.46c0 .173.055.32.167.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .292-.528.618.618 0 0 0-.174-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.127-.202.38 0 .75.055 1.11.165zm7.732 5.8l-.01-4.424-1.87 3.806h-.653l-1.867-3.805v4.426h-.942V12.04h1.186l1.955 3.938 1.945-3.937h1.178v5.926h-.92zm5.728-5.8c.36.11.68.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.537.054-.707.16a.512.512 0 0 0-.257.46c0 .173.056.32.168.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .29-.528.618.618 0 0 0-.172-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.126-.202.38 0 .75.055 1.112.165z' fill-rule='evenodd'></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Send SMS</div>
  <div class='clear'></div>
</a>
 + Whatsapp
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-whatsapp'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-whatsapp" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Whatsapp</div>
  <div class='clear'></div>
</a>
 + Snapchat
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-snapchat'>
    <div>
      <svg  class="wh-messenger-icon wh-messenger-bg-snapchat" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d=" m 254.23192,67.745656 c -24.1553,0.16536 -49.1333,6.57616 -68.7188,22.0625 -14.667,11.577654 -26.19916,26.921164 -33.46871,44.062504 -0.0109,0.0415 -0.0213,0.0832 -0.0312,0.125 -6.92358,17.66206 -6.28241,36.45908 -5.34375,53.875 4.9e-4,0.0106 -4.9e-4,0.0207 0,0.0312 0.57046,12.24111 1.9192,24.09182 0.78125,35.34375 -0.0919,0.43802 -0.096,0.54776 -0.15625,0.8125 -5.44516,0.98701 -11.372,0.62902 -17.25,-0.5 -0.0312,-2.9e-4 -0.0625,-2.9e-4 -0.0937,0 -4.02639,-0.69306 -8.32797,-2.35229 -13.1875,-3.71875 -0.0828,-0.023 -0.16615,-0.0438 -0.25,-0.0625 -4.71633,-1.07824 -9.35242,0.29501 -12.90625,2.9375 -0.0457,0.0296 -0.10985,0.0635 -0.15625,0.0937 -0.071,0.054 -0.14865,0.10124 -0.21875,0.15625 -2.89265,1.9156 -6.854978,5.13197 -7.062498,10.71875 -0.009,0.36655 0.0225,0.73407 0.0937,1.09375 0.62464,3.28299 2.64407,5.68343 4.437498,7.25 1.79342,1.56657 3.48778,2.60119 4.53125,3.40625 0.0814,0.0651 0.16474,0.12762 0.25,0.1875 8.79695,5.93514 18.53281,8.54299 27,11.84375 0.009,0.003 0.0225,-0.003 0.0312,0 5.86205,2.59731 10.95592,6.63609 12.125,11.71875 1.45977,6.42713 -1.2468,13.80558 -4.78125,20.96875 -0.004,0.009 0.004,0.0226 0,0.0312 -9.53334,18.98565 -23.69089,35.49609 -41.093748,47.59375 -9.12374,6.29511 -19.416525,10.9945 -30.156305,13.9064 -0.148149,0.0453 -0.294192,0.0974 -0.4375,0.15625 -2.20374,0.82986 -7.42924,1.37247 -10.71875,6.375 -0.233793,0.34937 -0.423282,0.72835 -0.5625,1.125 -1.10923,3.2168 0.1562,6.67058 1.71875,8.5625 1.4921,1.80662 3.15667,2.85786 4.59375,3.625 0.0735,0.043 0.1451,0.0824 0.21875,0.125 9.04276,5.22608 18.918595,7.49157 27.937505,9.8125 0.0415,0.0109 0.0832,0.0213 0.125,0.0312 6.4981,1.47977 12.488738,2.27029 17.374998,4.375 0.23923,0.40234 0.72852,2.05832 1.875,4.8125 1.60151,4.99968 2.32952,10.9037 4.1875,17.09375 0.50804,1.71342 2.00225,3.09556 3.75,3.46875 4.104,0.87193 6.36119,-0.53617 6.71875,-0.5625 0.16758,-0.0124 0.33452,-0.0333 0.5,-0.0625 15.10019,-2.6468 30.16835,-4.99383 43.99996,-1.5 0.01,0.003 0.021,-0.003 0.031,0 14.516,3.82363 27.1309,13.91446 41.3438,22.59375 0.025,0.0154 0.037,0.0471 0.062,0.0625 l 0,-0.0312 c 9.4342,5.98646 20.3393,11.8485 32.9375,12.28125 l 0,0.0312 c 0.042,10e-4 0.083,-10e-4 0.125,0 9.5155,0.53896 18.855,-0.0657 27.9687,-0.6875 0.0521,8.1e-4 0.1042,8.1e-4 0.1563,0 7.8038,-0.77302 15.3807,-3.37002 22,-7.625 0.094,-0.0535 0.1876,-0.10258 0.2812,-0.15625 14.9452,-8.56344 28.2258,-18.88234 42.7813,-25.34375 0.021,-0.008 0.042,-0.0237 0.062,-0.0312 4.7208,-1.71157 10.6189,-1.61506 17.1875,-2.0625 0.062,-0.002 0.125,0.002 0.1875,0 12.0527,-0.3721 24.1283,0.27414 36.0937,1.875 0.41448,0.0522 0.83552,0.0522 1.25,0 1.5714,-0.1864 3.2889,-1.24155 4.125,-2.3125 0.8361,-1.07095 1.077,-1.94318 1.25,-2.5625 0.3462,-1.23864 0.667,-1.83102 0.094,-0.8125 0.1817,-0.31606 0.3287,-0.65205 0.4375,-1 2.1971,-7.28002 3.3925,-13.86797 6.9375,-17.96875 1.5929,-1.55716 4.334,-2.33886 7.4375,-2.28125 0.22952,0.005 0.45941,-0.005 0.6875,-0.0312 10.4024,-1.23133 19.8052,-4.98696 28.7188,-8.1875 0.10556,-0.0382 0.20984,-0.0799 0.3126,-0.12505 3.3113,-1.44341 8.2453,-3.09963 11.625,-7.84375 0.018,-0.0254 0.044,-0.0369 0.062,-0.0625 l -0.031,-0.0312 c 2.8428,-3.9725 1.523,-9.42469 -2.5,-11.90625 l 0.062,-0.0625 c -0.1275,-0.0867 -0.2474,-0.13595 -0.375,-0.21875 -0.034,-0.0186 -0.059,-0.0444 -0.094,-0.0625 l 0,0.0312 c -4.8259,-3.10006 -9.6612,-3.53092 -12.7187,-4.65625 -0.0621,-0.0221 -0.1246,-0.0429 -0.1875,-0.0625 -20.6872,-6.63568 -38.5778,-20.92111 -51.9375,-38.3125 -7.4172,-9.69129 -13.6899,-20.22202 -17.8438,-31.46875 -0.014,-0.041 -0.018,-0.084 -0.031,-0.125 -1.6262,-4.88353 -1.7077,-10.20902 0.6875,-13.4375 0.0317,-0.0308 0.0631,-0.062 0.094,-0.0937 3.7366,-5.36839 10.5935,-8.81878 17.9063,-11.53125 0.03,-0.0104 0.064,-0.0208 0.094,-0.0312 8.0819,-2.81157 16.9263,-6.08686 24.2187,-12.5625 0.0318,-0.0308 0.0631,-0.062 0.094,-0.0937 1.1283,-1.06695 2.4852,-2.45602 3.5,-4.53125 1.0149,-2.07523 1.4961,-5.31032 0.1563,-8.125 3e-5,-0.0104 3e-5,-0.0208 0,-0.0312 -2.1044,-4.33549 -5.774,-6.5662 -8.5,-8.1875 -0.0103,-3e-5 -0.0207,-3e-5 -0.031,0 -4.5673,-2.66592 -9.8816,-2.83887 -14.5,-1.34375 -0.01,0.003 -0.021,-0.003 -0.031,0 -0.031,0.0101 -0.063,0.021 -0.094,0.0312 -4.9892,1.51835 -9.0624,3.33391 -12.8438,3.8125 -0.0839,0.0187 -0.16722,0.0395 -0.25,0.0625 -5.3737,0.95777 -10.5773,1.18779 -14.625,-0.3125 -0.038,-0.60649 -0.057,-1.79013 -0.2187,-3.25 l 0.031,0 c -0.2988,-8.9153 0.4565,-18.10604 0.5937,-27.625 3e-4,-0.0212 -3e-4,-0.0413 0,-0.0625 0.4112,-14.46318 0.9948,-29.35295 -1.125,-44.34375 -0.009,-0.0731 -0.0191,-0.14607 -0.031,-0.21875 -4.6154,-25.28753 -20.687,-47.06736 -41.0625,-61.562504 -14.8121,-10.50987 -32.3972,-16.37581 -50.25,-18.03125 -0.01,-0.001 -0.021,0.001 -0.031,0 -5.9912,-0.60487 -11.9741,-0.81945 -17.9375,-0.75 z" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Snapchat</div>
  <div class='clear'></div>
</a>
 + Telegram
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-telegram'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-telegram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
        <path d=" M15.02 20.814l9.31-12.48L9.554 17.24l1.92 6.42c.225.63.114.88.767.88l.344-5.22 2.436 1.494z" opacity=".6" fill-rule="evenodd"></path><path d=" M12.24 24.54c.504 0 .727-.234 1.008-.51l2.687-2.655-3.35-2.054-.344 5.22z" opacity=".3" fill-rule="evenodd"></path><path d=" M12.583 19.322l8.12 6.095c.926.52 1.595.25 1.826-.874l3.304-15.825c.338-1.378-.517-2.003-1.403-1.594L5.024 14.727c-1.325.54-1.317 1.29-.24 1.625l4.98 1.58 11.53-7.39c.543-.336 1.043-.156.633.214" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Send SMS</div>
  <div class='clear'></div>
</a>
 + Line
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-line'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-line" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M27 14.926C27 10.006 22.065 6 16 6S5 10.005 5 14.926c0 4.413 3.913 8.11 9.2 8.808.358.077.845.236.968.542.112.278.073.713.036.995l-.157.942c-.048.28-.22 1.088.953.593 1.174-.494 6.334-3.73 8.642-6.386C26.236 18.67 27 16.896 27 14.925zm-4.247-.41a.577.577 0 0 1 0 1.153h-1.61v1.03h1.61a.578.578 0 0 1 0 1.155h-2.186a.578.578 0 0 1-.577-.577v-4.37c0-.32.26-.578.577-.578h2.186a.578.578 0 0 1 0 1.153h-1.61v1.033h1.61zm-3.537 2.762a.575.575 0 0 1-.578.577.58.58 0 0 1-.46-.23l-2.24-3.05v2.703a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.038-.347l2.24 3.05v-2.703a.578.578 0 0 1 1.154 0v4.37zm-5.26 0a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.153 0v4.37zm-2.262.577H9.508a.577.577 0 0 1-.576-.577v-4.37a.577.577 0 0 1 1.153 0V16.7h1.61a.577.577 0 0 1 0 1.155z" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div class='mes-us'>Line</div>
  <div class='clear'></div>
</a>
 + Email
<a class='wh-widget-button button-slide-out' href='#' rel='nofollow' title=''>
  <div class='wh-widget-button-icon wh-messenger-bg-email'>
    <div>
      <svg class="wh-messenger-icon wh-messenger-bg-email" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d=" M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z" fill-rule="evenodd"></path><path d=" M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z" fill-rule="evenodd"></path>
       </svg>
    </div>
  </div>
  <div class='mes-us'>Gửi Email</div>
  <div class='clear'></div>
</a>
Lưu ý: Đoạn script ở trên mình viết bằng jquery nên template cần có link thư viện jquery các bạn nhé. Ngoài ra đoạn code ở trên mặc định button sẽ nằm bên phải, nếu các muốn nằm bên trái thì thay tất cả các class "wh-widget-right" trong code trên thành "wh-widget-left" là nó sẽ nằm ở bên trái thôi.

Nguồn:Viet Blogger Design

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Shortcode HTML đẹp dành cho thiết kế nội dung

LongAnIT 8/27/2019 Bình luận
Shortcode HTML đẹp dành cho thiết kế nội dung
Shortcode HTML đẹp dành cho thiết kế nội dung


1. Button Thanh toán hoặc Chuyển Khoản

USD $15.00 Thanh toán bằng Paypal
250.000VNĐ Chuyển khoản ngân hàng

Code sử dụng
<div id="box-payment">
<div id="box-paypal">
<div class="cover-paypal">
<div class="icon-paypal">
<span class="coc"></span></div>
<div class="title-paypal">
<span class="app-title">USD $15.00</span>
<span class="label-paypal"><span class="tag-os"></span>Thanh toán bằng Paypal</span></div>
</div>
<div class="link-paypal">
<span class="item_price"><a href="https://draft.blogger.com/blogger.g?blogID=3789953926327582762#" target="_blank" title="Buy now"><span class="home-paypal">USD 9.00</span><span class="post-paypal">Thanh Toán</span></a></span></div>
</div>
<div id="box-bank">
<div class="bank-cover">
<div class="icon-bank">
<span class="coc"></span></div>
<div class="bank-title">
<span class="app-title">250.000VNĐ</span>
<span class="bank-grup"><span class="tag-os"></span>Chuyển khoản ngân hàng</span></div>
</div>
<div class="link-bank">
<a href="https://draft.blogger.com/blogger.g?blogID=3789953926327582762#" target="_blank" title="Buy now">Thanh Toán</a></div>
</div>
</div>
<style>
#box-payment{margin:0;-webkit-box-shadow:0 4px 13px -6px rgba(110,110,110,0);-moz-box-shadow:0 4px 13px -6px rgba(185,185,185,0.45);box-shadow:0 4px 13px -6px rgba(185,185,185,0.45)}
#box-bank,#box-paypal{box-sizing:border-box}
#box-bank,#box-bank .bank-cover .bank-title .tag-os,#box-paypal{overflow:hidden;vertical-align:middle}
#box-paypal,#box-paypal .cover-paypal,#box-paypal .cover-paypal .title-paypal,#box-bank,#box-bank .bank-cover,#box-bank .bank-cover .bank-title{position:relative}
#box-paypal,#box-paypal .cover-paypal,#box-paypal .cover-paypal .icon-paypal span,#box-paypal .cover-paypal .title-paypal,#box-paypal .label-paypal,#box-paypal .link-paypal a{display:block}
#box-paypal .cover-paypal{float:left}
#box-paypal{padding:15px;margin:0;background:#dac8de}
#box-paypal .cover-paypal .icon-paypal,#box-bank .bank-cover .icon-bank{width:65px;height:65px;margin-right:20px;float:left;position:relative}
#box-paypal .cover-paypal .icon-paypal span,#box-bank .bank-cover .icon-bank span{background-size:100%;background-repeat:no-repeat;height:100%}
#box-paypal .cover-paypal .title-paypal,#box-bank .bank-cover .bank-title{vertical-align:middle;float:left;margin-top:5px}
#box-paypal .cover-paypal .title-paypal .label-paypal,#box-bank .bank-cover .bank-title .bank-grup{font-size:17px}
#box-paypal .cover-paypal .title-paypal .app-title{font-weight:700;color:#252525;font-size:133%}
#box-paypal .label-paypal a,#box-bank .bank-grup a{color:#666;font-size:12px}
#box-paypal .cover-paypal .title-paypal .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:10px;background:#2db552;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-right:5px}
#box-paypal .link-paypal{position:absolute;top:20%;padding:15px 40px;-webkit-border-top-left-radius:50px;-webkit-border-bottom-left-radius:50px;-moz-border-radius-topleft:50px;-moz-border-radius-bottomleft:50px;border-top-left-radius:50px;border-bottom-left-radius:50px;right:0;background:rgba(255,193,7,1);background:-moz-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-webkit-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-o-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-ms-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);vertical-align:middle}
#box-paypal .link-paypal a{color:#fff}
.icon-paypal span.coc{background-image:url(https://1.bp.blogspot.com/-cBowlfjBRXo/XLGI-YJ7uEI/AAAAAAAAAIg/1FHgUQaXSJgVilohNPelpOLYJxTjDzPCACLcBGAs/s320/pay.png)}
#box-bank,#box-bank .bank-cover,#box-bank .bank-cover .bank-title,#box-bank .bank-cover .icon-bank span,#box-bank .bank-grup,#box-bank .link-bank a{display:block}
#box-bank .bank-cover{float:left}
#box-bank{padding:15px;margin:0;color:#000;background:#fff}
#box-bank .bank-cover .bank-title .app-title{font-weight:700;font-size:133%}
#box-bank .bank-cover .bank-title .tag-os{display:inline-block;width:10px;background:#2db552;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-right:5px}
#box-bank .link-bank{position:absolute;top:20%;padding:15px 40px;-webkit-border-top-left-radius:50px;-webkit-border-bottom-left-radius:50px;-moz-border-radius-topleft:50px;-moz-border-radius-bottomleft:50px;border-top-left-radius:50px;border-bottom-left-radius:50px;right:0;background:#d481ff;background:-moz-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-webkit-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-o-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-ms-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:linear-gradient(to right,#d481ff 0,#05f1e1 100%);vertical-align:middle}
#box-bank .link-bank a{color:#fff}
span.home-paypal{display:none}
.icon-bank span.coc{background-image:url(https://4.bp.blogspot.com/-_U1DUMM4rhQ/XLGHEbAayPI/AAAAAAAAAIM/IItPhixWuZQ0_hACgbI4DGQ4oiWE-OpqwCPcBGAYYCw/s320/bank.png)}
</style>

2. Bảng 3 cột

MỘT

  • Mục #1
  • Mục #2
  • Mục #3
  • Mục #4
  • Mục #5
  • Mục #6

KHÔNG

SỬ DỤNG

Code sử dụng
<div class="table_price">
<div class="plan featured1">
<div class="headtitle">
<h4 class="plan-title">
MỘT
</h4>
</div>
<ul class="plan-features">
<li>Mục #1</li>
<li>Mục #2</li>
<li>Mục #3</li>
<li>Mục #4</li>
<li>Mục #5</li>
<li>Mục #6</li>
</ul>
</div>
<div class="plan featured2">
<div class="headtitle">
<h4 class="plan-title">
KHÔNG</h4>
</div>
<ul class="plan-features">
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
</ul>
<div class="plan-select">
SỬ DỤNG</div>
</div>
<div class="plan featured">
<div class="headtitle">
<h4 class="plan-title">
CÓ</h4>
</div>
<ul class="plan-features">
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
</ul>
<div class="plan-select">
SỬ DỤNG</div>
</div>
</div>
<style>
.table_price{color:#000;text-align:center;font-size:16px;width:100%;display:-webkit-box;margin:15px 0 0}
.table_price .plan{margin:0;width:30%;position:relative;float:left;overflow:hidden}
.table_price .featured,.table_price .featured2{-webkit-box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);-moz-box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);z-index:1}
.table_price *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .25s ease-out;transition:all .25s ease-out}
.table_price .headtitle{position:relative;color:#fff;padding:10px 0}
.table_price .featured1 .headtitle:after{width:0;height:0;border-style:solid;border-width:24px 161px 0;border-color:#3aadc3 transparent transparent;content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured .headtitle:after,.table_price .featured2 .headtitle:after{width:0;height:0;border-style:solid;border-width:24px 123px 0;content:'';position:absolute;top:100%;left:50%}
.table_price .featured2 .headtitle:after{border-color:#38be85 transparent transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured .headtitle:after{border-color:#f97c59 transparent transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured1 .plan-title,.table_price .featured2 .plan-title{top:0;margin:8px 0;text-transform:uppercase;font-weight:700;letter-spacing:1px;font-size:20px}
.table_price .featured .plan-title{top:0;margin:16px 0;text-transform:uppercase;font-weight:700;font-size:26px;letter-spacing:1px}
.table_price .plan-cost{margin:8px 0 0}
.table_price .plan-price{font-weight:800;font-size:2em;color:#fff}
.table_price .plan-type{opacity:.8;color:#fff;font-size:.7em;text-transform:uppercase}
.table_price .plan-features{padding:30px 0 0;margin:0;list-style:none;font-size:18px;color:#517177;background:#fff}
.table_price .featured .plan-features li,.table_price .featured1 .plan-features li,.table_price .featured2 .plan-features li{padding:15px 5%;font-weight:500}
.table_price .plan-features li:nth-child(even){background:rgba(0,0,0,.08)}
.table_price .plan-features i{margin-right:8px;opacity:.4}
.table_price .plan-select{padding:15px 5px;background:linear-gradient(to right,rgba(201,130,237,1) 0,rgba(18,206,106,1) 100%);color:#fff;font-weight:400;font-size:18px}
.table_price .featured2 .plan-features li span:before{content:url(https://4.bp.blogspot.com/-VlKTf-UNl2c/XK3zzFNT_BI/AAAAAAAAAGM/YWfZrht9Yq8WXcO75Wno6JjKoQ6RFGpbgCLcBGAs/s1600/as.png);display:block;width:14px;text-align:center;line-height:14px;margin:0 auto;font-size:20px;height:14px;background:#74d2aa;color:#fff;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;padding:7px}
.table_price .featured .plan-features li span:before{content:url(https://4.bp.blogspot.com/-rJwM9QUD1k8/XK3x3ZlhbBI/AAAAAAAAAFw/DB62i6GeugMoHECaUkK2ZTfejIsIr2dUwCLcBGAs/s1600/benar.png);background-size:28px 28px;display:block;width:14px;text-align:center;line-height:14px;margin:0 auto;font-size:20px;height:14px;background:#fbca79;color:#fff;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;padding:7px}
.table_price .plan-select a{color:#fff;text-decoration:none;padding:0;font-size:.75em;font-weight:600;text-transform:uppercase;display:inline-block}
.table_price .featured1{width:40%}
.table_price .featured1 .headtitle{background:linear-gradient(to right,rgb(98,104,178) 0,rgba(21,234,209,1) 100%)}
.table_price .featured1 .plan-select{padding:30px 20px}
.table_price .featured1 .plan-select a{background-color:#222f3d}
.table_price .featured2{background:#fff}
.table_price .featured2 .headtitle{background:linear-gradient(to right,rgba(201,130,237,1) 0,rgba(18,206,106,1) 100%)}
.table_price .featured{margin-top:-16px;background:#fff}
.table_price .featured .headtitle{background:linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%)}
.table_price .featured .plan-select{padding:15px 5px;width:100%;color:#fff;font-weight:400;font-size:18px;background:linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%)}
</style>

Nguồn bài viết: tham khảo từ BSW