Hiển thị các bài đăng có nhãn thủ thuật blogspot. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn thủ thuật blogspot. Hiển thị tất cả bài đăng
11/20/2015
5/08/2015
Tiếp tục bài viết trong phần tối ưu Blogspot, tạo trang web bằng Blogger miễn phí. Sau khi bạn tạo và tối ưu Blog của mình, hoặc bạn mới vừa thay đổi Template cho Blog thì việc thay đổi các thành phần hay Sub Menu trong thanh Menu thường gây khó khăn cho các bạn không thành thạo về Code hoặc HTML. Bài viết này sẽ hướng dẫn bạn cách chỉnh sửa Menu trong Blogspot, cũng như cách tạo thêm Sub Menu nhanh chóng, dễ dàng mà không cần phải rành về Code.
CÁCH SỬA THANH MENU TRONG BLOGSPOT
Sau khi up Template lên trang web của mình thì thanh menu sẽ có những thành phần mà không như mình mong muốn. Muốn thay đổi được bạn cần phải vào trang phần Chỉnh sữa HTML.
Bước 1: Vào Mẫu - Chỉnh sữa HTML
Bước 2: Nhấp chuột vào phần chưa Code và nhấn tổ hợp phím Ctrl + F
Sau đó điền thành phần bạn muốn thay đổi trong thanh Menu vào trong đó, ví dụ như bạn muốn thay đổi Business thành sản phẩm hay dịch vụ của bạn, ở đây sẽ thành chữ Khóa Học thì bạn đánh vào ô tìm kiếm chữ Business và nhấn phím Enter.
Bước 3: Thay đổi các thành phần và Sub Menu
Sau khi tìm thấy được vị trí của các thành phần trên thanh Menu, bạn chỉ cần thay thế vào như sau, ví dụ bạn muốn thay Business - Khóa Học, Inter - Khóa Học SEO, Market - Khóa Học YouTube, Stock - Khóa học Adwords, sau đó Lưu mẫu (đừng quên bước này nhé) và sau đó là Xem Blog có thay đổi gì không.
Nếu bạn làm đúng thì kết quả sẽ như hình dưới đây
Tương tự như vậy bạn có thể thay thế hết tất cả các phần còn lại như Downloads, Featured thành tên mục mà mình muốn. Rất đơn giản đúng không nào?
Đó là thay đổi theo cấu trúc có sẵn của Template nhưng nếu bạn muốn thêm một thành phần mới trên thanh Menu thì phải làm như thế nào? Đơn giản thôi chỉ cần làm theo 2 bước sau:
Bước 1: Tìm và Copy đoạn code dưới đây
Ví dụ trong bài thanh Menu có mục Featured và bạn muốn thêm ngay sau nó là mục Đào Tạo SEO thì bạn cần tìm vị trí của Featured trong HTML như các bước ở trên, đây là vị trí của nó khi bạn tìm ra:
Bước 2: Dán vào ngay sau thành phần bạn muốn thêm mới
Sau khi đã tìm được thì bạn cần thêm vào đoạn Code y chang như đoạn bạn tìm thấy vào ngay sau bên dưới và Featured thì thay đổi theo nội dung mà bạn muốn thêm vào, ví dụ ở đây là thêm mục Đào Tạo SEO.
Rất dễ dàng bạn có thể tạo ra một mục mới trên thanh Menu mà chẳng cần phải tinh thông về Code, tuy nhiên nếu có điều kiện và thời gian thì bạn cũng nên tìm hiểu thêm về HTML và CSS cơ bản vì nó thực sự cần thiết.
Trên đây là 2 trường hợp phổ biến là thay đổi các thành phần trên thanh Menu và thêm thành phần mới, còn có một trường hợp phức tạp hơn một tí chính là thêm các Sub Menu hay còn gọi là các mục con, mục cấp 3 trên Menu sổ xuống.
Ví dụ ở đây bạn muốn mục Đào Tạo SEO giống như Downloads có đến thư mục cấp 3 thì mình lại tiếp tục Copy đoạn Code y chang của mục Downloads và dán bên dưới mục đào tạo SEO. Đây là đoạn code bạn cần bỏ dưới Đào Tạo SEO trong HTML.
Sau khi bỏ bên dưới của bên dưới mục Đào Tạo SEO bạn cần chỉnh sửa lại tên các Sub Menu, rất đơn giản chỉ có 2 bước là copy và dán vào.
Sau khi dán Code mà bạn xuất hiện dòng chữ đỏ báo lỗi không cho bạn lưu đồng nghĩa là trong quá trình Copy và dán thì đã thừa hoặc thiếu các thẻ đóng mở như </a>, <li> </li>, <ul> </ul>
Do đó trong bước này cần kiểm tra kỹ nhé và kết quả bạn đạt được như sau
Nếu bạn chỉ muốn thay thế bằng những cái có sẵn trong Template thì đọc tới đây bạn có thể làm được rồi và nên dừng lại đừng đọc nữa cho nhức đầu. Tuy nhiên để hiểu hơn và có thể tự mình tạo được các Sub Menu theo ý muốn ở mọi vị trí thì bạn cần hiểu các đoạn Code sâu thêm nữa như:
Đọan Code hiển thị mục Menu chính ở đây là Đào Tạo SEO có dạng:
<li><a href='#'>Đào Tạo SEO</a><li/>
Đoạn Code của một Sub Menu Đào Tạo SEO DGM sẽ có dạng:
<ul class='children'>
<li><a href='#'>Đào Tạo SEO DGM</a></li>
</ul>
hoặc
<ul class='sub-menu'>
<li><a href='#'>Đào Tạo SEO DGM</a></li>
</ul>
<li><a href='#'>Đào Tạo SEO</a>
<ul class='sub-menu'>
<li><a href='#'>Đào Tạo SEO DGM</a></li>
</ul>
</li>
Nhưng bạn muốn có thêm 1 Sub Menu cùng cấp 1 như Đào Tạo SEO DGM là Đào Tạo SEO Uy Tín hoặc thêm vài mục cùng cấp nữa thì đoạn Code sẽ trở thành
<li><a href='#'>Đào Tạo SEO</a>
<ul class='sub-menu'>
<li><a href='#'>Đào Tạo SEO DGM</a></li>
<li><a href='#'>Đào Tạo SEO Uy Tín</a></li>
<li><a href='#'>Đào Tạo SEO Chất Lượng</a></li>
<li><a href='#'>Đào Tạo SEO Bền Vững</a></li>
</ul>
</li>
Vậy bạn muốn tạo thành Sub Menu cấp 2 nữa thì phải làm như thế nào, đoạn Code để tạo Sub Menu cấp 2 cũng hoàn toàn tương tự cấp một chỉ khác ở vị trí đặt Code, chỉ cần nhớ và đặt đúng vị trí là xong, ví dụ bạn muốn Đào Tạo SEO Bền Vững thành Sub Menu cấp 2 nằm trong Đào tạo SEO DGM thì bạn cần phải đặt nó tại trước thẻ </li> của Đào Tạo SEO DGM vì bây giờ Đào Tạo SEO Bền Vừng nó trở thành Sub Menu của Đào Tạo SEO DGM
<li><a href='#'>Đào Tạo SEO</a>
<ul class='sub-menu'>
<li><a href='#'>Đào Tạo SEO DGM</a>
<ul class='sub-menu'>
<li><a href='#'>Đào Tạo SEO Bền Vững</a></li>
</ul>
</li>
</ul>
</li>
Nói thì có vẻ rắc rối và loằng ngoằng nhưng tổng kết lại bạn chỉ cần nhờ 3 điều:
- Code mục Menu.
- Code Sub Menu.
- Đặt Sub Menu sau thẻ </li> của mục nào bạn muốn làm Menu con.
Đó là tất cả những gì bạn cần biết để có thể điều tạo và chỉnh sửa thanh Menu trong Blogspot dễ dàng mà không cần biết gì nhiều về Code,
chúc các bạn thành công!
Xem thêm các thủ thuật khác tại Lãng Tử Studio
Đừng quên Like và Share nếu thấy bài viết bổ ích
Nguồn: KhoaHocSeo
Chèn Flash Vào Blogspot
Trước đây, tôi có chia sẻ với các bạn phần mềm tạo Banner flash động để trang trí cho Blog. Sau khi tạo xong file flash, các bạn phải up load files flash này lên host để lấy link chèn vào blog. Hiện tại thì có rất nhiều host free để các bạn sử dụng nhưng tôi thường sử dụng Google Sites. Hôm nay,
4/29/2015
Đối với những người chơi web, forum thì công cụ chia sẻ lên các mạng xã hội là không thể thiếu. Công cụ này giúp blog, forum của bạn có nhiều lượt view hơn , làm tăng trafic cho blog,forum.
Các bạn có thể xem demo tại đây trước khi cài đặt tiện ích cho blogspot của mình.
Nếu thấy thích tiện ích rồi thì bắt đầu cài nhé!!
Bước 1: Đặt đoạn code dưới sau thể </body>
Các bạn có thể xem demo tại đây trước khi cài đặt tiện ích cho blogspot của mình.
Nếu thấy thích tiện ích rồi thì bắt đầu cài nhé!!
Bước 1: Đặt đoạn code dưới sau thể </body>
Code:
<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box {
position: fixed;
top: 10%;
right: 0;
border: 3px dashed #F60;
padding: 5px 5px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #FEB;
width: 60px;
min-height: 345px;
z-index:8000;
}
.sharing_box .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:55px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box'>
<div style='text-align:center; margin-top:5px'>
<img alt='Share Emphasis' height='46px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEf-b1_NPR_4xV1Si2qMDC8bL6hQUa6wmAaYAtbfeABFfxbAI_iHqmRPQZHqW_nWA64HBOzOeeBwQX11LpCPFShUmadrD7hSTS9kaMpAb7euaN94TzqHuuwRwzrrGLYzrMnMVv_0JlLg/s56/share_mark.gif' width='56px'/>
</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:3px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- FACEBOOK -->
<div class='item' style='margin-left:3px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'/>
<div id='fb-root'/>
</div>
<!-- G+ -->
<div class='item' style='margin-left:5px'>
<!-- Place this tag where you want the +1 button to render -->
<g:Plusone size='tall'/>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:5px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'>
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-527f9aa5427486be' type='text/javascript'/>
<!-- AddThis Button END -->
.jpg)
Trong các phần thân bài Blog theo
mẫu mặc định của Blogspot vẫn thường hiển thị "nút" chỉnh sửa nhanh là biểu tượng chiếc bút chì nhỏ nằm cuối mỗi bài viết, khi bạn đăng nhập vào Blog sẽ thấy chúng xuất hiện, rất tiện lợi cho việc chỉnh sửa bài viết.
Nhưng nếu bạn nào đổi Themes của Blog thành Premium, WordPress, hoặc đổi sang các mẫu khác ngoài mẫu mặc định thì mặc dù bạn có Check để kích hoạt cho "nút" đó xuất hiện trong phần chỉnh sửa thân bài, nhưng khi đăng nhập vào Blog bạn vẫn không nhìn thấy chúng xuất hiện cuối mỗi bài viết.
Nhưng nếu bạn nào đổi Themes của Blog thành Premium, WordPress, hoặc đổi sang các mẫu khác ngoài mẫu mặc định thì mặc dù bạn có Check để kích hoạt cho "nút" đó xuất hiện trong phần chỉnh sửa thân bài, nhưng khi đăng nhập vào Blog bạn vẫn không nhìn thấy chúng xuất hiện cuối mỗi bài viết.
Vậy phải làm thế nào để "nút" đó xuất hiện trở lại như mẫu mặc định trước đây.
Hôm nay Lãng Tử Studio sẽ hướng dẫn các bạn cách làm cho nó hiển thị ra
Bạn làm như sau : Đăng nhập vào Blog > Mẫu > Chỉnh sửa HTML > Tiếp tục > Check vào mở rộng mẫu tiện ích, Phải chuột vào bất kỳ chỗ nào trong khung mẫu rồi bấm đồng thời cặp phím ( Ctrl + F ), xuất hiện 1 ô tìm kiếm.
Nếu bạn muốn biểu tượng xuất hiện ở phía trên bài viết, bạn Copy dòng này <div class='post hentry'> dán vào ô tìm kiếm, sau đó dán Code sau vào bên dưới dòng trên.
<b:include data='post' name='postQuickEdit'/>
Bây giờ bạn lưu mẫu rồi quay lại Blog xem kết quả.
Chúc các bạn vui vẻ.
Xem nhiều thủ thuật hơn tại Lãng Tử Studio
Đừng quên Like và Share nếu thấy bài viết bổ ích
4/28/2015
Như các bạn đã biết, muốn độc giả khi click vào link trên blog và mở ra một cửa sổ mới thì ta phải thêm thuộc tính target="_blank" vào. Tuy nhiên không phải lúc nào ta cũng nhớ để làm công việc này, và thật sự là mất thời gian đối với một bài viết hay đoạn code nào đó trong template có nhiều link. Vì vậy đoạn js mình sẽ giới thiệu bên dưới sẽ giúp bạn tự động thêm thuộc tính target="_blank" vào tất cả đường link trên blog. Tuy nhiên bạn không phải lo lắng về những đường link trên blog của mình, nó chỉ có tác dụng đối với những đường link bên ngoài, do vậy độc giả của bạn sẽ không rời khỏi blog của bạn đâu. Hơn nữa lại thân thiện với SEO và hoạt động tốt với tất cả các trình duyệt.
Thêm code vào template
Bạn chèn đoạn js sau vào trước thẻ đóng </head>
Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("a[href^='http://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>
- Đoạn mã được thêm 2 lần cho các liên kết được bắt đầu bằng cả http và https
- Hai đoạn mã == -1 có tác dụng chỉ thêm thuộc tính target="_blank" vào các liên kết bên ngoài. Nhưng nếu bạn muốn áp dụng cho tất cả các đường link trên blog thì thay thế bằng ==1
- Xóa đoạn code <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> nếu trong template của bạn đã có jQuery rồi
Đừng quên Like Và Share nếu thấy bài viết bổ ích
Xem thêm các thủ thuật khác tại Lãng Tử Studio
4/24/2015
Trong một bài trước mình đã hướng dẫn mọi người cách tích hợp bình luận Facebook Commentvào Website, trong đó nổi bật là phần bật tính năng thông báo (notification). Nhưng có rất nhiều câu hỏi rắc rối về việc tích hợp phần bình luận Facebook Comment
Có nhiều hình thức để làm tăng Like Page Facebook, tăng theo dõi G+,...hoặc các bạn muốn bài viết của mình được nhiều Like hơn...
- Đối với tất cả mã nguồn Website khác nhau thì việc thêm code để làm tăng Like cho link trang FB, link Website,...thì giống nhau. Bài viết này itviet360 chia sẻ với bạn code đó và phân tích sơ qua về lợi - hại của nó.
Demo tại bài viết: template mxfluity responsive blogspot
Phân tích:
Cái lợi:
- Tăng Like Facebook, tăng G+, twitter
- Tăng Traffic tới Website, blog, Page FB,...
Cái hại:
- ^_^ khó chịu với người xem bài viết 1 xíu
Cách làm thủ thuật này. Mình làm trên Blogspot, Website thì các bạn làm tương tự cũng như hướng dẫn
1. Vào bảng điều khiển Blogger -> mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Dán đoạn code dưới đây ngay trên thẻ đóng </head>
3. Tiếp theo khi viết bài cho Web hoặc blog, bạn chỉ cần dán đoạn mã dưới đâ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)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="http://diendan.itviet360.com/js/Locklike_blog.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: "https://www.facebook.com/hotnews.84",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/hotnews.84",
appId: "374631889294427"
},
google: {
url: "https://www.facebook.com/hotnews.84l"
}
});
});;;;
</script>
Trong đó:
- Link: https://www.facebook.com/hotnews.84 là link các bạn muốn like.
- Con số ID: 374631889294427 này các bạn có thể sử dụng của mình nếu các bạn không rành về App của Facebook hoặc bạn có thể tạo theo hướng dẫn ở bài viết này: Thêm facebook recommendations bar cho blogspot
Xem nhiều thủ thuật hơn tại Lãng Tử Studio
Đừng quên Like và Share nếu thấy bài viết bổ ích
- Đối với tất cả mã nguồn Website khác nhau thì việc thêm code để làm tăng Like cho link trang FB, link Website,...thì giống nhau. Bài viết này itviet360 chia sẻ với bạn code đó và phân tích sơ qua về lợi - hại của nó.
Demo tại bài viết: template mxfluity responsive blogspot
Phân tích:
Cái lợi:
- Tăng Like Facebook, tăng G+, twitter
- Tăng Traffic tới Website, blog, Page FB,...
Cái hại:
- ^_^ khó chịu với người xem bài viết 1 xíu
Cách làm thủ thuật này. Mình làm trên Blogspot, Website thì các bạn làm tương tự cũng như hướng dẫn
1. Vào bảng điều khiển Blogger -> mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Dán đoạn code dưới đây ngay trên thẻ đóng </head>
<link href='http://diendan.itviet360.com/js/likeblog.css' rel='stylesheet' type='text/css'/>3. Tiếp theo khi viết bài cho Web hoặc blog, bạn chỉ cần dán đoạn mã dưới đâ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)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="http://diendan.itviet360.com/js/Locklike_blog.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: "https://www.facebook.com/hotnews.84",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/hotnews.84",
appId: "374631889294427"
},
google: {
url: "https://www.facebook.com/hotnews.84l"
}
});
});;;;
</script>
Trong đó:
- Link: https://www.facebook.com/hotnews.84 là link các bạn muốn like.
- Con số ID: 374631889294427 này các bạn có thể sử dụng của mình nếu các bạn không rành về App của Facebook hoặc bạn có thể tạo theo hướng dẫn ở bài viết này: Thêm facebook recommendations bar cho blogspot
Xem nhiều thủ thuật hơn tại Lãng Tử Studio
Đừng quên Like và Share nếu thấy bài viết bổ ích
Đối với Slider thì việc sử dụng làm điểm nhấn cho blog, website là điều cần thiết. 1 Slide đẹp và mượt mà luôn được người dùng hướng tới. Bài viết này itviet360 chia sẻ với bạn code và cách làm thêm 1 Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot cũng như trên website khác
Một số bạn có email yêu cầu về thủ thuật thêm phân trang dạng "Xem thêm....còn nhiều lắm" như Blog hình ảnh đẹp hoặc "Load More Posts" của blog Wallpapers HD
Với thủ thuật này nó thay cho phân trang dạng 1|2|3|...ở trang chủ và trang Label của blogspot.
.jpg)
