Share WebLogMag Blogger Template đẹp tuyệt

WebLogMag Blogger Template được thiết kế cực kì ấn tượng với Slide Show chuyên nghiệp mà từ đây bạn sẽ có rất nhiều ý tưởng cho việc thiết kế website đấy :-) Hãy cùng xem Demo bên dưới nha.

Share WebLogMag Blogger Template đẹp tuyệt

Các tính năng nổi bật

  • Thiết kế 100% responsive.
  • Slider được thiết kế full theo chiều rộng.
  • Các tin tức nổi bật được gắn trên slider.
  • Các nút chia sẻ qua mạng xã hội và các nút mạng xã hội.
  • Tiện ích widget bài viết gần đây có thể được gán theo nhãn hoặc tự động của blogspot.

Cách tùy biến template

Hãy chọn chỉnh sửa template và thay đổi những thông số sau cho phù hợp với website của bạn:

var pageCount = 8;
          var upPageWord = "Previous";
          var downPageWord = "Next";
          var rmorepost = "Read more";
          summary_noimg = 385;
          summary_img = 285;
          summaryPost = summary_img;
          postthumbnail = "s250-h200-c";
          nnewsticker = "News Trending";
          imgr = new Array();
          imgr[0] = "http://1.bp.blogspot.com/-nhrIA7_1ei0/UkHKoMI2UTI/AAAAAAAAA28/a9-8_0KXPTI/s1600/no-thumb.jpeg";
          numposts = 8;
          showRandomImg = true;
          //related posts settings
          var defaultnoimage = "http://1.bp.blogspot.com/-nhrIA7_1ei0/UkHKoMI2UTI/AAAAAAAAA28/a9-8_0KXPTI/s1600/no-thumb.jpeg";
          var maxresults = 4;
          var relatedpoststitle = " Related Posts";
          var norelatedpoststitle = " No related posts"

+ pageCount: Số bài đăng trên trang chủ của bạn, các trang tìm kiếm bài viết theo nhãn.
+ upPageWord - Phân trang các bài ở trang trước.
+ downPageWord - Phân trang các bài ở trang tiếp theo.
+ rmorepost: Xem thêm.
+ summary_noimg: Độ dài đoạn văn bản tóm tắt khi không có hình ảnh.
+ summary_img: Độ dài văn bản tóm tắt khi có hình ảnh.
+ summaryPost: Độ dài văn bản tóm tắt cho các bài viết nổi bật.
+ postthumbnail: Kích thước các hình ảnh thumbnail, ví dụ như s250-h200-c(250px width and 200px height), s300-h210(300px width and 210px height)-c, s400-c(400x400)
+ nnewsticker: Newsticker heading.
+ imgr [0]: Magazine widgets no thumb default image.
+ numposts: Default number of posts for magazine widgets. Not important.
+ showRandomImg - Keep it true itself.

Cài đặt các bài viết liên quan

defaultnoimage - Related posts no thumb default image.
maxresults - Number of posts to show in relates posts area
relatedpoststitle - Related post heading text when there is more than one related post.
norelatedpoststitle - Related post heading text when there is no related posts.

Làm thế nào để thêm News Ticker
Tin tức được đánh dấu dễ dàng theo nhãn bài viết với hình ảnh minh họa bên dưới là 1 và 2.

Share WebLogMag Blogger Template đẹp tuyệt

Thêm đoạn mã dưới đây để hiển thị các bài viết được đánh dấu:

<div class="magazine_news_ticker">
<script>
widgetrc(
 'Featured','6','shownewsticker'
);
</script>
</div>

Bạn cần phải thiết lập số lượng các bài viết được hiển thị.

Đoạn code bên dưới là cần thiết để giới thiệu các bài viết gần đây:

<div class="magazine_news_ticker">
<script>
widgetrc(
 '','6','shownewsticker'
);
</script>
</div>

Share WebLogMag Blogger Template đẹp tuyệt

Làm thế nào để thêm Silder
Bạn cần thêm đoạn code bên dưới và thiết lập số bài viết cũng như nhãn bài viết cần hiển thị.

<div class="magazine_slider_flex">
<script>
widgetrc(
 'Slider','16','showsimpleslides'
);
</script>
</div>

Đoạn code dưới đây là để giới thiệu các bài viết gần đây:

<div class="magazine_slider_flex">
<script>
widgetrc(
 '','16','showsimpleslides'
);
</script>
</div>

Share WebLogMag Blogger Template đẹp tuyệt

Làm thế nào để thêm tiện ích bài viết gần đây?

Bạn có thể đặt widget này bất cứ chỗ nào, chỉ cần thêm đoạn code bên dưới, thay thế Fetured bằng nhãn bài viết của bạn:

<div class="small-recent-posts">
<script>
widgetrc(
 'Featured','3','singlecolumnsmallthumb'
);
</script>
</div>

Đoạn code dưới đây để giới thiệu các bài viết gần đây:

<div class="small-recent-posts">
<script>
widgetrc(
 '','3','singlecolumnsmallthumb'
);
</script>
</div>

Widget Email subscribe
Dán đoạn code bên dưới và thay thế feedburner của bạn.

<div class="well"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=weblogtemplates", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">
    <div class="form-group">
<input id="follow-by-email-address" name="email" placeholder="Email address..." type="text" class="form-control">
</div>
<div class="form-group">
<input id="follow-by-email-submit" type="submit" value="Submit" class="btn btn-danger btn-email"> <input name="uri" type="hidden" value="weblogtemplates"> <input name="loc" type="hidden" value="en_US">
</div>
</form>
</div>

