blogger – Tân Hồng IT http://localhost:82/demowp Siêu Chia Sẻ Kiến Thức, Công Nghệ, Phần Mềm, Thủ Thuật, Tiện Ích Máy Tính Sat, 19 May 2018 15:17:00 +0000 en-US hourly 1 https://wordpress.org/?v=5.3.2 http://localhost:82/demowp/wp-content/uploads/2019/04/logo-TanHongIT-one-75x75.png blogger – Tân Hồng IT http://localhost:82/demowp 32 32 Code Button tạo nút Demo và Download cực đẹp cho Blogspot / Blogger http://localhost:82/demowp/blogger/code-button-tao-nut-demo-va-download-cuc-dep-cho-blogspot-blogger/ http://localhost:82/demowp/blogger/code-button-tao-nut-demo-va-download-cuc-dep-cho-blogspot-blogger/#respond Sat, 19 May 2018 15:17:00 +0000 http://localhost:82/demowp/2018/05/19/code-button-tao-nut-demo-va-download-cuc-dep-cho-blogspot-blogger/ Trên Internet hiện nay có rất nhiều blog làm về mảng game, phần mềm, chia sẻ tài liệu, template thì ta sẽ thường chia sẻ những đường link vào bài viết để người dùng download hay xem demo trước.  Để làm nổi bật các đường link này chúng ta nên kết hợp với các Button […]

The post Code Button tạo nút Demo và Download cực đẹp cho Blogspot / Blogger appeared first on Tân Hồng IT.

]]> Trên Internet hiện nay có rất nhiều blog làm về mảng game, phần mềm, chia sẻ tài liệu, template thì ta sẽ thường chia sẻ những đường link vào bài viết để người dùng download hay xem demo trước. 

Để làm nổi bật các đường link này chúng ta nên kết hợp với các Button để người dùng dễ dàng nhìn thấy và giúp trang trí thêm để làm đẹp cho blog của bạn nhé.

Và bài viết này mình xin chia sẻ cho các bạn đoạn code tạo nút Demo Và Download đẹp cho Blogspot / Blogger và hướng dẫn chèn code vào blog luôn nhé.

 Hướng dẫn tạo nút Demo và Download đẹp cho Blogspot / Blogger.
Đầu tiên các bạn truy cập vào Blogger. Sau đó nhấn vào Chủ Đề rồi nhấn Chỉnh Sửa HTML.


 Bước tiếp theo bạn kiểm tra xem template của bạn có đoạn code bên dưới chưa, nếu chưa thì chèn thêm nó vào trước thẻ đóng </head> (Mẹo tìm nhanh bằng cách nhấn Ctrl + F sau đó nhập jquery.min.js để tìm nha)

<script src=’//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’/>


 Tiếp đến bạn tìm đến trước thẻ đóng ]]></b:skin> hoặc </style> chèn đoạn Code bên dưới vào vào trước hai thẻ trên và bấm Save (Lưu chủ đề).

#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

Và cuối cùng: Khi bạn viết bài viết, để chèn nút Demo và Download thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng nơi bạn muốn hiện:

<div id="wrap">
<a href="http://localhost:82/demowp" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="http://localhost:82/demowp/" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>

Lưu ý: Các bạn thay link http://localhost:82/demowp/ thành link các bạn muốn nhé!

 Mong Bài viết thủ thuật này sẽ giúp ích được cho các bạn.

 

CHÚC CÁC BẠN THÀNH CÔNG NHÉ

The post Code Button tạo nút Demo và Download cực đẹp cho Blogspot / Blogger appeared first on Tân Hồng IT.

]]> http://localhost:82/demowp/blogger/code-button-tao-nut-demo-va-download-cuc-dep-cho-blogspot-blogger/feed/ 0 Cách mở liên kết ra tab mới trong trình duyệt cho blogspot http://localhost:82/demowp/blogger/cach-mo-lien-ket-ra-tab-moi-trong-trinh-duyet-cho-blogspot/ http://localhost:82/demowp/blogger/cach-mo-lien-ket-ra-tab-moi-trong-trinh-duyet-cho-blogspot/#respond Fri, 18 May 2018 14:09:00 +0000 http://localhost:82/demowp/2018/05/18/cach-mo-lien-ket-ra-tab-moi-trong-trinh-duyet-cho-blogspot/ Để cho người đọc không bị rời khỏi trang blog của chúng ta khi click vào một liên kết bất kì thì chúng ta thường thêm thuộc tính target=”_blank” trong link. Đó là cách thủ công nhưng khá mất thời gian và bất tiện khi chúng ta phải tự tay làm cho hàng loạt các […]

The post Cách mở liên kết ra tab mới trong trình duyệt cho blogspot appeared first on Tân Hồng IT.

]]> Để cho người đọc không bị rời khỏi trang blog của chúng ta khi click vào một liên kết bất kì thì chúng ta thường thêm thuộc tính target=”_blank” trong link.

