Các bài viết của "Blogger"
Showing posts with label Blogger. Show all posts

vào lúc 0
Hôm nay, Rinne-IT sẽ giúp cho bạn làm ra các banner web động một cách nhanh nhất chỉ trong vài bước đơn giản

Việc tạo ra những banner không hẳn là những công việc hấp dẫn nhất trên thế giới nhưng đó là việc mà mỗi nhà thiết kế bắt buộc phải nhúng tay vào tại một thời điểm nào đó trong công việc của họ, có thể là không chỉ một mà nhiều lần. Mặc dù không có nhiều quy luật ràng buộc cho việc thực hiện nó, có nhiều cái không cần nói mà chúng ta phải tự biết là kiểu chữ phải to, rõ và thông điệp phải “bắt” mắt. 
Bởi vì chúng ta đang làm cho nó trở nên “động”, tôi khuyên bạn không nên có nhiều hơn 3 slide hoặc ôm đồm nhiều quá mức vì mọi người đơn giản là sẽ không xem nó. Những yếu tố chớp nhoáng cũng có thể giúp gây chú ý cho người xem


Qua ít bước tiếp theo tôi sẽ hướng dẫn cách cài đặt và tạo một banner web động đơn giản mà một khi đã thành thạo sẽ dễ cho các bạn xin được bất cứ công việc mới nào trong tương lai

 

 

1. Thiết lập document của bạn

cach-tao-mot-banner-dong-cho-website-bang-photoshop-03.jpg
Mở Photoshop, sau đó ta vào File-> New và chọn Web từ tab Preset. Từ Size kéo xuống chọn leaderboard hoặc nếu kích thước màn hình của bạn khác thì chọn custom và nhập chỉ số pixel vào
cach-tao-mot-banner-dong-cho-website-bang-photoshop-04
Sau đó vào View-> Snap To-> Document Bounds, rồi kéo thả Guide để áp dụng lên Document của bạn

 

2. Thêm đồ họa

cach-tao-mot-banner-dong-cho-website-bang-photoshop-05.jpg
Bây giờ hãy đặt các yếu tố thiết kế quan trọng vào. Ở ví dụ trên tôi đã thêm vào logo  của T3 và như đã tạo, guide có thể chỉnh size lại và áp dụng lên document một cách dễ dàng. Thêm tiếp một cái mũi tên mà chúng ta sẽ dùng sau và sử dụng công cụ nhập để đặt nội dung cho slide đầu tiên. Sau đó thêm vào bất cứ hình ảnh nào mà bạn cần và chắc chắn rằng bạn đã đặt tên đúng cho tất cả layer của mình

 

3. Tạo các slide phụ

cach-tao-mot-banner-dong-cho-website-bang-photoshop-06.jpg
Giờ đơn giản là hãy tạo thêm một bản sao cho type layer của bạn, sau đó tắt type layer bên dưới và nhập text tiếp theo vào, trong trường hợp này là “ON SALE NOW”. Một khi bạn đã chắc là mọi thứ đã xong, merge down càng nhiều layer nhất có thể. Về phần background, logo và hình nền sẽ để ở trạng thái tĩnh, chúng ta có thể merge down bằng việc để lại 4 layer: background, 2 type layer và layer mũi tên

 

4. Dựng frame animation

cach-tao-mot-banner-dong-cho-website-bang-photoshop-07.jpg
Các bạn hãy click vào tab timeline ở dưới cửa sổ hoặc vào Window -> Timeline. Click tiếp mũi tên nhỏ ở giữa cửa sổ và chọn “Create frame animation” sau đó nhấn nút. Giờ hãy tắt hết tất cả các layer trừ layer background và layer message đầu tiên. Apply một giây delay cho frame từ menu trên khung animation frame nhỏ. Tiếp tục chỉ cần click vào “duplicate selected frames” trong timeline nhưng hãy tắt message đầu tiên và bật message thứ 2. Lặp lại quá trình này cho tất cả các layer và kết thúc bằng layer mũi tên

 

5. Làm cho mũi tên nhấp nháy và căn chỉnh timing

