Hướng dẫn chèn logo vào ảnh dùng PicArt

Thủ thuật hướng dẫn sử dụng phần mềm chèn logo vào ảnh để làm bản quyền cho ảnh.

Ở đây chúng ta sẽ tải phần mềm PicsArt bên dưới đây.

Bước 1: Sau khi cài đặt phần mềm sẽ có biểu tượng như sau:

Bước 2: Khởi động phần mềm và đăng  ký tài khoản, các bạn có thể đăng ký bằng google hoặc facebook

Bước 3: Sau khi đăng ký xong, chúng ta đăng nhập vào tài khoản

Bước 4: Nhấp vào hình dấu (+) 

Bước 5: Chọn phần Chỉnh sửa và chọn ảnh cần chèn logo vào

Bước 6: Chọn Thêm ảnh (logo chúng ta muốn chèn vào)

Bước 7: Chúng ta sẽ tùy chỉnh kích thước logo của chúng ta theo ý thích và nhấn dấu Check phía trên bên phải màn hình để hoàn tất bước.

Bước 8: Chọn dấu mũi tên phía trên bên phải để qua bước sao lưu ảnh

Bước 9: Các bạn chọn LƯU Ở CHẾ ĐỘ RIÊNG TƯ .
Hoàn thành các bước trên là các bạn có thể chèn logo vào ảnh, tạo bản quyền cho ảnh của chúng ta được rồi, thật đơn giản phải không các bạn.
Hãy nhấn Share và theo dõi để đọc những thủ thuật hay đối với chiếc smartphone đáng yêu của các bạn nhé

Hướng dẫn sử dụng smart phone làm remote tivi

Đôi khi vọc vạch chúng ta chỉ muốn chiếc smart phone của chúng ta có thể cân cả thế giới, và dần dần thực tế là chúng ta lại càng tiến tới được sự tiện dụng cũng như linh hoạt của chúng.
Hôm nay MTS xin chia sẻ với các bạn về một chủ đề khá hay, biến chiếc điện thoại smart phone của chúng ta thành một chiếc Remote Tivi đúng nghĩa.

Không lang mang nữa, chúng ta vào các bước thực hiện thôi.
Những thứ cần chuẩn bị:
- Phần mềm Video & TV SideView các bạn có thể search dễ dàng trên Appstore hoặc CH Play nhé.
Bước 1: Cài đặt phần mềm và mở phần mềm lên

Bước 2: Giao diện của phần mềm rất dễ sử dụng, yêu cầu để sử dụng được là thiết bị Smartphone của chúng ta và Smart tivi phải cùng kết nối vào cùng một lớp mạng, tiếp đến chúng ta sẽ vào phần  Cài đặt thiết bị

Bước 3: Lúc này chiếc tên của chiếc tivi chúng ta sẽ được tìm thấy trong danh sách thiết bị, bây giờ nhấp vào hình chiếc remote là chiếc smartphone của các bạn sẽ trở thành chiếc Remote siêu bá đạo.

Hướng dẫn tối ưu hóa hiển thị code bằng Notepad++

Có lẽ mọi người trong chúng ta đều biết mọi phiên bản windows đều có tích hợp 1 công cụ rất hữu ích để đọc các văn bản đó là Notepad. Nó có thể đọc được rất nhiều định dạng file khác nhau, nhưng các nội dung cơ bản không chứa nhiều nội dung định dạng phức tạp thì chúng ta không quan trọng là dùng chương trình gì để đọc, nhưng với những văn bản có nhiều định dạng cũng như các chỉ mục thì ta phải dùng word, và code thì Notepad ++ là một cái tên đáng xứng danh anh hùng, vì nó hỗ trợ các định dạng trong các ngôn ngữ lập trình rất mạnh. Hôm nay MTS xin giới thiệu cách để tối ưu hiển thị các dạng code khác nhau, và nó sẽ chuẩn các đoạn code của chúng ta, làm cho đoạn code đọc một cách dễ dàng.

Nào chúng ta cùng bắt đầu nhé!

