Blog Duy Khánh

Teduh responsive blogger template

2015-10-11T13:17:00.000+07:00

Chào bạn!
Hôm nay, Khánh xin chia sẻ với bạn một template mà mình cho là có chất lượng. Với những đặc tính vượt trội, cập nhật, rất phù hợp cho SEO.

Tự động bôi đen khung chứa code bằng nhấp đúp chuột

2015-09-20T20:47:00.002+07:00

Chào bạn! Nếu bạn đã tìm đến được bài viết này thì chắc hẳn bạn là một web developer hoặc là một blogger đúng không? Ở bài viết này Khánh sẽ giới thiệu cách để blog/web của bạn thêm chuyên nghiệp hơn và thân thiện với người đọc. Thông thường, khi trích dẫn một đoạn code nào đó chúng ta thường đặt chúng trong thẻ <pre> hoặc thẻ <code>. Người đọc muốn copy đoạn code trong thẻ này chỉ cần kéo chuột bôi đen đoạn code sau đó ấn Ctrl + C là được. Nói có vẻ đơn giản nhưng với những đoạn code dài thì rất mất thời gian. Để đơn giản hơn cho việc này, bạn chỉ cần dán đoạn code sau trước thẻ </body> trong template là được.

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);

for (var i = 0; i &lt; pres.length; i++) {

  pres[i].addEventListener(&quot;dblclick&quot;, function () {

    var selection = getSelection();

    var range = document.createRange();

    range.selectNodeContents(this);

    selection.removeAllRanges();

    selection.addRange(range);

  }, false);

}

</script>

Với đoạn code này người đọc chỉ cần đơn giản là nhấp đúp chuột vào đoạn code là có thể bôi đen toàn bộ code trong khung chứa code rồi. Bạn có thể xem demo ngay trên đoạn code bên trên. Bên trên Khánh có tô đỏ chữ pre đó chính là thẻ được áp dụng. Trường hợp bạn dùng thẻ <code> thì sửa thành code

Sharing Social Widget - Nút chia sẻ lớn có đếm số cuối bài viết cho blogspot

2015-09-18T21:43:00.000+07:00

Chào các bạn! Ở bài viết này Khánh sẽ giới thiệu đến các bạn một bộ nút chia sẻ mới với font chữ khá lớn gây ấn tượng cho bạn đọc ở cuối blog. Khi load bài viết, nút chia sẻ sẽ hiện tổng số lượt chia sẻ và hai mạng xã hội lớn nhất hiện nay là Facebook và Twitter. Ngoài ra bạn đọc cũng có thể nhấn nút mở rộng để chia sẻ đối với các mạng xã hội khác như: Google+, Linkedin, Pinterest. Mời bạn xem thử

Social follow widget - Nút theo dõi mạng xã hội đẹp và đơn giản

2015-09-17T07:38:00.000+07:00

Như các bạn cũng biết là môi trường internet hiện nay chịu ảnh hưởng rất nhiều từ các mạng xã hội. Để blog phát triển được thì ngoài nội dung ra chúng ta cần đặc biệt chú ý đến việc quảng bá blog bằng các phương tiện của mạng xã hội. Hôm nay BDK sẽ giới thiệu đến các bạn một widget nhỏ đó là Social follow widget. Bạn có thể đặt link của 3 mạng xã hội phổ biến nhất là Facebook, Google+, Twitter ở đây để người đọc tiện theo dõi các trang mạng xã hội của bạn.

Sticky Widget - Neo nhiều Widget cố định trong Blogspot

2015-09-15T21:52:00.001+07:00

Thông thường khi bạn xem một bài viết trên blog và kéo xuống dưới thì những widget ở trên sẽ bị ẩn dần đi. Tuy nhiên bạn cũng có thể giữ cố định một hay nhiều widget khi người đọc kéo xuống dưới để tăng sự tương tác với blog. Việc này có thể mang đến cho bạn một số lợi ích như:

Facebook Popup (Like Box Widget) cho Website của bạn

2015-09-13T19:52:00.001+07:00

Ởbài viết này BDK sẽ giới thiệu đến bạn một widget giúp tăng like Fanpage một cách bài bản, hiệu quả và đặc biệt là không gây phản cảm cho người đọc. Khi người đọc mở bài viết thì sau 10 giây (có thể thay đổi) popup sẽ tự động hiện lên. Theo mặc định Popup sẽ chỉ hiện lên lần đầu khi tải trang để tránh làm phiền người đọc khi hiện quá nhiều lần mỗi khi tải trang và sẽ hiển thị lại sau 30 ngày. Mời bạn xem thử

DEMO

Cài đặt Popup Facebook like fanpage

Bạn có thể đặt đoạn code sau ở bất cứ đâu nếu muốn nơi đó hiện popup. Nếu bạn đặt ở bài viết thì popup chỉ hiện ở bài viết cụ thể, nếu đặt ở tiện ích HTML/Javascript thì popup sẽ hiển thị những trang có thể gọi tiện ích này ra. Hoặc bạn cũng có thể đặt ở Template để popup hiện ở tất cả trang, bài viết của blog.

<!-- Facebook Popup Widget START http://blogduykhanh.blogspot.com -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<style>

#fanback {

display:none;

background:rgba(0,0,0,0.8);

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

z-index:99999;

}

#fan-exit {

width:100%;

height:100%;

}

#JasperRoberts {

background:white;

width:420px;

position:absolute;

top:58%;

left:63%;

margin:-220px 0 0 -375px;

-webkit-box-shadow: inset 0 0 50px 0 #939393;

-moz-box-shadow: inset 0 0 50px 0 #939393;

box-shadow: inset 0 0 50px 0 #939393;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

margin: -220px 0 0 -375px;

}

#Blogduykhanh {

float:right;

cursor:pointer;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd6-i7fgM9SHkpvc5MltBLEu2qxADmm-1bdUoKzqXh73pVsw6yoXVwoJR2WlZ0kcLOx5Z4TaUKB-mXVtO4jmM2O0MGldfEdVbCjH8Bkd3QdaG_e80gMfOCcRJtoZKtsXRUUkWq6BY4uAs6/s1600/blogduykhanhfacebookpopup.png) repeat;

height:15px;

padding:20px;

position:relative;

padding-right:40px;

margin-top:-20px;

margin-right:-22px;

}

.remove-borda {

width:366px;

margin:0 auto;

background:#F3F3F3;

margin-top:16px;

position:relative;

margin-left:20px;

}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover {

color:#80808B;

font-size:10px;

margin: 0 auto 5px auto;

float:center;

}

