Tự tay thiết kế một trang web cá nhân cực dễ với blogspot

Chào các bạn đã  và đang đọc bài viết này , hôm nay mình sẽ hướng dẫn các bạn một cách thiết kế riêng cho mình một trang web cá  nhân cực dễ với blogspot .
Thứ nhất các bạn cần phải có một địa chỉ hòm thư điện tử gmail , nếu bạn nào chưa có  gmail có thể đăng ký theo video hướng dẫn bên dưới đây

Video Hướng Dẫn

Sau khi đăng ký xong địa chỉ gmail , các bạn truy cập vào trang blogger.com   và đăng nhập bằng tài khoản gmail vừa tạo . Các bạn làm theo hướng dẫn bên dưới để tạo trang web với bloger .

 Video Hướng Dẫn

Sau khi tạo xong trang web , chúng ta chỉ việc đăng bài viết lên là coi như hoàn thành các bước .
Ở những bài viết sau mình sé hướng dẫn các bạn cách trang trí và sắp xếp một số các tiện ích quan trọng cơ bản cần thiết nhất cho một trang web
Chúc các bạn thành công

Tạo Khung Chứa code trên bài viết có nút Copy All

Khung chứa code trên bài viết là một thành phần ko thể thiếu khi bạn viết bài hoặc muốn chia sẻ một đoạn dài những mã code tới người đọc.
Trước hết các bạn viết bài viết trên blog một cách bình thường , sau khi đến đoạn cần viết code các bạn chọn tích chuột vào HTML trên bài viết để chuyển từ chế độ văn bản sang chế độ HTML sau đó
các bạn dán đoạn code dưới đây :

<div class="codeHeader"> <a 
class="copy-text" data-clipboard-target="#p1" 
href="javascript:void(0);"><i class="fa fa-files-o"></i> 
Copy</a> 
 <pre class="code" id="p1"> 
 Nội dụng nằm trong khung 
 </pre> </div> 

Sau đó các bạn quay về giao diện trang blogger , chọn Chỉnh sửa HTML  tìm đến thẻ </head>  và dán đoạn code bên dưới vào phía trên thẻ

<script src="http://vifox.net/js/khung-code-2.1.1jquery.min.js"></script> 
 <script src="http://vifox.net/js/khung-code-clipboard.js"></script> 
 <script> 
 $(function(){ 
 new Clipboard('.copy-text'); 
 }); 
 </script> 

Tiếp tục các bạn tìm đến thẻ </b:skin> dán đoạn code bên dưới vào  trước thẻ đóng trên :

 
 .codeHeader { 
 background-color: #f5f5f5; 
 border: 1px solid #e0e0e0; 
 border-bottom: 0; 
 text-align: right; 
 padding: 2px; 
 } 
 .copy-text { 
 font-size: 14px; 
 cursor: pointer; 
 color: #707070; 
 padding: 7px 10px; 
 border-left: 1px solid #e0e0e0; 
 } 
 .copy-text:hover {color:#707070;} 
 pre.code { 
 display: block; 
 background: #f9f9f9; 
 max-height: 400px; 
 font-size: 14px; 
 color: black; 
 text-align: left; 
 overflow: auto; 
 border: 1px solid #d3d6db; 
 margin: auto; 
 padding: 16px; 
 line-height: 21px; 
 white-space: normal; 
 } 
 

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