cach-tao-mot-banner-dong-cho-website-bang-photoshop-08.jpg
Để làm cho mũi tên nhấp nháy đơn giản là nhấn “duplicate selected frames” từ timeline và tắt mũi tên đi. Căn chỉnh thời gian 0.5 giây và lặp lại tiến trình bật lại mũi tên và tắt tất cả các bảng layer để mà nó xuất hiện dưới dạng chớp tắt. Cuối cùng bạn có thể muốn điều chỉnh một vài timing cho tới khi bạn hoàn toàn hài lòng. Mọi người thường có khoảng thời gian tập trung rất ngắn nên sẽ vô ích trong việc làm chậm tốc độ khung hình, nhưng họ sẽ vẫn cần đọc được nó

 

6. Lưu file

cach-tao-mot-banner-dong-cho-website-bang-photoshop-09.jpg
Chọn “Save for web” và chọn tiếp GIF. Bạn cũng có thể hạ một chút chất lượng hình ảnh để giảm dung lượng của file. Khi bạn đã hoàn tất, lưu lại và kéo thả lên trình duyệt để kiểm tra xem banner chạy thế nào.
                                                Chúc các bạn thành công!
Đọc Thêm

vào lúc 0
<<< Hướng dẫn chèn code RUỒI ĐỘC và LẠ hơn Fshare vào web hoặc blog 
Rảnh không có việc làm, làm vài cái code còn độc hơn FSHARE ấy các bác ! 
Đặc điểm con ruồi:
- Ruồi bò được 8 hướng trên màn hình,
- Thêm hành động bấm giữ
- Hiển thị nhiều nội dung vui nhộn khi giữ.
- Trò chuyện với ruồi :v

Thêm đoạn code dưới đây vào thẻ <head> trong mã nguồn trang bạn muốn chèn ruồi vào:
<!-- Bắt đầu ruồi Fshare -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://static1.fshare.vn/js/flies-obj-2.1.js"></script>
<!-- Kết thúc ruồi Fshare -->
Nếu đoạn code trên không được, bạn đặt lại code này:

<!-- Bắt đầu ruồi Fshare --><script src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script src="https://static1.fshare.vn/js/flies-obj.js"></script><!-- Kết thúc ruồi Fshare →
Vậy là con ruồi của Fshare đã có ngay trên trang web của bạn
Bạn nào làm được giống mình PM nha!
Đọc Thêm

vào lúc 0
Đây là câu đầu tiên bạn vào phần cài đặt file Robots.txt  Blogspot thông báo cho các bạn “Cảnh báo! Hãy sử dụng một cách thận trọng. Việc sử dụng sai các tính năng này có thể khiến blog của bạn bị công cụ tìm kiếm bỏ qua”. Một câu thông báo ngắn ngủi cũng đủ nói lên tầm quan trọng của file Robots.txt.


☼ Robots.txt là gì?

·   Robots Exclusion Standard được phát triển từ năm 1994, nhằm giúp các webmaster có thể “tư vấn” cho các công cụ tìm kiếm cách thu thập thông tin từ Blog/Website của họ. Nó hoạt động theo cách tương tự như các “Thẻ tiêu đề robot tùy chỉnh”. Điểm khác biệt chính giữa chúng là các tập tin“Robots.txt tùy chỉnh” sẽ ngăn cản việc công cụ tìm kiếm truy cập vào một trang hoặc thư mục, trong khi các “Thẻ tiêu đề robot tùy chỉnh” chỉ kiểm soát việc lúc nào thì trang hoặc thư mục đó được lập chỉ mục (index).
·   Chức năng “Robots.txt tùy chỉnh” và “Thẻ tiêu đề robot tùy chỉnh” được Blogger đưa ra rất lâu rồi. Đây là chức năng được các Chuyên gia SEO đánh giá rất cao tuy nhiên các Blog Việt chưa biết các sử dụng nó (thường để ở dạng mặc định). Hôm nay Windows2it viết bài này để hướng dẫn các bạn. Dưới đây là cài đặt chuẩn nhất hiện nay mà được các Blog Việt sử dụng, mình cũng đã áp dụng cài đặt này trên Blog tài liệu miễn phí của mình.

