Chuyên Mục "Blogger"
Showing posts with label Blogger. Show all posts
Kênh chia sẻ tổng hợp - mã nguồn website, template blogspot, theme wordpress, tin tức mới, hình ảnh hd, kiết thức đồ họa.
Nút chia sẽ bài viết thì dường như không blog nào là không có nó. Bởi nó giúp bài viết của chúng ta tiệp cận được nhiều hơn khách tham quan. Trên mạng có rất nhiều bài viết nói về vấn đề này nhưng đa số đều là tạo nút chia sẽ sau bài viết để tiện chia sẻ. 
Hướng Dẫn Chèn Nút Chia Sẻ Trên Thumbnail Cho Bài Viết Blogger - Blogspot

Hôm nay phá cách. Chu Bằng AiTi sẽ hướng dẫn các bạn tạo một cái nút chia sẻ nằm ngay trên ảnh  Thumbnail của bài viết ngoài trang chủ. Đặc biệt là khi rê chuột vào mới hiện ra.
1. Đầu tiên các bạn đăng nhập Blogger >> Mẫu >> Chỉnh Sửa HTML
2. Sau đó chép toàn bộ đoạn CSS sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style> nếu có
/* CSS Homepage Share */
ul.twitfbshare{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:0;top:0px;left:0px;line-height:normal;overflow:hidden;}
ul.twitfbshare li{text-align:left;float:left;margin-bottom:0;margin-top:-30px;opacity:0;padding:0;transition:all 0.3s;}
.post:hover .twitfbshare li{opacity:1;margin-top:0;}
ul.twitfbshare li a{background-clip:padding-box;background-repeat:no-repeat;display:block;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap;width:30px;height:30px;line-height:30px;position:relative;margin:0;padding:0;font-size:14px;font-weight:normal;background-color:#fff;color:#999;transition:all 0.3s;}
ul.twitfbshare li a:hover{color:#fff;}
ul.twitfbshare li a.f-like:hover {background-color:#3c5b9b;}
ul.twitfbshare li a.t-share:hover {background-color:#19bfe5;}
ul.twitfbshare li a.gplus-share:hover {background-color:#d44132;}
3. Sau đó các bạn tìm đoạn code " <article class='post hentry'>" sau đó nhìn xuống thêm mấy dòng nữa là thấy dòng "<b:if cond='data:post.thumbnailUrl'>".lúc này chép toàn bộ code bên dưới vào sau cái dòng trên.
<ul class='twitfbshare'>
<li>
<a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a>
</li>
<li>
<a class='t-share' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a>
</li>
<li>
<a class='gplus-share' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a>
</li>
</ul>
sau khi chép xong nó sẻ có như trong hình dưới,
Tạo Nút Chia Sẻ Trên Thumbnail Cho Bài Viết Blogger - Blogspot
4. Lưu mẫu và xem thành quả.

Kết Luận:

Vậy là mình Hướng Dẫn Chèn Nút Chia Sẻ Trên Thumbnail Cho Bài Viết Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công!
Nguồn; KenhVietPro
Kênh chia sẻ tổng hợp - mã nguồn website, template blogspot, theme wordpress, tin tức mới, hình ảnh hd, kiết thức đồ họa.
VietMAX là mẫu Blogger Template chuẩn SEO. Với nhiều tính năng cần thiết, có thể thay đổi linh hoạt để phù hợp chủ đề BLOG của bạn. tốc độ load nhanh, giao diện gọn gàng, hỗ trợ SEO tốt,...là những đặc điểm chính của mẫu Blogger Templates này. 
Share Free Blogger Template VietMAX Responsive for SEO

VietMAX là mẫu Blogger Templates với sự cải tiến trong lối thiết kế cũng như chất lượng Template được chăm chút hơn. Không còn những mẫu thô sơ, hạn chế về tính năng cũng như giao diện được đổi mới mỗi ngày.

Feature

FeaturesAvailability
ResponsiveTrue Check
Google Testing Tool ValidatorTrue Check
SEO FriendlyTrue Check
Mobile FriendlyTrue Check
High SpeedTrue Check
AdsenseTrue
Valid Schema.orgTrue
High CTRTrue
Personal BlogTrue
2 ColumnTrue
Auto Read More with ThumbnailTrue
BreadcrumbsTrue
Footer LinkTrue
Related Posts with ThumbTrue
Search Box 2 in 1True
Social Share ButtonTrue
Back to Top ButtonTrue
Author Box with SocialTrue
Author Box with SocialTrue
Mega MenuTrue
Threaded Comments with EmoticonsTrue

Các nhận VietMAX Template

Bước 1: Theo dõi BLOG qua tiện ích Follow - Trở thành thành viên BLOG Chu Bằng AiTi để nhận Template của mình hàng ngày nhé: Tham Gia Blog Chu Bằng AiTi
Bước 2: Để lại Email của bạn, mình sẽ gửi Template trong thời gian sớm nhất. Rất lằng nhằng, nhưng mới làm lại BLOG nên mình rất mong các bạn có thể ủng hộ mình bằng một COMMENT nhé. Cảm ơn các bạn!
Theo: Đồng Việt
Kênh chia sẻ tổng hợp - mã nguồn website, template blogspot, theme wordpress, tin tức mới, hình ảnh hd, kiết thức đồ họa.
Với những bạn thường xuyên tải template blogspot từ các trang chia sẻ template thì chắc hẳn đã nhiều lần thấy trang xem trước template của web họ. Trang đó hiện ra khi bạn nhấn vào nút Demo để xem template, thường thì trên cùng của trang sẽ có thanh menu chứa nút Download, Remove và bên dưới sẽ hiển thị template Demo mà bạn muốn xem. Việc tạo một trang xem trước như vậy cũng không quá khó, nếu bạn muốn, bài viết này sẽ hướng dẫn bạn làm điều đó.
Tạo trang xem Demo và Download cho Blogger/Blogspot


Tạo trang xem Demo và Download cho Blogger/Blogspot

Bước 1: Đăng nhập Blogger ~> Vào Trang ~> Nhấn Trang mới
Đặt tiêu đề trang là Demo và nhấn Xuất bản.
(Không cần điền nội dung gì vào trang này, chủ yếu chỉ quan tâm đến địa chỉ trang thôi)
Tạo xong bạn hãy ghi nhớ đường link trang, như của mình thì link trang như này:

http://demo-chubangaiti.blogspot.com//p/demo.html
Bước 2: Vào Mẫu ~> Chỉnh sửa HTML
Chèn thẻ điều kiện này vào bên dưới thẻ <body>
<b:if cond='data:blog.url != "http://chubangaiti.blogspot.com/p/demo.html"'>
Thay http://chubangaiti.blogspot.com/p/demo.html bằng đường link trang của bạn
Tiếp theo, chèn đoạn mã sau vào bên trên thẻ </body>
<b:else/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet' />
<style type='text/css'>
body {
background: #fff
}

#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
transition: all .4s ease-out
}

#tab-demo {
width: 100%;
height: 60px;
top: 0;
left: 0;
background: #34495e;
color: #fff;
z-index: 99999;
position: fixed;
-webkit-transform: translateZ(0)
}

.closebutton {
background: #2ecc71;
text-align: center;
height: 60px;
padding: 0 20px 0 57px;
position: fixed;
top: 0;
right: 0;
line-height: 60px;
cursor: pointer;
color: #fff;
right: 20px;
transition: all .3s
}

.closebutton:before {
content: '\f00d';
position: absolute;
left: 0;
font-family: fontawesome;
padding: 0 20px;
font-weight: normal;
font-size: 22px;
transition: all .6s;
}

a.closebutton {
color: #fff;
text-decoration: none;
}

.closebutton:hover {
background: #27ba66
}

.closebutton:hover:before {
transform: rotate(360deg);
}

.dlbutton,
a.dlbutton {
background: #3f5870;
text-align: center;
height: 60px;
padding: 0 20px 0 57px;
position: fixed;
top: 0;
right: 146px;
line-height: 60px;
cursor: pointer;
color: #fff;
text-decoration: none;
transition: all .3s
}

.dlbutton:before {
content: '\f019';
position: absolute;
left: 0;
font-family: fontawesome;
padding: 0 20px;
font-weight: normal;
font-size: 22px;
transition: all .6s;
}

.dlbutton:hover {
background: #2c3e50
}

.dlbutton:hover:before {
transform: rotate(360deg);
content: '\f00c';
}

.demologo,
a.demologo {
padding-left: 75px;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
line-height: 60px;
left: 20px;
position: fixed;
color: #fff;
letter-spacing: .5px;
text-decoration: none
}

.demologo:before {
content: '\f108';
position: absolute;
left: 0;
background: #2ecc71;
font-family: fontawesome;
padding: 0 20px;
font-weight: normal;
font-size: 22px;
}

.demologo:after {
content: '- Chia Sẻ Không Giới Hạn';
text-transform: capitalize;
opacity: 0;
visibility: hidden;
padding-left: 5px;
transform: scale(0.9) translate(-34px, 0);
transition: all.3s;
}

.demologo:hover:after {
opacity: 1;
visibility: visible;
transform: scale(1.0) translate(0, 0);
}
</style>
<script type='text/javascript'>
//<![CDATA[ // Demo Page document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only function getQueryVariable(e){for(var r=window.location.search.substring(1),t=r.split("&"),n=0;n<t.length;n++){var a=t[n].split("=");if(a[0]==e)return a[1]}return!1}window.onload=function(){var e=getQueryVariable("url"),r=getQueryVariable("download");document.getElementById("view").src=e,document.getElementById("dl").href=r}; //]]>
</script>
<div id='tab-demo'> <a class='demologo' href='http://chubangaiti.blogspot.com/'>Chu Bằng AiTi</a> <a class='dlbutton' href='' id='dl'>Download</a> <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&#39;tab-demo&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;view&#39;).style.top=&#39;0&#39;;document.getElementById(&#39;view&#39;).style.height=&#39;100%&#39;'>Remove</a> </div>

Sửa lại tên và địa chỉ cho phù hợp với trang của bạn
Nếu blog của bạn đã có link Font Awesome rồi thì bạn có thể xóa bỏ 
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>

Cuối cùng Lưu Mẫu lại.

Bước 3: Sử dụng trang xem trước khi viết bài
Ví dụ khi bạn viết bài về template, tại nút Demo thì các bạn chèn đường dẫn dạng sau
http://http://chubangaiti.blogspot.com/p/demo.html?url=Địa_chỉ_link_demo&download=Địa_chỉ_link_download
Thay Địa_chỉ_link_demo bằng địa chỉ của trang demo
Thay Địa_chỉ_link_download bằng đường dẫn để tải về

Lời kết

Vậy là bạn đã có cho mình một trang xem trước vừa tiện dụng lại vừa đẹp, bắt mắt. Hy vọng là bạn sẽ hài lòng với nó. 
Có gì không hểu hãy để lại nhận xét phía dưới, mình sẽ hỗ trợ bạn1
Chúc các bạn thành công !
Kênh chia sẻ tổng hợp - mã nguồn website, template blogspot, theme wordpress, tin tức mới, hình ảnh hd, kiết thức đồ họa.
Xin Chào Các Bạn !
Hiện tại là 01h16p mình chưa ngủ được nên viết bài Hướng dẫn các bạn đăng ký và  sử dụng Github lưu trữ Javascript và CSS cho Blogger - Blogspot. Như các bạn đã biết. Hiện nay, các dịch vụ lưu trữ JS và CSS phổ biến bạn có thể biết đến như Google Code, Google Drive, DropBox,... Tuy nhiên dịch vụ Google đã sắp ngừng hoạt động, trong khi Dropbox thì mình cũng chưa có trải nghiệm nhưng nhiều người còn nghi ngờ về tốc độ và ổn định của host này. Vậy là mình đã nghĩ ngay tới Github, và đây có thể là một sự lựa chọn tốt nhất cho bạn cho tới thời điểm bây giờ.
Hướng dẫn đăng ký và sử dụng Github lưu trữ Javascript và CSS cho Blogger

Hướng dẫn đăng ký và  sử dụng Github lưu trữ Javascript và CSS cho Blogger

Bước 1: Đăng Ký Tài Khoản Github
- Bạn truy cập trang Github và đăng kí cho mình một tài khoản.
- Các bạn làm tương tự như hình nhé :)
Các bạn điền tên + email + password rồi bấm Greate an account
Các bạn nhập lại email và click comtinue to setup organizetion
các bạn làm tương tự như hình nhé :)

Các Bạn Nhớ Vào Email Để Kích Hoạt Nhé
Bước 2: Sau khi đăng kí thành công, tại giao diện màn hình bạn chọn: Greate a new repository


Bước 3: Một giao diện mới hiện ra, bạn nhập các mục như sau:

Chu Bang AiTi là đường dẫn của thư mục (Chu-Bang-AiTi)

Tiếp theo các bạn chọn Create repository để tiếp tục quá trình.
Tại giao diện mới bạn chọn Upload File

Các bạn bấm vào Upload File



Tiếp tục bạn chọn choose your file, sau khi tải xong bạn chọn Commit changes để hoàn tất.
Các bạn chọn Choose your file và bấm Commit changes


Sau đó một danh sách File đã tải lên hiện ra, để lấy link của file nào bạn nhấn vào File đó.
Các bạn click vào file vừa tải lên

 Sau đó click vào Raw nó sẽ chuyển sang trang để lấy link


Click vào Raw  để lấy link


Sau khi đã có link: https://raw.githubusercontent.com/ChuBang/Chu-Bang-AiTi/master/blogs-chu-bang-aiti.css
các bạn có thể thay thế thành

https://rawgit.com/ChuBang/Chu-Bang-AiTi/master/blogs-chu-bang-aiti.css

Kết Luận về Github
Các bạn nên thay thế https://raw.githubusercontent.com thành https://rawgit.com để đảm bảo sự ổn định hơn trong quá trình sử dụng. 
Việc Sử dụng Github lưu trữ Javascript và CSS cho Blogger là một việc làm cần thiết thay thế cho Google Drive không còn thể dùng làm host trong thời gian tới.
Vậy là xong :) 
Bài viết đầy đủ và chi tiết nhất. quá đơn giản phải không...=)) 
Chúc Các Bạn Thành Công!
Bản quyền thuộc về Chu Bằng AiTi.
Kênh chia sẻ tổng hợp - mã nguồn website, template blogspot, theme wordpress, tin tức mới, hình ảnh hd, kiết thức đồ họa.

