Cách Ẩn Nick trốn nợ Khi Đăng Nhập Facebook

Ẩn nick trên Facebook là gì?

Facebook có một tính năng giúp cho chúng ta biết ai đang online trên Facebook, bạn nhìn hình bên trên sẽ thấy những người Online thì nick Facebook của họ sẽ bật màu xanh bên phải và ngược lại, họ cũng thấy tên của nick của bạn bật đèn xanh khi bạn đang Online. Danh sách Online nầy chỉ hiển thị đối với những ai mà bạn và họ đã kết bạn với nhau. Vậy ẩn nick trong Facebook có nghĩa là bạn Online trên Facebook nhưng nick Facebook của bạn không bật mầu xanh.
Đương nhiên có những tình huống bạn cần có kiến thức giúp cho bạn ẩn Nick đi, để không ai biết mình đang Online mỗi ngày, mỗi giờ...và cũng để không muốn tiếp chuyện trong lúc bạn đang bận đến cả đầu tắt, mặt tối.

Cách ẩn nick chat trên Facebook

Dĩ nhiên muốn ẩn nick trên Facebook thì bạn phải đăng nhập vào Facebook của mình và thiết lập. Và chỉ cần thiết lập 1 lần thì mỗi khi vào Facebook,ì nó sẽ tự động đăng nhập Facebook ẩn nick cho bạn. Tức là Facebook sẽ nhớ thiết lập của bạn.

Sau khi bạn đã đăng nhập vào Tài khoản Facebook, bạn sẽ nhìn sang bên phải, góc dưới, bạn có thấy cái bánh xe không? Click chuột vào nó, ngay lập tức nó bật lên một menu thiết lập cho bạn. Tiếp tục chọn Cài đặt nâng cao.

Facebook sẽ bật lên một thiết lập ở giữa trang web cho bạn, Bạn chú ý có 3 thiết lập  Tiếp tục xem xét 3 tình huống ẩn nick trên Facebook mà bạn muốn cài đặt.

1. Chỉ tắt trò chuyện với một số người bạn. Tất nhiên bạn phải nhập vào đúng tên Nick của những ai mà bạn muốn tắt. Nếu bạn chọn thiết lập này thì Click chuột vào dâu chấm tròn bên phải nó.
2. Tương tự với lựa chọn thứ 2, chỉ khác là bạn sẽ cho nick của bạn ẩn với tất cả mọi người trừ những người bạn chọn.
3. Lựa chọn cuối cùng chính là cách ẩn nick Facebook với tất cả mọi người. Có nghĩa là tạm thời Nick của bạn ẩn danh luôn đến khi bạn xác lập lại tính năng nầy.

Sau khi quyết định xong bạn Click vào nút Lưu, quên điều nầy coi như bạn bạn khước từ những thay đổi bạn vừa xác lập.

Chúc tất cả các bạn vui vẽ, thành đạt với tính năng mà mình chia sẽ nhé.

Người viết: Nguyễn Đạt Khánh

Read More

Hướng dẫn cách tạo Floating Social Bar cho blogspot

Social SEO (hay còn gọi là SEO Mạng xã hội) là một trong những bước quan trọng để làm cho trang web của bạn trở nên nổi tiếng. Nó không những thu hút được nhiều lượt truy cập từ phía người dùng mà còn giúp cho nội dung trang web của bạn được tiếp cận bởi nhiều người hơn khi có ai đó chia sẻ chúng.

Dịch vụ blogger/blogspot cho phép người dùng tùy chỉnh được giao diện và bổ sung các mã HTML. Nhờ đó, việc tạo ra các widget hoặc thêm bớt các chi tiết trong mẫu càng trở nên dễ dàng hơn. Vì vậy, để tạo một Social Bar widget để người dùng có thể chia sẻ bài viết hoàn toàn dễ dàng. Trong bài viết này,Tinhoc24h.Net sẽ tóm tắt một chút về nội dung và hướng dẫn các bạn chèn Floating Social Bar cho blogspot đơn giản nhất nhé.

Floating Social Bar cho blogspot

Floating Social Bar là một thanh trượt nằm phía bên trái hoặc bên phải của trang web. Tại đây các nút hiển thị cho phép người dùng nhấp chuột vào để like và chia sẻ bài viết một cách nhanh chóng. Nếu như bạn là một người rành về HTML/CSS thì có thể tự mình tạo ra một thanh chia sẻ phù hợp với template của mình. Hoặc nếu bạn không biết về HTML/CSS thì có thể sử dụng ngay mẫu Floating Social Bar mà mình sắp chia sẻ dưới đây.