</style>

<script type='text/javascript'>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...

if (arguments.length > 1 && String(value) !== "[object Object]") {

options = jQuery.extend({}, options);

if (value === null || value === undefined) {

options.expires = -1;

}

if (typeof options.expires === 'number') {

var days = options.expires, t = options.expires = new Date();

t.setDate(t.getDate() + days);

}

value = String(value);

return (document.cookie = [

encodeURIComponent(key), '=',

options.raw ? value : encodeURIComponent(value),

options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE

options.path ? '; path=' + options.path : '',

options.domain ? '; domain=' + options.domain : '',

options.secure ? '; secure' : ''

].join(''));

}

// key and possibly options given, get cookie...

options = value || {};

var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;

return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

};

//]]>

</script>

<script type='text/javascript'>

jQuery(document).ready(function($){

if($.cookie('popup_user_login') != 'yes'){

$('#fanback').delay(10000).fadeIn('medium');

$('#Blogduykhanh, #fan-exit').click(function(){

$('#fanback').stop().fadeOut('medium');

});

}

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

});

</script>

<div id='fanback'>

<div id='fan-exit'>

</div>

<div id='JasperRoberts'>

<div id='Blogduykhanh'>

</div>

<div class='remove-borda'>

</div>

<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/blogduykhanh&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin: -27px 8px -18px 9px; width: 402px; height: 230px;'></iframe><center>

<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;"http://blogduykhanh.blogspot.com">Blog Duy Khánh</a> - <a style="color:#a8a8a8;font-size:8px;" href="https://www.facebook.com/blogduykhanh">Fanpage</a></span></center>

</div>

</div>

<!-- Facebook Popup Widget END -->

Tùy chỉnh Widget

Thay đổi địa chỉ fanpage

Bạn thay https://www.facebook.com/blogduykhanh thành địa chỉ fanpage của bạn

Thời gian popup bật lên sau khi tải trang

Trong mặc định ở đoạn code trên popup sẽ tự bật lên sau 10 giây tải trang. Nếu bạn muốn thay đổi nó bạn có thể tìm trong đoạn code trên .delay(10000)Và sửa nó theo ý mình. Đơn vị tính là mili giây, ví dụ bạn muốn đặt thời gian là 30 giây thì có thể sửa thành .delay(30000)

Hiện popup mỗi khi tải trang

Theo mặc định popup sẽ hiện lên chỉ với lần đầu tải trang và chỉ hiện lại sau 30 ngày để tránh làm phiền người đọc, bạn cũng có thể cho phép popup hiện lên mỗi lần tải trang bằng cách bằng cách tìm đoạn code sau và xóa nó đi.$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Vấn đề không nhìn thấy popup hoạt động

Như mình nói ở trên thì popup chỉ hiển thị một lần đầu duy nhất khi bạn tải trang, để chắc chắn nó hoạt động thì bạn có thể xóa cookie của trình duyệt đi rồi tải lại trang hoạt đơn giản hơn là sử dụng tổ hợp phím huyền thoại CTRL + SHIFT + N đối với Chrome, Cốc Cốc CTRL + SHIFT + P đối với Firefox. Nếu gặp vấn đề gì bạn có thể để lại bình luận bên dưới. Chúc bạn thành công!

Widget Bộ công cụ điều hướng đa năng blogger

2015-09-12T17:20:00.001+07:00

Bộ công cụ điều hướng này gồm các nút điều hướng cần thiết cho blogspot. Gồm các chức năng như: lên trên cùng, xuống dưới cùng, xuống từ từ, dừng xuống từ từ. Mời các bạn xem thử

DEMO

Công cụ có các nhiều chức năng giúp người đọc dễ dàng thao tác trên blog của bạn. Đặc biệt là những blog viết lách, tài liệu. Để thêm widget này bạn thực hiện theo bước sau:
Vào Bố cục > Thêm tiện ích > HTML/Javascript dán đoạn code sau vào khung nội dung và lưu lại. Ở bài này Khánh có giới thiệu 2 mẫu cho bạn lựa chọn. bạn có thể sử dụng 1 trong 2 đọan code sau:

Mẫu 1


<style type="text/css">
#backscroll {width:30px;line-height:50px;position:fixed;left:5px;top:200px;}
</style>
<script language="javascript">
suspendcode="<div id='backscroll'>
<a onclick='javascript:amutop();return false;' href='#' title='TOP'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPp9DiehI7bAEhKu67ry9n8ix4Q1bLoVk2ytH1y5Tr0ynu-JJWQSdEM3BJGqQAGE_I-r4DG8zzYjQ-Q4FrnW1Dml-HycuAg9R-vkFzp5Q7omVWmvD2gPTPyrX1W50w_3-hfWCIfFarZ9ZQ/s0/\" width=\"30\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='BACK'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguNsqbGbCccuOwYyuK6J5JPKZo0dIaYATPl3yF3DEYtu15KeH9PogkJZGn2aYP_2uSoYYag8r1hdx4bIghhpIEi9LgC40y0-HdgepLCY0lEAOxk6CmeoqYUDcvSD5HYcqjOv435mjts4Rf/s0/\" width=\"30\"></a><br><a onclick='javascript:sc();return false;' href='#' title='STOP'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPtle035XMtyYUl_CVAVoLgyErSXLsri34H_tpaJ9E-nHh5XM29jMYdVeY5Lw6OCVmhdaaEzrX1xi8rHL38cS6_Pegbsefv6Nt3K2gJ7jb06RYAIwcRIGad0jZLtLAENhRGkjTa7ClA0T/s0/\" width=\"30\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='DOWN'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUbOQNGpF9lcpZbxctmQKeP_rGrUS-M6E2YT37EQDd6eqLnOQeHvqngJrk3fxETWfbht3MKHZrhUckX5Bg3iP_alFhUN3AYsqqqRZ1VFZ0LwuNIL2SgrAovlB8HczVn953DxVaQE64ot9/s0/\" width=\"30\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='BOTTOM'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gsaG61YYv-13V0H6-J50j91beLsAA-tcZCAvlTUCejZQjuZMWxFVIPpxfaaUV5_B3M9ELGdDq3nQIzuVJddYrS8Cx-E4KoFY7hjZ7v5whJst1wygyiGKGaALnkbsOa_UykwwhnnhvKq0/s0/\" 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>

Mẫu 2


