Blog Chia Sẻ: Thủ Thuật Blogger

Home Posts filed under Thủ Thuật Blogger

Showing posts with label Thủ Thuật Blogger. Show all posts

Code Chèn Hình Ảnh Vào Blogspot

Đã có 1 số bài viết nói về vấn đề này. Nhưng mình cảm thấy không đầy đủ và những người mới tiếp xúc thì khó có thể tùy biến theo ý mình được. Nay mình xin tổng hợp lại thành bài viết này cho mọi người dễ tham khảo.
Đối với Entry. Đánh dấu check vào nút HTML trước khi chèn code.
Đối với tiện ích HTML/javascript Nếu chưa có tiện ích sẵn thì bạn cần thêm tiện ích mới mới vào blog.

Phần 1. Chỉ chèn hình ảnh.
1. Chèn hình với kích thước mặc định.

Quote:

2. Chèn hình ảnh với kích thước tùy chỉnh.

Quote:

Bạn chỉ sử dụng code này trong trường hợp bạn biết về kích thước của hình. Ko thì hình sẽ bị biến dạng.
3. Thiết lập chiều rộng của ảnh.

Quote:

Cách này áp dụng khi bạn muốn kích thước của hình vừa với chiều rộng của entry, module hay comment.
Khi bạn tùy chỉnh chiều rộng thì chiều cao sẽ tự thay đổi theo.
4. Chèn hình ảnh với tất cả các thuộc tính nâng cao.

Quote:

Trong đó:

Quote:

src="Link Hình"
Đường dẫn đến tập tin hình ảnh.
alt="Mô tả"
Dùng để mô tả cho ảnh cũng cần chứa từ khóa.
title="Nội dung"
Khi rê chuột vào tấm hình sẽ hiển thị nội dung.
width="n"
height="n"
Xác lập kích thước ảnh. Tránh lạm dụng để thay đổi kích thước ảnh vì có thể làm biến dạng ảnh.
n: có thể tính bằng pixel hay tỷ lệ phần trăm
border="n"
Chỉ định độ dày đường viên bao quanh ảnh.
n=0: không có đường viền

Với bảng này bạn có thể thêm các thẻ, hoặc xóa các thẻ để được đoạn code như ý. Mỗi thẻ cách nhau bằng 1 khoảng trắng.
Ví dụ:Bạn chỉ muốn viết mô tả cho tấm hình chứ ko muốn hiển thị nội dung khi rê chuột đến thì bạn thêm thẻ alt="
Viết mô tả cho tấm hình" và ko thêm thẻ title="Nội dung tấm hình"
. Tương tự đối với các thẻ khác.
Ví Dụ cụ thể:
Trường hợp chèn hình ảnh với tất cả thuộc tính nâng cao.

Quote:

Phần 2. Chèn hình ảnh có link muốn dẫn đến.
Khi bạn click vào hình ảnh sẽ dẫn đến 1 trang khác
1. Chèn hình với kích thước mặc định.

Quote:

2. Chèn với kích thước mặc định, khi click vào hình sẽ hiện ra cửa sổ mới.

Quote:

3. Chèn hình với tất cả thuộc tính nâng cao.

Quote:

Trong đó:

Quote:

href="Liên Kết"
Đường dẫn đến trang web muốn đến.
src="Link Hình"
Đường dẫn đến tập tin hình ảnh.
alt="Mô tả"
Dùng để mô tả cho ảnh cũng cần chứa từ khóa.
title="Nội dung"
Khi rê chuột vào tấm hình sẽ hiển thị nội dung.
width="n"
height="n"
Xác lập kích thước ảnh. Tránh lạm dụng để thay đổi kích thước ảnh vì có thể làm biến dạng ảnh.
border="n"
Chỉ định độ dày đường viên bao quanh ảnh.
n=0: không có đường viền
target="_blank"
Nếu chèn thẻ này vào thì khi bạn click vào hình trang được liên kết sẽ hiện ra ở cửa sổ mới

Với bảng này bạn có thể thêm các thẻ, hoặc xóa các thẻ để được đoạn code như ý. Mỗi thẻ cách nhau bằng 1 khoảng trắng.
Ví dụ: Khi bạn muốn chỉ tùy chỉnh chiều rộng của tấm hình cho phù hợp với module hoặc bài viết thì bạn thêm thẻ width="n" và ko cần thêm thẻ height="n", tương tự cho các thẻ khác.
Ví Dụ cụ thể:
Trường hợp chèn hình ảnh với tất cả thuộc tính nâng cao.