Navbar and social media links
Bạn dán đoạn code này và thay thế URL của bạn.

<nav class='navbar navbar-default main-top-nav' role='navigation'>
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class='container'>
        <div class='navbar-header'>
          <button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
            <span class='sr-only'>
              Toggle navigation
            </span>
            <span class='icon-bar'>
            </span>
            <span class='icon-bar'>
            </span>
            <span class='icon-bar'>
            </span>
          </button>
          <a class='navbar-brand' href='#'>
            <i class='fa fa-home'/>
          </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
          <ul class='nav navbar-nav'>
            <li>
              <a href='#'>
                About
              </a>
            </li>
            <li>
              <a href='#'>
                Contact US
              </a>
            </li>
            <li>
              <a href='#'>
                <i class='fa fa-mobile-phone'>
                </i>
                Tech
              </a>
            </li>
            <li>
              <a href='#'>
                <i class='fa fa-gamepad'>
                </i>
                Games
              </a>
            </li>
            <li class='dropdown'>
              <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                <i class='fa fa-list'>
                </i>
              </a>
              <ul class='dropdown-menu'>
                <li>
                  <a href='#'>
                    Action
                  </a>
                </li>
                <li>
                  <a href='#'>
                    Another action
                  </a>
                </li>
                <li>
                  <a href='#'>
                    Something else here
                  </a>
                </li>
                <li>
                  <a href='#'>
                    Separated link
                  </a>
                </li>
                <li class='dropdown-submenu'>
                  <a href='#' tabindex='-1'>
                    Hover me for more options
                  </a>
                  <ul class='dropdown-menu'>
                    <li>
                      <a href='#' tabindex='-1'>
                        Second level
                      </a>
                    </li>
                    <li class='dropdown-submenu'>
                      <a href='#'>
                        Even More..
                      </a>
                      <ul class='dropdown-menu'>
                        <li>
                          <a href='#'>
                            3rd level
                          </a>
                        </li>
                        <li>
                          <a href='#'>
                            3rd level
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href='#'>
                        Second level
                      </a>
                    </li>
                    <li>
                      <a href='#'>
                        Second level
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <ul class='nav nav-pills navbar-right'>
            <li>
              <a class='fb-nav' href='https://www.facebook.com/weblogtemplates'>
                <i class='fa fa-facebook'>
                </i>
              </a>
            </li>
            <li>
              <a class='t-nav' href='https://twitter.com/weblogtemplates'>
                <i class='fa fa-twitter'>
                </i>
              </a>
            </li>
            <li>
              <a class='plus-nav' href='https://plus.googl.com/+weblogtemplatesnet'>
                <i class='fa fa-google-plus'>
                </i>
              </a>
            </li>
            <li>
              <a class='pin-nav' href='http://www.pinterest.com/weblogtemplates/'>
                <i class='fa fa-pinterest'>
                </i>
              </a>
            </li>
            <li>
              <a class='instagram-nav' href='#'>
                <i class='fa fa-instagram'>
                </i>
              </a>
            </li>
            <li>
              <a class='tumblr-nav' href='#'>
                <i class='fa fa-tumblr'>
                </i>
              </a>
            </li>
            <li>
              <a class='linkedin-nav' href='http://www.linkedin.com/'>
                <i class='fa fa-linkedin'>
                </i>
              </a>
            </li>
            <li class='dropdown search-drop'>
              <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                <i class='fa fa-search'/>
              </a>
              <ul class='dropdown-menu menu-drop-search'>
                <li>
                  <form action='/search' class='navbar-form navbar-right' method='get' role='search'>
                    <div class='form-group'>
                      <input class='form-control form-main-search' name='q' placeholder='Search' type='text'/>
                    </div>
                    <button class='btn btn-def' type='submit'>
                      Submit
                    </button>
                  </form>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
        <!-- /.container-fluid -->
      </div>
    </nav>

Blogger Template for Seo hi vọng rằng bạn sẽ thích template này. Mặc dù được thiết kế trên nền tảng blogspot nhưng như các bạn cũng thấy, có quá nhiều tính năng nổi bật cho một template như vậy. Chúc các bạn có một website như ý!
Thanks weblogtemplates for sharing!

Nhận Template mới nhất qua Email.

Nhập địa chỉ Email của bạn rồi chọn Đăng ký sau đó nhập kí tự captcha và vào địa chỉ email để kích hoạt hoàn tất.

Là một người rất đam mê các mẫu blogspot và MMO.

Bài trước
« Prev Post
Bài sau
Next Post »
6 Comments
avatar

Template đẹp quá bạn! Bạn cho mình hỏi rằng muốn điều chỉnh ảnh thumbnail ở widget slider mình phải tìm đến đoạn code nào. Mình áp cho blog của mình nhưng hình nó bị kéo dài ra.:(..Cám ơn bạn nhiều.

Trả Lời
avatar

Cách chỉnh sửa thumbnail hình như mình có hướng dẫn ở trong bài viết rùi đó. Bạn thử làm theo xem sao nhé!

Trả Lời
avatar

Mình muốn hỏi ở cái slider ý bạn. cái thumbnail ở trong bài post thì mình chỉnh được rồi.cám ơn bạn.^^.

Trả Lời
avatar

Do mình không sử dụng template này nên hiện tại chưa có tùy biến code mẫu này. Bạn thử truy cập vào weblogtemplates.net để xem cách tùy chỉnh cụ thể với phiên bản gốc English nhé!
Thân :-)

Trả Lời
avatar

Cám ơn bạn nhé..để mình thử xem.^^.

Trả Lời