<style type="text/css">
#backscroll {width:30px;line-height:50px;position:fixed;left:5px;top:200px;}
</style>
<script language="javascript">
suspendcode="<div id='backscroll'>
<a onclick='javascript:amutop();return false;' href='#' title='TOP'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlidn0GqP4Mzkt-5s1kgHPIWby65G_sXgGKuZJAtXeGc-kKqbjzZ90T61PG-lA0JfGfhturNMTwl5mKGy-NkCQX5V2P8e-MJFhOHV1EUmdeHjHbTXJpAh45eyk7Wzau9rddinyIXdXXl-/s1600/top-blogduykhanh.gif\" width=\"30\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='BACK'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiQIGK3PrNsW7ec0AbrpuQDh_E1CGJssZsodbrRbvB5wop8C3P7z3NYp0_h4nJqQM94cBt4gHkQvX70kmaI2q8jBxpERHN_8BB_BPCYBnC-itALieof_YpKXcPMxjDLBF7ecZeYl9egDH/s1600/back-blogduykhanh.gif\" width=\"30\"></a><br><a onclick='javascript:sc();return false;' href='#' title='STOP'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhysK-vIuWVj-X5kwLVlf_2t9f8lO8ud2cCIANGbWQzVmAIeuNdTnPRGtZ_eztZYaj7ODvXdNsmhz2zG-bnbBXbTJ-R1nL9YUrTLWAP3jEqzB80GCg4dWzkITK7wV-cZe99Av4UT7uzYdLx/s1600/pause-blogduykhanh.gif\" width=\"30\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='DOWN'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8vyz2FX_wK-xvDcP5UP-5xYf8a8YKcUQz2PlnR-3xOvH6wNh9i_6X4cHw6Csulc5CMB923Ly85Spxqhn5oLRTHl2LQ3LweG1OLi-6FbQaWS07Wf7ni_q8FZwzvIwpYeqTWtwhmenn66B/s1600/gun-blogduykhanh.gif\" width=\"30\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='BOTTOM'><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXjNuBm-SsC8KJqn7eCNFiV_4ACG6ALavU464hlHZfdlM_2WxEj3HVkc2deBTvGzWTdh-9hAi1qS7CKMQOqU46gi14tIj_lTZp4Q623PqK0TweQO2j2k7j4jKS_pLTHKnoKK-BSsGEBGr/s1600/bottom-blogduykhanh.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>

Trong đó bạn có thể đổi left thành right nếu muốn widget hiện ở bên phải blog. top:200px là khoản cách widget với trên cùng blog, bạn cũng có thể thay đổi nó. Chúc thành công!

Thêm widget like fanpage ẩn cho blogspot

2015-09-11T22:28:00.001+07:00

Chào các bạn! Ở bài viết này BDK xin giới thiệu đến các bạn 1 widget rất quen thuộc đó là widget like fanpage ẩn bên phải trang blog. Thật ra bài viết này chỉ mang tính sưu tầm thôi vì đã có rất nhiều blog chia sẻ rồi. Ở widget này Khánh có chỉnh một số thông số theo ý mình, bạn nào thích có thể mang về dùng. Mời bạn xem trước

DEMO

Cách thêm wiget