Ví dụ trong công cụ Deverloper Tool của trình duyệt Chrome cho chúng ta Debug được code của Website, có những đoạn code chỉ viết trên 1 hàng, mặc dù chứa rất nhiều thông tin cũng như chương trình con.

Các bạn chú ý ở góc dưới bên trái của chương trình có ký hiệu { } - Pretty print nó là một công cụ phải nói là rất kỳ diệu, nó sẽ định dạng lại toàn bộ đoạn code của chúng ta theo một chuẩn rất dễ đọc.

Đó là công cụ có trên trình duyệt Chrome mà topic chúng ta lại nói về Notepad++. Ở Notepad++ cũng có một công cụ tương tự...

Lưu ý! Chỉ áp dụng với Notepad++ 32bit Không áp dụng ở bản 64bit vì chưa hỗ trợ các bạn nhé.

Để cài thêm được các tool như vậy các bạn vào Plugins --> Plugin Manager --> Show Plugin Manager

Trong hộp thoại này có 3 thẻ, Available, Updates, Installed:

Nếu các bạn đang sử dụng Notepad++  để viết code, ví dụ như mình đang sử dụng Notepad++ để lập trình file xml thì mình sẽ cài thêm xml tool. Đơn giản chỉ cần tìm đến Plugin muốn cài Check vào, và nhấn nút Install thì chương trình sẽ tự tìm source trên trang nguồn và cài đặt tự động cho chúng ta. Đây là plugin mình đã cài đặt thành công.

Và các bạn Check giống như hình dưới thì file xml của mình sẽ tự được định dạng theo chuẩn rất dễ đọc

Cám ơn các bạn đã theo dõi chủ đề này, mong các bạn sẽ có thêm những công cụ thật hay để bổ trợ cho việc lập trình của mình, chúc các bạn thành công.

Tạo bố cục cho template -Thêm tiện ích cho bố cục - Phần 3.2

Ở phần trước mình đã giới thiệu cho các bạn sơ lược cấu trúc code của bố cục một giao diện trong blogger, tiếp đến phần này mình sẽ nói các tùy biến các bố cục bằng các tiện ích widget, cách thêm widget và chúng ta sẽ làm việc ở khu vực này

Ví dụ như Phần chính của trang, có Bài đăng nổi bật là một widget được tích hợp sẵn, có một số widget có sẵn rất tiện lợi, nhưng đa số chức năng thì cũng đáp ứng nhu cầu của chúng ta nhưng ngặt một điều nó giao diện của chúng thì ta lại không thích, và cách giải quyết là chúng ta sẽ chọn thêm tiện ích --> HTML/Javascript

Chúng ta thử tạo một widget nhé: widget này sẽ có công dụng hiển thị các bài post mới nhất

Thêm HTML/Javascript sau đó chèn đoạn code sau vào phần nội dung:

