Thứ Sáu, 20 tháng 7, 2018

Share Widget Info Cực Chất Đã responsive

Share Widget Info Cực Chất Đã responsive

Hôm nay vô tình mình qua Đức Huy Blog và thấy có một widget info khá đẹp nên mình đem về edit lại và thêm responsive cho nó.....

Cách thực hiện
Bước 1 : thêm code css vào trước ]]></b:skin>
  #information {    background: linear-gradient(160deg, #3492b5, #0ecf8a);
    height: 250px;position:relative;}
  #information .details-info {max-width:1075px;margin:0 auto;}
  #information:before {content:&#39;&#39;;position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.15);}
  .info-cot1, .info-cot2 {display:inline-block;position:relative}
  .info-cot1 {width: 41%;}
  .info-cot2 {    width: 50%;
    top: 39px;
    right: 99px;}
  .profile-img {
    border-radius: 50%;
    width: 183px;
    height: 190px;
    position: absolute;
    top: -41px;
    bottom: 53px;
    left: 26%;}
.profile-img img {width:100%;border-radius:0; border:4px solid #fff;    position: absolute;bottom:88px; left:50px;-webkit-transition: .3s;}
  .profile-img img:hover{border-radius:20px 0 0 20px;
}
  .hello {    background: rgba(210, 210, 210, 0.3);
    padding: 15px 25px;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 15px;
    text-align: justify;
    /* text-shadow: 1px 1px 1px #424242; */}
.hello h2{font: 600 24px Roboto Condensed;
    text-transform: uppercase;
}
.hello a{-webkit-transition: .3s;color:#fff}
.hello a:hover{color:#444}
  @media all and (max-width:885px){
#information {height: auto; }
.info-cot1 {
    width: 22%;
}
.profile-img {
    display: none;}
.info-cot2 {top: 0;
    padding: 25px 0 25px 0px;
    width: 63%;
    right: 5%;
}
.hello {text-align: left;
    background: rgba(210, 210, 210, 0.3);
    padding: 15px 15px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;}
}
 Bước 2: Ta chỉ cần thêm code vào nơi bạn muốn hiển thị là được
<div id='information'>
<div class='details-info'>
<div class='info-cot1'>
<div class='profile-img'>
<img src='https://i.pinimg.com/originals/dd/b0/26/ddb0267bd228fd0f8c356b5670c1eaa8.png'/>
</div>
</div>
<div class='info-cot2'>
<div class='hello'>
<h2> Hồng Hải</h2>
  <b>- Facebook:</b> <a href='https://www.facebook.com/HongHai.H.T.H' target='_blank'>www.facebook.com/HongHai.H.T.H</a>
  <br/>
  <b>- Email:</b> honghai251325@gmail.com
  <br/>
  <b>- Website:</b> HongHaiBlog
  <br/>
  <b>- Số điện thoại:</b> 01682253***
  <br/>
<span>Nỗ lực hết mình trong từng việc làm cho dù có thành công hay không</span>
</div>
</div>
</div>
</div>
 Vậy là xong rồi đó chúc các bạn thành công....

Thứ Tư, 18 tháng 7, 2018

Hướng Dẫn tạo widget thống kê hiệu ứng chuyển màu cực đẹp

Hướng Dẫn tạo widget thống kê hiệu ứng chuyển màu cực đẹp

Xin chào các bạn, hôm nay mình xin chia sẻ cho các bạn một widget thống kê có hiệu ứng chuyển màu cực đẹp...
Cách thực hiện
Bước 1 : thêm code css vào trước</head>
<style>
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {font: 600 17px Roboto Condensed;width:92%;text-align:right;margin:14px 0px 3px 0;color:#fff;margin-left: 0;-webkit-transition: .3s;}
.Stats .counter-wrapper:hover {color:#de4676;}
.Stats .counter-wrapper:after {content:&quot;Tổng Lượt Xem   &quot;;text-transform: uppercase;    font: 600 17px Roboto Condensed;float:left;text-align:left;color:#fff;-webkit-transition: .3s;}
.Stats .counter-wrapper:hover:after {color:#e45050;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {font-weight: 700;
display:block;background-color:#ffffff;color:#353535;width:32px;height:32px;font-size:18px;line-height:32px;border-radius:36px;margin:-7px 8px 7px 10px;    -webkit-transition: .3s;}
.counter-wrapper.text-counter-wrapper:hover:before, .counts:hover:before {background:linear-gradient(160deg, #e45050, #de4676);color:#fff;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;;-webkit-transition: .3s;}
@-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>
Thêm thẻ thư viện vào sau <head> nếu có rồi thì k cần thêm
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Bước 2: các bạn vào phần bố cục của blogger -> thêm tiện ích -> chọn thống kê blog và làm theo như ảnh dưới. 
Bước 3: Các bạn vào chỉnh sửa html -> chuyển đến tiện ích -> chọn stats1
Các bạn sẽ thấy đoạn code thống kê
<b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<!-- Content is going to be visible when data will be fetched from server. -->
<div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
<!-- Counter and image will be injected later via AJAX call. -->
<b:if cond='data:showSparkline'>
<img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
</b:if>
<span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
</span>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
và sau đó các bạn thay thế nó bằng đoạn code này 
<b:widget id='Stats1' locked='false' title='' type='Stats'>
 <b:widget-settings>
      <b:widget-setting name='showGraphicalCounter'>false</b:widget-setting>
      <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>
      <b:widget-setting name='showSparkline'>true</b:widget-setting>
      <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
      <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
      </b:if>
      <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
      </span>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
  </b:widget>
và nhấn lưu chủ đề thế là xong.
Lời Kết
nếu có gì thắc mắc không hiểu hãy comment bên dưới để mình giải đáp.
Chúc các bạn thành công.

Thứ Ba, 17 tháng 7, 2018

Share Intro hiệu ứng tuyệt đẹp cho blogspot

Share Intro hiệu ứng tuyệt đẹp cho blogspot

Xin chào các bạn chắc các bạn cũng biết Css Animation thì hôm nay mình share intro cũng sử dụng hiện ứng đó cực đẹp...
Cách thực hiện
Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ ]]></b:skin>
#intro_homepage{    position: relative;
    display: table;
    width: 100%;
    height: 200px;
    margin: 0!important;
    padding: 0!important;
    z-index: 999;
    background-size: cover!important;
    background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}

@-webkit-keyframes slideUpso {
 from {-webkit-transform: translate(-700px, 0)}
 to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
 -webkit-animation: slideUpso 3s;
 -moz-animation: slideUpso 3s;
 -ms-animation: slideUpso 3s;
 -o-animation: slideUpso 3s;
 animation: slideUpso 3s;
}

@-webkit-keyframes slideUpsos {
 from {-webkit-transform: translate(0, 1000px)}
 to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
 -webkit-animation: slideUpsos 3s;
 -moz-animation: slideUpsos 3s;
 -ms-animation: slideUpsos 3s;
 -o-animation: slideUpsos 3s;
 animation: slideUpsos 3s;
}
 Bước 2: Ta chèn code bên dưới vào nới bạn muốn hiển thị..
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style='  display:none;  font-weight: 900;margin:0 20px 0 0'></i>HỒNG HẢI
<i aria-hidden='true' class='fa fa-gg' style=' display:none;   font-weight: 900;margin:0 0 0 20px'></i><aa style='padding: 0 10px;     background: #52537d;     border-radius: 10px;'>BLOG</aa>
</h2>
<p>Blog chia sẽ thủ thuật Miễn Phí</p>
</div>
</div></div>
<div class='meta_'>
</div>
</div>
Thế là xong
Chúc các bạn thành công 

Thứ Năm, 12 tháng 7, 2018

Share Button cực kì thú zị

Share Button cực kì thú zị

Chào các bạn đã trở lại honghaiblog hôm nay mình xin share button cực kì thú zị này...

Cách Thực hiện
Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ ]]></b:skin>
.button-boxss {
   font: 500 15px Roboto;
    border: 5px solid transparent;
    background: #52537d;
    color: #ffffff;
    border-radius: 40px;
    padding: 9px 30px;
    overflow: hidden;
    width: 200px;
    transition: all 1.2s, border 0.5s 1.2s, box-shadow 0.3s 1.5s;
    white-space: nowrap;
    text-indent: 12px;
    font-weight: bold; }
 .button-boxss span {
    display: inline-block;
    transform: translateX(300px);
    font-weight: normal;
    opacity: 0;
    transition:
      opacity 0.1s 0.5s,
      transform 0.4s 0.5s;
  }
.button-boxss:hover{
text-indent: 0;
    background: #52537d;
    color: #e4ba3a;
    width: 250px;
    border: 5px solid #7578cc;
    box-shadow: 3px 3px 2px rgba(black, 0.15);
}
 .button-boxss:hover span{
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;}
 Bước 2: Ta chèn code bên dưới vào nơi bạn muốn hiển thị
<button class="button-boxss">Demo Button<span>Vip.</span></button>
 nhớ chỉnh sửa sao cho phù hợp...

Thứ Ba, 10 tháng 7, 2018

Hướng dẫn tạo widget thông báo có nút tắt cực đẹp

Hướng dẫn tạo widget thông báo có nút tắt cực đẹp

Hello sau nhiều ngày vắng bóng mình đã quay trở lại và mình có dạo trên codepen thì có thấy một widget rất đẹp muốn share cho mọi người!!!!

Thứ Hai, 18 tháng 6, 2018

Thêm Widget Responsive Recent Post Blogspot

Thêm Widget Responsive Recent Post Blogspot

Hello xin chào các bạn đến hẹn mình lại lên đây, Hôm nay mình xin chia sẻ cho mọi người một widget mới rất đẹp

Cách Thực Hiện
Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ ]]></b:skin> nhé
/* CSS Responsive Slider Recent Post */
#featuredpost {padding: 0 70px 0 80px;margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {    font: 600 18px Roboto Condensed;overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;;background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{    font: 600 14px Roboto Condensed;position:absolute;bottom:40px;margin:0;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#featuredpost{display: none}
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
 Bước 2: Ta tiếp tục chèn code bên dưới vào trước thẻ </body> nha
<script src='https://cdn.rawgit.com/Arlina-Design/frame/18274fc5/slider-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://www.honghaiblog.net/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
 Và nhớ là phải thay https://www.honghaiblog.net/ thành tên miền blog của bạn nhé nếu không nó sẽ hiển thị bài viết của mình ở đó.
Bước 3: Để hiển thị Widget ta chỉ cần chèn nó ở bất kì đâu mà bạn muốn hiển thị
<div id="featuredpost"></div>
 Vậy là xong có gì không hiểu bạn cứ comment bên dưới mình sẽ hỗ trợ bạn.
Code: codepen.io

Thứ Năm, 14 tháng 6, 2018

Hướng dẫn tạo khung chứa code mình đang sử dụng

Hướng dẫn tạo khung chứa code mình đang sử dụng

Hello mọi người hôm nay mình lại tiếp tục share thủ thuật blog Hướng dẫn tạo khung chứa code mình đang sử dụng cho mọi người
Cách Thực Hiện
Bước 1: Ta Chèn code phía dưới vào trước thẻ ]]></b:skin> nhé.
.post blockquote{margin:10px 0;text-align:left!important;padding:50px 10px 10px 15px;transition:.3s;font:400 17px Monospace;color:#888;max-height:400px;overflow:hidden;line-height:1.5;position:relative;background:#f4f4f4;border:2px solid #ddd;overflow:auto}
.post blockquote:before{content:'\f121  CODE';font-family:"Font Awesome 5 Free",Roboto Condensed;font-weight:700;position:absolute;font-size:1em;left:0;top:0;margin:0;display:block;width:100%;background:#ddd;padding:10px;box-sizing:border-box;    -webkit-transition: .3s;}
.post blockquote::-webkit-scrollbar{width:8px}
.post blockquote::-webkit-scrollbar-thumb{background:#ddd}
.post blockquote:-webkit-scrollbar-thumb:window-inactive{background:#ddd}
.post blockquote::-moz-scrollbar{width:8px}
.post blockquote::-moz-scrollbar-track{background:#eee}
.post blockquote::-moz-scrollbar-thumb{background:#ddd}
.post blockquote::-o-scrollbar{width:8px}
.post blockquote::-o-scrollbar-track{background:#eee}
.post blockquote::-o-scrollbar-thumb{background:#ddd}
.post blockquote:after{content:'Cick Double Để Copy Code';padding:2px 5px;width:auto;height:auto;font-family:"Font Awesome 5 Free",Roboto Condensed;position:absolute;right:8px;top:8px;color:#595b8a;font-weight:700;background-color:none;transition:all 0.3s ease-in-out;font-size:1em}
.post blockquote:hover::after{opacity:0;top:-8px;visibility:visible}
code{display: inline-block; position: relative; color: #6aafa3; margin: 0 5px; padding: 0 10px; transition: all .3s; border: 1px solid; border-radius: 4px; font: 400 18px Monospace;}
Bước 2: ta thêm đoạn js vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
for(var pres=document.getElementsByTagName("blockquote"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var a=getSelection(),b=document.createRange();b.selectNodeContents(this);a.removeAllRanges();a.addRange(b)},!1);
//]]>
</script>
 vậy là xong.
Chúc các bạn thành công

Thứ Ba, 12 tháng 6, 2018

Hướng dẫn tạo button cực đẹp cho blogspot

Hướng dẫn tạo button cực đẹp cho blogspot

Đến hẹn lại lên hôm nay mình xin chia sẻ ae một button nho nhỏ giúp làm đẹp bài viết của bạn.

Cách Thực Hiện
Bước 1: Ta thêm thẻ thư viện vào sau <head>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,500,500i,700,700i' rel='stylesheet'/>
Bước 2: ta chèn đoạn code vào dưới ]]></b:skin> 
.button-box a{color: #fff!important}
.button-box {
margin: 10px;
background: #de4676;
width: 14%;
padding: 7px;
border-radius: 20px;
font: 700 17px Roboto Condensed;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
transition: all .5s ease-in-out;
}
.button-box:hover {
background: #e45050;
transform: scale(1.05);
transition: all .3s ease-in-out;
}
Bước 3: ta chỉ cần thêm đoạn code này vào nơi bạn muốn hiển thị là được.
<button class="button-box"><a class="green" href="https://www.honghaiblog.net/">Demo</a></button>
Chúc các bạn thành công!!

Thứ Năm, 7 tháng 6, 2018

Hướng dẫn tạo widget theo dõi cực đẹp cho blogspot

Hướng dẫn tạo widget theo dõi cực đẹp cho blogspot

Đến hẹn lại lên hôm nay mình xin chia sẻ ae một widget nho nhỏ giúp làm đẹp blog của bạn.
Cách Thực Hiện
Rất đơn giản ta chỉ cần chèn code bên dưới vào Widget HTML/Javascript, chỉnh sửa sao cho phù hợp rồi lưu lại
<div class="widget-title"><span class="ti-border"></span></div>
<script type="text/javascript">
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalPosts"></script><script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=totalComments"></script>
<style>
.lightsosmed-img{position:relative;max-height:202px;overflow:hidden}
.lightsosmed-img img {max-width:100%;width:500px;transition:all .6s;}
.lightsosmed-img:hover img{transform:scale(1.2) rotate(-10deg)}
.lightsosmed-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.lightsosmed-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:20%;bottom:35%;left:22.5%;z-index:3}
.aboutfloat-imgs{width:55%;position:absolute;top:40%;bottom:35%;left:22.5%;z-index:3}
.lightsosmed-float{text-align:center;display:table;width:100%;height:35px}
.lightsosmed-float a{  font-weight: 600;
    background: #ffffff;
    color: #424242;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 90%;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
    transition: all .3s;}


.lightsosmed-imgs {
    position: relative;
    max-height: 202px;
    overflow: hidden;
}
.lightsosmed-fed {
    text-align: center;
    display: table;
    width: 100%;
    height: 35px;
}
.lightsosmed-fed a {
    font-weight: 600;
    background: #ffffff;
    color: #424242;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 90%;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
    transition: all .3s;
}
.lightsosmed-fed:hover a{background:#ffffff;color:#395796;border-color:transparent;}
.lightsosmed-float:hover a{background:#ffffff;color:#ff5722;border-color:transparent;}
.lightsosmed-float a i{font-weight:normal;margin:0 5px 0 0}
.lightsosmed-wrpicon{display:block;margin:15px auto;position:relative;}
.lightsosmed-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .lightsosmed-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .lightsosmed-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .lightsosmed-icon i{font-family:fontawesome;margin:0 3px 0 0}
.lightsosmed-icon.fbl a{background:#3b5998}
.lightsosmed-icon.twitt a{background:#19bfe5}
.lightsosmed-icon.crcl a{background:#d64136}
.lightsosmed-icon.fbl a:hover,.lightsosmed-icon.twitt a:hover,.lightsosmed-icon.crcl a:hover{background:#404040}
.extender .lightsosmed-icon:hover a,.extender .lightsosmed-icon a:hover{color:#fff;}
.lightsosmed-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.lightsosmed-info p{margin:5px 0}
.lightsosmed-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.lightsosmed-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.lightsosmed-info h4:before,.lightsosmed-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.lightsosmed-info h4:before {margin-left:-50%;text-align:right;}



.aboutfloat-imgsd{width:55%;position:absolute;top:60%;bottom:35%;left:22.5%;z-index:3}
.lightsosmed-imgsd {
    position: relative;
    max-height: 202px;
    overflow: hidden;
}
.lightsosmed-feds {
    text-align: center;
    display: table;
    width: 100%;
    height: 35px;
}
.lightsosmed-feds a {
    font-weight: 600;
    background: #ffffff;
    color: #424242;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 90%;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
    transition: all .3s;
}
.lightsosmed-feds:hover a{background:#ffffff;color:#52537d;border-color:transparent;}
</style>
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="lightsosmed-img">
<img alt="tu-hoc-seo-online" class="img-responsive" height="180" src="https://i.imgur.com/93PJaxx.png" title="Tự học seo online" width="400" />
<div class="aboutfloat-img"><span class="lightsosmed-float"><a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=7734893201852337172" rel="nofollow" target="_blank" title="Theo dõi Blogger"><i class="fa fa-rss"></i> Theo dõi Blogger</a></span></div>
<div class="aboutfloat-imgs"><span class="lightsosmed-fed"><a href="https://www.facebook.com/HongHai.H.T.H" rel="nofollow" target="_blank" title="Theo dõi Facebook"><i class="fab fa-facebook-f"></i> Theo dõi Facebook</a></span></div>
<div class="aboutfloat-imgsd"><span class="lightsosmed-feds"><a href="https://www.facebook.com/HongHai.H.T.H" rel="nofollow" title="Get Design"><i class="fas fa-laptop"></i> Get Design</a></span></div>
</div>
</div>
</div>
 Chúc các bạn thành công!!

Thứ Năm, 31 tháng 5, 2018

Share widget giới thiệu cực đẹp mà mình đang sử dụng

Share widget giới thiệu cực đẹp mà mình đang sử dụng

Hôm nay mình xin share một widget giới thiệu cực đẹp mình đang dùng muốn với các bạn.
Bước 1: Đầu tiên ta chèn thẻ thư viện này vào sau thẻ <head> nếu có rồi thì không cần chèn.
<link async='async' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Condensed:300,400,700|Roboto+Slab:400,500,700' rel='stylesheet'/>
Bước 2: Ta chỉ chỉ cần chèn đoạn code này vào nơi bạn muốn hiển thị là được
<style>
.snip1566 {
position: relative;
    display: inline-block;
    margin: 0px 0px 5px 86px;
    max-width: 190px;
    width: 100%;
    color: #bbb;
    font-size: 16px;
    box-shadow: none !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.snip1566 *,
.snip1566:before,
.snip1566:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.snip1566:before,
.snip1566:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50%;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
  border: 2px solid #bbb;
  border-color: transparent #bbb;
}
.snip1566 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  border-radius: 50%;
  padding: 10px;
}
.snip1566 figcaption {
      position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
}
.snip1566 i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 4em;
  z-index: 1;
}
.snip1566 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1566:hover figcaption,
.snip1566.hover figcaption {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.snip1566:hover:before,
.snip1566.hover:before,
.snip1566:hover:after,
.snip1566.hover:after {
  border-width: 10px;
}
.snip1566:hover:before,
.snip1566.hover:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.snip1566:hover:after,
.snip1566.hover:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


</style>
<fail class="snip1566">
  <img alt="sq-sample14" src="https://i.imgur.com/qJgQSxV.png"/>
  <figcaption>
<p style="
    text-align:  center;
    left: 14%;
    position: absolute;
    top: 30%;
    font: 700 17px Roboto Condensed;
    color: #e4e4e4;
    ">Xin chào bạn<br />Mình là Hồng Hải<br />Chào Mừng bạn đến<br />Hồng Hải Blog</p>
</figcaption>
  <a href="#"></a>
</fail>




<div class="widget-hhb" style="border-radius: 15px;padding: 7px 7px 7px 7px; text-align:  center;color: #5d5d5d;">
<p style="font: 700 16px Roboto Condensed;    margin-bottom: 0.4em!important;">Hồng Hải Blog là một website chuyên chia sẻ Thủ Thuật Máy Tính, Thủ Thuật Blogger, Thủ Thuật Facebook,... và nhiều kiến thức bổ ích khác.</p>
<p style="
    font: 500 15px Roboto;
">Hiện tại có <b style="color: #bda04b;"><span id="Stats1_totalPosts">218</span></b> bài viết và <b style="color: #bda04b;"><span id="Stats1_totalComments">266</span></b> bình luận.
<br/>Liên hệ, góp ý hoặc hợp tác, quảng cáo <a style="
    font-weight: 700;
" href="/p/lien-he.html">tại đây</a>.</p>
<script type="text/javascript">
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalPosts"></script><script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=totalComments"></script>
</div>
Chúc các bạn thành công !! 

Thứ Ba, 10 tháng 4, 2018

Tạo Thanh Menu Top Cực Đẹp Cho Blogspot

Tạo Thanh Menu Top Cực Đẹp Cho Blogspot

Hôm Nay Mình Xin Chia Sẽ Thanh Menu Top Mình Đang Dùng đã responsive Cực Đẹp
Bước 1. Bạn Chỉ Cần Chèn Đoạn Code này Vào Chỗ Bạn Muốn Đặt Là Được
<style>
.wrap_pluskienthuc_menu {background:linear-gradient(50deg,#55579e 0%,#474988 35%,#55579e 0%,#55579e 30%,#55579e 100%);padding:0;width: 100%; z-index:10;-webkit-user-select: none;-moz-user-select:none;-o-user-select:none;transition:1s}
  .menu_ngang {width:1080px; margin:0 auto}
  .logo_menungang {display:inline-flex;align-items:center;height:50px;padding:5px 0}
  .logo_menungang span {padding: 11px 25px; margin: 0 10px 0 0; background: rgba(0,0,0,.12);transition:.5s}
  .logo_menungang span:hover {background-color:rgba(0,0,0,.25)}
  .logo_menungang a {color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-family: &quot;Roboto Condensed&quot;,sans-serif}
  .search_menungang {display:inline}
  .chuyenmuc_menungang {float:none;clear:both;display:inline}
  .chuyenmucmenungang {display: inline; height: 50px; position: relative; top: -3px; left: 42px}
  .chuyenmucmenungang li {list-style:none;display:inline;text-align:center}
  .chuyenmucmenungang a{color: #fff; text-decoration: none; font-size: 18px; transition: .3s; padding: 5px 15px;border:2px solid transparent;border-radius:0;font-family:&quot;Roboto Condensed&quot;,sans-serif;margin: 0; text-transform: uppercase; font-weight: 700; letter-spacing:0}
  .chuyenmucmenungang a:hover{color:white;border:2px solid;border-radius:50px}
  .chuyenmucmenungang a:focus{color:#55579e;background:#FFF;border:2px solid white;border-radius:50px}
@media screen and (max-width:1200px){
  .logo_wrap_pluskienthuc_menu{margin-left:0}
  .logo_wrap_pluskienthuc_menu span{visibility:hidden;margin:0!important}
  .wrap_pluskienthuc_menu{background:#7174a2!important}
      #pluskienthuc-popup-vt{display:none!important}
      .logo_menungang a{font-size: 25px;}
      .menu_ngang{width:68%!important}
.chuyenmuc_menungang{display:none!important}
.search_menungang{display:none!important}
}
</style>
<div class='wrap_pluskienthuc_menu'>
<div class='menu_ngang'>
<div class='logo_menungang'>
<a href='/' title='Trang chủ'><span>H</span>Hồng Hải Blog</a>
</div>
<div class='chuyenmuc_menungang'>
<div class='chuyenmucmenungang'>
<li><a href='/search/label/Thủ%20Thuật%20Windows' title='Thủ Thuật Windows'>Windows</a></li>
<li><a href='/search/label/Thủ%20Thuật%20Facebook' title='Facebook'>Facebook</a></li>
<li><a href='/search/label/Thủ%20Thuật%20Blogspot' title='Blog'>Blog</a></li>
<li><a href='/search/label/PSD%20Ảnh%20bìa' title='Ảnh Bìa'>Ảnh Bìa</a></li>
</div>
</div>
<div class='search_menungang'>
<style>#searchform{float:right;margin:0;padding:0}#searchform fieldset{padding:0;border:none;margin:0}#searchform input[type=&quot;text&quot;]{outline:0;background:rgba(0,0,0,.15) url(http://sv1.upsieutoc.com/2017/09/02/icon8aa3b.png) left no-repeat;border:none;background-size:30px 30px;background-position:97% 50%;float:left;padding:0 25px 0 15px;height:60px;margin:0;width:280px;color:#fff;letter-spacing:-.5px;font:400 16px &quot;Roboto&quot;,sans-serif;transition:.65s;border-radius:0;cursor:pointer}#searchform input:focus{outline:0;background:rgba(0,0,0,.245) url(http://sv1.upsieutoc.com/2017/09/02/icon8aa3b.png) left no-repeat;border:none;background-size:30px 30px;background-position:2% 50%;float:left;padding:0 10px 0 40px;margin:0;width:270px;color:#fff;letter-spacing:-.5px;font:400 16px &quot;Roboto&quot;,sans-serif;border-radius:0;cursor:text}#searchform ::-webkit-input-placeholder{color:#eee}</style>
<form action='/search' id='searchform' method='get' title='Tìm kiếm'>
<fieldset>
<input class='text_input' id='s' name='q' onblur='if(this.value==&apos;&apos;){this.value=&apos;Tìm kiếm thủ thuật, phần mềm,...&apos;;}' onfocus='if(this.value ==&apos;Tìm kiếm thủ thuật, phần mềm,...&apos;) {this.value=&apos;&apos;; }' placeholder='Tìm kiếm thủ thuật, phần mềm,...' type='text' value='Tìm kiếm thủ thuật, phần mềm,...'/>
</fieldset>
</form>
</div>
</div>
</div>
Bước 2. Chỉnh sửa lại sao cho phù hợp và lưu mẫu.
Chúc Các Bạn Thành Công!!

Thứ Sáu, 23 tháng 3, 2018

Các thẻ Data gọi dữ liệu cơ bản trong Blogspot

Các thẻ Data gọi dữ liệu cơ bản trong Blogspot


CẤU TRÚC KHAI BÁO CHUNG THẺ DATA BLOGGER
<data:[giá trị]/>
Ví dụ:  <data:blog.pageType/>,...

Trong phần giá trị các bạn tìm hiểu ý nghĩa bên dưới đây:
Chỉ cần thay giá trị bằng các thẻ dưới đây bạn sẽ có cấu trúc data để gọi dữ liệu
BẢNG GIÁ TRỊ VÀ Ý NGHĨA TRONG BLOGGER
1. Phần chung của toàn bộ blog
 blog.title : Hiển thị tiêu đề của blog
- blog.pageType: Kiểu trang trên blog (item, archive, index, search...-thường kèm điều kiện).
- blog.url Hiển thị : URL của trang hiện hành.
- blog.homepageURL: Hiển thị URL trang chủ blog.
- blog.pageTitle: Hiển thị tiêu đề trang hiện tại.
- blog.encoding: Áp dụng mã chuẩn cho blog (VD: UTF-8).
...
2. Phần header:
- title: Hiển thị tiêu đề blog.
- description: Hiển thị phần mô tả của blog.
...
3. Phần trong bài đăng:
- post.dateHeader: Hiển thị ngày tháng đăng bài.
- post.timestamp: Hiển thị thời gian của bài đăng
- post.title: Hiển thị tiêu đề bài đăng.
- post.id: Hiển thị ID của bài đăng.
- post.body: Hiển thị nội dung bài đăng.
- post.author: Hiển thị tên tác giả bài đăng.
- post.authorPhoto.url: Hiển thị avatar tác giả bài đăng
- post.authorUrl: Hiển thị đường dẫn mặc định tới hồ sơ của tác giả bài đăng.
- post.authorProfileUrl: Hiển thị đường dẫn tới hồ sơ của tác giả bài đăng.
- post.addCommentUrl: Hiển thị đường dẫn tới phần thêm nhận xét.
- post.firstImageUrl: Hiển thị hình ảnh đầu tiên trong bài đăng.
- data:blog.postImageThumbnail: Hiển thị hình ảnh với kích thước 72x72 px
- data:post.thumbnailUrl: Hiển thị hình ảnh thu nhỏ ngoài trang chủ
- post.url: Hiển thị url bài đăng
- post.snippet: Hiển thị mô tả ngắn của bài đăng.
...
4 Phần label:
- label.name: Hiển thị nhãn của bài đăng.
- label.url: Hiển thị đường dẫn tới trang nhãn của bài đăng.
- label.isLast: Nhãn được hiển thị cuối cùng của bài đăng (Kèm điều kiện).
...
5 Phần comment:
- comment.body: Hiển thị nội dung nhận xét.
- comment.timestamp: Hiển thị thời gian của nhận xét.
- comment.author: Hiển thị tên tác giả nhận xét.
- comment.authorUrl: Hiển thị đường dẫn tới hồ sơ tác giả nhận xét.
- comment.deleteUrl: Hiển thị liên kết để xóa nhận xét.
- post.numComments: Hiển thị số nhận xét của bài đăng
...
6 Phần widget:
- title: Hiển thị tiêu đề widget.
- content: Hiển thị nội dung widget.
Chúc Các Bạn Vui Vẻ
By toilaquantri.com

Thứ Năm, 15 tháng 2, 2018

TẠO INTRO ĐẾM NGƯỢC ĐẾN GIAO THỪA TUYỆT ĐẸP

TẠO INTRO ĐẾM NGƯỢC ĐẾN GIAO THỪA TUYỆT ĐẸP

Hello xin chào tất cả các bạn, chẳng là sắp đến giao thừa nên mình xin chia sẽ code TẠO INTRO CHÚC MỪNG NĂM MỚI & ĐẾM NGƯỢC ĐẾN GIAO THỪA TUYỆT ĐẸP .....

CÁCH THỰC HIỆN

Bước 1: Chèn đoạn mã dưới đây vào trước thẻ <body> hoặc <body .
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
#intro_homepage{position:relative;display:table;width:100%;    height: 670px;margin:0!important;padding:0!important;z-index:999;background:url(https://4.bp.blogspot.com/-pIjxBRuGU34/WkVXe1-PR3I/AAAAAAAACJw/nGqsu5RAVqA9YKi_ah6WueigPptUDerkQCLcBGAs/s1600/HinhNen2k-4k06.jpg) no-repeat center center!important;background-size:cover!important}
#intro_homepage:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage:after{content:&#39;&#39;;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 .25em;padding:0;font-family:&quot;Roboto Condensed&quot;,sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 25px; font-weight: 500; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 &#39;Josefin Sans&#39;,sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
#intro_buttondown a span{position:absolute;top:-45px;left:50%;width:22px;height:22px;margin-left:-12px;border-left:1px solid #FFF;border-bottom:1px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb05 2s infinite;animation:sdb05 2s infinite;box-sizing:border-box}
#intro_buttondown a{animation:zoomInDownn 8s}
@-webkit-keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
#intro_buttondown a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#intro_buttondown a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#intro_buttondown a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
.xem-hd{text-align:right;width:1080px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacinggg:0;font-weight:300;position:absolute;bottom:20px;right:30px;z-index:9999}
.xem-hd a{color:rgba(255,255,255,.5);animation:slideToLeft 2s}
.xem-hd a:hover{color:#fff}
</style>
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>Chúc Mừng Năm Mới 2018<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p>Đếm Ngược Đến Giao Thừa</p>
<style>acv{display:inline-block;line-height:1;padding:0px 40px 0px 0;font-size:40px}span{font-size:20px}#Ngày,#Giờ,#Phút{font-size:100px}#Ngày{color:#db4844}#Giờ{color:#f07c22}#Phút{color:#f6da74}#Giây{font-size:50px;color:#abcd58}#timer{text-align: center;padding-top:0}
</style>
    <div id='timer'>
      <acv id='Ngày'/>
      <acv id='Giờ'/>
      <acv id='Phút'/>
      <acv id='Giây'/>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
    <script>
      let timeout = null;


      function makeTimer() {
        // Edit Here
        //---- let endTime = new Date(&quot;&#39;02/14/2018 23:59:59 GMT+0700 (SE Asia Standard Time)&quot;); ----
        let endTime = new Date(&quot;&#39;02/15/2018 23:59:59 GMT+0700 (SE Asia Standard Time)&quot;);
        endTime = (Date.parse(endTime) / 1000);


        let now = new Date();
        now = (Date.parse(now) / 1000);


        let timeLeft = endTime - now,
          Ngày = Math.floor(timeLeft / 86400),
          Giờ = Math.floor((timeLeft - (Ngày * 86400)) / 3600),
          Phút = Math.floor((timeLeft - (Ngày * 86400) - (Giờ * 3600)) / 60),
          Giây = Math.floor((timeLeft - (Ngày * 86400) - (Giờ * 3600) - (Phút * 60)));


        if (Giờ === 0 &amp;&amp; Phút === 0 &amp;&amp; Giây === 0) {
          clearTimeout(timeout);
        } else {
          if (Giờ &lt; &quot;10&quot;) {
            Giờ = &quot;0&quot; + Giờ;
          }
          if (Phút &lt; &quot;10&quot;) {
            Phút = &quot;0&quot; + Phút;
          }
          if (Giây &lt; &quot;10&quot;) {
            Giây = &quot;0&quot; + Giây;
          }


          $(&quot;#Ngày&quot;).html(Ngày + &quot;<span>Ngày</span>&quot;);
          $(&quot;#Giờ&quot;).html(Giờ + &quot;<span>Giờ</span>&quot;);
          $(&quot;#Phút&quot;).html(Phút + &quot;<span>Phút</span>&quot;);
          $(&quot;#Giây&quot;).html(Giây + &quot;<span>Giây</span>&quot;);


          timeout = setTimeout(makeTimer, 1000);
        }
      }


      makeTimer();
    </script>
</div>
</div></div>
<div class='xem-hd'>
  <a href='/' target='blank' title='Xem hướng dẫn'>Xem hd <i class='fa fa-angle-right'/></a>
</div>
<section class='intro_buttondown' id='intro_buttondown'>
<a href='#continue'><span/><span style='margin-top: 10px'/><span style='margin-top: 20px'/></a>
</section>
<div class='meta_'>
</div>
</div>
<div id='continue'/>
</b:if>
Lưu Chủ Đề và thưởng thức thôi!
Đoạn màu xanh là thẻ điều kiện hiển thị ở trang chủ, bạn có thể xóa nó nếu muốn hiển thị ở các trang.
Đoạn màu đỏ là link ảnh ,bạn có thể thay ảnh khác nếu không thích ảnh đó.
Chúc Các Bạn Năm Mới Vui Vẻ ^^.

Code:BacSiWindows
Edit: Hồng Hải

Thứ Hai, 12 tháng 2, 2018

Hướng dẫn Cài Font Awesome phiên bản mới cho blogspot

Hướng dẫn Cài Font Awesome phiên bản mới cho blogspot

CÁCH THỰC HIỆN

Bước 1: Chèn đoạn mã dưới đây vào <head> nằm ở đầu trang
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//use.fontawesome.com/releases/v5.0.6/css/all.css")
//]]>
</script>
Bước 2: Để chèn icon vào blog ta tìm kiếm bằng keyword tương ứng với tên icon bạn đang muốn sử dụng
Click vào icon bất kỳ bạn sẽ có 1 đoạn mã html, bạn chỉ cần copy và chèn website của mình
Ví dụ: <i class="fab fa-facebook"></i>, thì bạn đã có một icon FB rồi.
Chúc các bạn thành công.

Thứ Bảy, 30 tháng 12, 2017

Tổng hợp các code dành cho blogspot

Tổng hợp các code dành cho blogspot

Nhằm giúp cho các bạn mới vào blogger hiểu thêm về code mình xin chia sẻ bài viết này....

1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)
 <span style="color:#339966; font:12pt Tahoma; margin-left:12px;">Nội_dung</span>
<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span> 
#339966 // Mã màu cho chữ 12pt Tahoma // Cỡ chữ và font chữ margin-left:12px // Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại.
2. Canh giữa, canh phải
<div style="text-align:center;">
Nội_dung</div>
center // Thay center = right cho canh phải hoặc = left cho căn trái
3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ
<b>Nội_dung_in_đậm</b>
<i>Nội_dung_in_nghiêng</i>
<u>Nội_dung_gạch_chân</u>
<strike>Nội_dung_chữ_bị_gạch_ngang</strike>
4. Dấu chấm vô dòng con, đánh số đầu dòng
Dấu chấm vô dòng con
<ul>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>
Đánh số đầu dòng
<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>
5. Bookmark đến một vị trí nhanh trong bài viết
<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí ">Nội_dung</a>
Lưu ý: Tên cách nhau không được dùng khoảng trắng mà phải dùng shift gạch. (VD: nhà_xinh) Tốt nhất không nên dùng chữ có dấu cho tên gán. Ví dụ: - Đến điểm A (Đến điểm A) - ... - Điểm A (Điểm A) Code trong ngoặc là chú thích cho ví dụ. Như vậy khi ta click chuột vào "Đến điểm A" thì lập tức lệnh sẽ đưa ta nhảy đến vị trí "Điểm A".
6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)
1.
<div style="text-align:center;">
<embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300"
type="application/x-shockwave-flash" scale="" play="true" loop="true"
menu="true"></embed></div>
2.
<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none"  width="400" height="400"></embed>
7. Chèn hình ảnh (image) vào bài viết
1.Code đơn giản
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/>
2. Code mở rộng
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>
Ghi_chú // Khi rê chuột lên ảnh, sẽ hiện chú thích. Mô_tả // Khi rê chuột lên ảnh, sẽ hiện chú thích. Sử dụng hai lệnh này thì khi người dùng truy cập blog chọn không hiển thị ảnh thì sẽ hiện dòng chữ này thay cho ảnh đó. align="bottom" // Vị trí ảnh so với chữ. Có thể đổi thành middle(giữa) - top(trên) - bottom(dưới). Không dùng, để mặc định theo blog chọn sẵn thì xóa nó đi.
8. Chèn link liên kết vào bài viết
<a href="LINK" target="blank">Tên_Link</a>
target="blank" // Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang đang dùng (nghĩa là trang đang dùng sẽ bị load qua trang link ta vừa click vào). Nếu người dùng có thói quen "Open new tab" thì lệnh này có hay không cũng không khác biệt.
9. Chèn ảnh chứa link
<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>
10. Chèn nhạc vào bài viết
<img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 45px; width: 300px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" />
LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3) loop='0' // Không lặp lại loop='1' // Lặp lại một lần loop='-1' // Lặp lại mãi mãi autostart="0" // Không tự play autostart="1" // Play ngay khi web tải xong
11. Chia 2 cột, 3 cột, 4 cột
<table><tbody>
<tr><td class="column_1" style="font:12px Tahoma; color:#000000; width:120px;padding:4px;" valign="top"><div class="column_1">
Nội_dung_cột_1
</div>
</td><td class="column_2" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_2">
Nội_dung_cột_2
</div>
</td></tr>
</tbody></table>
Thêm cột thì thêm trên dòng đoạn code: 
</td><td class="column_n" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_n">
Nội_dung_cột_n
</div>
12. Viền khung một nội dung trong bài viết
<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">
NỘI_DUNG
</div>
#4F4F4F 1px solid // Lần lượt là: Mã màu - Độ dày đường viền
- Loại đường viền. - solid______________
                                - dashed ----------------
                                - dotted ......................
background:#eee // Nền khung
width:400px // Bề rộng khung. Mặc định là sẽ rộng bằng khung bài viết (nếu bỏ lệnh này đi)
13. Ảnh rõ hơn khi rê chuột vào

1. Ảnh có chứa link
<a href="link_liên_kết" target="blank">
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>
</a>
2. Ảnh không chứa link
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>
opacity=0.6 và opacity=60 // Ảnh mờ trước khi rê chuột vào.
Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.
15. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh 

1. Ảnh có chứa link
<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>
2. Ảnh không chứa link
<img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH"/>
16. Tạo hiệu ứng khi rê chuột vào link liên kết

<a href="LINK"  target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>

LINK // Link liên kết
#eee // Mã màu khi rê chuột lên
TEN_LINK // Tên gán cho link liên kết
17. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)
<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>
scrolling=yes // Cho hiện thanh trượt, ngược lại không dùng thì sữa thành no
frameborder="0" // Đường viền, 0 là không viền

Ta có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://abc.html) vào bài viết đều được hết :)
18. Các loại đường viền
border: 1px #ccc solid;
Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted ..................................
19. Các kiểu định dạng chữ
text-decoration:none;
none (Không định dạng)
underline (Gạch đích)
overline (Gạch trên đầu)       
line-through (Gạch ngang chữ)
blink (Chớp chớp)
inherit 
20. Thêm các định dạng link vào class

/*Link cố định*/
a:link {
color:#3366ff;
text-decoration:none;
}
/*Link đã xem qua*/
a:visited {
color:#ccc;
text-decoration:none;
}
/*Link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}
21. Tạo bóng đổ và bo tròn 4 góc viền
/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;
/*Tạo bóng đổ 4 cạnh*/
box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;
/*Bo tròn 4 góc viền*/
border-radius:4px; 
/*Bo tròn tùy chọn: top, right, bottom, left*/
border-radius:4px 4px 4px 4px; 
22. Các loại định dạng list
... ul {list-style-type:none;}
none: Không hiển thị đánh dấu
disc: Chấm vuông
circle: Chấm tròn trắng
square: Chấm tròn đen
decimal: Kiểu số (1,2,3,4,…)
lower-alpha: Kiểu Alphabet ở dạng in thường  (a, b, c, d, e, …)
upper-alpha: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)
/*Link hình thay cho list*/ 
list-style-image:url('Link_hình');
23. Các vị trí đặt ảnh nền background
background: url(image) repeat ;
repeat: lặp ảnh
repeat-y: lặp ảnh theo chiều dọc (từ trên xuống)
repeat-x: lặp ảnh theo bề ngang (từ trái qua)
no-repeat: không lặp
top: đặt ảnh trên mép cùng
top right: đặt ảnh mép trên cùng góc phải
top left: đặt ảnh mép trên cùng góc trái
bottom: đặt ảnh mép dưới cùng
bottom left: đặt ảnh mép dưới cùng góc trái
bottom right: đặt ảnh mép dưới cùng góc phải
right: đặt ảnh bên mép phải
left: đặt ảnh bên mép trái
center: đặt ảnh ở vị trí giữa
24. Code xem địa chỉ IP, thông tin của máy truy cập blog (Có thể post vào widget bất kỳ ở trên blog)
<img src="http://www.wieistmeineip.de/ip-address">
25. Cách mã hóa code
Với ký tự < phải đổi thành <
Với ký tự > phải đổi thành >
Với ký tự & phải đổi thành &

Để post các chú thích kí tự trên lên blog được thì:

 < phải đổi thành <
    > phải đổi thành >
    & phải đổi thành &

26. Các lệnh điều kiện  
1. Điều kiện ở trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>
2. Điều kiện ở trang bài viết
<b:if cond='data:blog.pageType == "item"'>
...
</b:if>
3. Điều kiện ở trang chủ, trang nhãn
<b:if cond='data:blog.pageType == "index"'>
...
</b:if>
4. Điều kiện ở các trang lưu trữ
<b:if cond='data:blog.pageType == "archive"'>
...
</b:if>
5. Điều kiện ở các trang tĩnh
<b:if cond='data:blog.pageType == "static_page"'>
...
</b:if>
6. Điều kiện ở một trang riêng biệt nào đó
<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>
...
</b:if> 
Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại) Ví dụ: Điều kiện loại trừ trang bài viết
<b:if cond='data:blog.pageType != "item"'>
...
</b:if>
27. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng )
<!-- Lời ghi dưới mỗi bài viết -->
<b:if cond='data:blog.pageType == "item"'>
Nội_dung
</b:if>
Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..
28. Script chèn file .js vào blog
<script src='Link_File_JS' type='text/javascript'/>
29. Script chèn trực tiếp nội dung file .js vào blog
<script type='text/javascript'>
//<![CDATA[
Nội_dung_file_js
//]]>
</script>
30. Thêm chữ kiểu vào comment , Link
Bạn có thể sử dụng một số thẻ HTML như

(cách dòng): <br/>
<textarea cols='48' rows='4'>
» Chữ in đậm: <b>Nội_dung_chữ_in_đậm</b>
» Chữ in nghiêng: <i>Nội_dung_chữ_in_nghiêng</i>
» Chèn link liên kết: <a href='Link'>Tên_link</a>
» Chèn hình ảnh: [img]Link_hình[/img]

Chúc các bạn thành công
Nguồn: internet

Thứ Bảy, 18 tháng 11, 2017

Tổng hợp các thẻ điều kiện dùng trong Blogspot

Tổng hợp các thẻ điều kiện dùng trong Blogspot

Xin chào các bạn hôm nay mình xin share các thẻ điều kiện dùng cho blog, mình thì cũng đã từng dùng rồi nên hôm nay share cho các bạn...

CÁC THẺ ĐIỀU KIỆN 

0.Thẻ điều kiện ẩn hiển thị trên mobile:
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> Nội dung tùy chỉnh </b:if>
0,0.Thẻ điều kiện hiển thị trên mobile
<b:if cond='data:blog.isMobileRequest == "true"'> Nội dung tùy chỉnh </b:if>
1. Thẻ điều kiện cho trang chủ, trang search label, trang archive:
<b:if cond='data:blog.pageType == "index"'> Nội dung tùy chỉnh </b:if>
2. Thẻ điều kiện cho bài viết.
<b:if cond='data:blog.pageType == "item"'> Nội dung tùy chỉnh </b:if>
3. Thẻ điều kiện cho trang tĩnh:
<b:if cond='data:blog.pageType == "static_page"'> Nội dung tùy chỉnh </b:if>
4. Thẻ điều kiện cho trang lưu trữ:
<b:if cond='data:blog.pageType == "archive"'> Nội dung tùy chỉnh </b:if>
5. Thẻ điều kiện cho trang chủ:
<b:if cond='data:blog.url == data:blog.homepageUrl'> Nội dung tùy chỉnh </b:if>
6. Thẻ điều kiện cho URL nhất định:
<b:if cond='data:blog.url == "URL nhất định"'> Nội dung tùy chỉnh </b:if>
7. Thẻ điều kiện cho Page và Post: 
<b:if cond='data:blog.url == data:post.url'> Nội dung tùy chỉnh </b:if>
8. Thẻ điều kiện cho tất cả Label:
<b:if cond='data:blog.searchLabel'> Nội dung tùy chỉnh </b:if>
9. Thẻ điều kiện cho Label nhất định
<b:if cond='data:blog.searchLabel == &quot;Tên nhãn&quot;'> Nội dung tùy chỉnh </b:if>
10. Hiển thị nội dung cho bài viết đầu tiên tại trang chủ
<b:if cond='data:post.isFirstPost'> Nội dung tùy chỉnh </b:if>
11. Thẻ điều kiện cho mobile:
<b:if cond='data:blog.pageType == "data:blog.isMobile"'> Nội dung tùy chỉnh </b:if>
12. Thẻ điều kiện cho trang báo lỗi 404
<b:if cond='data:blog.pageType == "error_page"'> Nội dung tùy chỉnh </b:if>
Còn khá nhiều điều thú vị mà bạn có thể khám phá thêm từ các thẻ điều kiện này.
Chúc các bạn vui vẻ!!!!HiHi
Theo: Starcuongit.com

Thứ Bảy, 4 tháng 11, 2017

TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB

TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB

Chào Các Bạn Thì Hôm Nay Mình Xin Share Cách TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB ...

CÁCH THỰC HIỆN

Bước 1: Vào Blogger ->  Chủ Đề -> Chỉnh Sửa HTML
Bước 2: Các Bạn Chèn Đoạn Code Dưới Này Trước Thẻ ]]></b:skin>
.tabs{background:#fff;width:100%;max-width:100%;float:none;list-style:none;padding:0;margin:auto;display:table;overflow:hidden}
.tabs-st{background:#eee;display:block;height:45px}
.tabs:after{content:&#39;&#39;;display:table;clear:both}
.tabs input[type=radio]{display:none}
.tabs label{display:table-cell;float:left;width:25%;color:#555;font-size:19px;font-weight:400;text-align:center;cursor:pointer;transition:all .3s;height:45px;line-height:45px;text-transform:uppercase;margin-right:10px;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)}
.more-tabs{width:21.1%;float:right;height:45px;margin:-45px 0 0;line-height:45px;font-size:25px;text-align:center;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)}
.more-tabs a{color:#555}
.more-tabs a:hover{color:#52537d}
.tabs label span{display:inline-block}
.tabs label i{margin-right: 5px;height:45px;line-height:45px}
.tabs label:hover{color:#52537d}
.tabs label:focus{color:#fff}
.tab-content{display:none;width:100%;float:left}
.tab-content *{-webkit-animation:showx .5s ease-in-out;-moz-animation:showx .5s ease-in-out;animation:showx .5s ease-in-out}
.tabs [id^=&quot;tab&quot;]:checked + label{color:#fff;background:#52537d}
#tab1:checked ~ #tab-content1,#tab2:checked ~ #tab-content2,#tab3:checked ~ #tab-content3{display:block;background:#eee}
@media screen and (max-width:768px){
.tabs label{width:23.4%}
.tabs label span{display:none}
}
.widget-home img{float:left;clear:both;object-fit:cover;transition:.33s;margin:0 0 6px 0}
.widget-home img:hover{-webkit-filter:brightness(80%)}
.widget-home{overflow:hidden}
#widget-00 .featuredPost a:hover {color:rgba(234, 25, 25, 0.77)}
#widget-0 .featuredPost a:hover {color:rgb(255, 153, 0)}
.widget-home a{color:#555;text-decoration:none;line-height: normal;}
.widget-home a:hover{color:#0087be}
.widget-homewrap{margin-top:10px;overflow:hidden}
Bước 3: Đặt đoạn Javascript dưới đây trên </head>
<script type='text/javascript'>//<![CDATA[ // blogspot function removeHtmlTag(t,e){for(var s=t.split("<"),i=0;i<s.length;i++)-1!=s[i].indexOf(">")&&(s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length));return s=s.join(""),s=s.substring(0,e-1)}function showrecentposts1(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts5<=t.feed.entry.length?maxpost=numposts1:maxpost=t.feed.entry.length;for(var e=0;e<maxpost;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,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[e]=d);for(var g=[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]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}if(0==e){var u='<div class="widgetsplitone_left"><a href="'+r+'"><img width="100%" height="260px" class="imagefeatured wp-post-image" src="'+img[e]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+r+'">'+l+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(m,summaryPost)+'...</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';document.write(u)}if(e>0&&e<maxpost){var u='<a href="'+r+'"><img class="imagewidgetthumb wp-post-image" height="80" src="'+img[e]+'" width="120"/></a><div class="featuredPost"><a href="'+r+'">'+l+"</a></div>";document.write(u)}j++}document.write("</div>")}function showrecentposts3(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var e=0;10>e;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,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[e]=d);for(var g=[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]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}var u='<li><a href="'+r+'">'+l+"</a></li>";document.write(u),j++}}function showrecentposts6(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var e=0;e<numposts;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,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[e]=d);for(var g=[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]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}var u='<a href="'+r+'"><img width="266" height="139" class="imagefeatured wp-post-image" src="'+img[e]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+r+'">'+l+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(m,summaryPost)+'...</p></div><div class="clear"></div>';document.write(u),j++}}imgr=new Array,imgr[0]="#",showRandomImg=!0,aBold=!0,summaryPost=170,summaryPost1=80,summaryTitle=15,numposts=1,numposts1=5,numposts2=4,numposts3=6,numposts4=1,numposts5=6,numposts6=10,numposts7=10,numposts8=6;eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('K(x(p,a,c,k,e,d){e=x(c){u c};A(!\'\'.C(/^/,J)){D(c--){d[c]=k[c]||c}k=[x(e){u d[e]}];e=x(){u\'\\\\w+\'};c=1};D(c--){A(k[c]){p=p.C(M I(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}u p32|34|||||||||||35|36|56|http|www|title|31|33|58|113|103|102|90|84|105|100|98|97|96|99|52|94|87|88|89|visible|93|95|location|91'.split('|'))) //]]></script>
Bước 4: Chèn đoạn code này dưới thẻ <b:includable id='main' var='top'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='tabs'>
<div class='tabs-st'>
<input checked='' id='tab1' name='tabs' type='radio'/>
<label for='tab1'><i class='fa fa-picture-o'/><span>ẢNH BÌA</span>
</label>
<input id='tab2' name='tabs' type='radio'/>
<label for='tab2'><i class='fa fa-facebook-official'/><span>Facebook</span>
</label>
<input id='tab3' name='tabs' type='radio'/>
<label for='tab3'><i class='fa fa-html5'/><span>BLOGSPOT</span>
</label>
<!-- Tab 1 -->
<div class='tab-content' id='tab-content1'>
<span class='more-tabs'><a href='/search/label/PSD?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/PSD?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</div>
</div>
</div>
<!-- Tab 2 -->
<div class='tab-content' id='tab-content2'>
<span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Facebook?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Facebook?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</div>
</div>
</div>
<!-- Tab 3 -->
<div class='tab-content' id='tab-content3'>
<span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Blogspot' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Blogspot?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</div>
</div>
</div>
</div>
</div>
</b:if>
Tùy biến lại sao cho phù hợp với blog của bạn
 Chúc các bạn thành công!!!

Thứ Bảy, 21 tháng 10, 2017

Tạo Khung Tác Giả Cực Đẹp Cho BLogspot

Tạo Khung Tác Giả Cực Đẹp Cho BLogspot


CÁCH THỰC HIỆN

Các bạn chỉ cần chèn đoạn code hiển thị khung tác giả này vào vị trí bạn thích là được...
<style>
/* Author */
#author-blog2{width:auto;height:209px;background:#2a2b67;padding:0px 10px 10px 10px}
.author-box2{background:#3d2974;box-shadow:0 2px 3px 0 rgba(0,0,0,0.1);/*width:100%;*/height:auto;/*border:1px solid #eee;*/;border-radius:17px;margin:10px 0 0px;padding:20px;position:relative;float:left;font-family:'Quicksand',sans-serif;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;
user-select:none}
.author2 img{padding:0;height:130px;width:130px;float:left;margin:0;border-radius:100%;border:14px solid #2e2869;margin-left:10px}
.name-author2{font-size:18px;color:#fff}
.author-info2{float:left;padding-left:3%;width:72%}
.author-info2 a{color:#fff}
.author-info2 span{font-size:14px;font-weight:500;color:#c0bfcc;font-family:'Quicksand',sans-serif}
p.author-about2{margin:0;padding:10px 0 10px;color:#fff!important;font-size:15px;font-weight:normal}
li.list-tom{list-style:none}
li.list-tom a{color:#dddae6;margin-right:20px}
li.list-tom i{color:#dddae6;margin-right:3px}
</style>
<div id='author-blog2'>
<div class='author-box2'>
<div class='author2 img'>
<a><img alt='Hồng Hải Blog' oncontextmenu='return false' src='https://i.pinimg.com/564x/71/87/be/7187be96db3391577e4312b27fe28cbd.jpg' title='Admin'/></a>
</div>
<div class='author-info2'>
<div class='name-author2'>
Hồng Hải
</div>
<span class=''>Designer Developer</span>
<p class='author-about2'>Chào các bạn mình là Hải - một cậu học sinh, với đam mê và sở thích, mình lập nên blog này để lưu trữ những kiến thức, đồng thời cũng chia sẻ những gì mình biết và sưu tầm được tới bạn đọc.</p>
<li class='list-tom'>
<a title='Lượt xem'>
<i aria-hidden='true' class='fa fa-eye'></i> ..</a>
<a title='Lượt yêu thích'>
<i aria-hidden='true' class='fa fa-heart' style='color:#ed1b73'></i>
<script type='text/javascript'>document.write(Math.floor((Math.random()*500)+(Math.random()*500)+100));</script>
</a>
<a title='Lượt bình luận'>
<i aria-hidden='true' class='fa fa-comment'></i>
<script style="text/javascript">
function numberOfComments(json) {
document.write('<left> <b>' + json.feed.openSearch$totalResults.$t +
'</b></center>');}</script>
<script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
</a></li></div>
</div>
</div>
<div class='clear'></div>
Các bạn tùy biến sao cho phù hợp với blog của bạn.
Chúc Các Bạn Thành Công
view-source:starbinhit.net