Bạn chỉ cần vào Bố cục > Thêm tiện ích > HTML/Javascript. Sau đó dán đoạn code này vào là được

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script><!--Floating Facebook Widget by http://blogduykhanh.blogspot.com START-->

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".blogduykhanh").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .blogduykhanh{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSyPBLIjRkAL_ibFMDpItlOiM34UJ2JjE7hHpSpaKDEQQupvjuH2muu_HkqvlDT66-EzYk3RCB-_LdPwelTaVE21Tl2PnhwSV-9rjCT7uQF2kp70wkrZVQ8r5yGiNMBUYb7bYctdfSnaCv/s1600/blogduykhanhwwidget.png") no-repeat scroll left center transparent !important; float: right;height: 220px;padding: 0 5px 0 35px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .blogduykhanh div{ padding: 0; margin-right:-8px; border:4px solid  #284486; background:#fafafa;} .blogduykhanh span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .blogduykhanh span a{color: gray;text-decoration:none;} .blogduykhanh span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.Blogduykhanh.com--><div class="blogduykhanh" style="">

<!--Brought to you by http://blogduykhanh.blogspot.com/--><div>

<!-- http://blogduykhanh.blogspot.com--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/blogduykhanh&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=230" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 230px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by http://blogduykhanh.blogspot.com--></iframe></div>

</div>

<!--Floating Facebook Widget by http://blogduykhanh.blogspot.com END-->

Bạn chỉ cần đổi tên fanpage https://www.facebook.com/blogduykhanh thành tên fanpage của bạn là được rồi. Rất là đơn giản ^^ Tiện thể mời bạn like fanpage của Khánh ở cuối bài viết để xem nhiều hơn các thủ thuật khác nhé.

Lấy link trực tiếp và link download từ Google Drive dễ dàng với GDriveURL

2015-09-02T22:44:00.000+07:00

Lấy link trực tiếp và link download từ Google Drive với GDriveURL

Có lẽ Google Drive đã rất quen thuộc với chúng ta rồi đúng không? Nhất là những bạn viết blog hay web. Tuy nhiên với công cụ có sẵn của Google Drive chúng ta chỉ có thể lấy link chia sẻ hoặc link xem trước của tài liệu mà thôi. Ở bài viết này BDK sẽ giới thiệu đến các bạn những cách đơn giản nhất để lấy được tất cả các link của một tài liệu trên Google Drive.

Để dễ phân biệt các loại link thì sau đây mình xin demo cho các bạn xem thử 3 loại link mình gọi tên trong bài viết này. Đây là link của 1 ebook PDF "Tư duy tích cực tạo thành công" gồm có:

Link chia sẻ Link trực tiếp Link download

Tùy vào mục đích chia sẻ chúng ta có thể sử dụng linh hoạt 3 loại link này để tạo ra sự thuận lợi cho người đọc cũng như tạo sự chuyên nghiệp cho blog/web.
Như phần trên đã nói thì Google Drive chỉ cung cấp cho chúng ta link chia sẻ dạng như sauhttps://drive.google.com/open?id=0B5VqGSVMkE9ILWFPel9kRzBKWE0 Ở link trên các bạn có thể thấy phần in đậm chính là ID của tài liệu. Để có link trực tiếp chúng ta chỉ cần thay một chút xíu là được.https://googledrive.com/host/0B5VqGSVMkE9ILWFPel9kRzBKWE0Chỉ đơn gản vậy thôi. Tuy nhiên để cho thuận tiện thì Khánh xin giới thiệu với bạn một công cụ của Namkna. Rất đơn giản chỉ cần dán link chia sẻ vào là có ngay link trực tiếp.

Dán link chia sẻ của Google Drive ở đây Click để lấy link trực tiếp:

Mã chèn Javarscripts


<script src='Link trực tiếp'/>

Mã chèn CSS <link type='text/css' rel='stylesheet' href='Link trực tiếp'/> Mã chèn file PDF, Word, Excel, Powerpoint vào blog <iframe src="Link trực tiếp" style="width:650px; height:550px;" frameborder="0"></iframe>

Công cụ ở trên chỉ là phần cơ bản thôi còn chủ đề chính của bài viết này là GDriveURL. Đối với công cụ của GDriveURL thì vẫn chấp nhận cho bạn tạo link trực tiếp và link download cả khi không đăng nhập. Để tránh dài dòng thì phần này các bạn vui lòng xem hướng dẫn ở cuối trang chủ của GDriveURL.com. Nếu bạn đã sử dụng thì tốt nhất bạn phải kết nối với tài khoản Google. Để thực hiện điều đó chúng ta thực hiện theo các bước sau.

Đăng nhập GDriveURL bằng tài khoản Google

Truy cập vào GDriveURL.com. Bạn chọn nút "MyDrive" ở phía trên sau đó chọn "Login" như hình bên dưới

Sau đó gõ tài khoản nếu bạn chưa đăng nhập trước đó. Tiếp đến chúng ta chọn "Allow" để cho GDriveURL một số quyền trên tài khoản của mình. Những quyền này bao gồm: xem thông tin cá nhân cơ bản của bạn, quản lý file trên Google Drive, quản lý trang rút gọn link goo.gl.

Tạo link trực tiếp và link download chỉ bằng 2 cú click chuột

Đúng vậy bạn chỉ click vào nút Shared NO thành YES để chia sẻ tài liệu và nút "Permalink" để tạo liên kết là được như hình dưới

Vậy là chúng ta có thể tạo link trực tiếp và link download đến tất cả tài liệu trên blog một cách nhanh chóng rồi. Hoặc khi cần bạn có thể vào GDriveURL.com để lấy link rất tiện dụng. Mong rằng công cụ này giúp được nhiều cho bạn!

Template Personal mag cho blog cá nhân, doanh nghiệp

2015-08-31T21:20:00.001+07:00

Template Personal mag cho blog cá nhân, doanh nghiệp

Hi. Cũng lâu rồi không viết thêm gì nhỉ. Hôm nay BDK xin gửi đến các bạn yêu blogspot một template cũng kha khá đẹp phù hợp cho việc làm blog các nhân hoặc doanh nghiệp cũng rất ổn. Template này do Templateism.com thiết kế và Khánh chỉnh sửa lại thôi. Thật ra trong temp gốc cũng có nhiều lỗi lắm bạn với lại mình thích cái gì theo ý mình nên cũng sửa khá nhiều. Bạn có thể so sánh với bản gốc ở đây. Mời bạn xem thử

Những tính năng nổi bật của Template Personal mag

100% Pure Responsive: Hỗ trợ hiển thị trên nhiều thiết bị
Drop down menu: Phân nhiều cấp menu giúp linh hoạt trong sắp xếp các chủ đề trên blog.

Khung chia sẻ với khổ lớn gây chú ý ngay đầu bài viết

Khung đối tác của blog khá nổi bật với logo lớn chạy ngang

Tích hợp bản đồ của Google map lớn ở cuối trang

Hướng dẫn cài đặt template Personal mag

Về phần chữ thì bạn muốn sửa cái gì cứ tìm chữ ấy mà sửa. Không thành vấn đề

Chỉnh sửa menu chính

Đây là code của menu chính. Bạn có thể chỉnh sửa theo ý mình.

<div class='menu-secondary-container'>


<ul class='menus menu-secondary'>



<li class='visited'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>

<ul class='children'>

<li><a href='#'>Internet</a></li>

<li><a href='#'>Market</a></li>

<li><a href='#'>Stock</a></li>

</ul>

</li>




<li><a href='#'>Downloads</a>

<ul class='children'>

<li><a href='#'>Dvd</a></li>

<li><a href='#'>Games</a></li>

<li><a href='#'>Software</a>

<ul class='children'>

<li><a href='#'>Office</a>

</li>

</ul>

</li>

</ul>

</li>




<li><a href='#'>Parent Category</a>

<ul class='children'>

<li><a href='#'>Child Category 1</a>

<ul class='children'>

<li><a href='#'>Sub Child Category 1</a></li>

<li><a href='#'>Sub Child Category 2</a></li>

<li><a href='#'>Sub Child Category 3</a></li>

</ul>

</li>

<li><a href='#'>Child Category 2</a></li>

<li><a href='#'>Child Category 3</a></li>

<li><a href='#'>Child Category 4</a></li>

</ul>

</li>




<li><a href='#'>Featured</a></li>







<li><a href='#'>Health</a>

<ul class='children'>

<li><a href='#'>Childcare</a></li>

<li><a href='#'>Doctors</a></li>

</ul>

</li>




<li><a href='#'>Uncategorized</a></li>

 

</ul>

</div>

Phần đối tác của Blog

Chúng ta chỉnh sửa đoạn code sau. Bạn thay link hình ảnh và liên kết của blog mình vào những chỗ Khánh tô đậm.

<div class='slider-container-c'>

  <h2>ĐỐI TÁC CỦA BLOGDUYKHANH</h2>


  <p>Những trang liên kết, đối tác của blog</p>
<ul id='slider'>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg'/></a></li>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg'/></a></li>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg'/></a></li>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg'/></a></li>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg'/></a></li>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg'/></a></li>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/7.jpg'/></a></li>

<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/8.jpg'/></a></li>

</ul>

</div>

Thay đổi bản đồ cuối blog

Phần này hơi dài dòng tí. Đầu tiên chúng ta truy cập Google.com/maps. Zoom đến nơi bạn muốn hiển thị. Bạn cũng có thể chọn chính xác tên doanh nghiệp của mình nếu nó có trên Google map. Sau đó nhấn nút menu bên trái chọn "Chia sẻ hoặc nhúng bản đồ" như hình bên dưới

Chúng ta sẽ được một đoạn code như hình bên dưới

Tạm để nó qua một bên bạn vào template tìm đoạn code sau.

 <iframe frameborder='0' height='400' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7857.627026108941!2d105.77278598438701!3d10.032242597827118!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x4e7df8e0239f3ced!2sCan+Tho+University!5e0!3m2!1svi!2suk!4v1440942623110' style='border:0' width='100%'/>

Đây chính là đoạn code hiển thị bản đồ ở trang demo. Bạn chỉ cần thay đoạn code trên bằng đoạn code bạn có được ở trang Google map lúc nãy là được. Nhớ thay đổi chiều rộng width='100%' nhé.

Đến đây coi như hoàn tất, nếu có vấn đề gì bạn có thể để lại comment.

Template Torrentism làm trang download đơn giản cho blogspot

2015-08-16T21:14:00.005+07:00

Template Torrentism làm trang download đơn giản cho blogspot

Torrentism là một template blogspot được thiết kế theo khuynh hướng tối giản đặc trưng của một trang lưu trữ dữ liệu. Template này phù hợp cho những bạn muốn tạo trang download dữ liệu, lưu trữ hay những chủ đề không quan trọng về mặt hình ảnh.

Ở template này nói chung cũng khá đơn giản nên BDK sẽ tập trung giới thiệu về giao diện

Thanh menu cố định tiện dụng

Template Torrentism được thiết kế đơn giản chưa từng thấy với thanh menu cố định rất tiện dụng. Để thay đổi menu bạn chỉ việc vào mẫu template tìm kiếm từ khóa là một trong các từ trong menu sau đó thay đổi theo ý mình là được.

Code của thanh menu:

<div class='menu-secondary-container'>

<ul class='menus menu-secondary'>



<li><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></li>



<li><a href='#'><i class='fa fa-cloud-download'/> Downloads</a>

<ul class='children'>

<li><a href='#'>Dvd</a></li>

<li><a href='#'>Games</a></li>

<li><a href='#'>Software</a>

<ul class='children'>

<li><a href='#'>Office</a>

</li>

</ul>

</li>

</ul>

</li>



<li><a href='#'><i class='fa fa-bullhorn'/> Blog</a>

<ul class='children'>

<li><a href='#'>Child Category 1</a>

<ul class='children'>

<li><a href='#'>Sub Child Category 1</a></li>

<li><a href='#'>Sub Child Category 2</a></li>

<li><a href='#'>Sub Child Category 3</a></li>

</ul>

</li>

<li><a href='#'>Child Category 2</a></li>

<li><a href='#'>Child Category 3</a></li>

<li><a href='#'>Child Category 4</a></li>

</ul>

</li>



<li><a href='#'><i class='fa fa-envelope'/> About</a></li>



<li><a href='#'><i class='fa fa-globe'/> Community</a>

<ul class='children'>

<li><a href='#'>Childcare</a></li>

<li><a href='#'>Doctors</a></li>

</ul>

</li>

  

</ul>

</div>

Khung related post và các nút chia sẻ

Khung related được thiết kế đơn giản cùng các nút share loại lớn dễ gây sự chú ý

Nút Download

Nút download được thiết kế rất lớn là điểm nhấn trong bài viết

Được thêm bằng cách chèn vào khung soạn thảo HTML code sau:

<Div class = "downloadb">

<a href="#link-here"> Download phần mềm </a>

</ Div>

Hiển thị bài viết theo label ở trang chủ

Để hiển thị các bài viết theo từng label ở trang chủ như ở trang demo

Chúng ta vào Bố cục làm theo 3 bước như minh họa trong ảnh bên dưới

Phần cài đặt đến đây coi như đã hoàn xong. BDK chúc bạn thành công với template này!

Hiển thị lượt truy cập từng bài viết bằng Firebase

2015-08-09T23:43:00.000+07:00

Hiển thị lượt truy cập từng bài viết bằng Firebase

Ở bài viết này BDK xin chia sẻ với bạn cách để hiển thị số lượt truy cập của từng bài viết trên blogspot bằng cách sử dụng Firebase. Tiện ích này giúp bạn và người đọc có thể xem số lượt truy cập của từng bài viết giúp người đọc có thể tin tưởng vào bài viết của bạn hơn nếu bài viết có nhiều lượt truy cập. Ngoài ra bạn cũng có thể theo dõi bài viết của mình được người đọc đón nhận như thế nào từ đó có hướng đi đúng đắn. Mời bạn xem thử

Thêm nút Demo và Download với hiệu ứng động cho blogspot

2015-08-09T11:38:00.001+07:00

Button Demo và Download với hiệu ứng động cho blogspot

Hôm nay chủ nhật nên cũng tranh thủ ở nhà viết thêm một bài nữa. BDK xin giới thiệu một thủ thuật cũng nhỏ thôi nhằm giúp làm đẹp trang blogspot của bạn. Như bạn cũng thấy ở hình ảnh bên trên là nút Demo và Download lúc bình thường và lúc rê chuột vào với hiệu ứng động khá đẹp mắt.

Template Vienna Lite Responsive hỗ trợ SEO tốt

2015-08-09T00:48:00.001+07:00

Template Blogspot Vienna Lite Responsive hỗ trợ SEO

Tặng các bạn một template blogspot mà BDK cũng đang sử dụng. Có thể nói đây là lần đầu tiên BDK chia sẻ template blogspot, chắc có thể sẽ thiếu sót cái gì đó, mong mọi người góp ý. :)