Code chuyển hướng - redirect blog/website bằng HTML, đây là một thủ thuật đơn giản, nhanh và gọn. Không dùng nhiều code như cách chuyển hướng bằng Jquery, đơn giản, nhưng thủ thuật này vẫn đảm bảo chuyển hướng chính xác trong thời gian bạn đã đặt trước.
Code chuyển hướng website/blog bằng HTML

Các bước thực hiện

Có lẽ, khi xem xong bài viết này bạn sẽ có suy nghĩ là ồ, mình bị làm sao mà không gộp 2 bài viết vào cho nhanh trong khi thao tác thực hiện của bài viết này quá đơn giản. Hi vì mình muốn tạo sự mạch lạc, mỗi bài viết có ý đồ riêng.
Các bạn thực hiện thêm đoạn code sau vào giữa cặp thẻ <head>...</head> của Templates.
<meta http-equiv="refresh" content="1;url=http://chubangaiti.blogspot.com/">
Bạn lưu ý ở đây: 1 là thời gian chuyển hướng (đơn vị là giây-0.5 giây cũng được bạn nhé!),  thay http://chubangaiti.blogspot.com/ thành URL bạn muốn chuyển hướng tới.

Lời kết

Đây là một thủ thuật Blogger đơn giản hơn so với cách làm trước và phù hợp với nhiều website/blog không chỉ riêng những website/blog có sử dụng Jquery. Thật vậy, hãy thử áp dụng cho Blog của mình bạn nhé!
Chúc Các Bạn Thành Công!
Kênh chia sẻ tổng hợp - mã nguồn website, template blogspot, theme wordpress, tin tức mới, hình ảnh hd, kiết thức đồ họa.

Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot
Đối với một Blog bất kỳ thì Tiện ích Popular post là rất cần thiết bởi nó chứa các bài viết đọc nhiều người xem nhất, từ đó sẽ giúp khách tham quan sẽ ở lại lâu hơn blog của bạn. Hôm nay mình sẽ hướng dẫn các bạn tạo một Popular đẹp cho blog thân yêu của mình.