☼ Hướng dẫn tối hóa cho file Robot.txt

Bạn vào Blog => Cài đặt => Tùy chọn tìm kiếm (“Robots.txt tùy chỉnh” và “Thẻ tiêu đề robot tùy chỉnh”)
1. Code tối ưu “Robots tùy chỉnh” Chọn chỉnh sửa => Yes => Paste đoạn Code dưới đây và Lưu thay đổi.

User-agent: Mediapartners-Google
Disallow: 
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html 
Sitemap: http://rinne-it.tk/feeds/posts/default?orderby=UPDATED
Tag
Ý nghĩa
User-agent: *
Xác định các công cụ tìm kiếm mà quy tắc được áp dụng.
Disallow: /
Báo cho công cụ tìm kiếm biết nó không nên "Lục lọi" ở những file này.
Allow: /
Cho phép công cụ tìm kiếm index đọc tất cả các nội dung.
rinne-it.tk
Thay thành địa chỉ trang của các Bạn.

2. Cài đặt tối ưu cho “Thẻ tiêu đề robot tùy chỉnh” Chọn chỉnh sửa => Yes => thiết lập như hình bên dưới và Lưu thay đổi.


TagÝ nghĩa
all
Cho phép công cụ tìm kiếm lập chỉ mục.
noindex
Không hiển thị trang này trong kết quả tìm kiếm.
nofollow
Thông báo cho công cụ tìm kiếm không nên lần theo các liên kết này.
none
Tương tự như noindex và nofollow.
noarchive
Không hiển thị một liên kết "Cached" trong kết quả tìm kiếm.
nosnippet
Không hiển thị một đoạn mã trong kết quả tìm kiếm cho trang này.
noodp
Không sử dụng dữ liệu từ các dự án Open Directory (DMOZ) cho tiêu đề hoặc đoạn hiển thị cho trang này.
notranslate
Không cung cấp bản dịch của trang này với các ngôn ngữ khác trong kết quả tìm kiếm.
noimageindex
Không lập chỉ mục cho hình ảnh trên trang này.
unavailable_after
Không hiển thị trang này trong kết quả tìm kiếm sau khi ngày/thời gian quy định. Ngày/thời phải được xác định trong các định dạng RCF 850.
☼ Kết luận: Quá trình cài đặt file Robot.txt cũng không quá khó. Nhưng chủ yếu là các bạn biết cách dùng sao cho phù hợp với nội dung Blog/Website của Bạn.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều-Rinne-IT
Đọc Thêm

vào lúc 0
Nếu bạn muốn thực hiện thì vào TRANG WEBSITE NÀY để lựa chọn cho mình icon mà bạn thấy thích - rồi tải lưu về máy tính. Sau đó có thể chèn trực tiếp hình icon nàyy vào blog, trong khung 'Favicon' nằm trong phần 'Bố cục'.Hoặc có thể chèn vào Template ( sau khi bạn đã upload icon lên một host free nào đó để lấy được link trực tiếp ).
Sau khi đã có link, bạn vào Mẫu > Chỉnh sửa HTML > Nhấn cặp phím: Ctrl+F để mở ra thanh tìm kiếm của trình duyệt. Tìm đoạn code như bên dưới:
<title><data:blog.pageTitle/></title>
Chèn thêm vào bên dưới đoạn code đã tìm bằng đoạn code:
<link href='Link Favicon của bạn' rel='shortcut icon' type='image/gif'/>
Và nhấn Lưu Mẫu
Đọc Thêm

vào lúc 0
DEMO
Rê chuột vào nút để xem:
Tạo Nút Demo Và Download Slider Cho Blogspot

Bước 1

Blogspot của bạn cần có Font Awesome nếu đang sử dụng Font Awesome thì bỏ qua bước này.
Vào chỉnh sửa mẫu thêm link css sau vào trước thẻ </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Bước 2

Dán đoạn css sau vào trước thẻ ]]></b:skin>
#dedower {
    margin: 20px auto;
    text-align: center;
}

#dedower br {
    display: none;
}

.dtb-slide, .dtb-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.dtb-slide2 {
    border: 2px solid #efa666;
}