Trước tiên nói về nguồn gốc thì Template này được thiết kế bởi Arlina Design. Template có rất nhiều tính năng hữu ích đặc biệt nhất có thể kể đến là khả năng SEO rất tốt. Cũng như ở tiêu đề có viết thì template này hỗ trợ cả Responsive tức là nó có khả năng tùy chỉnh theo từng kích thước màn hình khác nhau giúp người đọc có thể xem dễ dàng trên nhiều thiết bị và dĩ nhiên là thân thiện với thiết bị di động. Ngoài ra còn khá nhiều tính năng phải chờ bạn khám phá. Bây giờ chúng ta cùng cài đặt thôi!

Thêm nút "lên trên - xuống dưới" với hiệu ứng ẩn hiện chuyên nghiệp

2015-08-02T18:33:00.001+07:00

Thêm nút "lên trên - xuống dưới" với hiệu ứng ẩn hiện chuyên nghiệp

Nút lên trên, xuống dưới giúp bạn đọc blog của bạn có thể di chuyển trên blog một cách nhanh nhất, cách làm cũng khá đưn giản. Bạn thực hiện theo các bước sau.

Widget Recent Post đơn giản có nút Next, Previous

2015-08-02T12:49:00.000+07:00

Widget Recent Post đơn giản có nút Next, Previous