Demo Floating Social Bar For Blogspot

Bước 1: Đăng nhập vào Blogspot > Template > Edit HTML.

Bước 2: Tìm đến trước thẻ đóng </body> và chèn vào đoạn code bên dưới đây.

<!--Float social-->
<div class='addthis_toolbox addthis_floating_style addthis_counter_style' style='border: 1px solid #ddd;border-radius: 0px;left:90px;top: 150px;'>
<a class='addthis_button_facebook_like' fb:like:layout='box_count'/>
<a class='addthis_button_google_plusone' g:plusone:size='tall'/>
<a class='addthis_button_tweet' tw:count='vertical'/>
<a class='addthis_counter'/>
Chia sẻ
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b' type='text/javascript'/>
<!--End - Float social-->
Trong đó các bạn lưu ý cho mình 2 thuộc tính CSS sau:
– left:90px; là khoảng cách từ lề bên trái đến thanh social bar.
– top:150px; là khoảng cách từ lên trên đến thanh social bar.
Các bạn có thể thay đổi giá trị của 2 thuộc tính này sao cho chúng xuất hiện phù hợp với trang web của bạn

Bước 3: Nhấp chọn Save Template và kiểm thử ngay xem chúng đã xuất hiện ưng ý chưa nhé.

Đối với những bạn đang sử dụng responsive cho blogger template sẽ cần bổ sung thêm vài dòng CSS3 để ẩn thanh social bar này đi mỗi khi thu nhỏ màn hình. Các bạn có thể thêm vào trước thẻ ]]></b:skin>dòng CSS3 sau:@media screen and (max-width:1024px){.addthis_toolbox{display:none!important}}
Dòng CSS3 này sẽ tự động ẩn floating social bar khi kích thước màn hình nhỏ hơn hoặc bằng 1024px.

Như vậy là mình đã hướng dẫn xong cho các bạn cách chèn thanh chia sẻ mạng xã hội vào blogspot. Nếu như bạn có ý tưởng khác hay hơn thì đừng quên chia sẻ cùng mọi người nhé. Hi vọng rằng bài viết này sẽ hữu ích đối với các bạn. Chúc các bạn thành công!
Thương Lee

Nguồn tinhoc24h.net

Read More

Floating Social Bookmark trượt đẹp cho blogspot

Tiện ích (widget) này bao gồm các liên kết đến các mạng xã hội nổi tiếng hiện nay như: Facebook, Twiter, Google+, Pinterest, Youtobe và có một liên kết rss feed giúp độc giả theo dõi các bài viết của bạn. 

Bình thường tiện ích này ẩn chỉ hiện các button của các mạng xã hội, và các liên kết sẽ hiện ra từ từ khi ta di chuột vào các icon đó. 

Read More

Hiển thị widget thời tiết cho Blogger

Xin chào các bạn, hôm nay chúng ta sẽ đến với thủ thuật Blogger nhé
Nhiều bạn khá là thích thú với việc thêm nếm những widget hay ho để giúp cho blog của mình thêm phần sinh động và thú vị. Tất nhiên, có rất nhiều widget làm tốt điều này, hôm nay mình sẽ giới thiệu cho các bạn widget thời tiết cho Blogger. Một widget cực hay hiển thị các số liệu liên quan đến thời tiết hôm nay như: Trời đang nắng hay mưa, nhiệt độ ra sao,v.v…
Một số lưu ý với widget thời tiết này:

-Widget được giới thiệu bởi nhóm MBL
-Widget chạy rất mượt, tự động update thời tiết theo múi giờ và khu vực mà blog bạn setup
-Widget sẽ rất phù hợp cho các blog tin tức, thời tiết,v.v…

Ok, giờ là lúc chúng ta tiến đến bước quan trọng nhất

Cách thêm widget thời tiết cho Blogger

Đầu tiên, bạn hãy đăng nhập vào Blogger của bạn. Sau đó tìm đến phần: Template >> Edit HTML. Giờ thì tìm đến phần chứa css của Blogger. Đó là nằm trong thẻ <b:skin >
Các bạn chỉ cần copy và paste đoạn css sau vào trong đó:

.MyWeatherDiv .centerContainer {
width: 300px;
text-align: left;
margin-bottom: 200px;
}
.green {
color: #a6e22d;
}
.teal {
color: #66d9ef;
}
.purp {
color: #ae81ff;
}
.pink {
color: #f92772;
}
.yellow {
color: #e6db74;
}
.white {
color: #f8f8f2;
}
.grey {
color: #616161;
}
.f12 {
font-size: 12px;
}
.MyWeatherDiv img {
height: 64px;
width: 64px;
}
.weatherInfoRight {
z-index: 999;
position: fixed;
top: 10px;
right: 10px;
}
.weatherInfoLeft {
z-index: 999;
position: fixed;
top: 10px;
left: 10px;
}
.weatherInfoBottomRight {
z-index: 999;
position: fixed;
bottom: 10px;
right: 10px;
}
.weatherInfoBottomLeft {
z-index: 999;
position: fixed;
bottom: 10px;
left: 10px;
}
.MyWeatherDiv {
display: none;
background-color: #272822;
padding: 5px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.MyWeatherInfo {
text-align: center;
font-family: ‘Segoe UI’,Tahoma,Helvetica,Sans-Serif;
color: white;
font-size: 14px;
}
#divMyImage {
display: none;
}
.MyWeatherClose {
font-family: ‘Segoe UI’,Tahoma,Helvetica,Sans-Serif;
cursor: pointer;
position: absolute;
right: 10px;
color: white;
font-size: 20px;
}
.MWTemperature {
display: block;
}
.MWPlace {
display: block;
}
.MWIP {
display: block;
}
#clear-day {
display: none;
}
#clear-night {
display: none;
}
#partly-cloudy-day {
display: none;
}
#partly-cloudy-night {
display: none;
}
#cloudy {
display: none;
}
#rain {
display: none;
}
#sleet {
display: none;
}
#snow {
display: none;
}
#wind {
display: none;
}
#fog {
display: none;
}

Bước tiếp theo, khá quan trọng. Các bạn hãy tìm đến thẻ </head> và copy – paste đoạn mã JS dưới đây lên trước thẻ đó. (Mình khuyên bạn nên download file js đó về rồi upload lên Google Drive của bạn. Sau đó lấy link từ trên Drive về)

<script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/137869302/weather.js”></script>

Bước cuối cùng, các bạn thêm đoạn mã sau vào trước thẻ </body>. Bạn hoàn toàn có thể chỉnh vị trí hiển thị widget trong thẻ position: left hay right hay center.