Quote:

Chúc Các Bạn Thành Công!

Blogger Thủ Thuật Blogger

Buttons shortcode - Tạo CSS3 Buttons trong Blogger!

Chu Bằng Blog 1:04 AM Comment

Giúp cho blogger của bạn đẹp từ những shortcode bằng việc tạo ra các nút bottons cực đẹp

Buttons shortcode được hiểu là 1 biểu tượng bằng hình ảnh, tạo ra các nút buttons cho blog của bạn đồng nghĩa với việc bạn đã tạo nên 1 đa màu sắc cho blog của bạn

tôi thử lấy vidu về 1 blog về ''Thủ thuật'' demo như Kenhshare.net tôi viết ra 1 số các bài viết vê chia sẻ cộng đồng vậy nếu mà tôi để liên kết từ text demo hoặc share hoặc download thì chắc chắn sẽ không đẹp và cuốn hút người đọc vì thế tôi thay nó bằng buttons được thiết kế dạng css3 màu sắc thì khỏi bàn

Bạn có thể tạo ra các buttons và chèn liên kết đi kèm, hầu như nút bottons này đều tương thích với các loại trình duyệt,biểu tượng và liên kết

1. Cài đặt buttons shortcode trong blogger

Để sử dụng nút shortcode trước tiên bạn phải cài đặt plugin shortcode cho blog blogger của bạn bằng cách làm theo 7 bước dễ dàng click vào liên kết phía dưới :

Đọc: Các bước cài đặt Blogger shortcode Plugin

Nếu blog của bạn đã có các cấu trúc đó rồi thì các bạn có thể bỏ và chuyển qua bước 2

2. Thêm Nút Color Themes

Theo mặc định tôi đã tạo ra chủ đề 9 màu cho các nút shortcode sử dụng nền CSS3 gradient. Đầu tiên chúng thêm những phong cách bên trong mẫu của bạn.

1 Vào Blogger > Template > Sao lưu mẫu của bạn

2 Nhấn vào Edit HTML

3 Tìm kiếm các mã này ]]></b:skin>

4 Chỉ cần ở trên nó dán mã CSS sau

