 |
| Template Personal mag cho blog cá nhân, doanh nghiệp |
Những tính năng nổi bật của Template Personal mag
100% Pure Responsive: Hỗ trợ hiển thị trên nhiều
thiết bị
Drop down menu: Phân nhiều cấp menu giúp linh hoạt trong sắp xếp các chủ đề trên blog.
Khung đối tác của blog khá nổi bật
với logo lớn chạy ngang
Tích hợp bản đồ của Google
map lớn ở cuối trang
Drop down menu: Phân nhiều cấp menu giúp linh hoạt trong sắp xếp các chủ đề trên blog.
Khung chia sẻ với
khổ lớn gây chú ý ngay đầu bài viết
Hướng dẫn cài đặt template Personal mag
Về phần chữ thì bạn muốn sửa cái gì cứ tìm chữ ấy mà sửa.
Không thành vấn đề
Chỉnh sửa menu chính
Đây là code của menu chính. Bạn có thể chỉnh sửa theo ý mình.<div
class='menu-secondary-container'>
<ul class='menus
menu-secondary'> <li class='visited'><a
expr:href='data:blog.homepageUrl'>Home</a></li><li><a
href='#'>Business</a><ul class='children'><li><a
href='#'>Internet</a></li><li><a
href='#'>Market</a></li><li><a
href='#'>Stock</a></li></ul></li>
<li><a
href='#'>Downloads</a><ul class='children'><li><a
href='#'>Dvd</a></li><li><a
href='#'>Games</a></li><li><a
href='#'>Software</a><ul class='children'><li><a
href='#'>Office</a></li></ul></li></ul></li>
<li><a href='#'>Parent
Category</a><ul class='children'><li><a href='#'>Child Category
1</a><ul class='children'><li><a href='#'>Sub Child Category
1</a></li><li><a href='#'>Sub Child Category
2</a></li><li><a href='#'>Sub Child Category
3</a></li></ul></li><li><a href='#'>Child Category
2</a></li><li><a href='#'>Child Category
3</a></li><li><a href='#'>Child Category
4</a></li></ul></li>
<li><a
href='#'>Featured</a></li>
<li><a
href='#'>Health</a><ul class='children'><li><a
href='#'>Childcare</a></li><li><a
href='#'>Doctors</a></li></ul></li>
<li><a
href='#'>Uncategorized</a></li></ul></div>Phần đối tác của Blog
Chúng ta chỉnh sửa đoạn code sau. Bạn thay link hình ảnh
và liên kết của blog mình vào những chỗ Khánh tô đậm.
<div
class='slider-container-c'>
<h2>ĐỐI TÁC CỦA
BLOGDUYKHANH</h2>
<p>Những trang liên kết, đối
tác của blog</p> <ul id='slider'><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg'/></a></li><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg'/></a></li><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg'/></a></li><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg'/></a></li><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg'/></a></li><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg'/></a></li><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/7.jpg'/></a></li><li><a href='#'><img
src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/8.jpg'/></a></li></ul></div>Thay đổi bản đồ cuối blog
Phần này hơi dài dòng tí. Đầu tiên chúng ta truy cập Google.com/maps. Zoom đến nơi bạn muốn hiển thị. Bạn cũng có thể chọn chính xác tên doanh nghiệp của mình nếu nó có trên Google map. Sau đó nhấn nút menu bên trái chọn "Chia sẻ hoặc nhúng bản đồ" như hình bên dưới
Chúng ta sẽ được một
đoạn code như hình bên dưới
<iframe
frameborder='0' height='400'
src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7857.627026108941!2d105.77278598438701!3d10.032242597827118!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x4e7df8e0239f3ced!2sCan+Tho+University!5e0!3m2!1svi!2suk!4v1440942623110'
style='border:0' width='100%'/>
Đây
chính là đoạn code hiển thị bản đồ ở trang demo. Bạn chỉ cần thay đoạn code trên
bằng đoạn code bạn có được ở trang Google map lúc nãy là được. Nhớ thay đổi
chiều rộng width='100%' nhé.
Đến
đây coi như hoàn tất, nếu có vấn đề gì bạn có thể để lại comment.