<script type=”text/javascript”>
$.MyWeather({
position: “right”,
showpopup: true,
temperature: “c”,
closeicon: true,
showicon: true,
showtemperature: true,
showlocation: true,
showip: true,
size: 80,
iconcolor: “white”,
fontcolor: “white”,
}, function (e, f, g, a, d, b, c) {
$(“#txtCity”).html(e);
$(“#txtCountry”).html(f);
$(“#txtIP”).html(g);
$(“#txtLatitude”).html(a);
$(“#txtLongitude”).html(d);
$(“#txtTemperature”).html(b);
$(“#picTemp”).attr(“src”, c)
});
</script>

Vậy là đã hoàn tất công việc rồi. Giờ hãy xem thành quả của các bạn đi nào. Chúc các bạn thành công!

Bài viết được đăng tải trên Blog Thái Mèo.

Mọi sự sao chép vui lòng liên hệ hoặc ghi rõ nguồn để tôn trọng tác giả!

Read More

Cách thêm jQuery tabbed sidebar widget trong Blogger

Xin chào các bạn
Hôm nay, chúng ta sẽ cùng tiếp tục với series bài về thủ thuật Blogger nhé. Hy vọng là với những tip nhỏ mà mình chia sẻ thì bạn sẽ nhanh chóng tạo ra được cho bản thân mình một Blog thật chuyên nghiệp. Và vấn đề mà chúng ta sẽ tìm hiểu hôm nay sẽ là về jQuery tabbed, một trong những jQuery khá hay và hỗ trợ rất tốt cho Blogger. Nhớ nó mà bạn sẽ tiết kiệm được một không gian rất lớn cho sidebar đó. Nào, cùng tìm hiểu cách thêm jQuery tabbed sidebar widget trong Blogger nhé.

jQuery Tabbed sidebar widget là gì?

Sidebar là hay còn gọi là lề hai bên trái và phải trong bố cục của Blogger. Ở vị trí này bạn có thể đặt một số tiện ích (widget) hữu dụng như: Bài viết nổi bật, comment mới nhất, Nhãn, v.v…

Tuy nhiên, việc sử dụng quá nhiều  widget sẽ dễ dẫn đến việc Blog của bạn bị “tràn” diện tích và mang đến cảm giác trật trội rất tức mắt. Chính vì vậy mà jQuery tabbed đã được sinh ra để giải quyết vấn đề này. Đó là một đoạn mã giúp tích hợp các widget lại với nhau thành dạnh Tab. (Xem hình minh họa)

Rất nhiều website lớn đã tận dụng cách này nhằm khắc phục vấn đề không gian. Vì thế, tội gì bạn không sử dụng như. Rất hữu dụng mà lại đơn giản.

Cách thêm jQuery Tabbed

Đầu tiên, các bạn truy cập vào trang quản trị Blogger của bạn. Blogger >> Template >> Edit HTML.Sau đó các bạn tìm kiếm thẻ ]]></b:skin>.

Ok, giờ thì bạn có thể dán đoạn mã CSS sau vào trước thẻ đóng đó.

/* Tab Widget CSS*/

.tabviewsection {

background: #f8f8f8;

text-transform: uppercase;

border-bottom: 5px solid #f34246;

border-bottom-left-radius: 6px;

border-bottom-right-radius: 6px;

float: left;

width: 100%;

}

.tabs-widget {

list-style: none;

list-style-type: none;

margin: 0 0 10px 0;

padding: 0;

}

.tabs-widget li {

list-style: none;

list-style-type: none;

padding: 0;

float: left;

border-right: 2px solid #fff;

}

.tabs-widget li a {

color: #fff;

display: block;

padding-right: 16.5px;

padding-left: 16px;

font-size: 13px;

padding-top: 15px;

padding-bottom: 15px;

text-decoration: none;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

.tabs-widget-content {

}

.tabviewsection {

margin-top: 10px;

margin-bottom: 10px;

}

.tags_tab {

width: 80px;

text-align: center;

}

.about_tab {

width: 96px;

text-align: center;

}

li.laster {

border: 0px;

width: 120px;

text-align: center;

}

.blog-mobile-link {

display: none;

}

.tabs-widget li a {

padding-right: 20px;

padding-left: 20px;

}

.tabs-widget {

height: 51px;

}

.tw-authors {

width: 570px;

}

.tabviewsection h2 {

display: none;

}

.tabs-widget li a.tabs-widget-current {

padding-bottom: 20px;

margin-top: -10px;

background: #f8f8f8;

color: #444;

text-decoration: none;

border-top: 5px solid #f34246;

font-size: 14px;

text-transform: capitalize;

}

.tabs-widget li a {

background: #f34246;

}

Đến bước này thì bạn đã hoàn thành được một nửa chặng đường rồi. Tiếp theo, các bạn tìm kiếm đoạn mã sau: <div id=’sidebar-wrapper’> và dán đoạn mã sau vào ngay dưới thẻ div này. Đây sẽ là đoạn mã tạo ra 3 vị trí widget được lồng vào nhau thành dạng Tab.

[code]<!– Tab Widget [start] –>

<div class=’tabviewsection’>

<script type=’text/javascript’>

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

$(“.tabs-widget-content-widget-themater_tabs-1432447472-id”).hide();

$(“ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a”).addClass(“tabs-widget-current”).show();

$(“.tabs-widget-content-widget-themater_tabs-1432447472-id:first”).show();

$(“ul.tabs-widget-widget-themater_tabs-1432447472-id li a”).click(function() {

$(“ul.tabs-widget-widget-themater_tabs-1432447472-id li a”).removeClass(“tabs-widget-current a”);

$(this).addClass(“tabs-widget-current”);

$(“.tabs-widget-content-widget-themater_tabs-1432447472-id”).hide();

var activeTab = $(this).attr(“href”);

$(activeTab).fadeIn();

return false;

});

});

</script>

<ul class=’tabs-widget tabs-widget-widget-themater_tabs-1432447472-id’>

<li class=’about_tab’><a href=’#widget-themater_tabs-1432447472-id1′>About</a></li>

<li class=’tags_tab’><a href=’#widget-themater_tabs-1432447472-id2′>Tags</a></li>

<li class=’laster’><a href=’#widget-themater_tabs-1432447472-id3′>Popular</a></li>

</ul>

<!– Tab Widget 1 –>

<div class=’tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id’ id=’widget-themater_tabs-1432447472-id1′>

<b:section class=’sidebar’ id=’sidebartab1′ preferred=’yes’>

</b:section>

</div>

<!– Tab Widget 2 –>

<div class=’tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id’ id=’widget-themater_tabs-1432447472-id2′>

<b:section class=’sidebar’ id=’sidebartab2′ preferred=’yes’>

</b:section>

</div>

<div class=’tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id’ id=’widget-themater_tabs-1432447472-id3′>

<!– Tab Widget 3 –>

<b:section class=’sidebar’ id=’sidebartab3′ preferred=’yes’>

</b:section>

</div>

</div>

<!– Tab Widget [endt] –>[/code]

OK done, vậy là công việc đã hoàn thành. Các bạn hãy lưu mẫu lại ngay nhé. Giờ thì bạn đã có Tab tích hợp 3 widget với nhau rồi. Bạn hãy quay về phần bố cụ để kiểm tra xem đã có thêm 3 khu vực Widget mới chưa.

Nếu bạn kiểm tra và đã được như này thì ổn rồi đó. Giờ bạn hoàn toàn có thể thêm 3 tiện ích bất kỳ để tạo ra một Tabbed Sidebar Widget.

Chắc chắn đây sẽ là một TUT khá hữu dụng cho các bạn khi làm Blog. Hy vọng các bạn sẽ làm tốt và nếu có mọi thắc mắc gì có thể comment bên dưới nhé.

Chúc các bạn thành công!

*Code nguồn sưu tầm*

Bài viết được đăng tải trên Blog Thái Mèo.

Mọi sự sao chép vui lòng liên hệ hoặc ghi rõ nguồn để tôn trọng tác giả!

Read More

Tạo khung thông báo cho Blogspot (Blogger)

Một khung thông báo được sử dụng để làm nổi bật một tin quan trọng hoặc muốn gây sự chú ý cho độc giả khi vào Blog của Bạn.

Các Hello-Bar đi kèm với một loạt đầy đủ các tính năng tuyệt vời và bao gồm một nút hiển/ẩn cho phép người ẩn thanh thông báo nếu nó gây “kích thích” hoặc chỉ đơn giản là họ đã nhận thức điều quan trọng mà bạn muốn thông báo.

Read More

Tạo chức năng Responsive Video chèn (nhúng) từ Youtube vào Blogspot

Youtube là một dịch vụ lưu trữ và chia sẽ Video phổ biến nhất hiện nay, Youtube cũng cho chép người dùngnhúng (hoặc chèn) trực tiếp video vào trong Blog/Website. Tuy nhiên Youtube lại không hỗ trợ chức năng Responsive khi ta sữ dụng mã nhúng (hay chèn) trực tiếp vào Blog/Website.

Bình thường câu chuyện này khá là Oke đối đối với những Blog/Website có giao diện tĩnh còn đối với Blog/Website có chức năng Responsive (tự động co giãn theo màn hình) thì khi thu nhỏ màn hình lại thì Video đó vẫn giữ nguyên kích thước ban đầu ta quy định trọng mã nhúng

Điều này sẽ làm mất tính thẩm mỹ hoặc gây khó khăn cho người dùng những thiết bị di động vốn có kích thước hiển thị nhỏ hơn rất nhiều so với máy tính để bàn hay laptop… Hôm nay, sẽ hướng dẫn các bạn “Cách tạo chức năng Responsive Video chèn từ Youtube vào Blogspot nói riêng hay Website nói chung”. Mình xin đưa ra 2 cách cho các bạn lựa chọn MỘT LÀ SỬ DỤNG JS, HAI LÀ SỬ DỤNG CSS. Theo mình nghĩ 2 cách này đều rất tuyệt, các bạn dùng cách nào cũng được (Đều thể hiện sự chuyên nghiệp hiện khi chèn Video từ Youutube vào Blog/Website của bạn).

☼ Bắt đầu thủ thuật !

Cách 1: Sử dụng JS.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>.

<script type='text/javascript'>
//<![CDATA[
// Original Script by DTE :]
// Optimized and Modified by Kang Ismet
$(function() {
    $('a.youtube-link').each(function() {
        var yt_url   = this.href,
            yt_id    = yt_url.split('?v=')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<div class="youtube-box"><img class="youtube-img" src="http://img.youtube.com/vi/' + yt_id + '/0.jpg" alt="youtube" ></img><span class="gradient"></span><span class="youtube-title">' + yt_title + '</span><span class="youtube-play"></span></div>');
        $('div.youtube-box').click(function() {
            $(this).replaceWith('<div class="youtube-frame"><div class="videoWrapper"><iframe src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>');
        });
    });
});
//]]>
</script>  

Bước 2: Tiếp theo đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu lại.

.youtube-box {
    text-align:center;
    background-color: black;
    width: 640px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.youtube-frame {
    background-color: black;
    width: 640px;
    height: auto;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
}
.youtube-img {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: -7%;
    margin-bottom: -8.5%;
    transform: scale(1.1);
}
.youtube-box span {
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
.youtube-box .gradient {
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuy8SSbFQJGXChKv0SUKHBEgU61jdvkH89dIPTVYGAwGor-ry5JNUDNlt-lgIrXPSJaGuz1TDi_OMXILNWOOF4Ju_gqt9CCo5K7-W_kToPqSB3W9r__VjI1uryx6RynAx6cWH3o6dkK3Y/s1600/gradient.png') repeat-x top left;
}
.youtube-box .youtube-title {
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUbEOocH3VQNr7N4wmkfPLOBH17sGkrY316A80vSQx21EKK79Srmv3FKkZQHl_wDyFDlePYmncVdn012PPFoRBzb6cgxgVH-LNu_H1u9KrJQf8l1fBeLgGAY9PCfVhvojF_oD6QAZZTQ/s1600/t-title-bg.png') no-repeat 98% 50%;
  font:normal 19px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 2px black;
  bottom:auto;
  line-height:40px;
  height:40px;
  overflow:hidden;
  padding:0px 15px;
  text-align: left;
}
.youtube-box .youtube-play {
  cursor:pointer;
  width:74px;
  height:52px;
  top:50%;
  left:50%;
  margin:-26px 0px 0px -40px;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJgwL7hBMRnIxzv0NzfvvSVVu5gssLk0U7iOrNeDeTS-7jgItljsciYMMOOfwWbtdZ57U6vGXV1V9SI56DiMpN0WtzLWnX5cTEGT4_raVLIMWoRAIi9oIJO3gp6Q1IKFRszMflQu9qneo/s1600/yt-play-new.png') no-repeat top left;
}
.youtube-box .youtube-play:hover {
  background-position:bottom left;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}  

Bước 3: Chèn Video từ Youtube vào trong bài viết bằng cú pháp dưới đây:

<a class="youtube-link" href="https://www.youtube.com/watch?v=CevxZvSJLk8" rel="nofollow">Tên mà bạn muốn hiển thị</a>   

DEMO

Tên bạn muốn hiển thị

Cách 2: Sử dụng CSS.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu lại.

Nếu bạn muốn Video có tỉ lệ 16:9

.video-container {
    position: relative;
    padding-bottom: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}  

Nếu bạn muốn video có tỉ lệ 4:3

.video-container {
    position: relative;
    padding-bottom: 75%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}  

Bước 2: Nhúng Video từ Youtube vào trong bài viết bằng cú pháp dưới đây:

<div class="video-container">
<iframe width="" height="" src="//www.youtube.com/embed/" frameallowfullscreen></iframe>
</div>  

DEMO

☼ Tùy chỉnh:

·        Thay đường link màu đỏ thành đường link Video từ Youtube bạn muốn chèn vào (Chú ý: là Đường link nhé @!)

·        Thay phần màu vàng thành mã nhúng Video từ Youtube mà bạn muốn chèn vào (Chú ý: là Mã nhúng nhé <Mã nhúng mà đường link là hai cái hoàn toàn khác nhau>) đồng thời bỏ chiều cao và chiều rộng mặc định của mã nhúng đó đi … Chắc hẳn lấy mã nhúng từ Youtube các bạn biết cách lấy rồi nhỉ @! ... Click chuột phải vào Video chọn Sao chép mã nhúng vậy là xong.

Chúc các bạn thành công !

Tham khảo: BlogKangismet

Support gì thì cứ để lại comment @!

Nguồn Windows2it.com

Read More

Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 2

Xin chào tất cả các bạn đọc trên Windows2it. Hôm này là bài viết cuối cùng trong Seri thủ thuật “Thêm nút Share Pro Version vào Blogspot”. Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 2 này sẽ được cải tiến hơn rất nhiều so với phiên bản Pro Version 1 trước đó mình đã giới thiệu tới các bạn

Read More