Bài đăng

Hiển thị các bài đăng có nhãn Chơi Blog

Chèn Tiện Ích Twitter Responsive Vào Blogspot.

Hình ảnh
Như chúng ta thấy, dạo gần đây cộng đồng website đang rất hót với tiện ích chèn Fanpage Facebook vào trang website bao gồm cả bài viết được hiển thị. Nhưng nếu bạn là người thích trang mạng xã hội khác Facebook, thì Twitter là lựa chọn không thể thiếu cho bạn. Chính vì thế hôm nay tôi sẽ chỉ cho các bạn làm tương tự như chèn Fanpage vào Website của bạn, bằng Twitter. Các Bước Thực Hiện: 1: Vào Bố Cục Hoặc Tạo Trang Mới: 2: Thêm Đoạn Code Phía Dưới Vào Trong Widget Lưu ý: Đối với tạo trang mới, thì các bạn chèn trong tab HTML. <a class="twitter-timeline" data-width="504" data-height="704" data-theme="light" data-link-color="#FAB81E" href="https://twitter.com/ idtwitter ?ref_src=twsrc%5Etfw">Đợi 2-5 Giây Để Load</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script]></script> ( Edit lại idtwitter thành id twitter của bạn ) 3: Lưu Lại Và Hưởng Th...

Thêm Intro Not Responsive Kèm Hiệu Ứng Cho Blogspot.