.dtb-slide:hover {
    background-color: #0099cc;
}

.dtb-slide2:hover {
    background-color: #efa666;
}

.dtb-slide:hover span.circle, .dtb-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.dtb-slide2:hover span.circle2 {
    color: #efa666;
}

.dtb-slide:hover span.title, .dtb-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.dtb-slide:hover span.title-hover, .dtb-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.dtb-slide span.circle, .dtb-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.dtb-slide2 span.circle2 {
    background-color: #efa666;
}

.dtb-slide span.title,
  .dtb-slide span.title-hover, .dtb-slide2 span.title2,
  .dtb-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.dtb-slide2 span.title2,
  .dtb-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.dtb-slide span.title-hover, .dtb-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.dtb-slide span.title-hover, .dtb-slide2 span.title-hover2 {
    color: #fff;
}

Lưu mẫu

Bước 3

Khi post bài bạn sử dụng đoạn HTML sau 
Mở đăng bài mới lên -> Bên chế độ soạn thảo văn bản HTML và dán mã sau vào.
<div id="dedower">
<a class="dtb-slide" href="Linkdemo" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a class="dtb-slide2" href="Linkdownload" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>

Trong đó:

- Link demo là URL demo bạn muốn hướng người xem tới.
- Link download URL nơi bạn để sản phẩm cho download
Đọc Thêm

vào lúc 0
Tên miền (hay còn gọi domain) là địa chỉ để truy cập vào website nên nó vô cùng quan trọng với bất kì Blogger nào. Hiện nay đang có rất nhiều website bán tên miền uy tín như godaddy, namecheap, bigrock…. nhưng hầu hết, cái giá bạn phải trả cho một domain đều rơi vào khoảng 8 – 10 đô tùy vào nhà cung cấp. Đối với các công ty thì khoản tiền này chẳng đáng là bao nhưng đối với sinh viên và học sinh thì cũng không phải nhỏ. Chính vì thế, trong bài viết này, mình sẽ chia sẻ 5 website cung cấp tên miền miễn phí hàng đầu thế giới hiện nay. 
Không những vậy, với những bạn mới tập làm website thì tốt nhất các bạn nên đăng kí một tên miền miễn phí để chạy thử và khi thấy ổn định thì đầu tư một tên miền chất lượng hơn.
Trái lại, khi sử dụng các domain miễn phí, bạn sẽ không được lựa chọn đuôi tên miền mà thay vào đó, bạn sẽ phải sử dụng đuôi domain của nhà cung cấp. Nhưng cũng không sao phải không, dùng thử thôi mà.

TOP 5 WEBSITE CUNG CẤP TÊN MIỀN MIỄN PHÍ HÀNG ĐẦU

1. CZ.CC

CZ.CC là một trong những nhà cung cấp tên miền miễn phí tốt nhất hiện nay. Bạn có thể đăng kí số lượng tên miền không giới hạn và hoàn toàn miễn phí với CZ.CC. Hơn nữa, nhà cung cấp còn hỗ trợ cho bạn quản lý DNS của tên miền rất tốt. Hiện nay, CZ.CC cung cấp rất nhiều đuôi tên miền bao gồm : uni.me,mac2.org,oapg.org,11r.biz,11r.us,3vt.info,wsse.us,co7.us,b3g.biz,avli.biz,iilg.biz,vqtel.net…. Quá nhiều lựa chọn cho người dùng miễn phí.
Trang chủ : Click vào đây

2. DOT.TK

Dot.tk là một trang website đăng kí tên miền miễn phí đẹp. So với các tên miền khác thì tên miền .tk đẹp hơn rất nhiều phải không. Với Dot.tk, bạn có thể đăng kí tên miền và chỉnh sửa  CNAME,A,AA records rất dễ dàng với trang quản trị tên miền. Hiện nay, có hàng triệu người đang sử dụng tên miền free của nhà cung cấp này, tại sao bạn lại không ?
Trang chủ : Click vào đây

3. CO.NR