Với giao diện cực kỳ đẹp, cực kỳ trang nhã, hiện đại với các hiệu ứng, hình ảnh to, phông chữ to.
Tạo sự ấn tượng khó thể phai nhòa đối với đọc giả



1. Các bạn vào Blogger -> Mẫu -> Chỉnh sửa html
2. Tiếp tục các bạn tìm thẻ đóng ]]></b:skin> hay thẻ đóng </style> và đặt đoạn CSS sau vào trước thẻ đóng đó 

/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
Lưu ý: Các bạn nên xóa hết các Css liên quan đến Popular Post cũ trước nha. Nếu các bạn không biết thì tìm kiếm với từ Popular là ra

3. Tiếp các bạn dán đoạn javascript sau vào trước thẻ đóng 
<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>
4. Save Template (Lưu Mẫu) lại 5. Để thưởng thức thành quả thì các bạn vào Blogger -> Bố cục -> Thêm tiện ích ->Bài đăng phổ biến -> chỉnh các thông số như hình:
[Widget] Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot

Chú ý: các bạn có thế thay đổi các thông số sau

Tiêu Đề
Hiện thị tối đa .... bài đăng

Nếu các bạn ko muốn hiện thị màu

- Từ đoạn code CSS trên các bạn xóa toàn bộ chữ có màu xanh lá cây là xong 
Mặc định hiên thị quá 6 bài sẽ mất màu sắc, vì vậy nếu bạn chỉnh nhiều hơn 6 bài thì các bạn phài thêm mã màu cho bài thứ 7 trở đi
- Cũng ỡ đoạn code CSS trên các bạn thêm sau vào sau dòng .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(7) .item-title {background:rgba(0,188,212,0.5);}

Các bạn thay mã màu có chữ đỏ thành mả màu bạn muốn (mã màu định dạng ở rgba nha)

Tương tự cho bài 8, thay số 7 thành 8, bài 9, bài 10
Để hiển thị được
- Các bạn thêm dòng sau

.item-title:hover,.PopularPosts ul li:nth-child(7)
vào trong đoạn sau
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
Sau đó nó sẽ thành như thế này:
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover,.PopularPosts ul li:nth-child(7) .item-title:hover{background:rgba(0,0,0,0.2);}


Lời Kết
Vậy là mình đã hướng dẫn các bạn tạo Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. 
Chúc các bạn thành công