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.




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>

LongDuyen.Com 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!


0 nhận xét trong bài "Share WebLogMag Blogger Template đẹp tuyệt"

Post a Comment