T?O WIDGET B�I VI?T NG?U NHI�N (RANDOM POSTS) CH? V?I 1 B�?C KH�NG C?N CSS V� JAVASCRIPT - Admin �?c Blog ??

Ch�o c�c b?n. H�m nay Star C�?ng IT s? h�?ng d?n c�c b?n t?o Widget Random Posts. Kh�c v?i c�c widget Random posts kh�c m� Star C�?ng c?ng nh� c�c blog kh�c t?ng chia s? th? h�m nay, m?nh xin ��?c chia s? Widget B�i vi?t ng?u nhi�n kh�ng c?n �?n CSS hay Javascipt. Widget n�y s? gi�p blog b?n load nhanh h�n v� lo?i b? Javascript n?ng n? ! B?t �?u th�i !

H?nh Minh H?a

XEM DEMO
Nh� demo, link m� c�c b?n th?y l� http://cdn.linkthuthuat.com/p/random-post.html?label=&url=http://starcuongit.com. V?y c�c b?n th? thay http://starcuongit.com th�nh url blog b?n xem sao !
C� m?t s? b?n �? hi?u ! V?y �? th�m widget random posts n�y c�c b?n ch? vi?c ch�n �o?n code d�?i ��y v�o n�i mu?n hi?n th?:

<iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="300" hspace="0" id="ads_by_starcuongit" marginheight="0" marginwidth="0" name="ads_by_starcuongit" scrolling="no" src="http://cdn.linkthuthuat.com/p/random-post.html?label=&url=http://starcuongit.com" vspace="0" width="100%"></iframe>

? ph?n t� �?m 100% v� 300 (chi?u r?ng v� chi?u cao), c�c b?n thay l?i cho ph� h?p v?i blog m?nh nh� !
Ri�ng v?i ph?n in url (ph?n in �?) th? �?i v?i blog c� �u�i m?c �?nh l� .blogspot.com th? c�c b?n ch? c?n thay link tr�n th�nh url blog b?n. Nh�ng ri�ng �?i v?i blog c� domain ri�ng th? thay v? th�m http://www.tenmiencuaban.com th? b?n h?y th�m l� http://tenmiencuaban.com (t?c l� b? WWW).

Ch�c c�c b?n th�nh c�ng !

T?O SIDE LABEL LANDING M�?T, TUY?T �?P - Admin �?c Blog ??

Ch�o c�c b?n, n?y c� gh� th�m BSW th? c� th?y v?a thay c�i side labal kh� l� �?p, m?nh th?y m�?t, �?p n�n mang v? share cho anh em :3

H?nh Minh H?a

DEMO

C�C B�?C TH?C HI?N

B�?c 1: Ch�n CSS Sau v�o tr�?c ]]></b:skin>

