Template Personal mag cho blog cá nhân, doanh nghiệp

Hi. Cũng lâu rồi không viết thêm gì nhỉ. Hôm nay BDK xin gửi đến các bạn yêu blogspot một template cũng kha khá đẹp phù hợp cho việc làm blog các nhân hoặc doanh nghiệp cũng rất ổn. Template này do Templateism.com thiết kế và Khánh chỉnh sửa lại thôi. Thật ra trong temp gốc cũng có nhiều lỗi lắm bạn với lại mình thích cái gì theo ý mình nên cũng sửa khá nhiều. Bạn có thể so sánh với bản gốc ở đây. Mời bạn xem thử

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 chia sẻ với khổ lớn gây chú ý ngay đầu bài viết

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

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

Tạm để nó qua một bên bạn vào template tìm đoạn code sau.

 <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.

Tác giả: Khánh

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.