CO.NR là một nhà cung cấp tên miền miễn phí mãi mãi rất tuyệt vời. Người sử dụng nếu lựa chọn CO.NR sẽ được cung cấp miễn phí một số dịch vụ đi kèm như chuyển hướng URL, URL cloaking, và đặc biệt là toàn quyền tùy chỉnh DNS.
Trang chủ : Click vào đây

4. SMARTDOTS

Smartdots là website cung cấp tên miền miễn phí có DNS tốt và rất có tiếng tại Việt Nam. Tên miền đăng kí với smartdots sẽ có dạng ” websitecuaban.xx.xx” . Tuy không được đẹp cho lắm nhưng vẫn là lựa chọn tốt cho ai sử dụng miễn phí.
Trang chủ : Click vào đây

5. CU.CC

CU.CC cũng là một nhà cung cấp tên miền free có tiếng trên thế giới. Bạn có thể đăng kí tới 100tên miền miễn phí với CU.CC và đi kèm là dịch vụ DNS đầy đủ, cũng miễn phí tiếp. Quá tuyệt với phải không.
Trang chủ : Click vào đây
Ngoài ra bạn cũng có thể sử dụng một số nhà cung cấp sau đây :
  • biz.nf
  • biz.ly
  • vn.ee : Việt Nam
  • ………..
Đọc Thêm

vào lúc 0

HƯỚNG DẪN TẠO SITEMAP DẠNG INPUT ĐẸP CHO BLOGGER

Là một wapmaster chắc hẳn ai cũng hiểu được tầm quan trọng của Sitemap, dù bạn làm trên mã nguồn nào thì Sitemap vẫn là một yếu tố không thể thiếu. Trong Blogger cũng vậy, Sitemap trong blog là một phần rất quan trọng, ngoài chức năng sắp xếp bài viết một cách khoa học giúp độc giả dễ tìm kiếm cũng như quan sát tổng thể các bài viết trên blog của bạn.

Sitemap được phân loại theo nhãn, hiển thị bài viết gọn gàng và có phân trang. Và đặc biệt, Sitemap sẽ tải theo truy vấn của độc giả chứ không tải toàn bộ bài viết sẽ giúp tốc độ load của blog bạn nhanh hơn.
Demo hình ảnh:

Hướng Dẫn Tạo Sitemap Dạng Input Đẹp Cho Blogger
Hướng Dẫn Chi Tiết Tạo Sitemap Dạng Input Cho Blogger:
1. Tại trang quản trị, các bạn vào tab Trang => Bấm chọn Trang Mới
Hướng Dẫn Tạo Sitemap Dạng Input Đẹp Cho Blogger
2. Chuyển sang chế độ HTML là dán đoạn code bên dưới vào:
<style type="text/css">
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id="show-cat">
</div>
<div id="show-post">
<script type="text/javaScript">
var cat_home='';cat_numb=10;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='
<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>
'}dw+='</ul>
';dw+='<div id="navi-cat">
';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start+' &ndash; '+(cat_start+i-1)+' / '+tt+'</span>';dw+='</div>
';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length;i++){dw+='
<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>
'}dw+='</ul>
';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style="clear: both;">
</div>
Trong đó: cat_numb=10 là số bài viết hiển thị trên 1 trang
3. Xuất Bản và xem thành quả nha. Chúc các bạn thành công !

Kết luận: Thủ thuật được chia sẻ bởi Taigame24h.vn với tên Hướng Dẫn Tạo Sitemap Dạng Input Đẹp Cho Blogger. Những ai xuất bản lại bài viết này xin ghi lại nguồn Taigame24h
Đọc Thêm

vào lúc 0

HƯỚNG DẪN UPLOAD FILE JS VÀ CSS LÊN HOST GOOGLE DRIVE





Sau khi đã hoàn thành cho mình một Website, Blog (Blogspot chẳng hạn) thì việc tìm nơi lưu trữ các file Css và Js (Javascripts) là điều tất yếu và cực kỳ cần thiết. Trong bài viết này mình sẽ hướng dẫn các bạn 10 bước để upload file Css và Javascripts lên host Google Drive... ...