Widget recent post là một widget rất hữu dụng mà các blogger thường hay dùng. Bởi vì nó giúp người xem (nhất là những người thường hay theo dõi blog của mình) có thể dễ dàng nhìn thấy được những bài viết mới trên blog mà không cần về trang chủ. Và BDK còn mang lại cho bạn một điều còn tuyệt vời hơn thế, đó là widget recent post BDK sắp giới thiệu còn có thêm chức năng như một thanh điều hướng. Người xem có thể xem sơ lượt tất tần tật bài viết trên blog của bạn bằng nút Next và Previous. Quả là tuyệt vời đúng không? Giờ còn chần chờ gì nữa bắt tay vào làm thôi.

Tự động thay đổi màu nền Blogspot

2015-07-31T20:34:00.003+07:00

Tự động thay đổi màu nền Blogspot

Chắc không cần phải nói gì thêm đâu nhỉ vì ngay trên bài viết này bạn cũng thấy được một hiệu ứng khá đặc biệt đó là tự động thay đổi màu nền trong blogspot. Đây là cách trang trí trang blogspot của bạn một cách đơn giản nhưng không kém phần bắt mắt và chuyên nghiệp. Nếu bạn muốn cài đặt hiệu ứng này cho blog của mình cũng khá đơn giản.

Hướng dẫn cách sử dụng Font Awesome Icons

2015-07-21T21:38:00.000+07:00

Hôm nay, Khánh xin giới thiệu với các bạn một thủ thuật blogspot khá hay. Vốn là thời gian này Khánh đang trùng tu lại Blog Duy Khánh. Khi chỉnh sửa đến phần menu trên Blog thì mình cũng muốn sửa lại cái icon cho phù hợp với Blog của mình. Nhưng mà không ngờ nó không phải là hình ảnh, mà thật ra nó chỉ là font chữ thôi các bạn ạ. Các bạn có thể xem ở góc trên Blog Duy Khánh

Hướng dẫn cách sử dụng Font Awesome Icons

Hướng dẫn định dạng thanh trượt cho blogspot

2015-07-19T16:14:00.000+07:00

Hướng dẫn định dạng thanh trượt cho blogspot

Sau đây Blog Duy Khánh xin giới thiệu với các bạn một thủ thuật nhỏ giúp trang trí Blogspot của bạn thêm hoàn thiện hơn nhé.

Một số code cơ bản phổ biến cho Blogspot

2015-07-17T19:38:00.002+07:00

Nhằm giúp các blogger mới vào nghề hiểu thêm về code nên hôm nay mình chia sẻ lại một số code thông dụng thường gặp trong quá trình viết bài cũng như thiết kế blog. Hy vọng sẽ giúp ích được cho các bạn. Bài viết được tổng hợp từ Terocket.com

1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)

<span style="color:#339966; font:12pt Tahoma; margin-left:12px;">Nội_dung</span><span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span>

#339966 // Mã màu cho chữ
12pt Tahoma // Cỡ chữ và font chữ

margin-left:12px // Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại.

2. Canh giữa, canh phải

<div style="text-align:center;">Nội_dung</div>

center // Thay center = right cho canh phải hoặc = left cho căn trái

3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ

<b>Nội_dung_in_đậm</b>
<i>Nội_dung_in_nghiêng</i>
<u>Nội_dung_gạch_chân</u>
<strike>Nội_dung_chữ_bị_gạch_ngang</strike>

4. Dấu chấm vô dòng con, đánh số đầu dòng

Dấu chấm vô dòng con
<ul>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>

Đánh số đầu dòng
<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>

5. Bookmark đến một vị trí nhanh trong bài viết

<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí ">Nội_dung</a>

Lưu ý:
    Tên cách nhau không được dùng khoảng trắng mà phải dùng shift gạch. (VD: nhà_xinh)
    Tốt nhất không nên dùng chữ có dấu cho tên gán.

Ví dụ:
    - Đến điểm A (<a href="LINK_bài_viết_cụ thể#Diem_A">Đến điểm A</a>)
    - ...
    - Điểm A (<a name="Diem_A">Điểm A</a>)
Code trong ngoặc là chú thích cho ví dụ.
Như vậy khi ta click chuột vào "Đến điểm A" thì lập tức lệnh sẽ đưa ta nhảy đến vị trí "Điểm A".

6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)

1.
<div style="text-align:center;"><embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300"
type="application/x-shockwave-flash" scale="" play="true" loop="true"
menu="true"></embed></div>

2.
<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none"  width="400" height="400"></embed>

7. Chèn hình ảnh (image) vào bài viết

1. Code đơn giản
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/>

2. Code mở rộng
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>

    Ghi_chú // Khi rê chuột lên ảnh, sẽ hiện chú thích.
    Mô_tả // Khi rê chuột lên ảnh, sẽ hiện chú thích.
    Sử dụng hai lệnh này thì khi người dùng truy cập blog chọn không hiển thị ảnh thì sẽ hiện dòng chữ này thay cho ảnh đó.
    align="bottom" // Vị trí ảnh so với chữ. Có thể đổi thành middle(giữa) - top(trên) - bottom(dưới). Không dùng, để mặc định theo blog chọn sẵn thì xóa nó đi.

8. Chèn link liên kết vào bài viết

<a href="LINK" target="blank">Tên_Link</a>

target="blank" // Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang đang dùng (nghĩa là trang đang dùng sẽ bị load qua trang link ta vừa click vào). Nếu người dùng có thói quen "Open new tab" thì lệnh này có hay không cũng không khác biệt.

9. Chèn ảnh chứa link

<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>

10. Tạo button ẩn hiện nội dung

<div>
<div>
<input type="button" value="Xem" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div>
<div>
<div style="display: none;  border:#4F4F4F 1px solid; padding: 4px; background:# ">

NỘI_DUNG 

</div>
</div>
</div>

Ví dụ:

11. Chèn nhạc vào bài viết

<object name='hat' width=300 height=45>
<embed  type='application/x-mplayer2' 
 pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/'  
 controls='controlpanel' width=300 height=45 src='LINK_NHẠC' 
 autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'></embed></object>

    LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3)
    loop='0' // Không lặp lại
    loop='1' // Lặp lại một lần
    loop='-1' // Lặp lại mãi mãi
    autostart="0" // Không tự play
    autostart="1" // Play ngay khi web tải xong

12. Chia 2 cột, 3 cột, 4 cột