Đó là cách thủ công nhưng khá mất thời gian và bất tiện khi chúng ta phải tự tay làm cho hàng loạt các liên kết trong blog.
Bài viết này mình giới thiệu 2 cách làm khác nhau sử dụng javascript hoặc dùng thuộc tính base trong HTML nhé!

Cách 1: Sử Dụng Javascript.

  • Đăng nhập vào blog
  • Vào Phần bố cục
  • Tạo một tiện ích HTML/Javascript
  • Copy đoạn code sau vào và lưu lại.

<script type=’text/javascript’> var arr = document.getElementsByTagName(“a”); //dapatkan semua link untuk halaman(var i = 0; i < arr.length; i++) { if(arr[i].href.indexOf(“https://tanhong.NET/“) < 0 //bukan link yang ada di dalam halaman ini && arr[i].href.indexOf(“javascript:”) < 0) // link arr[i].target = “_blank”; } </script>

 


Lưu ý: Các bạn nhớ thay https://tanhong.net/ thành doman blog của các bạn nhé!


Cách 2: Sử Dụng thuộc tính base trong HTML.

  • Đăng nhập vào Blog
  • Vào Chủ đề (Template)
  • Chọn Chỉnh sửa HTML
  • Chèn đoạn sau bên dưới thẻ <head> trong template:

<base target=’_blank’/>

  •  Save lại
Vậy là các bạn đã hoàn thành rồi đó. Đây là một thủ thuật để giúp cho blog của các bạn có thể gây chú ý cho khách xem hơn đấy nhé.
 
Mở rộng tùy chỉnh:
Chúng ta có thể kết hợp với các lệnh điều kiện <b:if> của blogspot để dễ dàng tùy biến cho thủ thuật hơn nhé.
1. Mở liên kết trên tab mới chỉ ở trang chủ:

<b:if cond=’data:blog.url == data:blog.homepageUrl’>

<base target=’_blank’/>

</b:if>


2. Đối với trang đọc bài:

 

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<base target=’_blank’/>

</b:if>

 


3. Đối với một trang bất kì:

 

<b:if cond=’data:blog.url == “Nhập URL trang bất k씑>

<base target=’_blank’/>

</b:if>

 

 

Mong Bài viết thủ thuật này sẽ giúp ích được cho các bạn.
 
CHÚC CÁC BẠN THÀNH CÔNG NHÉ

The post Cách mở liên kết ra tab mới trong trình duyệt cho blogspot appeared first on Tân Hồng IT.

]]> http://localhost:82/demowp/blogger/cach-mo-lien-ket-ra-tab-moi-trong-trinh-duyet-cho-blogspot/feed/ 0 Đổi màu link liên kết của Blog, website http://localhost:82/demowp/blogger/doi-mau-link-lien-ket-cua-blog-website/ http://localhost:82/demowp/blogger/doi-mau-link-lien-ket-cua-blog-website/#respond Tue, 17 Apr 2018 09:09:00 +0000 http://localhost:82/demowp/2018/04/17/doi-mau-link-lien-ket-cua-blog-website/ Để tăng sinh động hấp dẫn cho trang blog của mình ta nên thêm vào trang blog hiệu ứng đổi màu link liên kết khi các bạn di chuyển chuột vào. Tính năng của đoạn code css này: Hiệu ứng được tạo ra từ CSS áp dụng cho tất cả link liên kết của website, […]

The post Đổi màu link liên kết của Blog, website appeared first on Tân Hồng IT.

]]> Để tăng sinh động hấp dẫn cho trang blog của mình ta nên thêm vào trang blog hiệu ứng đổi màu link liên kết khi các bạn di chuyển chuột vào.


Tính năng của đoạn code css này:

  • Hiệu ứng được tạo ra từ CSS áp dụng cho tất cả link liên kết của website, blog của bạn. Tạo hiệu ứng thay đổi màu sắc phân biệt rõ ràng cho khách truy cập.
  • Phân biệt link đã truy câp, link chưa truy cập và di chuột vào sẽ thay đổi thành mầu sắc khác.

Lưu ý: Css này tạo ra áp dụng cho tất cả link bạn nhé.

Đoạn code Css Đổi màu link liên kết của website:

/*màu sắc Link khi chưa truy cập*/
a:link {
color:#0a47ff;
text-decoration:none;
}

/*Màu Sắc Link Khi đã Truy Cập*/
a:visited {
color:#ed1a1a;
text-decoration:none;
}

/*Màu sắc Link khi rê chuột vào*/
a:hover {
color:#16ba68;
text-decoration:underline;
}

Hướng dẫn sử dụng code : 
>>> Vào Chủ Đề 
>>> Chỉnh sửa HTML 
>>> Tìm Đoạn mã bằng cách nhấn Ctrl+F với từ khóa  ]]></b:skin>   
>>> Dán code nằm phía trên đoạn mã này.

]]></b:skin>

 

CHÚC CÁC BẠN THÀNH  CÔNG 