Trước đây, khi upload các file Css hay js người ta thường nghĩ ngay đến code.google.com, nhưng hiện nay, dường như Google Code đã ngừng hỗ trợ việc Upload. Vậy nên Google Drive (Dịch vụ lưu trữ của Google) là lựa chọn số một.

·         Vậy tại sao phải upload những file này lên web host (Google Drive)?
- Thứ nhất, thông thường khi download, tải các template từ trên mạng về, các file js và css mặc định đã được upload sẵn lên một trang nào đó, và việc bạn phải dùng chung các file đấy với nhiều người khác sẽ làm chậm tốc độ truy xuất, làm chậm tốc độ tải trang của bạn.

- Thứ hai, vào một ngày đẹp trời, Website, hay blogspot của bạn bỗng nhưng gặp hiện thượng lạ, bố cục, layout bị vỡ, hiện thị lung tung, hay các tiện ích javascripts không chạy, nguyên nhân có thể là link đến các file Css hay Javascripts bị die, hoặc chủ sở hữu ngừng chia sẻ, lúc này nếu may mắn bạn vẫn có thể tìm thấy các file đó bằng cách Google search thần chưởng :D còn không thì =,=!

- Google Driver của Google nên về độ uy tín thì khỏi phải bàn, cho phép upload 5GB mỗi tài khoản, có nhiều công cụ đi kèm (khá giống như tiện ích addon của Google Chrome hayFirefox), bạn hoàn toàn có thể dễ dàng chia sẻ, chỉnh sửa các file lưu trữ của mình, bảo mật cực tốt, và điều cuối cùng: FREE.

1.Đầu tiên, truy cập vào địa chỉ của dịch vụ Google Drive tại:
https://drive.google.com/

2.Đăng nhập bằng tài khoản Gmail, có thể tải xuống phiên bản dành cho máy tính hoặc dùng trực tiếp, riêng mình thích dùng trực tiếp trên Web hơn.

Upload File Css và JS Javascripts lên host Google Drive
3.Để dễ dàng quản lý, ta nên tạo các thư mục, thông thường mỗi blog mình tạo một thư mục chứa tất cả Css và js cho nó.
Upload File Css và JS Javascripts lên host Google Drive

4.Đặt tên cho thư mục sao cho dễ dàng quản lý.
Upload File Css và JS Javascripts lên host Google Drive

5.Sau khi tạo xong, ta có thể dễ dàng vào thư mục theo 2 cách.
Upload File Css và JS Javascripts lên host Google Drive

6.Có thể upload từng file hoặc cả một thư mục.
Upload File Css và JS Javascripts lên host Google Drive

7.Sau khi upload thành công, một hộp thoại hiện lên, các bạn chọn chia sẻ để cài đặt sang chế độ public mới có thể sử dụng được.

Upload File Css và JS Javascripts lên host Google Drive
8.Chọn "công khai trên Web" sau đó lưu lại là xong.

 Upload File Css và JS Javascripts lên host Google Drive
Upload File Css và JS Javascripts lên host Google Drive

10.Dán cái link khi nãy ta copy ở bước 2 của hình trên ra đây, nếu quên bạn có thể copy lại bằng cách click phải vào file, chọn "Chia Sẻ". Mặc định đường dẫn (link) có dạng như sau:
https://docs.google.com/file/d/0B8UNNTwD2bIKVVF6bENDcThLajg/edit?usp=sharing
Để có thể sử file Js và Css mà ta đã upload cho blogspot, ta sửa lại đường dẫn trên thành:
https://googledrive.com/host/0B8UNNTwD2bIKVVF6bENDcThLajg
Chú ý: Chỉ cần thay phần đã được hightlight đỏ. Sau khi đã có link lưu trữ tại host mới, các bạn tiến hành thay lại toàn bộ các link có sẵn trong template nha.

Cú pháp:
<script src="https://googledrive.com/host/0B8UNNTwD2bIKVVF6bENDcThLajg" type="text/javascript"></script>
<link href="https://googledrive.com/host/0B8UNNTwD2bIKVVF6bENDcThLajg" rel="stylesheet" type="text/css"></link>


Chúc Vui vẻ và thành công
Đọc Thêm
Subscribe to: Posts (Atom)