Hướng dẫn cách tạo bài đăng nổi bật trên blogspot
Hướng dẫn cách tạo bài đăng nổi bật trên blogspot
1. Nhập Blogger
2. Mẫu> Chỉnh sửa Html
3. Nhập css bên dưới ngay phía trên mã<head>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.box-tag a{padding:2px 8px;background-color:#3cbd1b;color:#fff!important;font-size:11px;z-index:999;font-weight:400;margin-bottom:5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.2)}.recent-slider .carousel{position:relative;margin:30px 0 25px!important;padding:0;overflow:visible;height:auto;display:block;clear:both}.recent-slider .carousel h2{display:none}.main-carousel{overflow:hidden}.carousel-abdoutech{padding:0!important;position:relative;overflow:hidden;list-style:none}.carousel-thumb{width:100%;height:380px;position:relative;display:block}.carousel-abdoutech .box-image{width:100%;height:100%;position:relative;display:block}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixgu6jL79g5heAyfnI5f_gjIOOjf4QUny9g44rly3CzKe7gLBGS2C1OtQIZfDDP6ghsWLS5P8z80__x1PY1NIQNe9TsI2Le8RH4gGpwwY03fQZVz8_iSvoEqGf0afPhJx6-SA60X7r-4qQ/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-content,.featured .post-panel{transition:all .35s;box-sizing:border-box}.boxes ul li:hover .box-image:after,.bx-first:hover .bf-thumb:after,.carousel-abdoutech:hover .box-image:after{opacity:.2}.carousel-content{position:absolute;bottom:0;background:rgba(0,0,0,.31);width:100%;z-index:2;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s;padding:15px;text-align:right}.main-carousel .owl-dots,.owl-carousel .owl-item:hover .carousel-content{bottom:10px}.carousel-abdoutech .recent-title{margin:10px 0 3px;font-size:18px;font-weight:600}.carousel-abdoutech .recent-title a{color:#fff;display:inline-block;line-height:1.2em;text-shadow:0 .5px .5px rgba(34,34,34,.3)}.carousel-abdoutech .recent-date{color:#ccc}.carousel-tag a{padding:2px 8px;background-color:red;color:#fff!important;font-size:11px;z-index:999;font-weight:400;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.3)}.main-carousel .owl-next,.main-carousel .owl-prev{margin-top:0;font-size:25px;line-height:40px;position:absolute;top:170px;width:47px;height:47px;cursor:pointer;z-index:999}.main-carousel .owl-prev{right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi7yjoBxJpGlaYxPkbKGfLB-jqceW9i9nahr3u3GoWdoUxeD6cBSYv40wpYJZJQ6mDzJfNYzu8vJBeyw1m3St8P5zQr49s9dv6yrbKZAn1HCsaovta5ydmsf3poYx862Fww9lZ2mcrs-s7/s1600/next.png) 100% 0 no-repeat}.main-carousel:hover .owl-prev{right:0}.main-carousel .owl-next{left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi7yjoBxJpGlaYxPkbKGfLB-jqceW9i9nahr3u3GoWdoUxeD6cBSYv40wpYJZJQ6mDzJfNYzu8vJBeyw1m3St8P5zQr49s9dv6yrbKZAn1HCsaovta5ydmsf3poYx862Fww9lZ2mcrs-s7/s1600/next.png) no-repeat}.main-carousel:hover .owl-next{left:-1px}.recent-date{color:#bdbdbd;font-size:12px;font-weight:400}.featured-date:before,.recent-date:before{content:'\f017';font-family:fontawesome;margin-left:5px}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{display:none;width:100%;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:right;-webkit-backface-visibility:visible;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-dots,.owl-next,.owl-prev{position:absolute;text-align:center}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-next,.owl-prev{top:0;color:#1c1c1c;background-color:rgba(255,255,255,.8);font-family:FontAwesome;z-index:1;display:block;cursor:pointer;padding:0;overflow:hidden}.owl-prev{right:0}.owl-next{left:0}.owl-dots{bottom:1px;width:33.33%;right:0;left:0;margin:auto}.star_rating{position:absolute;top:0;left:0;z-index:2;font-size:14px;padding:5px 10px;background:rgba(35,40,45,.6)}li.carousel-abdoutech .star_rating .fa:nth-child(1){color:red}li.carousel-abdoutech .star_rating .fa:nth-child(2){color:#f50}li.carousel-abdoutech .star_rating .fa:nth-child(3){color:#fa0}li.carousel-abdoutech .star_rating .fa:nth-child(4){color:#3cbd1b}li.carousel-abdoutech .star_rating .fa:nth-child(5){color:#127adb}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixgu6jL79g5heAyfnI5f_gjIOOjf4QUny9g44rly3CzKe7gLBGS2C1OtQIZfDDP6ghsWLS5P8z80__x1PY1NIQNe9TsI2Le8RH4gGpwwY03fQZVz8_iSvoEqGf0afPhJx6-SA60X7r-4qQ/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-abdoutech .box-image:after{content:'';opacity:.8;transition:all .35s;right:0;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s}.carousel-abdoutech:hover .box-image:after{opacity:.2}
</style>
<link href='//raw.githack.com/arlinadsign/saflink/master/owl.carousel.css' rel='stylesheet'/>
<script data-cfasync='false' src='//raw.githack.com/arlinadsign/saflink/master/OwlCarousel.js' type='text/javascript'/>
</b:if>4. Tiếp theo Lưu mã bên dưới ở ngay bên trên mã </ body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
var MONTH_FORMAT= ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2E3hlbNsQ6buO58ZaqsZD1BRWflyal4-kuNkMFgblqziVE9CAf1-0gPEXyVSvqIf7kE1NxFz3jABGA8YPcyTKZqDzVTOfCyXXCxfitz12imaSbg6_k1y2Qrv4ton4fS-4GbIVuxHyrig/s1600-r/nth.png";
var CAROUSEL_NUM = 6;
var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'https://rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider_star1.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript);
//]]>
</script>
</b:if>var CAROUSEL_NUM = 6;
5. Tiếp theo, lưu mã bên dưới một cách tự do, bất cứ nơi nào ... nhưng mình đề xuất mã đó dưới <body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='recent-slider' id='recent-slider'>
<div class='container'>
<b:section class='box-sec' id='box-sec' showaddelement='yes'>
<b:widget id='HTML655' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<span id="carousel" data-label="Tips Blogger"></span>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'>
<data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<!--b:include name='quickedit'/-->
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</b:if>Sau đó nhấn Lưu. Chúc các bạn thành công, hy vọng cách tạo một bài đăng nổi bật trên blogspot sẽ giúp ích