<table><tbody>
<tr><td class="column_1" style="font:12px Tahoma; color:#000000; width:120px;padding:4px;" valign="top"><div class="column_1">

Nội_dung_cột_1


</div>
</td><td class="column_2" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_2">

Nội_dung_cột_2


</div>
</td></tr>
</tbody></table>

Thêm cột thì thêm trên dòng </td></tr> đoạn code:

</td><td class="column_n" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_n">

Nội_dung_cột_n


</div>

13. Viền khung một nội dung trong bài viết

<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">
NỘI_DUNG 
</div>

    #4F4F4F 1px solid // Lần lượt là: Mã màu - Độ dày đường viền - Loại đường viền.
       - solid ______________
       - dashed ----------------
       - dotted ......................
    background:#eee // Nền khung
    width:400px // Bề rộng khung. Mặc định là sẽ rộng bằng khung bài viết (nếu bỏ lệnh này đi)

14. Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

    cols="59" // Bề rộng khung chứa code
    rows="18" // Số dòng trong khung chứa code
    wrap="on" // Trong một dòng, chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua
    wrap="off" // Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống

15. Ảnh rõ hơn khi rê chuột vào

1. Ảnh có chứa link

<a href="link_liên_kết" target="blank">
<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>
</a>

2. Ảnh không chứa link

<img
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>

opacity=0.6 và opacity=60 // Ảnh mờ trước khi rê chuột vào.
Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.

Ví dụ:

16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh

1. Ảnh có chứa link

<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>

2. Ảnh không chứa link

<img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" >

Ví dụ:

17. Tạo hiệu ứng khi rê chuột vào link liên kết

<a href="LINK"  target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>

    LINK // Link liên kết
    #eee // Mã màu khi rê chuột lên
    TEN_LINK // Tên gán cho link liên kết

18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)

<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>

scrolling=yes // Cho hiện thanh trượt, ngược lại không dùng thì sữa thành no
frameborder="0" // Đường viền, 0 là không viền

Ta có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://abc.html) vào bài viết đều được hết :)

19. Các loại đường viền | border: 1px #ccc solid;

Dashed - - - - - - - - - - - - - - - - -

Solid

_____________________

Dotted

..................................

20. Các kiểu định dạng chữ | text-decoration:none;

none (Không định dạng)

underline

(Gạch đích)

overline

(Gạch trên đầu)

line-through

(Gạch ngang chữ)

blink

(Chớp chớp)

inherit

21. Thêm các định dạng link vào class

 /*Link cố định*/a:link { color:#3366ff;text-decoration:none;}
/*Link đã xem qua*/a:visited {color:#ccc;text-decoration:none;}
/*Link khi rê chuột vào*/a:hover {color:#339966;text-decoration:underline;}

22. Tạo bóng đổ và bo tròn 4 góc viền

/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;

/*Tạo bóng đổ 4 cạnh*/
box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;

/*Bo tròn 4 góc viền*/
border-radius:4px; 

/*Bo tròn tùy chọn: top, right, bottom, left*/
border-radius:4px 4px 4px 4px;

Thay box thành text cho chữ

23. Các loại định dạng list | ... ul {list-style-type:none;}

none: Không hiển thị đánh dấu

disc

: Chấm vuông

circle

: Chấm tròn trắng

square

: Chấm tròn đen

decimal

: Kiểu số (1,2,3,4,…)

lower-alpha

: Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …)

upper-alpha

: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)

lower-roman

: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)

upper-roman

: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)

/*Link hình thay cho list*/

list-style-image:url('Link_hình');

24. Các vị trí đặt ảnh nền background | background: url(image) repeat ;

repeat: lặp ảnh

repeat-y:

lặp ảnh theo chiều dọc (từ trên xuống)

repeat-x

: lặp ảnh theo bề ngang (từ trái qua)

no-repeat

: không lặp

top

: đặt ảnh trên mép cùng

top right

: đặt ảnh mép trên cùng góc phải

top left

: đặt ảnh mép trên cùng góc trái

bottom

: đặt ảnh mép dưới cùng

bottom left

: đặt ảnh mép dưới cùng góc trái

bottom right

: đặt ảnh mép dưới cùng góc phải

right

: đặt ảnh bên mép phải

left

: đặt ảnh bên mép trái

center

: đặt ảnh ở vị trí giữa

25. Code xem địa chỉ IP, thông tin của máy truy cập blog

(Có thể post vào widget bất kỳ ở trên blog)

<img src="http://www.wieistmeineip.de/ip-address">

26. Cách mã hóa code

Với ký tự

phải đổi thành

Với ký tự

phải đổi thành

Với ký tự

phải đổi thành

Với

khoảng trắng

phải đổi thành

Để post các chú thích kí tự trên lên blog được thì:

phải đổi thành

&lt;

phải đổi thành

&gt;

phải đổi thành

&amp;

27. Các lệnh điều kiện <b:if cond= ... </b:if>

1. Điều kiện ở trang chủ

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

</b:if>

2. Điều kiện ở trang bài viết

<b:if cond='data:blog.pageType == "item"'>
...

</b:if>

3. Điều kiện ở trang chủ, trang nhãn

<b:if cond='data:blog.pageType == "index"'>
...

</b:if>

4. Điều kiện ở các trang lưu trữ

<b:if cond='data:blog.pageType == "archive"'>
...

</b:if>

5. Điều kiện ở các trang tĩnh

<b:if cond='data:blog.pageType == "static_page"'>
...

</b:if>

6. Điều kiện ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>

...

</b:if>

Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại)

Ví dụ: Điều kiện loại trừ trang bài viết

<b:if cond='data:blog.pageType != "item"'>

...

</b:if>

28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)

<!-- Lời ghi dưới mỗi bài viết -->
<b:if cond='data:blog.pageType == "item"'>

Nội_dung

Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..

29. Script chèn file .js vào blog

<script src='Link_File_JS' type='text/javascript'/>

30. Script chèn trực tiếp nội dung file .js vào blog

<script type='text/javascript'>
//<![CDATA[

Nội_dung_file_js



//]]>
</script>

31. Thêm nhanh khung hướng dẫn hay nội quy comment

- Tìm đến thẻ <data:blogTeamBlogMessage/>
- Đôi khi có tên là <data:blogCommentMessage/>
- Thêm vào sau nó đoạn code sau:

<!--Khung nội quy comment-->

Nội dung nội quy comment của bạn
<p></p>

- Sau mỗi hàng phải thêm cặp thẻ <br></br> hoặc <br/> nếu muốn xuống dòng.
- Có thể dùng các code trang trí cho khung như: hình ảnh, màu chữ, v.v..