The post Đổi màu link liên kết của Blog, website appeared first on Tân Hồng IT.

]]> http://localhost:82/demowp/blogger/doi-mau-link-lien-ket-cua-blog-website/feed/ 0 Code hay cho blogspot : Cách tạo thanh điều khiển lên xuống cho trang trong blogger http://localhost:82/demowp/blogger/code-hay-cho-blogspot-cach-tao-thanh-dieu-khien-len-xuong-cho-trang-trong-blogger/ http://localhost:82/demowp/blogger/code-hay-cho-blogspot-cach-tao-thanh-dieu-khien-len-xuong-cho-trang-trong-blogger/#respond Mon, 17 Apr 2017 13:09:00 +0000 http://localhost:82/demowp/2017/04/17/code-hay-cho-blogspot-cach-tao-thanh-dieu-khien-len-xuong-cho-trang-trong-blogger/ itrum.net Để tăng sinh động hấp dẫn cho trang blog của mình ta nên thêm một số plugin vào . hôm nay mình sẽ chia sẻ các bạn 1 plugin tạo thanh trượt lên xuống cho trang blog của mình. Mình thấy plugin này chạy rất tốt trên chrome . đầu tiên bạn hãy đăng […]

The post Code hay cho blogspot : Cách tạo thanh điều khiển lên xuống cho trang trong blogger appeared first on Tân Hồng IT.

]]> itrum.net

Để tăng sinh động hấp dẫn cho trang blog của mình ta nên thêm một số plugin vào . hôm nay mình sẽ chia sẻ các bạn 1 plugin tạo thanh trượt lên xuống cho trang blog của mình.

 Mình thấy plugin này chạy rất tốt trên chrome .

 đầu tiên bạn hãy đăng nhập vào blogger của mình nhé.

 sau đó chọn phần bố cục.

sau đó các bạn nhấp chọn vào khung thêm tiện ích

 tiếp theo nhấn chọn vào htlm/javascript như sau:


 sau đó copy đoạn code sau  vào phần nội dung nhé.

<!– BAT DAU LEN XUONG –>   <style type=’text/css’>      #backscroll {        width:30px;        line-height:50px;        position:fixed;        right:5px;        top:350px;                        }    </style>    <script language=’javascript’>      /* <![CDATA[ */ suspendcode=”<div id=’backscroll’><a onclick=’javascript:amutop();return false;’ href=’#’ title=’LÊN ĐẦU’><img border=0 src=”https://lh5.googleusercontent.com/-ObCGpcQDQDk/T35aQPPWQMI/AAAAAAAAAPA/8iDyiJ07n3Y/s48/top.gif” width=”30″></a><br><a onclick=’javascript:history.back();return false;’ href=’#’ title=’TRỞ LẠI TRANG VỪA XEM’><img border=0 src=”https://lh4.googleusercontent.com/-HQASFJRYdd0/T35aO4vWfrI/AAAAAAAAAOo/WtpQMguYPLs/s48/back.gif” width=”30″></a><br><a onclick=’javascript:sc();return false;’ href=’#’ title=’DỪNG CUỘN’><img border=0 src=”https://lh5.googleusercontent.com/-mZIfXp3qmSM/T35aP6jrhtI/AAAAAAAAAO0/Dda_pbetGyE/s48/ting.gif” width=”30″></a><br><a onclick=’javascript:clearInterval(timer);initialize();return false;’ href=’#’ title=’TỰ ĐỘNG CUỘN’><img border=0 src=”https://lh4.googleusercontent.com/-HW6-lwAajuU/T35aO55KD8I/AAAAAAAAAOs/uWG9m072otc/s48/gun.gif” width=”30″></a><br><a onclick=’javascript:amubutton();return false;’ href=’#’ title=’XUỐNG CHÂN’><img border=0 src=”https://lh4.googleusercontent.com/-i00crAzVJK0/T35aO5nmNdI/AAAAAAAAAOw/t0BCAeUQZbY/s48/end.gif” width=”30″></a></div>”      document.write(suspendcode);var currentpos,timer;function initialize(){timer=setInterval(“scrollwindow ()”,30)}function sc(){clearInterval(timer)}function scrollwindow(){currentpos=document.documentElement.scrollTop||document.body.scrollTop;window.scrollTo(0,++currentpos)}function amutop(){window.scrollTo(0,0);clearInterval(timer)}function amubutton(){window.scrollTo(0,8E4);clearInterval(timer)};/* ]]> */</script>     <!– KET THUC LEN XUONG –>

 

sau đó các bạn nhấn lưu lại nha.
 
bây giờ các bạn hãy nhấn vào chỗ ” xem blog” ở đầu góc trái màn hình để xem thành quả trên trang blog của mình nhé.
 

và đây là thành quả mà ta mong chờ. 

CHÚC CÁC BẠN THỰC HIỆN THÀNH CÔNG NHÉ
by Nguyễn Phương Tân

The post Code hay cho blogspot : Cách tạo thanh điều khiển lên xuống cho trang trong blogger appeared first on Tân Hồng IT.

]]> http://localhost:82/demowp/blogger/code-hay-cho-blogspot-cach-tao-thanh-dieu-khien-len-xuong-cho-trang-trong-blogger/feed/ 0