/* CSS header-page */
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}
.container:before,.container:after{content:" ";display:table;}
.container:after{clear:both;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
@font-face{font-family:"symbol";src:url(//static.edumall.vn/assets/symbol/fonts/symbol-9ebb41d8d8ad0e1c1a9a1f6e5c237ea33bedac81d42f7a13140c55246a3dbc03.eot);src:url(//static.edumall.vn/assets/symbol/fonts/symbol-9ebb41d8d8ad0e1c1a9a1f6e5c237ea33bedac81d42f7a13140c55246a3dbc03.eot?#iefix) format("embedded-opentype"),url(//static.edumall.vn/assets/symbol/fonts/symbol-d98d2f02e55f50eb744e41ea85f41b171f7bf4a1ceeabc086e658db18dc9c1f8.woff) format("woff"),url(//static.edumall.vn/assets/symbol/fonts/symbol-136c1aa370ad46c6239c9961a5fdc2f1e689bb98fa35f42d82ced3b801bdafac.ttf) format("truetype"),url(//static.edumall.vn/assets/symbol/fonts/symbol-7babf0a1f77985ffdb221ad483115f0ea434ba76c7e982c2a35086257f4da6e0.svg#symbol) format("svg");font-weight:normal;font-style:normal;}
[data-icon]:before{font-family:"symbol"!important;content:attr(data-icon);font-style:normal!important;font-weight:normal!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"symbol"!important;font-style:normal!important;font-weight:normal!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.icon-all:before{content:"\61";}
.icon-bubble:before{content:"\62";}
.icon-business-man:before{content:"\63";}
.icon-circle-plus:before{content:"\64";}
.icon-code:before{content:"\65";}
.icon-cradle:before{content:"\66";}
.icon-money:before{content:"\67";}
.icon-monitor:before{content:"\68";}
.icon-pallete:before{content:"\69";}
.icon-speaker:before{content:"\6a";}
.icon-star:before{content:"\6b";}
.icon-flame:before{content:"\6c";}
.icon-clock:before{content:"\6d";}
.icon-star-outline-2:before{content:"\6e";}
.icon-play:before{content:"\6f";}
.icon-file:before{content:"\70";}
.icon-open-book:before{content:"\71";}
.icon-chart:before{content:"\72";}
.icon-clock-fill:before{content:"\73";}
.icon-layers:before{content:"\74";}
.icon-shopping:before{content:"\75";}
.icon-done:before{content:"\76";}
.icon-error:before{content:"\77";}
.icon-close:before{content:"\78";}
.icon-three-dots:before{content:"\79";}
.icon-nav-left:before{content:"\7a";}
.icon-nav-right:before{content:"\41";}
.icon-filter:before{content:"\42";}
.icon-close-round:before{content:"\43";}
.icon-download:before{content:"\44";}
.icon-carret-right-bold:before{content:"\45";}
.icon-bubble-2:before{content:"\46";}
.icon-power:before{content:"\47";}
.icon-carret-down:before{content:"\48";}
.icon-pack:before{content:"\49";}
.icon-saved:before{content:"\4a";}
.icon-shipping:before{content:"\4b";}
.icon-checked:before{content:"\4c";}
.col-lg-4,.col-lg-8,.col-md-10{position:relative;min-height:1px;padding-left:15px;padding-right:15px;}
.col-lg-4{width:30%!important;float:left}
.col-lg-8,.col-md-10{width:65%!important;}
@media (min-width:992px){.col-lg-8,.col-md-10{width:83.33333333%;float:left;}}
@media (max-width:767px){.hidden-xs{display:none!important;}}
@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important;}}
@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important;}}
.color-1,.header-category .category:nth-child(1)::before{background-color:#44C0D9!important;}
.color-2,.header-category .category:nth-child(2)::before{background-color:#E7428E!important;}
.color-3,.header-category .category:nth-child(3)::before{background-color:#FF7903!important;}
.color-4,.header-category .category:nth-child(4)::before{background-color:#8958E9!important;}
.color-5,.header-category .category:nth-child(5)::before{background-color:#4C9E3B!important;}
.color-6,.header-category .category:nth-child(6)::before{background-color:#FFB10F!important;}
.color-7,.header-category .category:nth-child(7)::before{background-color:#F24733!important;}
.color-8,.header-category .category:nth-child(8)::before{background-color:#17B99F!important;}
#header-page .header-category .header-category-box .category{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;}
#header-page .header-category .header-category-box .category:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
#header-page .header-category .header-category-box .category:hover,#header-page .header-category .header-category-box .category:focus,#header-page .header-category .header-category-box .category:active{color:white;}
#header-page .header-category .header-category-box .category:hover:before,#header-page .header-category .header-category-box .category:focus:before,#header-page .header-category .header-category-box .category:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);}
#header-page{position:relative;background-image:linear-gradient(30deg,rgba(27,57,99,0.9) 20%,rgba(179,41,46,0.9) 87%),url("//static.edumall.vn/assets/edumall_v3/bg-header-2b2547de83ec3b62c43b8e5f101c957d0ba19cfde26946b4442917cfdf3aa2e8.jpg");background-size:cover;background-position:center center;color:white;}
#header-page .container{position:relative;}
@media only screen and (min-width:1200px){#header-page{padding-top:75px;padding-bottom:75px;}}
@media only screen and (max-width:1199px){#header-page{padding-top:20px;padding-bottom:30px;margin-bottom:20px;}}
#header-page .header-hook{padding-top:55px;}
#header-page .header-hook .header-hook-box p{margin-bottom:0;}
#header-page .header-hook .header-hook-box hr{width:168px;border-top:solid 4px #D41701;margin:15px 0;}
#header-page .header-category{margin-left:-10px;margin-right:-10px;}
#header-page .header-category .header-category-box{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;}
#header-page .header-category .header-category-box .category{width:170px;height:100px;margin-bottom:20px;text-align:center;padding:10px;position:relative;z-index:1;cursor:pointer;background-color:rgba(0,0,0,0.1);}
@media only screen and (min-width:1470px){#header-page .header-category .header-category-box .category{width:210px;height:110px;}}
@media only screen and (max-width:350px){#header-page .header-category .header-category-box .category{width:140px;height:85px;}#header-page .header-category .header-category-box .category .symbol{font-size:30px;}}
#header-page .header-category .header-category-box .category .symbol{font-size:40px;margin:0;}
#header-page .header-category .header-category-box .category h4{font-size:14px;font-weight:400;margin:0;}
#header-page .header-category .header-category-box .category a{color:white;}
#header-page .header-category .header-category-box .category a:hove{color:white;text-decoration:none;}

B�?c 2: Ch�n V�o N�i m� b?n mu?n �?t, th�?ng l� tr�n b�i vi?t ho?c d�?i menu ch?ng h?n

 <header id="header-page" style="font-family: Roboto;"><div class="content"><div class="container"><div class="row"><div class="col-lg-4 hidden-md hidden-sm hidden-xs"><br /><section class="header-hook"><div class="header-hook-box">H?y c�ng b?t �?u  <br />kh�m ph� b?ng vi?c gi�p ch�ng t�i<br /><br /><h1>HI?U V? B?N H�N</h1><hr />B?n quan t�m t?i l?nh v?c n�o?</div></section></div><div class="col-lg-8 col-md-10"><br /><section class="header-category"><div class="header-category-box"><br /><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blogger?&amp;max-results=12"><div class="symbol"><span class="icon icon-code"></span></div><h4 class="category-title">Th? Thu?t Blogger</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/SEO%20Blogspot?&amp;max-results=12"><div class="symbol"><span class="icon icon-pallete"></span></div><h4 class="category-title">SEO Blogspot</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Template%20Blogger?&amp;max-results=12"><div class="symbol"><span class="icon icon-cradle"></span></div><h4 class="category-title">Template Blogger</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Cover%20Facebook?&amp;max-results=12"><div class="symbol"><span class="icon icon-business-man"></span></div><h4 class="category-title">Cover Facebook</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Ki%E1%BA%BFm%20Ti%E1%BB%81n?&amp;max-results=12"><div class="symbol"><span class="icon icon-money"></span></div><h4 class="category-title">Th? Thu?t Ki?m Ti?n</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Facebook?&amp;max-results=12"><div class="symbol"><span class="icon icon-bubble"></span></div><h4 class="category-title">Th? Thu?t Facebook</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Internet?&amp;max-results=12"><div class="symbol"><span class="icon icon-speaker"></span></div><h4 class="category-title">Th? Thu?t Internet</h4></a></article><article class="category"><a href="https://www.blogger.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Windows?&amp;max-results=12"><div class="symbol"><span class="icon icon-monitor"></span></div><h4 class="category-title">Th? Thu?t Windows</h4></a></article></div></section></div></div></div></div></header>

B�?c 3: L�u Template v� t?n h�?ng
Demo cho anh em n�o v?n ch�a h?nh dung ra ��?c

H?nh Minh H?a

L?I K?T

Nh� v?y l� m?nh v?a h�?ng d?n xong cho c�c b?n c�ch T?o side Label Landing M�?t, Tuy?t �?p r?i, n?u c�c b?n th?y hay �?ng qu�n t?ng m?nh 1 share l�m �?ng l?c ho?c n?u c� th?c m?c h?y �? l?i comment b�n d�?i, v� b�y gi? xin ch�o v� h?n g?p l?i :3

Ch�c c�c b?n th�nh c�ng !

view-source: Bacsiwindows

T?O SLIDE CHUY�N M?C TUY?T �?P (STYLE 2) - Admin �?c Blog ??

Ch�o c�c b?n, trong b�i tr�?c m?nh c� h�?ng d?n c�c b?n t?o Slide Label kh� l� �?p l?y t? b�n BSW, trong h�m nay m?nh l�m ti?p style 2, hi?u ?ng tr�?t r?t l� ng?u lu�n :))

DEMO

C�C B�?C TH?C HI?N

B�?c 1: Ch�n �o?n Code b�n d�?i v�o tr�?c ]]></b:skin>

/* Chuy�n m?c home */
.chuyenmuc   { background: #fff;
    padding: 25px 0;
}
.chuyenmuc-home{
 width: 100%;
 max-width: 1200px;
 height: 250px;
 overflow: hidden;
 margin:auto;
}
.chuyenmuc-home ul{
 width: 100%;
 display: table;
 table-layout: fixed;
 margin: 0;
 padding: 0;
}
.chuyenmuc-home ul li{
 display: table-cell;
 vertical-align: bottom;
 position: relative;
 width: 16.666%;
 height: 250px;
 background-repeat: no-repeat;
 background-position: center center;
 transition: all 500ms ease;
}
.chuyenmuc-home ul li div{
 display: block;
 overflow: hidden;
 width: 100%;
}
.chuyenmuc-home ul li div a{
 display: block;
 height: 250px;
 width: 100%;
 position: relative;
 z-index: 3;
 vertical-align: bottom:
 padding: 15px 20px;
 box-sizing: border-box;
 color: #fff;
 text-decoration: none;
 transition: all 200ms ease;
}
.chuyenmuc-home ul li div a *{
 opacity: 0;
 margin: 0;
 width: 100%;
 text-overflow: ellipsis;
 position: relative;
 z-index: 5;
 white-space: nowrap;
 overflow: hidden;
 -webkit-transform: translateX(-20px);
 transform: translateX(-20px);
 -webkit-transition: all 400ms ease;
 transition: all 400ms ease;
}
.chuyenmuc-home ul li div a h2{
 text-overflow: clip;
 font-size: 24px;
 text-transform: uppercase;
 margin-bottom: 2px;
 top: 160px;
 margin-left: 20px;
}
.chuyenmuc-home ul li div a p{
 top: 160px;
 font-size: 16px;
 margin-left: 20px;
}
.chuyenmuc-home ul li:nth-child(1){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEiKOPRd_KhtoF7VjW5j4zOImylyd_PLdiz0SSz_TXsnW0rNX-yYYjdD4z3Ipa-8RSkgs0suqmHWykOYpfJxuGwQW6a1GGnTvndgIsdwyTHkvTDFn3WcnmECoAwKew2r=s0-d");
}
.chuyenmuc-home ul li:nth-child(2){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEjlZYh0D3lyz83OKHE4z4OPE77yJVQfjAxVlG3RC7F-xZKz7D-5EZI7v9qzyFuNF3gvnC9kRysrYtmVMRT3RYF9UUJQXzMfT26JU55nNA5CBM_-SzEPM4D5ty0rhVmL=s0-d")
}
.chuyenmuc-home ul li:nth-child(3){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEhimk8BP3bu4UmtwoX9zPqeOqopb0jNFhmPAdBcaJyvHolTg3wbUo-ba7JokXLStn9kJOui1S5Y1lYj7zqn2jx8Mx1GAR9FtKlb-G5K9J6yMFr9Vq8kybvhdM6zIQsf=s0-d");
}
.chuyenmuc-home ul li:nth-child(4){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEilAmZTuEFtvi3jB3OatN49ZWUbM8Y0mL5oyFsX7fzNp6m3Ki0FlXYnW-nx6hxPLr9kqpfvUrmn6YF9UMsME0CW1lkv8F-5C8tHgxfA3xG-pKG-iDyYod0L13Kc8sP6=s0-d");
}
.chuyenmuc-home ul li:nth-child(5){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEg7TWh4QbHPiZyrBswsXuQ04qyCr9ACidKAKGBRuIcOPppGWiYV6rBC0tkJr1C7N-VBWqFYZkGKJqsQ7zah5SVi0x1klsHEY_mTpzkThdiMTbfNKdIyU8ow3-WGPtqA=s0-d");
}
.chuyenmuc-home ul:hover li{
 width: 8%;
}
.chuyenmuc-home ul:hover li:hover{
 width: 40%;
}
.chuyenmuc-home ul:hover li:hover a{
 background: rgba(0, 0, 0, 0.4);
}
.chuyenmuc-home ul:hover li:hover a *{
 opacity: 1;
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

B�?c 2: Ch�n �o?n Code sau v�o n�i b?n mu?n hi?n th?, n�n �? tr�n b�i vi?t ho?c d�?i menu

<div class="chuyenmuc">
<div class="chuyenmuc-home">
<ul>
<li>
<div>
<a href="/search/label/Blogger" onclick="document.getElementById('id01').style.display='block'" target="_blank">
<h2>Blogger</h2>
<p>Th? thu?t Blogger</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Facebook" onclick="document.getElementById('id02').style.display='block'" target="_blank">
<h2>Facebook</h2>
<p>Th? thu?t Facebook</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Photoshop" onclick="document.getElementById('id03').style.display='block'" target="_blank">
<h2>Photoshop</h2>
<p>Th? thu?t Photoshop</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Youtube" onclick="document.getElementById('id04').style.display='block'" target="_blank">
<h2>Youtube</h2>
<p>Th? thu?t Youtube</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Windows" onclick="document.getElementById('id05').style.display='block'" target="_blank">
<h2>Windows</h2>
<p>Th? thu?t Windows</p>
</a>
</div>
</li>
</ul>
</div>
</div>

B�?c 3: L�u Template V� T?n H�?ng

L?I K?T

Nh� v?y l� m?nh v?a H�?ng d?n cho c�c b?n xong c�ch t?o slide chuy�n m?c tuy?t �?p (style 2), c�c b?n h?y ch?nh nh?ng t? m?nh in �?m trong code l?i th�nh ��ng ��?ng link tr? v? c�c chuy�n m?c c?a blog c�c b?n nh�, n?u c� g? th?c m?c h?y �? l?i comment b�n d�?i, m?nh s? tr? l?i nhanh nh?t c� th? cho c�c b?n!

Ch�c c�c b?n th�nh c�ng!

view-source: khophimplus.net

TUT H�?NG D?N T?O N?N PRO CHO BLOG - ADMIN �?C BLOG ?? - CHIA S? - [UPDATE 1/8/2017]

H�m Nay �ng S? Ch? C�c Ch?u C�ch T?o N?N                        ??   �?p Cho Blog ??

Demo: ????

C�n b?n nhi?u b?n ib h?i m?nh qu� tr?i n�n nay m?nh s? ch? c�c b?n c�ch l�m nh� th? ??????????????

??????????????

B�?c 1: C�c ch�u v�o ch? �? => ch?nh s?a HTML => Ctrl+F => '' body{background ''

B�?c 2: Thay link �?ng sau th�nh link b?n mu?n thay v�o 

K?t qu? t?m ki?m

????????????????

B�?c 3: L�u l?i v� c?m nh?n

  

      

K?t qu? t?m ki?m

   D? V?i C? L?n Ra M� M?y B? Ko L�m ��?c Th? Con Ch?u Nh�... ch? x�m lone l� �n s�t 

K?t qu? t?m ki?m

                 

   TUT By: Admin �?c Blog

Copy Nh? Ghi Ngu?n Admin �?c Blog ..... c?m �n c�c b?n �? gh� th�m blog... H?y ?ng h? ch�ng t�i �? c�ng ph�t tri?n !!!

                     

                        Bye C�c Ch?u Nha