Ví dụ: Code chèn nội dung hướng dẫn comment giống ở blog mình.

<!--Nội dung hướng dẫn comment-->
<div style='border:#ccc 1px solid; padding:4px;border-radius:4px; background:#eee;'>
Bạn có thể sử dụng một số thẻ HTML như: <br/>
<textarea cols='48' rows='4'>
» Chữ in đậm: <b>Nội_dung_chữ_in_đậm</b>
» Chữ in nghiêng: <i>Nội_dung_chữ_in_nghiêng</i>
» Chèn link liên kết: <a href='Link'>Tên_link</a>
» Chèn hình ảnh: [img]Link_hình[/img] </textarea>
</div>
<p/><p/>

Chúc thành công!.

Thông báo thay đổi giao diện Blog Duy Khánh

2015-05-18T16:14:00.000+07:00

C hào các bạn!

Xin chân thành cảm ơn mọi người đã ủng hộ và theo dõi Blog Duy Khánh trong thời gian qua. Tuy blog của mình chưa chỉnh chu cho lắm nhưng cũng rất vui vì được mọi người ũng hộ nhất là những bạn đã liên kết với Blog Duy Khánh.

Sự khác biệt trong tư duy của người giàu và người nghèo

2013-07-31T00:00:00.000+07:00

Tự tạo ra cuộc đời mình, sẵn sàng đón nhận cơ hội, tham gia cuộc chơi tiền bạc để giành chiến thắng... là những cách nhìn khác biệt so với người nghèo.

Người giàu: Tôi tạo ra cuộc đời tôi.
Người nghèo: Cuộc sống toàn những việc bất ngờ xảy đến với tôi.

Một số code html thường sử dụng cho Blog

2013-07-05T08:48:00.000+07:00

Chèn nhạc

<audio src="linknhac.mp3" controls>
<embed
src="linknhac.mp3"
width="300"
height="90"
loop="false"
autostart="false" />
</audio>

Hướng dẫn bảo vệ dữ liệu Blog

2013-05-11T08:09:00.002+07:00

Hôm nay tình cờ đọc được bài viết trên trang của Genk.Eus.vn cũng khá ấn tượng đó là lấy toàn bộ thông tin từ blogger khác. Mình cũng là một người rất xem trọng chuyện bản quyền nên dĩ nhiên là không khuyến khích việc lấy bài của người khác làm của riêng. Với lại bạn cũng nên tìm hiểu cách bảo vệ tài liệu, công sức của mình thôn qua bài hướng dẫn này.

Blog Duy Khánh

Teduh responsive blogger template

Tự động bôi đen khung chứa code bằng nhấp đúp chuột

Recent comment đơn giản cho blogspot

Sharing Social Widget - Nút chia sẻ lớn có đếm số cuối bài viết cho blogspot

Social follow widget - Nút theo dõi mạng xã hội đẹp và đơn giản

Sticky Widget - Neo nhiều Widget cố định trong Blogspot

Facebook Popup (Like Box Widget) cho Website của bạn

Cài đặt Popup Facebook like fanpage

Tùy chỉnh Widget

Thay đổi địa chỉ fanpage

Thời gian popup bật lên sau khi tải trang

Hiện popup mỗi khi tải trang

Vấn đề không nhìn thấy popup hoạt động

Widget Bộ công cụ điều hướng đa năng blogger

Mẫu 1

Mẫu 2

Thêm widget like fanpage ẩn cho blogspot

Cách thêm wiget

Lấy link trực tiếp và link download từ Google Drive dễ dàng với GDriveURL

Đăng nhập GDriveURL bằng tài khoản Google

Tạo link trực tiếp và link download chỉ bằng 2 cú click chuột

Template Personal mag cho blog cá nhân, doanh nghiệp

Những tính năng nổi bật của Template Personal mag

Hướng dẫn cài đặt template Personal mag

Chỉnh sửa menu chính

Phần đối tác của Blog

Thay đổi bản đồ cuối blog

Template Torrentism làm trang download đơn giản cho blogspot

Thanh menu cố định tiện dụng

Khung related post và các nút chia sẻ

Nút Download

Hiển thị bài viết theo label ở trang chủ

Hiển thị lượt truy cập từng bài viết bằng Firebase

Thêm nút Demo và Download với hiệu ứng động cho blogspot

Template Vienna Lite Responsive hỗ trợ SEO tốt

Thêm nút "lên trên - xuống dưới" với hiệu ứng ẩn hiện chuyên nghiệp

Widget Recent Post đơn giản có nút Next, Previous

Tự động thay đổi màu nền Blogspot

Hướng dẫn cách sử dụng Font Awesome Icons

Hướng dẫn định dạng thanh trượt cho blogspot

Một số code cơ bản phổ biến cho Blogspot

1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)

2. Canh giữa, canh phải

3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ

4. Dấu chấm vô dòng con, đánh số đầu dòng

5. Bookmark đến một vị trí nhanh trong bài viết

6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)

7. Chèn hình ảnh (image) vào bài viết

8. Chèn link liên kết vào bài viết

9. Chèn ảnh chứa link

10. Tạo button ẩn hiện nội dung

11. Chèn nhạc vào bài viết

12. Chia 2 cột, 3 cột, 4 cột

13. Viền khung một nội dung trong bài viết

14. Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)

15. Ảnh rõ hơn khi rê chuột vào

16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh

17. Tạo hiệu ứng khi rê chuột vào link liên kết

18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)

19. Các loại đường viền | border: 1px #ccc solid;

20. Các kiểu định dạng chữ | text-decoration:none;

21. Thêm các định dạng link vào class

22. Tạo bóng đổ và bo tròn 4 góc viền

23. Các loại định dạng list | ... ul {list-style-type:none;}

24. Các vị trí đặt ảnh nền background | background: url(image) repeat ;

25. Code xem địa chỉ IP, thông tin của máy truy cập blog

26. Cách mã hóa code

27. Các lệnh điều kiện <b:if cond= ... </b:if>

28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)

29. Script chèn file .js vào blog

30. Script chèn trực tiếp nội dung file .js vào blog

31. Thêm nhanh khung hướng dẫn hay nội quy comment

Thông báo thay đổi giao diện Blog Duy Khánh

Sự khác biệt trong tư duy của người giàu và người nghèo

Một số code html thường sử dụng cho Blog

Chèn nhạc

Hướng dẫn bảo vệ dữ liệu Blog