<div> <style type="text/css"> .bbrecpost2 {width:100%; box-sizing:border-box; padding:7px; border-bottom:1px solid #d1d1d1;} .bbrecpost2:last-child {border:none; } .bbrecpost2 a{color: #004D99; font:bold 13px Helvetica,Arial,san-serif; line-height:1.6em;} .bbrecpost2 a:hover {color:darkviolet;} .bbrecpost2 span {font-size:12px;} </style> <div style="border: 1px solid #d1d1d1; box-sizing: border-box;"> <script> //<![CDATA[ function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); var readmorelink = "»»"; readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t; var cdyear = postdate.substring(0,4); var cdmonth = postdate.substring(5,7); var cdday = postdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Tháng 1"; monthnames[2] = "Tháng 2"; monthnames[3] = "Tháng 3"; monthnames[4] = "Tháng 4"; monthnames[5] = "Tháng 5"; monthnames[6] = "Tháng 6"; monthnames[7] = "Tháng 7"; monthnames[8] = "Tháng 8"; monthnames[9] = "Tháng 9"; monthnames[10] = "Tháng 10"; monthnames[11] = "Tháng 11"; monthnames[12] = "Tháng 12"; if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (!standardstyling) document.write(''); document.write('<div class="bbrecpost2"> '); document.write('<span>'); if (standardstyling) document.write(''); document.write(posttitle); if (standardstyling) document.write(''); if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdyear); if (!standardstyling) document.write('<div class="bbrecpostsum""> '); if (standardstyling) document.write(''); if (showpostsummary == true) { if (standardstyling) document.write(''); if (postcontent.length < numchars) { if (standardstyling) document.write('<i>'); document.write(postcontent); if (standardstyling) document.write('</i>');} else { if (standardstyling) document.write('<i>'); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd); document.write(postcontent + '... ' + readmorelink); if (standardstyling) document.write('</i>');} } if (!standardstyling) document.write('</div> '); document.write('</span>'); document.write('</div> '); if (standardstyling) document.write(''); } if (!standardstyling) document.write('<div class="bbwidgetfooter"> '); if (standardstyling) document.write(''); document.write(''); if (!standardstyling) document.write('</div> '); } //]]> </script> <script> var numposts = 5; var showpostdate = true; var showpostsummary = true; var numchars = 100; var standardstyling = false; </script> <script src="http://mathangspk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script> </div> </div>

Kết quả như của chúng ta đây, hãy thay mathangspk.blogspot.com là địa chỉ blog của các bạn

Bắt đầu các bạn thấy hay hay rồi đúng không nào, chúng ta không đi sâu vào để hiểu code nó chạy chương trình như thế nào. Vì đây chỉ là cấp cơ bản, và chúng ta sẽ phân tích những đoạn code này ở các bài có nội dung nâng cao hơn.
Tiếp tục nào, ở nội dung trên chúng ta chỉ mới thêm tiện ích được ở thanh bên, giờ chúng ta muốn thêm tiện ích ở các khung khác thì phải nào như thế nào? Ví dụ như dưới chân trang

Hiện giờ phần chân trang của chúng ta chỉ có một ô có thuộc tính sẵn, giờ các bạn hãy làm theo mình nhé

Phần chân trang thì trong đoạn code của mình thường sẽ được đặt là footer, mà không phải đặt nữa mà nó được xem như là quy chuẩn viết code cho web vậy

Và đoạn code chúng ta cần sửa nằm ở đây, các bạn dùng công cụ Find.. (Ctrl + F) để tìm cho nhanh nhé

showaddelement = 'no' 

Giờ chúng ta chuyển thuộc tính này showaddelement = 'yes' xem kết quả thế nào nhé!

Lưu chủ đề lại và kéo xuống phần cuối trang, một khung Thêm tiện ích đã xuất hiện, bây giờ chúng ta có thể thêm các tùy chọn có sẵn của blogger hoặc thêm những đoạn javascript.

Đến bài này chúng ta cũng đã tìm hiểu được kha khá về giao diện của blogger rồi các bạn nhỉ, mời các bạn đón đọc các phần kế tiếp nhé

Tạo bố cục cho template blogger-phần 3.1

Chúng ta cùng tiếp tục nào, bây giờ chúng ta hãy thử đăng một bài mới xem kết quả hiển thị thế nào nhé. Và chúng ta sẽ đi sâu một chút vào phân tích code để dễ cho việc sửa đổi sau này.

Giao diện sau khi thực hiện post bài

Nếu để code ở trong phần tùy chỉnh code mà sửa thì mình thấy rất bất tiện, nên mình dùng một công cụ bổ trợ để tiện cho việc sửa code, ở đây mình dùng Notepad++ (để được hỗ trợ nhiều Plugin các bạn dùng bản 32bit nhé), xem hướng dẫn và tải các Plugin cho Notepad++ tại đây.

Tiếp đến mình sẽ giới thiệu các bạn một công cụ cực kỳ hay để debug code không những chỉ dùng cho giao diện của blogger mà còn dùng được cho tất cả các website nói chung. Đó là: Developer Tool được tích hợp trong Chrome hoặc Coccoc, để bật tính năng này các bạn nhấn F12

Chương trình Developers Tool được tích hợp trong các trình duyệt thông dụng như Chrome

- Phân tích cấu trúc Trang chủ, ở thẻ Element khi các bạn rê chuột vào đoạn code nào thì phần được chọn tương ứng sẽ được bôi đen và các ảnh hưởng chỉ tác động nằm trong cặp thẻ <body></body>
Lưu ý: Tùy vào định nghĩa của người lập trình mà các phần trong thẻ Body lại khác nhau.
Ở ví dụ này khi mình xổ phần body xuống, tiếp trong đó sẽ có thẻ  <div></div>, và khi bạn rà chuột tới đâu thì phần bôi đen sẽ đến đó.
- Cụ thể các bạn xem đoạn code sau:

Hầu hết các giao diện đều có cấu trúc giống nhau như vậy:
- Thẻ header
- Phần nội dung chính sẽ nằm trong thẻ div
- Thẻ footer là các nội dung ở cuối cùng của trang

Nếu các bạn càng xổ các thẻ ra thêm nữa thì sẽ đến phần định nghĩa của các thành phần nhỏ hơn nữa

Thử thay đổi một giá trị xem nó tác động như thế nào đến giao diện của chúng ta nhé.

Các bạn để ý dòng background-color: là màu nền

Và nó nằm trong cặp code: .heroPost .big-post-image-top-container (như hình trên), tiếp đến các bạn sẽ copy code trong tùy chỉnh ra chương trình Notepad++ để tiện nghiên cứu code. Sau khi đã copy các bạn lưu file với định dạng xml. Bây giờ code của chúng ta đã sinh ra rất nhiều. Nhấn tổ hợp phím Ctrl + F hộp thoại tìm kiếm sẽ xuất hiện, và tìm với từ khóa " .heroPost .big-post-image-top-container ". Kết quả được như thế này

Các đoạn code màu cam này nằm trong thẻ <b :skin>  đoạn code màu cam </b: skin>
và đây chính là code css tạo giao diện cho blogger của chúng ta đấy các bạn.
Có lẽ với những bạn mới sẽ chưa hiểu cú pháp của dòng code này. Mình xin nói sơ qua nó như thế này:

Nếu nhìn đây là các bạn cũng hiểu chút chút rồi nhỉ.
Ở lớp class của thẻ body thì trong css sẽ khai báo là .<tên class>
Đến đây các bạn có thể tùy chỉnh được một số thông số cơ bản rồi đó. Nhưng để sửa được thì các bạn cũng phải có một chút kiến thức về css mới được, các bạn có thể tham khảo series css cơ bản tại đây.
Kết thúc phần này ở đây, phần sau mình sẽ nói về widget và phân vùng layout trong giao diện blogger, thêm widget. Cám ơn các bạn đã quan tâm theo dõi chủ đề.

Cấu trúc cơ bản của file template trong blogger - Tạo template cho blogspot cơ bản [phần 2]

Ở phần đầu mình đã giới thiệu sơ lược về cách để vào để thiết kế giao diện, dưới đây là toàn bộ cầu trúc của 1 file xml template của giao diện blogger

Code tổng quan:

<?xml version="1.0" encoding="UTF-8" ?> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/> </b:section> </body> </html>

Khi bạn vào tùy chỉnh code có sẵn, sẽ thấy một đoạn code rất dài, nhưng cấu trúc của một file template được định dạng là một file xml. Có cấu trúc gồm 4 phần chính:

Phần I:

Phần này là phần khai báo version của xml đang dùng, các bạn cũng không cần quan tâm đến phần này nhiều lắm

<?xml version="1.0" encoding="UTF-8" ?>

Phần II:

Bạn sẽ thấy có rất nhiều nội dung trong cặp thẻ <html....> rất nhiều nội dung trong này </html>, từ từ qua các phần sau chúng ta sẽ cùng làm rõ tất cả các nội dung chứa trong này

1. Thẻ <head></head>

Phần này chứa các mô tả về blog của bạn, chứa các thông tin khai báo để anh google có thể biết tới bạn, đại loại mình nghĩ nó giống như phần tự giới thiệu bản thân của blog vậy đó. 

Tiếp đến bạn thấy đoạn code: 

<head> <b:skin><![CDATA[ ]]></b:skin> </head>

Đây chính là phần linh hồn của blog của bạn, đẹp hay xấu là nhờ tất cả vào nó đấy, bên trong nó chứa code css để làm giao diện cho blog của bạn. Ở đây mình chỉ nói cơ bản, những bài sau mình cũng sẽ nói rõ hơn. Đến đây xuất hiện thêm css nghe có vẻ quen quen, vâng đó chính là css mà các bạn thấy trong các giao diện website thường gặp cũng chính là anh này đấy.

2. Thẻ <body></body>

<body> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/> </b:section> </body>

Phần body này sẽ chứa tất cả các nội dung được hiển thị trong blog, chữ, hình ảnh, panel, nói chung là tất cả mọi thứ đều nằm trong này.

Và bây giờ mình thử Copy hết phần code trên vào phần code tùy chỉnh lưu lại chủ đề và xem kết quả nhé. Lưu ý: các bạn nên lưu trữ phần giao diện trước ở một nơi nào đó, có sai sót gì thì còn có cái cứu cánh.

Còn đây là kết quả của mình:


Các bạn sẽ thấy có thêm một vài dòng code sẽ được tự sinh ra, mình nghĩ chắc đoạn code trên còn thiếu một vài cấu hình cơ bản nữa nên nó mới tự sinh ra như vậy.

Chúng ta kết thúc bài này ở đây, tiếp theo chúng ta sẽ làm tiếp ở phần tiếp theo các bạn nhé

Tạo template cho blogspot cơ bản [phần 1]

Ai bắt đầu tham gia viết blog và sử dụng blogger cũng muốn tìm hiểu để thay đổi giao diện của trang template của mình theo ý muốn và có nhiều bạn sẽ không biết bắt đầu từ đâu.

Qua series các bài viết mình chia sẻ mong các bạn sẽ hiểu hơn về cấu trúc một giao diện của template blogger.

Nào chúng ta cùng bắt đầu nhé.

Các bạn sẽ vào phần cấu hình cho blog --> Chủ đề --> Chỉnh sửa HTML

Ở phần này mình chỉ chia sẻ về phần code tùy chỉnh HTML không đề cập đến Tùy chỉnh bằng tay nhé các bạn

Và những gì mình sẽ thay đổi nằm ở đây:

Trên đây là đoạn code đã khá hoàn chỉnh và blog mình đang sử dụng, ở phần tiếp theo mình sẽ giới thiệu sơ lược về cấu trúc của một file template
Để chuyển qua bài tiếp theo các bạn nhấn vào đây

Site Map

Loading...

Blogging Tips and Tricks

Cài ứng dụng cho smart tivi

Những thứ cần chuẩn bị:

- Smart tivi (chạy hệ điều hành android)
- Usb (dung lượng đủ để chứa file cài đặt apk) và tất nhiên là phải còn dùng được J
- File apk của ứng dụng cần cài đặt (search google “tên ứng dụng + apk”) https://apkpure.com trên trang web này ứng dụng nào cũng có. Cứ lên đó tìm là có ngay





Cách bước tiến hành:

- Vào phần thiết lập bảo mật của tivi, tắt chế độ phần mềm không tin cậy (giống như cài app trên điện thoại android vậy) nếu không tắt thì tivi sẽ không cho cài vì nó không có trong CH play mà smart tivi cho phép.
- Mở phần mềm quản lý File (tập tin), nếu không có thì cài phần mềm ES Explorer về (thằng này có trên CH Play của tivi)
- Mở phần mềm ES Explorer lên tìm đến thiết bị và cài.

Dưới đây là video hướng dẫn các bạn có thể làm theo, nếu có gì thắc mắc hãy để lại comment bên dưới mình sẽ giải đáp thắc mắc nhé mọi người.

Chia sẽ màn hình Laptop với Smart Tivi

Nếu các bạn đang sở hữu một chiếc Smart tivi màn hình từ 32inch trở lên thì không gì tuyệt vời để phục vụ cho việc giải trí cho bản thân, bên cạnh đó chúng ta cũng có thể dùng màn hình tivi để trình chiếu, với xu hướng ngày càng hiện đại các thiết bị kết nối không dây ngày càng phổ biến thì việc kết nối để chia sẻ màn hình của chiếc Laptop của bạn với Smart vô cùng dễ dàng.
Để làm được điều này chúng ta có thể dựa vào tính năng WIFI DIRECT của Smart tivi.
!QUAN TRỌNG: Laptop và tivi của bạn phải cùng truy cập một Access Point (cái điểm mạng mà laptop và tivi bạn kết nối vào để vào mạng), mà cái này thì mỗi nhà chắc cũng chỉ có 1.

Đầu tiên chúng ta phải bật chế độ Wifi Direct của tivi lên:
Bước 1: Vào phần Cài đặt --> Mạng

Bước 2: Chắc rằng chế độ này đã được bật:

Bước 3: Chúng ta xem trong phần cài đặt Wi-fi Direct có gì trong đó nhé

Phần KD-43X800E là tên của thiết bị tivi của chúng ta, khi thiết bị được nhận dạng trên máy tính sẽ xuất hiện tên thiết bị như vậy.

Bước 4: Trở về Laptop của chúng ta, chúng ta nhấn tổ hợp phím Fn+F8 đối với máy Dell, cac máy tính khác cũng có phím tắt giống vậy, các bạn làm tương tự nhé

Bước 5: Sẽ xuất hiện Project như hình dưới, các bạn chú ý dòng Connect to a wireless display 

Bước 6: Thiết bị sẽ tìm thấy chiếc smart tivi của bạn, giờ các bạn chỉ cần nhấp vào thiết bị và cảm nhận kết quả.

Finish: Màn hình máy tính đã được hiển thị lên tivi, thật tuyệt vời

Các bạn có thể xem video hướng dẫn tại đây:

Xóa file Window.old trong hệ điều hành Win 10

Sau khi nâng cấp lên một phiên bản mới, để bổ sung các tính năng mới của hệ điều hành cũng như vá các lỗi bảo mật do nhà phát hành windows phát hành. Thì trong ổ cứng của chúng ta sẽ xuất hiện một folder windows.old
Và nó chứa dung lượng rất lớn.

Có câu hỏi đặt ra là nếu chúng ta xóa bỏ folder này bằng cách thủ công thì có ảnh hưởng gì đến hệ điều hành của chúng ta đang dùng hay không?
- Dĩ nhiên nếu chỉ Click chuột phải chọn Delete để cho vào sọt rác thì sẽ có trường hợp không mong muốn xảy ra và sẽ không xóa được triệt để tận gốc.
Bài viết này mình xin chia sẽ cho các bạn một thủ thuật xóa folder Window.old một cách dễ dàng và sạch sẽ.

1. Open Disk Cleanup click vào biểu tượng Search, gõ Disk Cleanup, trong list chúng ta click Disk Cleanup.
   Sẽ xuất hiện các ổ đĩa của hệ thống chúng ta, Chọn ổ đĩa có chứa Folder Windows.old, click OK.
2. Chọn đúng sẽ xuất hiện như hình dưới, click Clean up system files.
   
3. Click OK
4. Chọn Previous Windows installation(s) check box, chọn những gì bạn muốn Cleanup, sau đó click OK.
   
5. Cửa sổ cảnh báo xuất hiện, click Delete Files.

Như vậy các bạn đã xóa được Folder Windows.old mà hệ điều hành của các bạn không bị ảnh hưởng gì. Chúc các bạn thành công.

Các bạn có thể xem video hướng dẫn bên dưới để thực hiện nhé.