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

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>

Hướng dẫn cách dùng :v

 vậy là xong.

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

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!!

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!!

Share Bộ giáo trình thiết kế đồ họa cực khủng của FPT Polytechnic

Hôm nay mình xin chia sẻ cho các bạn một bộ giáo trình thiết kế đồ họa mình sưu tầm từ j2team.

Gồm có các môn:

• Photoshop, Illustrator, Luật xa gần, Nhiếp ảnh và xử lý hình ảnh, InDesign, Thiết kế bao bìa,   Typographic, Màu sắc, Kĩ thuật in, Thiết kế layout.

• Thiết kế đồ họa động với 3D Studio Max, Thiết kế nhân vật 3d max, Thiết kế tạo hình nhân vật với 3D Max, Thiết kế phối cảnh 3D, Hoat hình 3D.

• Premiere Pro, After Effects, Marketing 2052, Marketing 2053, Xây dưng thương hiệu.

DOWNLOAD: 

Lưu ý:
• Những thư mục trống được tạo trong mỗi giáo trình là thư mục mẫu. Lý thuyết có thể là bài slide, và có thể là video -chứ không phải là cả hai!

Nguồn: J2team

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 !! 

Ngắm Chùm Ảnh Của Cô Hotgirl Trân Trần

Sống cho bản thân, chứ không phải sống để làm vừa lòng thiên hạ...
Link: https://www.facebook.com/Tran.tran1996