/*-------Buttons Shortcode---------------- */ a.sc-button i{padding-right:3px}a.sc-button.large{padding:8px 20px;font-size:18px}a.sc-button.medium{padding:5px 14px;font-size:15px}a.sc-button.small{padding:1px 6px;font-size:12px}a.sc-button{padding:4px 14px;margin-bottom:0;font-size:14px;display:inline-block;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333;text-shadow:0 1px 1px rgba(255,255,255,0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe5e5e5',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border:1px solid #bbb;border-bottom-color:#a2a2a2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);text-decoration:none;font-family:oswald}a.sc-button:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position .3s linear;-moz-transition:background-position .3s linear;-o-transition:background-position .3s linear;transition:background-position .3s linear}a.sc-button.green{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#84FF00;background-image:-moz-linear-gradient(top,#84FF00,#58AA00);background-image:-webkit-gradient(linear,0 0,0 100%,from(#a7be2c),to(#95aa27));background-image:-webkit-linear-gradient(top,#84FF00,#58AA00);background-image:-o-linear-gradient(top,#84FF00,#58AA00);background-image:linear-gradient(to bottom,#84FF00,#58AA00);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#84FF00',endColorstr='#58AA00',GradientType=0);border-color:#95aa27 #95aa27 #5e6c19;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.green:hover{background-color:#58AA00}a.sc-button.blue{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.blue:hover{background-color:#2f96b4}a.sc-button.purple{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FD9CF8;background-image:-moz-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-o-linear-gradient(top,#FD9CF8,#CE00CF);background-image:linear-gradient(to bottom,#FD9CF8,#CE00CF);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FD9CF8',endColorstr='#CE00CF',GradientType=0);border-color:#CE00CF #CE00CF #FD9CF8;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.purple:hover{background-color:#CE00CF}a.sc-button.orange{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffab44f',endColorstr='#fff89406',GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.orange:hover{background-color:#f89406}a.sc-button.red{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FE1A0E;background-image:-moz-linear-gradient(top,#FE1A0E,#AC0905);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FE1A0E),to(#AC0905));background-image:-webkit-linear-gradient(top,#FE1A0E,#AC0905);background-image:-o-linear-gradient(top,#FE1A0E,#AC0905);background-image:linear-gradient(to bottom,#FE1A0E,#AC0905);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE1A0E',endColorstr='#AC0905',GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.red:hover{background-color:#AC0905}a.sc-button.black{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#363636;background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:linear-gradient(to bottom,#444,#222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);border-color:#222 #222 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.black:hover{background-color:#222} a.sc-button.brown{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FEAA33;background-image:-moz-linear-gradient(top,#FEAA33,#9F5E02);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FEAA33),to(#9F5E02));background-image:-webkit-linear-gradient(top,#FEAA33,#9F5E02);background-image:-o-linear-gradient(top,#FEAA33,#9F5E02);background-image:linear-gradient(to bottom,#FEAA33,#9F5E02);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEAA33',endColorstr='#9F5E02',GradientType=0);border-color:#9F5E02 #9F5E02 #FEAA33;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.brown:hover{background-color:#9F5E02} a.sc-button.fb{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#6080C6;background-image:-moz-linear-gradient(top,#6080C6,#3a5795);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6080C6),to(#3a5795));background-image:-webkit-linear-gradient(top,#6080C6,#3a5795);background-image:-o-linear-gradient(top,#6080C6,#3a5795);background-image:linear-gradient(to bottom,#6080C6,#3a5795);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6080C6',endColorstr='#3a5795',GradientType=0);border-color:#3a5795 #3a5795 #6080C6;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.fb:hover{background-color:#3a5795}

5 Lưu mẫu của bạn và bạn đều được thực hiện với các chỉnh sửa mẫu!

3. Cuối cùng Bắt đầu Thêm Nút sử dụng shortcode!

Để thêm một nút bên trong bài, bình luận của bạn hoặc sidebar widget HTML / JavaScript, hãy sử dụng shortcode dưới đây

[button]tiêu đề của bạn[/button]

Tùy chỉnh các nút bottons

Sau đây là danh sách đầy đủ các thuộc tính hỗ trợ bởi Buttons shortcode

Following is the complete list of attributes supported by Buttons Shortcode

Đặc tính	Định nghĩa
src	Chèn nút URL / Link đây
color	Nhắc đến nút Color. Tùy chọn: Options: red, brown, blue, green, purple, black,orange, fb
size	Điều chỉnh kích thước của các nút. Tùy chọn: nhỏ , vừa , lớn
rel	Quyết định có thêm một nofollow vào một liên kết hay không

Bây giờ ví dụ bạn muốn tạo một nút Download với một biểu tượng Download, nền màu xanh và kích thước lớn. Sau đó, bạn sẽ sử dụng thuộc tính bên trong shortcode trong các định dạng sau đây.

[button size="large" color="blue" src="http://www.example.com"] <i class="fa fa-download"></i> Download [/button]

Chèn download link bên trong src thuộc tính. Thay http://www.example.com của bạn..

Thay fa-download hoặc có thể vào đây để chọn buttons FontAwesome Icon class.

Nofollow Buttons!

đây là lựa chọn để quyết định xem bạn muốn thêm một thuộc tính liên kết nofollow với nút hay không. Bạn có thể nofollow nút demo và các nút truyền thông xã hội và tạo thuộc tính Nofollow này để quyết định PageRank của bạn vào một liên kết hay không. Bất cứ khi nào bạn muốn nói với các robot mà bạn đang liên kết một trang web, nhưng bạn không giới thiệu nó và không phải bạn muốn vượt qua PR để nó qua một backlink, sau đó chỉ cần thêm rel thuộc tính trong shortcode trong định dạng này:

[button rel="nofollow" src="http://www.example.com"]DEMO[/button]

Nếu trong trường hợp bạn muốn giới thiệu liên kết và tương tác PR của bạn với liên kết sau đó chỉ đơn giản là bỏ thuộc tính rel

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

Blogger Thủ Thuật Blogger

Code like mạng xã hội để xem nội dung được ẩn cho blogspot

Chu Bằng Blog 11:58 PM Comment

Bạn có biết rất nhiều blogger đang sử dụng các trang mạng xã hội để làm tăng lượng truy cập vào Website của họ không? Có rất nhiều cách mà các blogger áp dụng để liên kết blog của họ với các mạng xã hội. Tuy nhiên, để có thể liên kết và tăng sự liên kết tương tác giữa người dùng và các mạng xã hội là rất khó, vì đa số các cách chỉ là chèn dạng liên kết aherfbình thường, mặc dù có một số tiện ích giúp tăng lượng truy cập theo xã hội như popup, nhưng nó là không đủ. Nếu chúng ta muốn thống trị các trang web xã hội, thì mỗi chúng ta phải sử dụng mọi cơ hội mà chúng ta có. Vì lý do đó, namkna sẽ giới thiệu một tiện ích của mybloggerlab để khóa nội dung dựa trên các like của độc giả.

Bạn có sử dụng nhiều tiện ích để chia sẻ trang của trang web của bạn trên các mạng xã hội? Tuy nhiên, sự tương tác của độc giả với blog/web của bạn thông qua hệ thống mạng xã hội là còn tương đối thấp nếu không muốn nói là rất thấp. Trên thực tế, vấn đề là, mặc dù mọi người thích nội dung của bạn, nhưng họ không bấm vào các nút button xã hội và thay vào đó đã đọc và rời khỏi trang web của bạn bởi vì họ không quan tâm đến trafic của bạn hoặc trang web của bạn. Yêu cầu mọi người like, +1 hoặc tweet để có được quyền truy cập vào nội dung của bạn thực sự là một cách lý tưởng buộc người dùng phải chia sẻ nó trên các trang web xã hội.

Khóa nội dung qua mạng xã hội bao gồm ba nút của 3 mạng xã hội và hiển thị theo chiều ngang. Các nút xã hội bao gồm Facebook, Twitter và Google +. Bất cứ khi nào, một người hoặc là sẽ nhấn Like, Tweet hay +1 với một nút nó sẽ hiển thị nội dung ẩn. Điều này cho phép một người để nhận được theo xã hội thực tế hơn. Tất nhiên ta chỉ nên ẩn những nội dung "cần ẩn" ví dụ như "Like để hiện link download" chẳng hạn. Đừng nên lạm dụng chức năng này quá sẽ gây phiền hà cho độc giả của mình để rồi chịu hậu quả ngược lại

Và để xem nội dung của bài viết bạn hãy click một trong số các button ở demo bên dưới nhé.

☼ Bước 1: Cài đặt Social Content Locker trong Template của BlogSpot:

1.1- Đăng nhập vào Blog

1.2- Vào Mẫu (Template) => Chỉnh sửa HTML

1.3. Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>:

/* --- Social Content Locker For Blogger http://blogchubang.blogspot.com/ --- */
.to-lock{background-color:#f6f6f6;padding:20px}
.inner-wrap{background:#435989}#header .get-it a{text-decoration:none;color:#000}#header .get-it #zenbox_tab{background-color:#f6f6f6!important}#zenbox_tab:hover{background-color:#333!important}#zenbox_tab #feedback_tab_text{color:#333!important}#zenbox_tab:hover #feedback_tab_text{color:#fff!important}.ui-social-locker,.ui-social-locker .ui-social-locker-text,.ui-social-locker .ui-social-locker-timer{font:normal normal 400 13px/23px "Arial",serif}.ui-social-locker,.ui-social-locker .ui-social-locker-outer-wrap,.ui-social-locker .ui-social-locker-inner-wrap{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-social-locker{position:relative!important;background-color:#f9f9f9;padding:25px;margin:20px auto;max-width:700px}.ui-social-locker p{margin:0}.ui-social-locker .ui-social-locker-text{text-align:center}.ui-social-locker-text .ui-social-locker-strong{font-weight:bold;text-transform:uppercase;font-size:16px;display:inline-block}.ui-social-locker-buttons{text-align:center}.ui-social-locker-text+.ui-social-locker-buttons{margin-top:15px}.ui-social-locker-button-inner-wrap,.ui-social-locker-button-overlay{height:40px;width:120px;padding:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:1}.ui-social-locker-button-inner-wrap{position:relative}.ui-social-locker-button{display:inline-block;vertical-align:top;text-align:left}.ui-social-locker-button-overlay{position:absolute;top:0;left:0}.ui-social-locker-button+.ui-social-locker-button{margin-left:10px}.ui-social-locker-button{background-color:#f2f2f2}.ui-social-locker-button .fb-like span,.ui-social-locker-button .fb-like iframe{height:20px!important}.ui-social-locker-button-overlay *{position:absolute;width:100%;top:0;left:0}.ui-social-locker-overlay-front,.ui-social-locker-overlay-back{height:100%;top:0;left:0}.ui-social-locker-overlay-front{z-index:1}.ui-social-locker-overlay-back{z-index:0}.ui-social-locker .ui-social-locker-cross{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSU14rZbi7QnIuzm10ycHrsBSdyBNUUgWj373k7giq2pxSbms1x5526tYqqz9_8frgjA49oIq0UdSLmO8Ctk665MkYZk_GthqXa4g8jIohYJpgxmI7YZ14s7kkag7a1yhdMK3zYH9l0I/s1600/close+(1).png") 50% 50% no-repeat;width:16px;height:16px;opacity:.1;filter:alpha(opacity=10);cursor:pointer;position:absolute;top:4px;right:4px;z-index:2}.ui-social-locker:hover .ui-social-locker-cross{opacity:.2;filter:alpha(opacity=20)}.ui-social-locker .ui-social-locker-cross:hover{opacity:.8;filter:alpha(opacity=80)}.ui-social-locker .ui-social-locker-timer{position:absolute;right:5px;bottom:5px;z-index:10}.ui-social-locker .ui-social-locker-timer,.ui-social-locker .ui-social-locker-timer *{font:normal normal 400 12px/12px sans-serif;text-transform:lowercase}.ui-social-locker .ui-social-locker-timer{color:#000;margin-left:5px}.ui-social-locker .ui-social-locker-timer-counter{font-weight:bold}.ui-social-locker-opera .ui-social-locker-button-facebook .fb-like{position:relative;top:-1px}.gc-bubbleDefault{display:none!important}.ui-social-locker-flip .ui-social-locker-button-inner-wrap{perspective:500px;perspective-origin:50% 0;-webkit-perspective:500px;-webkit-perspective-origin:50% 0;-moz-perspective:500px;-moz-perspective-origin:50% 0}.ui-social-locker-flip .ui-social-locker-button-overlay{display:block;transform-origin:bottom;transform-style:preserve-3d;transition:transform .3s ease;transform:translate(0);-webkit-transform-origin:bottom;-webkit-transform-style:preserve-3d;-webkit-transition:-webkit-transform .3s ease;-webkit-transform:translateY(0) rotateX(0);-moz-transform-origin:bottom;-moz-transform-style:preserve-3d;-moz-transition:-moz-transform .3s ease;-moz-transform:translate(0)}.ui-social-locker-flip .ui-social-locker-overlay-back{transform:rotateX(-180deg) translateZ(4px);-webkit-transform:rotateX(-180deg) translateZ(4px);-moz-transform:rotateX(-180deg) translateZ(4px)}.ui-social-locker-flip .ui-social-locker-overlay-header{height:4px;transform-origin:top;transform:rotateX(-90deg);-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);-moz-transform-origin:top;-moz-transform:rotateX(-90deg)}.ui-social-locker-flip:hover .ui-social-locker-button-overlay{display:block!important;transform:translateY(4px) rotateX(-110deg);-webkit-transform:translateY(4px) rotateX(-110deg);-moz-transform:translateY(4px) rotateX(-110deg)}.ui-social-locker-flip:hover .ui-social-locker-overlay-back{border-top:2px solid #eee}.ui-social-locker-secrets .fb-like span,.ui-social-locker-secrets .fb-like iframe{width:118px!important}.ui-social-locker-secrets{padding:30px;margin:10px auto 15px auto;border:0;background-color:transparent}.ui-social-locker-secrets .ui-social-locker-inner-wrap{border:3px solid #fefefe;background-color:#f7f7f7;padding:30px}.ui-social-locker-secrets .ui-social-locker-outer-wrap{border:1px solid #e6e6e6;box-shadow:0 0 40px rgba(0,0,0,0.08)}.ui-social-locker-secrets .ui-social-locker-text,.ui-social-locker-secrets .ui-social-locker-timer,.ui-social-locker-secrets .ui-social-locker-timer *{-webkit-text-shadow:1px 1px 2px #fff;-moz-text-shadow:1px 1px 2px #fff;text-shadow:1px 1px 2px #fff}.ui-social-locker-secrets .ui-social-locker-text .ui-social-locker-strong:before,.ui-social-locker-secrets .ui-social-locker-text .ui-social-locker-strong:after{content:" ";display:inline-block;width:11px;height:14px;margin:0 9px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9aAYMm0qr5StVkyifoPRVnlMTvnmGAnTzWOncXZZiHrpwdnJdVdA9zq451f2G1rK5RDMOLw81PWJaRJE5ezBQDd4bvQXA6tvWcZPQA6M0RGqkUNBN3cSexAofSQy2wqTcx8eUNYUsxKQ/s1600/lock-icon.png") 0 2px no-repeat}.ui-social-locker-secrets .ui-social-locker-text .ui-social-locker-strong:after{margin-left:10px}.ui-social-locker-secrets .ui-social-locker-button{padding:4px;background:rgba(0,0,0,0.05)}.ui-social-locker-secrets .ui-social-locker-button-inner-wrap,.ui-social-locker-secrets .ui-social-locker-button-overlay{height:34px;width:118px}.ui-social-locker-secrets .ui-social-locker-button-inner-wrap{padding:7px;-moz-box-shadow:inset 0 0 6px rgba(0,0,0,0.25);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.25);box-shadow:inset 0 0 6px rgba(0,0,0,0.25)}.ui-social-locker-secrets .ui-social-locker-button-twitter .ui-social-locker-overlay-front{background:#399ff0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLWUqkrX-B0ppRykmdReCS0841WIgE_D7P8PSmXa3_Hryt7U-oB1sQjJevHRawb4BdG4_cK_Z9ov7-jGgoKMuMXpABh8Ga2hb8m3lOKDacpAscqagFA1vDPFzOGWsc6chlkdFfJ_aphQ/s1600/tweet-btn.png") top left no-repeat}.ui-social-locker-secrets .ui-social-locker-button-twitter .ui-social-locker-overlay-back{background:#24b1e5}.ui-social-locker-secrets .ui-social-locker-button-twitter .ui-social-locker-overlay-header{background-color:#368acd}.ui-social-locker-secrets .ui-social-locker-button-facebook .ui-social-locker-overlay-front{background:#46629e url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCY6iwS76xaeJmP6Y4BDk5MRQcY8LSzREa6QdCs5UadYqHHDoCDoQXPY8U_MeLy_hqfl7ZS6ddIMt_1vmQK8ZkVcLcT23uqIuDtMXzaY_mvMYQc_NB_Nb_37jgsApp3n0XiVPaElwcZ90/s1600/like-btn.png") top left no-repeat}.ui-social-locker-secrets .ui-social-locker-button-facebook .ui-social-locker-overlay-back{background:#46629e}.ui-social-locker-secrets .ui-social-locker-button-facebook .ui-social-locker-overlay-header{background-color:#314775}.ui-social-locker-secrets .ui-social-locker-button-google .ui-social-locker-overlay-front{background:#494647 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zuHPwldYjrRMZ4V6k7GsCyGCORT8avO9uJX9LXSYkzEyojNZH5gdnhU2hQkYsRrD9em-K6ZdS22UJLnJ7Tkw7CHF-lq-Q3ZCem-k9gdjN_SmL3_XEirly-lIuBarJJI3l-cjBWvbyVQ/s1600/plus-one-btn.png") top left no-repeat}.ui-social-locker-secrets .ui-social-locker-button-google .ui-social-locker-overlay-back{background:#494647}.ui-social-locker-secrets .ui-social-locker-button-google .ui-social-locker-overlay-header{background-color:#111}.ui-social-locker-secrets .ui-social-locker-cross{top:38px;right:38px}.ui-social-locker-secrets .ui-social-locker-dandyish .ui-social-locker-outer-wrap{padding:5px;background-color:#fff;border-radius:10px}.ui-social-locker-dandyish .ui-social-locker-inner-wrap{padding:10px;border-radius:10px;background-color:f8f8f8;background:linear-gradient(top,#f9f9f9,#F5F5F5);background:-o-linear-gradient(top,#f9f9f9,#F5F5F5);background:-moz-linear-gradient(top,#f9f9f9,#F5F5F5);background:-webkit-linear-gradient(top,#f9f9f9,#F5F5F5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9',endColorstr='#F5F5F5',GradientType=0);background:-ms-linear-gradient(top,#FFF,#F5F5F5);-moz-box-shadow:inset 0 1px 6px rgba(0,0,0,0.20);-webkit-box-shadow:inset 0 1px 6px rgba(0,0,0,0.20);box-shadow:inset 0 1px 6px rgba(0,0,0,0.20)}.ui-social-locker-dandyish .ui-social-locker-text{padding:10px}.ui-social-locker-dandyish .ui-social-locker-text,.ui-social-locker-dandyish .ui-social-locker-timer,.ui-social-locker-dandyish .ui-social-locker-timer *{-webkit-text-shadow:1px 1px 2px #fff;-moz-text-shadow:1px 1px 2px #fff;text-shadow:1px 1px 2px #fff}.ui-social-locker-dandyish .ui-social-locker-text .ui-social-locker-strong:before,.ui-social-locker-dandyish .ui-social-locker-text .ui-social-locker-strong:after{content:" ";display:inline-block;width:11px;height:14px;margin:0 9px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9aAYMm0qr5StVkyifoPRVnlMTvnmGAnTzWOncXZZiHrpwdnJdVdA9zq451f2G1rK5RDMOLw81PWJaRJE5ezBQDd4bvQXA6tvWcZPQA6M0RGqkUNBN3cSexAofSQy2wqTcx8eUNYUsxKQ/s1600/lock-icon.png") 0 2px no-repeat}.ui-social-locker-dandyish .ui-social-locker-text .ui-social-locker-strong:after{margin-left:10px}.ui-social-locker-dandyish .ui-social-locker-buttons{margin:0;padding:5px}.ui-social-locker-dandyish .ui-social-locker-button{border-radius:7px;background-color:rgba(255,255,255,1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.15);-webkit-box-shadow:0 3px 1px rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.15)}.ui-social-locker-dandyish .ui-social-locker-button .fb-like iframe{height:61px!important}.ui-social-locker-dandyish .ui-social-locker-button+.ui-social-locker-button{margin-left:15px}.ui-social-locker-dandyish .ui-social-locker-button-inner-wrap{width:85px;height:84px;padding:10px;text-align:center}.ui-social-locker-dandyish .ui-social-locker-cross{top:20px;right:20px}.ui-social-locker-dandyish .ui-social-locker-timer{right:20px;bottom:20px}.ui-social-locker-glass{padding:15px;border:0;-moz-box-shadow:0 1px 1px rgba(255,255,255,0.7),inset 0 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 1px rgba(255,255,255,0.7),inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:0 1px 1px rgba(255,255,255,0.7),inset 0 1px 1px rgba(0,0,0,0.1);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 1px #fff;background:rgba(0,0,0,0.03)}.ui-social-locker-glass .ui-social-locker-outer-wrap{padding:30px;-webkit-border-radius:11px;-moz-border-radius:11px;border-radius:11px;-webkit-shadow:0 1px 5px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.7);-moz-box-shadow:0 1px 5px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.7);box-shadow:0 1px 5px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.7);background:#f7f7f7;background:-moz-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.5)),color-stop(100%,rgba(240,240,240,0.5)));background:-webkit-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:-o-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:-ms-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:linear-gradient(to bottom,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%)}.ui-social-locker-glass .ui-social-locker-text .ui-social-locker-strong:before,.ui-social-locker-glass .ui-social-locker-text .ui-social-locker-strong:after{content:" ";display:inline-block;width:11px;height:14px;margin:0 9px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9aAYMm0qr5StVkyifoPRVnlMTvnmGAnTzWOncXZZiHrpwdnJdVdA9zq451f2G1rK5RDMOLw81PWJaRJE5ezBQDd4bvQXA6tvWcZPQA6M0RGqkUNBN3cSexAofSQy2wqTcx8eUNYUsxKQ/s1600/lock-icon.png") 0 2px no-repeat}.ui-social-locker-glass .ui-social-locker-button{-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.12),0px 1px 1px rgba(255,255,255,0.7);-moz-box-shadow:inset 0 0 4px rgba(0,0,0,0.12),0px 1px 1px rgba(255,255,255,0.7);box-shadow:inset 0 0 4px rgba(0,0,0,0.12),0px 1px 1px rgba(255,255,255,0.7)}.ui-social-locker-glass .ui-social-locker-cross{top:20px;right:20px}.ui-social-locker-glass .ui-social-locker-timer{right:23px;bottom:21px}#built-in-themes .title{font-style:normal;padding-bottom:0;margin-bottom:0;margin-top:25px}#built-in-themes .title:first-child{margin-top:0}#built-in-themes .example{padding:0 0 0 16px}#built-in-themes .pattern-background{background:url("http://onepress-media.com/storage/demo/social-locker-for-wordpress/img/preview-bg.png");padding:25px 25px 10px 25px;box-shadow:inset 0 0 30px #fff}.my-custom-style{padding:30px 20px 20px 220px;height:200px;background:#f8f8f8 url("http://onepress-media.com/storage/demo/social-locker-for-wordpress/img/lock-example.png") 20px 20px no-repeat}.my-custom-style .ui-social-locker-text{text-align:left}.my-custom-style .ui-social-locker-buttons{padding:0;text-align:left}.my-custom-style .ui-social-locker-button{width:100px} 
#mblunlocker { text-align: center;  font-family:Arial, serif; text-transform: uppercase; font-weight:bold; font-size:12px; position:relative}

1.4- Lưu lại là xong bước này:

☼ Bước 2: Sử dụng khi viết bài.

Bây giờ bất cứ khi nào muốn một người xem một nội dung trong bài viết cụ thể của bạn thông qua mạng xã hội, bạn có thể làm theo các hướng dẫn sau đây. (Ghi nhớ: các bước tương tự cũng có thể được sử dụng trên khu vực tiện ích và thậm chí trong một mẫu).

2.1- Về Blogger.com
2.2- Chọn đăng bài mới.
2.3- Chọn Tab HTML từ trình biên tập bài blogger và dán mã sau đây.

<article id="default-usage">
<div class="to-lock" style="display: none;">
<div style="text-align: center; margin-bottom: 20px;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
NỘI DUNG ẨN CÁC BẠN VIẾT TẠI ĐÂY
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</div>
</div></article><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/66256041/JQuery/namkna-blogspot-com/Locklike.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Nội Dung Đã Được Khóa",
message: "Hãy like - theo dõi - +1 để xem nội dung khóa."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
 // twitter options
twitter: {
url: "http://twitter.com/chubang92",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/chubang92",
appId: "131761626979828"
},
google: {
url: "http://blogchbang.blogspot.com/"
}
});
});;;;
</script>