Hình ảnh
Xin chào các bạn, nay mình share cho mọi người đoạn code giúp tạo intro cho đẹp blog nhé.  Cách Thực Hiện: Bước 1: Thêm Đoạn Code Này Dưới ]]></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} .container { width: 100%; height: 40vh; overflow: hidden !important; } h1 { font-family: "Source Sans Pro", sans-serif; font-weight: bold; font-size: 90px; letter-spacing: 20px; text-transform: uppercase; text-align: center; color: #B5B5B5; margin: 0px; padding: 0px; } h2 { font-family: "Source Sans Pro", sans-serif; font-size: 30px; font-weight: 600; letter-spacing: 20px; text-transform: uppercase; text-align: center; color: #B5B5B5; line-height: 50px; padding: 0px; margin: 0px; } h2 a { color: #B5B5B5; text-decoration: none; border-bottom: 5px solid #B5B5B5; margi...

Tạo Hiệu Ứng Chim Bay Hoàn Toàn Bằng Css Cho Blogspot.

Hình ảnh
N gay tại bài này mình sẽ hướng dẫn các bạn cách để tạo ra hàng loạt chú chim bay chỉ với css và html. Với các bước cũng khá đơn giãn. + Mục Đích: Trang trí blog Tương hợp với các code khác ... + Các Bước Làm: Chèn đoạn này ở bất cứ đâu bạn muốn nó hiển thị: <div class="container container-bird">   <div class="bird bird-anim">     <div class="bird-container">       <div class="wing wing-left">         <div class="wing-left-top"></div>       </div>       <div class="wing wing-right">         <div class="wing-right-top"></div>       </div>     </div>   </div>   <div class="bird bird-anim">     <div class="bird-container">       <div class="wing wing-left">         <div class="wing-left-top"></div>   ...

Tạo khung Liên Kết Bạn Bè 3 Cột Kèm Hiệu Ứng Hover Cho Blogspot.

Hình ảnh
Khung liên kết 3 cột này rất tương thích với các blog thủ thuật có kích thước lớn nhé, ưu điểm của cái khung này là responsive, sẽ tự động chỉnh kích thước cho phù hợp với blog. HƯỚNG DẪN CÁCH CHÈN: Bước 1: Login Blogspot => Bố Cục thêm tiện ích HTML/JAVASCRIPT Bước 2: Chèn đoạn code bên dưới vào trong: <style> #lien-ket-ban-be::-webkit-scrollbar{width:5px} #lien-ket-ban-be::-webkit-scrollbar-thumb{background:#484848;border-radius:3px} #lien-ket-ban-be::-webkit-scrollbar-thumb:active{background:#777} #lien-ket-ban-be{padding:0;margin:0;list-style:none} .lien-ket-ban-be{margin:0;padding:0} .lien-ket-ban-be ul{padding:6px 0.8px 6px 6px} .lien-ket-ban-be li{width:33.3%;margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center} .lien-ket-ban-be a{padding-left:25px;transition: all 0.5s ease 0s;width:auto;text-overflow:ellipsis;overflow:hidden;display:block;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;margin:0 5px 5px 0;padding:5px;fon...

Tạo Hiệu Ứng Loader Hoàn Toàn Bằng Css Cho Blogspot.

Hình ảnh
Chào mọi người, lúc nảy rảnh có lục cái mẫu php của thằng bạn thấy có cái hiệu ứng loader đẹp lắm, mình thấy nó hầu như làm bằng css nên không ảnh hưởng gì đến blog nên đem về share luôn. Nếu ai coder giỏi thì có thể lấy cái này làm hiệu ứng loading trang cho blog nhé. Cách làm cũng khá đơn giản gồm 3 bước. Bước 1: Login Blogger Bước 2: Chèn Css Lên Trên ]]></b:skin> .loader{top:calc(50% - 32px);left:calc(50% - 32px);width:80px;height:80px;border-radius:50%;perspective:800px;margin:auto;margin-bottom:20px;} i.fa.fa-star{color:#000;margin-top:15px;margin-left:9px;} .inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%;} .inner.one{left:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA;} .inner.two{right:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA;} .inner.three{right:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA;} @keyframes rotate-one{0%{...

Tạo Bảng Responsive 3 Cột Cho Blogger.

Hình ảnh
     Dưới đây mình sẽ share cho các bạn đoạn code tạo bảng số liệu phân chia 3 cột dành cho Blogspot, nếu bạn chuyên về một blog kinh doanh hay tin tức... thì bảng này không thể thiếu trong bài viết của bạn được, nếu bạn thích mẫu này thì các bạn đem về dùng nhé hoặc tự edit CSS lại nha. Cách sử dụng cũng khá đơn giản: Bước 1: Chèn Đoạn CSS Này Trên ]]></b:skin> Hoặc Trong Thẻ <style> .post-body table td, .post-body table caption{border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #157fca;padding:10px;text-align:left;vertical-align:top;background: linear-gradient(to right, #15CAC9,#1571ca);} .post-body table.tr-caption-container {border:1px solid #eee;} .post-body th{font-weight:700;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;} .post-body td:hover{background:#fe...

Share Đoạn JavaScript Chuyển Đổi Banner Cho Blogspot.

Hình ảnh
    Hello đồng bào Việt Nam, chuyện là vài hôm trước có mở lại cái file wap MXH dành cho xtgem thì vô tình thấy được cái code chuyển đổi banner vì thấy khá là có ích cho các blog/web nên mình đem về blog share cho các bạn dùng chung luôn. Nhưng vì code này khá lâu và củ nên mình chẳng nhớ nguồn của ai, nên mình bỏ qua phần nguồn code nhé. Cách sử dụng cũng gồm 3 bước cơ bản: Bước 1: Login Blogger Bước 2: Bố Cục => Thêm Tiện Ích HTML/Javascript <script type="text/javascript"> // Banner Rotation Script by Bloggerism var ban = new Array(); var link = new Array(); var index = 0; ban[0] = new Image(); ban[0].src = " Link Ảnh "; link[0] = " Url "; ban[1] = new Image(); ban[1].src = " Link Ảnh "; link[1] = " Url "; ban[2] = new Image(); ban[2].src = " Link Ảnh "; link[2] = " Url "; index = Math.random() * (ban.length); index = Math.floor(index); function rotator() {if (index == ban.length) index ...

Chia Sẽ 3 Đoạn Code Có Ích Cho Các Wapbuilder,

Hình ảnh
     Nếu bạn mới lập blog chuyên về wap thì chắc bạn đang còn lở ngỡ vài code để chèn vào các chuyên mục. Thì hôm nay mình sẽ share cho các bạn một vài đoạn code tiện ích hay mà mình chuyển từ các wapbuilder khác về blogger. Nếu thích bạn hãy đem về blog của bạn để trang trí nhé. 1: Khung Thầy Phán Cực Bựa. <form name="form1"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <font size="0" face="verdana, arial, helvetica, sans-serif"><b>Tháng</b></font> </td> <td> <font size="0" face="verdana, arial, helvetica, sans-serif"><b>Ngày</b></font> </td> <td rowspan="2"> <font size="1" face="verdana, arial, helvetica, sans-serif"></font> </td> <td> <font size="1" face=...

Tạo Khung Thầy Phán Hài Hước Bằng Javascript.

Hình ảnh
Cười Cười Cười Và Cười. Nay Huy Rocket sẽ chia sẽ cho bạn 1 đoạn Js ngắn chủ đề về ông thầy phán cực troll. Nói gì cũng trả lời được hết. Tác Dụng: - Làm đẹp cho blog. - Thích hợp với các blog hài. Code: <script language="JavaScript"> <!-- Begin var answers = new Array( "Huy Rocket là người đz nhất tg", "Mày viết clgt t méo hiểu?", "mày đinh thử thầy a?", "Mày hỏi nữa là tao thiết à nha.", "Tao nói rồi, thiết mày bây giờ.", "Mày chắc chắn ế cmnr.", "con hỏi khó thế", "hỏi lại đi cưng", "thầy biết rùi nha", "từ từ rùi khoai sẽ nhừ", "thầy chịu", "ca&#769;i na&#768;y thâ&#768;y ?", "Hơ hơ chắc là vậy", "Biêt mà còn hỏi", "Cho xin 2 chữ bình yên", "Chém vừa thôi má", "Dua tien day thay noi cho", "Con cái nhà ai mà hổ báo zậy", "Mày ở đâu đến zậy con", "đá xoáy nhau à...

Chia Sẽ Hai Mẫu Button Cực Đẹp Cho Blogspot.

Hình ảnh
 Dưới đây mình sẽ chia sẽ cho các bạn hai mẫu button rất đẹp. Nhằm mục đích cho bài viết đẹp hơn ví dụ: ghi chú, lưu ý, nhưng thường thì mọi người sẽ dùng nó để cho hai nút demo và download đẹp hơn. Code khá ngắn và cách làm cũng khá đơn giản 1: Khung CSS Chèn Trong Thẻ ]]></b:skin>. 2: Khung HTML Khi Viết Bài Bạn Để Ở Tab HTML. Mẫu 1: Demo Download <style> .bt-huydz { font-size: 15px; font-weight: bold; display: inline-block; width: 100px; height: 34px; line-height: 34px; text-align: center; color: #ffffff; text-transform: uppercase; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: linear-gradient(to top, #B63E1D 0%, #FF502E 100%); } .bt-huydz:hover { background: -webkit-linear-gradient(bottom, #1dafb6 0%, #58ff2e 100%); color: #308a40; } </style> <a class='bt-huydz' href='#' title='demo'>Demo</a> <a class='bt-huydz' href='#' title='download'>Download</a> Mẫ...

Code Chống Copy Bài Viết Trên Blog.

Hình ảnh
Bạn chắc hẳn có rất nhiều ý tưởng trong đầu và có khả năng viết ra nhiều bài trên blog. Nhưng tình trạng sao chép bài viết trên website ngày càng phổ biến vì đa số những người mới bắt đầu không nhận ra được tầm quan trọng của nó. Và nó cũng chính là lý do khiến bạn không còn can đảm để viết bài, trong khi bạn viết thì người khác lại ăn cắp chất xám của bạn, điều này khá là điên máu. Vì thế hôm nay mình sẽ chia cho bạn một đoạn code ngắn để chống đối thủ sao chép bài viết của bạn một cách dể dàng. Bước 1: Login Blogspot. Bước 2: Chủ Đề => Edit HTML Bước 3: Chèn Đoạn Code Dưới Lên Trên Thẻ </head> <style> body{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } </style><script type='text/JavaScript'> function killCopy(e){ return false } function reEnable(){ return true } document.onselectstart=new Function (&#8220;return false&#8221;) if (window.sideba...

Khung Tác Giả Kèm Hiệu Ứng Hover Tuyệt Đẹp Cho Blog.

Hình ảnh
Dưới đây mình sẽ hướng dẫn các bạn tạo ra một khung tác giả kèm theo với hiệu ứng hover tuyệt đẹp dành riêng cho blogspot.  ( Demo cuối bài ) Cách làm cũng khá đơn giả với 3 bước như sau: Bước 1: Login Blogspot => Chủ Đề => Edit HTML Bước 2: Dán Đoạn Code Phía Dưới Vào Nơi Bạn Muốn Hiển Thị: = About Author =====================================*/ .aboutauthor{background-color:#448aff;margin:37px 0 0 -21px;width:100%;float:left;padding:10px 21px;} .aboutauthor img{display:block;width:140px;height:auto;border-radius:50%;border:solid 6px #fff;float:left;padding:0;margin-right:33px;margin-left:15px;transition:0.6s;} .aboutauthor:hover img{-webkit-transform:translateX(-10px) rotate(-10deg);transform:translateX(-10px) rotate(-10deg);} .authorname{margin: 5px;font-weight: normal!important;color: #52537d;border: 3px solid #52537d;font-family: &#39;FontAwesome&#39;, roboto;padding: 2px;display: inline-block;text-align: center;} .authorrank{color:#eee!importantfont-size:19...

Tạo Hộp Thông Báo Dạng Classic Mỗi Lần Load Trang Cho Blogspot.

Hình ảnh
- Dưới đây mình hướng dẫn mọi người cách tạo ra một hộp thông báo như trên. - Mục đích tạo cái ra cái này là dùng để trang trí blog hay thông báo một vấn đề gì đó cho mọi người. - Cách làm cũng khá là đơn giản với 3 bước: Bước 1: Login Blogger => Chủ Đề => Edit HTML. Bước 2: Dán Đoạn Code Phía Dưới Vào Trước </body> <div class='tc_overlay'> <div id='Tb-Huydz'><a class='close' href='#'>x</a> <h3>Xin Thông Báo</h3> <p style='text-align:center;'>Text text text text<br/><center> <a href='/' target='_blank'>Text text text text</a></center></p> </div> </div> <style> #Tb-Huydz .close{ float: right; font-size: 20px; font-weight: bold; line-height: 20px; right: 10px; top: 5px; color: #000; position: absolute; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); } #Tb-Huydz .close:hover, #Tb-Huydz .close:focus{ color:#0...

Thêm trang phòng chát online vào Blogger

Hình ảnh
Ngay bài viết này mình sẽ hướng dẫn A/e tạo một trang phòng chát online, với các bước khá đơn giãn, dùng để trang trí blog thích hợp với các blog cá nhân hoặc các blog bán hàng. Link xem demo Các bước thực hiện: 1: Các bạn vào trang nà y 2: Các bạn click chọn  đăng kí và  điền  đầy đủ thông tin: 3: Các bạn chọn gói cước các bạn muốn, ở đây mình dùng free 4: Khi tạo xong nó sẽ đưa bạn tới trang quản lý. Các bạn kéo lên trên sẽ thấy dòng chữ có nền màu xanh lá. Các bạn click chọn "Get your Cbox embed code" 5: Nó sẽ dẫn bạn đến trang "Get your embed code" Bạn sẽ thấy đoạn code như sau: 6: Các bạn đăng nhập blogger => Trang mới => chuyển sang tab HTML dán đoạn code mà bạn tạo là oke. Lưu ý: Các bạn vui lòng nhập đúng địa chỉ website để tránh xảy ra lỗi nhé. Bài viết được hình thành do trang www.huyrocket.ml viết.  Nếu có coppy bạn vui lòng để lại nguồn để tôn trọng mình....

Tổng Hợp Một Số Code Popular Posts Cực Chất Cho Blogspot.

Hình ảnh
- Dưới đây mình xin tổng hợp các dạng Popular Posts đẹp - chất dành cho blogspot. 1: Popular Posts Dạng Đánh Số Có Ảnh Thu Nhỏ: Code: /* Popular Posts */ .PopularPosts .widget-content ul,.PopularPosts .widget-content ul li,.PopularPosts .widget-content ul li img,.PopularPosts .widget-content ul li a,.PopularPosts .widget-content ul li a img{margin:0 0;padding:0 0;list-style:none;border:none;outline:none} .PopularPosts .widget-content ul{margin:0;list-style:none;counter-reset:num} .PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left} .PopularPosts .widget-content ul li{margin:0 0 10px;counter-increment:num;position:relative} .PopularPosts ul li:last-child{margin-bottom:0} .PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:500;text-decoration:none;color:#444444} .PopularPosts ul li .item-title a:hover,.PopularPosts ul li a:hover{color:#49ACE1} .PopularPosts ul li .item-thumbnail-only:before,.PopularPosts ul li .item-content:before{c...