☼ Tùy chỉnh:

Thay http://twitter.com/chubang92 thành URL trang twitter của bạn.
Thay https://www.facebook.com/chubang92 thành URL trang cá nhân hoặc fanpage của bạn.
Thay http://blogchubang.blogspot.com/ thành URL trang web hoặc bài viết của bạn. Lưu ý là nếu để URL trang web thì nó sẽ hiển thị tổng số lần +1 của trang. Còn URL bài viết thì chỉ hiện số lần +1 của bài viết.
Thay NỘI DUNG ẨN CÁC BẠN VIẾT TẠI ĐÂY thành nội dung bạn muốn ẩn.
Thay 131761626979828 thành App ID facebook của bạn.

Chúc thành công!

Blogs Chu Bằng AiTi - Chia Sẻ Không Giới Hạn

Chu Bằng AiTi

Thông Báo

Code Chèn Hình Ảnh Vào Blogspot

Buttons shortcode - Tạo CSS3 Buttons trong Blogger!

Giúp cho blogger của bạn đẹp từ những shortcode bằng việc tạo ra các nút bottons cực đẹp

1. Cài đặt buttons shortcode trong blogger

2. Thêm Nút Color Themes

3. Cuối cùng Bắt đầu Thêm Nút sử dụng shortcode!

Tùy chỉnh các nút bottons

Nofollow Buttons!

Code like mạng xã hội để xem nội dung được ẩn cho blogspot

☼ Bước 1: Cài đặt Social Content Locker trong Template của BlogSpot:

☼ Bước 2: Sử dụng khi viết bài.