Thích Chia Sẻ Blog

Phú Cường Blogger@phucuongblogger
tháng 5 25, 2018

Xin chào tất cả các bạn, hôm nay mình xin chia sẻ cách tạo Widget bạn bè giống facebook đến 99% tuyệt đẹp!


Code này được thiết kế bởi anh Khanh Blogger và được mình đưa về viết bài cho các bạn đây.
BẮT ĐẦU NÀO:

Bước 1: các bạn chèn đoạn CSS này trước thẻ ]]></b:skin :


.fr-tkn {border: 0px; font-family: inherit; margin: 0px; padding: 0px;} .link-fr-tkn {color: #365899; cursor: pointer; display: block; float: left; font-family: inherit; margin-right: 8px; text-decoration: none;} .img-fr-tkn {border-radius: 50%; border: 0px; display: block; height: 50px; overflow: hidden; width: 50px;} .fr-tkn-abf {font-family: inherit; overflow: hidden;} .fr-tkn-abt {font-family: inherit; line-height: inherit;} .fr-tkn-frt {font-family: inherit; font-weight: 500; line-height: inherit; max-width: 162px; word-wrap: break-word;} .link2-fr-tkn {color: #365899; cursor: pointer; font-family: inherit; text-decoration: none;} .fr-tkn-adsstf {font-family: inherit; margin-top: 2px;} .fr-tkn-button-addfr {-webkit-font-smoothing: antialiased; background-color: #f2f3f5; border-radius: 2px; border: 1px solid rgb(206, 208, 212); box-sizing: content-box; color: #4b4f56; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: bold; justify-content: center; letter-spacing: inherit; line-height: 22px; margin: 0px; max-width: 177px; overflow: hidden; padding: 0px 8px; position: relative; text-overflow: ellipsis; transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1), box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1), transform 200ms cubic-bezier(0.08, 0.52, 0.52, 1); vertical-align: middle; white-space: nowrap; margin-top: -2px} .fr-tkn-logo-addfr {background-image: url(https://www.facebook.com/rsrc.php/v3/yZ/r/O6FcXnFs8nG.png); background-position: 0px -298px; background-repeat: no-repeat; background-size: auto; bottom: 1px; display: inline-block; height: 12px; margin-right: 4px; position: relative; vertical-align: middle; width: 12px;} .sddd {color: #90949c; font-family: inherit;} .fr-tkn-lua {color: #90949c!important; cursor: pointer; font-family: inherit; text-decoration: none!important;} .socialContext {margin-top: -2px} .del-fr-tkn {padding: 7px}
Bước 2: Chèn code này vào nơi bạn muốn nó hiển thị:
<div class="fr-tkn"> <a class="link-fr-tkn" aria-hidden="true" href="https://phucuongblogger.blogspot.com/" target="_blank"><img class="img-fr-tkn" src="https://3.bp.blogspot.com/-uM9FsgRwsMY/WhLo2KpANnI/AAAAAAAAByA/5NYanUbCmU455oQS97fFONmEoT8WoReCQCLcBGAs/s1600/optimized-af6s.png" /></a> <div class="fr-tkn-abf"> <div class="fr-tkn-abt"> <div class="fr-tkn-frt"> <a class="link2-fr-tkn" href="https://phucuongblogger.blogspot.com/" target="_blank"><div style="display: inline; font-family: inherit;"> <span class="nameText" style="display: inline-block; font-family: inherit;">Phú Cường Blogger</span></div> </a></div> <div class="socialContext" style="font-family: inherit;"> <div style="font-family: inherit;"> <span class="sddd"><a class="fr-tkn-lua">1 bạn chung</a></span></div> </div> <div class="fr-tkn-adsstf"> <a class="link2-fr-tkn" href="https://phucuongblogger.blogspot.com/lienket" target="_blank"> <button class="fr-tkn-button-addfr" type="submit" value="1"> <i class="fr-tkn-logo-addfr"></i>Thêm bạn bè</button></a></div> </div> </div> </div> <div class="del-fr-tkn"></div> <div class="fr-tkn"> <a class="link-fr-tkn" aria-hidden="true" href="https://www.niemstyle.com/" target="_blank"><img class="img-fr-tkn" src="https://1.bp.blogspot.com/-gB9OHpf_Km8/WhPP1TWULJI/AAAAAAAAByg/LH4EViTAqRIFnf5UocVXUsL-y3s_kPJxQCLcBGAs/s1600/ni%25E1%25BB%2587m%2Bstyle%2Blogo%2B%25C4%2591%25C3%25A3%2Bn%25C3%25A9n.png" /></a> <div class="fr-tkn-abf"> <div class="fr-tkn-abt"> <div class="fr-tkn-frt"> <a class="link2-fr-tkn" href="https://www.niemstyle.com/" target="_blank"><div style="display: inline; font-family: inherit;"> <span class="nameText" style="display: inline-block; font-family: inherit;">Niệm Style Blog</span></div> </a></div> <div class="socialContext" style="font-family: inherit;"> <div style="font-family: inherit;"> <span class="sddd"><a class="fr-tkn-lua">1 bạn chung</a></span></div> </div> <div class="fr-tkn-adsstf"> <a class="link2-fr-tkn" href="https://www.niemstyle.com/p/contact.html" target="_blank"> <button class="fr-tkn-button-addfr" type="submit" value="1"> <i class="fr-tkn-logo-addfr"></i>Thêm bạn bè</button></a></div> </div> </div> </div> <div class="del-fr-tkn"></div> <div class="fr-tkn"> <a class="link-fr-tkn" aria-hidden="true" href="http://www.linkthuthuat.com/" target="_blank"><img class="img-fr-tkn" src="https://uphinhnhanh.com/images/2017/12/14/TCS.jpg" /></a> <div class="fr-tkn-abf"> <div class="fr-tkn-abt"> <div class="fr-tkn-frt"> <a class="link2-fr-tkn" href="http://www.linkthuthuat.com/" target="_blank"><div style="display: inline; font-family: inherit;"> <span class="nameText" style="display: inline-block; font-family: inherit;">Star Sơn IT</span></div> </a></div> <div class="socialContext" style="font-family: inherit;"> <div style="font-family: inherit;"> <span class="sddd"><a class="fr-tkn-lua">99 bạn chung</a></span></div> </div> <div class="fr-tkn-adsstf"> <a class="link2-fr-tkn" href="http://www.linkthuthuat.com/p/contact.html" target="_blank"> <button class="fr-tkn-button-addfr" type="submit" value="1"> <i class="fr-tkn-logo-addfr"></i>Thêm bạn bè</button></a></div></div></div></div></div> </div> 


Bước 3: Lưu template lại.

LỜI KẾT:
Vậy là chỉ với vài dòng code và CSS, các bạn đã tạo được cho mình một widget tuyệt đẹp cho blog của các bạn phải không nào. Nhớ bình luận nhiệt tình và ủng hộ để mình viết thêm nhiều thủ thuật hay hơn nữa nhé.
Chúc các bạn thành công!
Đọc tiếp Tạo widget bạn bè giống facebook tuyệt đẹp tháng 5 25, 2018

Phú Cường Blogger@phucuongblogger
tháng 5 18, 2018



- Xin chào các bạn, do kì thi học kì 2 nên mình không có thời gian để đăng bài cho các bạn đọc. Nay đã xong xuôi thì mình xin phép đc viết một seri design một template blogspot cơ bản dành cho người mới chưa có kinh nghiệm, mong các bạn sẽ ủng hộ nhé!

BẮT ĐẦU NÀO:


Đối với bài viết này thì nếu ai đã có hiểu biết về lập trình thì việc này cực kì dễ dàng, nhưng những ai chưa biết hoặc rành lắm cũng có thể yên tâm vì nó hoàn toàn không gọi là quá cao siêu cả.

CÁCH THỨC HOẠT ĐỘNG 1 WIDGET:


Để đơn giản hóa vấn đề hoạt động của một widget, mình xin giới thiệu sơ về ngắn gọn cách thức của một ngôn chạy như sau. Đơn giản ở đây chỉ có 2 điều bạn cần biết, điều đầu tiên đối với bất kì một chương trình được viết bằng bất cứ ngôn ngữ lập trình nào, khi bắt đầu chạy, nó sẽ tìm đến một hàm được ngôn ngữ đó quy định trước, thông thường nhất thì hàm đó có tên là "main", điều thứ hai bất kì ngôn ngữ lập trình nào cũng chạy theo thứ tự từ trên xuống dưới, từ trái qua phải. Cũng tương tự như vậy, nếu như một thẻ includable nó tương tự với hàm thì đây widget nó tương tự như một chương trình nhỏ vậy. Khi bắt đầu chạy nó cũng bắt đầu từ id="main" và cũng chạy theo thứ tự từ trên xuống dưới và từ trái sang phải vậy.

CHÚNG TA SẼ TẠO 1 TEMPLATE TRẮNG NHƯ SAU:



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

Tiếp theo chúng ta sẽ viết code của các thành phần bên trong template, phần code bên dưới được chèn trong cặp thẻ <body>...</body>

<div class='wrapper'>
<div class='header'>
Đây là nội dung hiển thị trong phần Header
</div>
<div class='main-wrapper'>
Đây là nội dung hiển thị trong phần Main Content
</div>
<div class='sidebar-wrapper'>
Đây là nội dung hiển thị trong phần Sidebar
</div>
</div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
Khi chúng ta sử dụng template, khá nhiều template trong phần bố cục có phần chỉnh sửa và thêm logo ngay dưới phần Favicon, vậy làm thế nào để có nó, chúng ta chỉ cần thêm đoạn code sau vào phần header của template:


<b:section class='Header' id='Header' showaddelement='yes'>
     <b:widget id='Header1' locked='false' title='(Tiêu đề)' type='Header'/>
</b:section>

Bây giờ thì có thể coi những thứ chúng ta vừa làm là 1 template rồi, nhưng chúng vẫn chưa thực sự tạo thành bố cục hoàn chỉnh và vẫn đang chỉ là một mớ hỗn độn. Để tạo đc bố cục hoàn chỉnh, chúng ta cần phải viết CSS căn chỉnh cho template:


<![CDATA[
.wrapper {
width: 800px;
margin: 0 auto;
}
.header {
width: 100%;
min-height: 90px;
background: #4d90fe;
}
.main-wrapper {
width: 70%;
float:left;
min-height: 300px;
background: #f0c36d;
}
.sidebar-wrapper {
width: 30%;
float:right;
min-height: 300px;
background: #f9edbe;
}
]]>
Phần CSS bên trên các bạn chèn vào trong cặp thẻ <b:skin>...</b:skin> . Như vậy là chúng ta đã tạo được bố cục cho template rồi. Hiện tại bài 1 trong seri đã giúp chúng ta tạo được bố cục cho template, ở bài 2 mình sẽ hướng dẫn các bạn thêm phần bài viết cho template. Các bạn hãy comment ủng hộ để mình tiếp tục ra bài 2 của seri hướng dẫn thiết kế template cho blogspot nhé.
Chúc các bạn thành công!
Đọc tiếp Bài 1 - Seri học thiết kế giao diện cho blogspot tháng 5 18, 2018

Phú Cường Blogger@phucuongblogger
tháng 5 14, 2018

Con gái xinh thì ai mà chẳng thích. Đã dễ thương lại còn có tài ca hát như cô bạn dưới đây. Rất chất nhưng lại rất dễ thương !!! Hiện tại bạn ấy đang sở hữu 1 chanel youtube 45k subscribe với những bài cover cực kỳ hay và cũng không quên được vẻ mặt dễ thương của bạn ý nữa !!!

Mời các bạn thưởng thức ảnh:















LỜI KẾT:

Dưới đây là 1 tác phẩm mà bạn ấy vừa cho ra vài tuần cùng với anh Đạt G... Mời các bạn cùng thưởng thức !!!

Đọc tiếp [16+] Bộ ảnh nữ rapper xinh đẹp dễ thương cực kì tháng 5 14, 2018

Phú Cường Blogger@phucuongblogger
tháng 4 16, 2018

Chào các bạn,  hôm nay mình sẽ hướng dẫn các bạn cách nâng cấp Layout,  Default Widget cũng như b:skin lên bản mới. 




1. Nâng cấp b:skin

Sau khi nâng cấp b:Skin lên phiên bản mới sẽ hỗ trợ đầy đủ các tính năng CSS script và Webkit mới nhất.
Để thực hiện việc nâng cấp các bạn chỉ cần vào Chủ đề >> Chỉnh sửa
Sau đó các bạn tìm dòng code sau
<b:skin>
Và thay thế nó bằng
<b:skin version='1.0.0'>
 Thực chất chúng ta chỉ cần thêm chữ  version='1.0.0' vào sau chữ b:skinlà được

2. Nâng cấp Blogger Layout 

Đây là hình ảnh trước và sau khi nâng cấp lên phiên bản mới
Chữ chỉnh sửa đã được đổi thành hình cái bút nhìn rất gọn và chuyên nghiệp.
Xuất hiện thêm biểu tượng hình con mắt với tính năng có thể bật tắt các widget để nó có thể hiện hoặc không hiện ra ngoài website, tiện ích hơn rất nhiều so với trước kia chúng ta phải xóa đi rồi thêm lại rất mất công.
Để thực hiện nâng cấp các bạn tìm đoạn code sau
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Và thay thế nó bằng đoạn sau
<html b:version='2' class='v2' b:layoutsVersion='3'expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> 
Thực chất chúng ta chỉ cần thêm chữ   b:layoutsVersion='3' vào sau chữ b:version='2' class='v2' là được rồi.

3. Nâng cấp Default Widget

Để thực hiện nâng cấp các bạn tìm dòng code  b:layoutsVersion='3' vừa mới thay ở trên và chèn vào trước nó dòng code b:defaultwidgetversion='2' . Sau khi chèn bạn sẽ có đoạn code hoàn chỉnh như sau
<html b:version='2' class='v2' b:defaultwidgetversion='2' b:layoutsVersion='3'expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Tiếp theo các bạn chèn đoạn code sau vào sau thẻ ]]></b:skin> hoặc thẻ </b:template-skin>
<b:defaultmarkups>
      <b:defaultmarkup type='Common'>
        <b:includable id='responsiveImage' var='settings'>
          <b:comment>Add in the high-res thumb for youtube images.</b:comment>
          <b:if cond='not data:settings.image.isYoutube'>
            <b:include data='settings' name='super.responsiveImage'/>
          <b:else/>
            <b:with value='resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 1152, &quot;4:3&quot;)' var='highRes'>
              <b:include data='{                                  image: data:settings.image,                                  imageSizes: [320,490],                                  sourceSizes: &quot;(max-width: 640px) 100vw, (max-width: 1024px) 576px, 490px&quot;,                                  enhancedSourceset: data:highRes                                }' name='super.responsiveImage'/>
            </b:with>
          </b:if>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='BlogSearch'>
        <b:includable id='searchSubmit'>
          <b:if cond='data:widget.sectionId == &quot;search_top&quot;'>
            <label>
              <input type='submit'/>
              <b:include data='{ iconClass: &quot;touch-icon search-icon&quot; }' name='searchIcon'/>
            </label>
          <b:else/>
            <b:include name='super.searchSubmit'/>
          </b:if>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='AdSense,Blog'>
        <b:includable id='defaultAdUnit'>
          <!-- Clear out style (need non-empty string) -->
          <b:with value='&quot;/* Done in css. */&quot;' var='style'>
            <b:include name='super.defaultAdUnit'/>
          </b:with>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='Blog,FeaturedPost,PopularPosts'>
        <b:includable id='sharingButtonContent'>
          <b:message name='messages.share'/>
        </b:includable>
        <b:includable id='postLabels'>
          <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' name='super.postLabels'/>
        </b:includable>
        <b:includable id='headerByline'>
          <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
            <b:include name='super.headerByline'/>
          <b:else/>
            <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;] }' name='headerBylineOverride'/>
          </b:if>
        </b:includable>
        <b:includable id='footerBylines'>
          <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
            <b:include name='super.footerBylines'/>
          <b:else/>
            <b:include data='{ items: [[&quot;share&quot;, &quot;comments&quot;]] }' name='footerBylinesOverride'/>
          </b:if>
        </b:includable>
        <b:includable id='emailPostIcon'>
          <!-- Replace icon with text -->
          <span class='byline'>
            <a class='flat-button' expr:href='data:post.emailPostUrl'><data:messages.emailPost/></a>
          </span>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='Blog'>
        <b:includable id='main'>
          <b:if cond='not data:posts.any'>
            <div class='no-posts'>
              <b:eval expr='data:view.isSearch ? data:messages.noResultsFound : data:messages.theresNothingHere'/>
            </div>
          </b:if>
          <!-- Display title on homepage -->
          <b:if cond='data:posts.any and data:view.isHomepage'>
            <h3 class='title'><data:messages.latestPosts/></h3>
          </b:if>
          <!-- Filter out the featured post, but only on the homepage. -->
          <b:with value='(data:widgets.FeaturedPost filter w =&gt; w.sectionId == &quot;page_body&quot;) map (w =&gt; w.postId)' var='featuredPostIds'>
            <b:with value='data:view.isHomepage ? data:posts filter (post =&gt; post.id not in data:featuredPostIds) : data:posts' var='posts'>
              <b:include name='super.main'/>
            </b:with>
          </b:with>
        </b:includable>
        <b:includable id='commentFormIframeSrc' var='post'>
          <b:with value='data:template.isAlternateRendering ? (&quot;&amp;skinvariant=&quot; + data:template.variant) : &quot;&quot;' var='variantParam'>
            <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=soho&quot; + data:variantParam' id='comment-editor-src'/>
          </b:with>
        </b:includable>
        <b:includable id='commentForm' var='post'>
          <b:with value='&quot;90px&quot;' var='cmtIframeInitialHeight'>
            <b:include data='post' name='super.commentForm'/>
          </b:with>
        </b:includable>
        <b:includable id='threadedCommentForm' var='post'>
          <b:with value='&quot;90px&quot;' var='cmtIframeInitialHeight'>
            <b:include data='post' name='super.threadedCommentForm'/>
          </b:with>
        </b:includable>
        <b:includable id='postCommentsAndAd' var='post'>
          <!-- Always render inline ad inside container -->
          <div class='post-outer-container'>
            <div class='post-outer'>
              <b:include data='post' name='post'/>
            </div>
            <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
            <b:include cond='data:post.includeAd and data:post.adNumber lt (data:view.isHomepage ? 2 : 3)' data='post' name='inlineAd'/>
          </div>
        </b:includable>
        <b:includable id='post' var='post'>
          <b:if cond='data:view.isSingleItem'>
            <div class='post-sidebar'>
              <b:if cond='data:widgets.Blog.first.allBylineItems.share and data:post.shareUrl'>
                <div class='post-sidebar-item post-share-buttons'>
                  <b:with value='data:widget.instanceId + &quot;-&quot; + (data:regionName ?: &quot;byline&quot;) + &quot;-&quot; + data:post.id' var='sharingId'>
                    <b:include data='{                                                              sharingId: data:sharingId,                                                              originalUrl: data:post.url,                                                              shareUrl: data:post.shareUrl,                                                              platforms: data:blog.sharing.platforms,                                                            }' name='sharingButtons'/>
                  </b:with>
                </div>
              </b:if>
              <b:if cond='data:widgets.Blog.first.allBylineItems.labels and data:post.labels'>
                <div class='post-sidebar-item post-sidebar-labels'>
                  <div><data:messages.labels/></div>
                  <ul>
                    <b:loop index='i' values='data:post.labels' var='label'>
                      <li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
                    </b:loop>
                  </ul>
                </div>
              </b:if>
            </div>
          </b:if>
          <div class='post'>
            <b:class cond='data:view.isMultipleItems and data:post.featuredImage' name='has-featured-image'/>
            <b:class cond='data:view.isMultipleItems and not data:post.featuredImage' name='no-featured-image'/>
            <b:include data='post' name='postMeta'/>
            <b:if cond='data:view.isSingleItem'>
              <b:include name='headerByline'/>
              <b:include data='post' name='postTitle'/>
              <div class='post-body-container'>
                <b:include data='post' name='postBody'/>
              </div>
            <b:else/>
              <b:if cond='data:post.featuredImage'>
                <div class='snippet-thumbnail'>
                  <a b:whitespace='remove' expr:href='data:post.url'>
                    <b:comment>Max width is 576, so max size @ 2x is 1152.</b:comment>
                    <b:include data='{                                        image: data:post.featuredImage,                                        imageSizes: [320,490,576,1152],                                        sourceSizes: &quot;(max-width: 576px) 100vw, (max-width: 1024px) 576px, 490px&quot;                                      }' name='responsiveImage'/>
                  </a>
                  <b:include name='headerByline'/>
                </div>
              <b:else/>
                <b:include name='headerByline'/>
              </b:if>
              <b:include data='post' name='postTitle'/>
            </b:if>
            <b:include data='post' name='postFooter'/>
          </div>
        </b:includable>
        <b:includable id='feedLinks'>
          <!-- Don't render -->
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='BlogArchive'>
        <b:includable id='main' var='this'>
          <details class='collapsible extendable'>
            <b:attr cond='data:view.isArchive' name='open' value='open'/>
            <b:with value='true' var='renderAsDetails'>
            <b:with value='data:messages.archive' var='defaultTitle'>
              <b:include name='super.main'/>
            </b:with>
            </b:with>
          </details>
        </b:includable>
        <b:includable id='flat'>
          <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.flat&quot;                             }' name='extendableItems'/>
        </b:includable>
        <b:includable id='hierarchy'>
          <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               limit: 1,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.hierarchy&quot;                             }' name='extendableItems'/>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='FeaturedPost'>
        <b:includable id='main'>
          <b:with value='data:messages.featured' var='defaultTitle'>
            <b:include name='super.main'/>
          </b:with>
        </b:includable>
        <b:includable id='snippetedPostContent'>
          <b:with value='data:postDisplay.showFeaturedImage and data:post.featuredImage' var='hasImage'>
            <div class='post-content'>
              <b:class cond='data:hasImage' name='has-featured-image'/>
              <b:class cond='not data:hasImage' name='no-featured-image'/>
              <!-- Change the order and add a snippet container -->
              <b:include cond='data:hasImage' data='post' name='snippetedPostThumbnail'/>
              <div class='post-text-container'>
                <b:include name='headerByline'/>
                <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
                <b:with value='&quot;featured-post&quot;' var='snippetPrefix'>
                  <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
                </b:with>
                <div class='post-footer'>
                  <b:include name='footerBylines'/>
                  <!-- TODO(sarnesjo): Use the postJumpLink call (in case it's been customized). -->
                  <a class='jump-link flat-button' expr:href='data:post.url'><data:messages.readMore/></a>
                </div>
              </div>
            </div>
          </b:with>
        </b:includable>
        <b:includable id='snippetedPostByline' var='post'>
          <b:include name='headerByline'/>
        </b:includable>
        <b:includable id='snippetedPostThumbnail'>
          <b:include data='{image: data:featuredImage, maxSize: 954, selector: &quot;.hero-thumb&quot;}' name='responsiveImageStyle'/>
          <a class='thumb-link' expr:href='data:post.url'><div class='thumb hero-thumb'/></a>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='Header'>
        <b:includable id='image'>
          <b:include name='super.image'/>
          <!-- If we are replacing the title, force it to render anyway, and it'll be hidden in CSS. -->
          <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
        </b:includable>
        <b:includable id='title'>
          <div>
            <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
            <b:include name='super.title'/>
          </div>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='Label'>
        <b:includable id='main' var='this'>
          <details class='collapsible extendable'>
            <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
            <b:with value='true' var='renderAsDetails'>
            <b:with value='data:messages.labels' var='defaultTitle'>
              <b:include name='super.main'/>
            </b:with>
            </b:with>
          </details>
        </b:includable>
        <b:includable id='list'>
          <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.list&quot;                             }' name='extendableItems'/>
        </b:includable>
        <b:includable id='cloud'>
          <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.cloud&quot;                             }' name='extendableItems'/>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='PageList'>
        <b:includable id='content'>
          <div class='widget-content'>
            <b:if cond='data:widget.sectionId == &quot;page_list_top&quot;'>
              <b:include name='overflowablePageList'/>
            <b:else/>
              <b:include name='pageList'/>
            </b:if>
          </div>
        </b:includable>
        <b:includable id='overflowButton'>
          <a><data:messages.moreEllipsis/></a>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='PopularPosts'>
        <b:includable id='main'>
          <!-- Default the title to 'Popular posts'. -->
          <b:with value='data:messages.popularPosts' var='defaultTitle'>
            <b:include name='super.main'/>
          </b:with>
        </b:includable>
        <b:includable id='snippetedPostContent'>
          <div class='post'>
            <b:class cond='data:post.featuredImage' name='has-featured-image'/>
            <b:class cond='not data:post.featuredImage' name='no-featured-image'/>
            <b:if cond='data:post.featuredImage'>
              <div class='snippet-thumbnail'>
                <a b:whitespace='remove' expr:href='data:post.url'>
                  <b:include data='{                                      image: data:post.featuredImage,                                      imageSizes: [330,660,1320],                                      sourceSizes: &quot;(max-width: 660px) 100vw, 660px&quot;                                    }' name='responsiveImage'/>
                </a>
                <b:include name='headerByline'/>
              </div>
            <b:else/>
              <b:include name='headerByline'/>
            </b:if>
            <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
            <div class='post-footer'>
              <b:include name='footerBylines'/>
            </div>
          </div>
        </b:includable>
      </b:defaultmarkup>
      <b:defaultmarkup type='Profile'>
        <b:includable id='main' var='this'>
          <!-- Remove widget title -->
          <b:include name='content'/>
        </b:includable>
        <b:includable id='teamProfileLink'>
          <!-- Remove background image, add "Visit profile" message -->
          <a class='profile-link g-profile' expr:href='data:userUrl'>
            <b:include name='profileImage'/>
            <div class='profile-name-wrapper'>
              <div class='profile-name'><data:display-name/></div>
              <div class='visit-profile'><data:messages.visitProfile/></div>
            </div>
          </a>
        </b:includable>
        <b:includable id='userProfileLink'>
          <!-- Remove background image -->
          <a class='profile-link g-profile' expr:href='data:userUrl' rel='author'>
            <data:displayname/>
          </a>
        </b:includable>
        <b:includable id='viewProfileLink'>
          <!-- Change message to "Visit profile" -->
          <a class='profile-link' expr:href='data:userUrl' rel='author'>
            <data:messages.visitProfile/>
          </a>
        </b:includable>
        <b:includable id='defaultProfileImage'>
          <div class='default-avatar-wrapper'>
            <b:include data='{ iconClass: &quot;avatar-icon&quot; }' name='defaultAvatarIcon'/>
          </div>
        </b:includable>
      </b:defaultmarkup>
    </b:defaultmarkups>
Xong rồi bạn lưu lại template là được.
Lưu ý các tiện ịch bạn đã tạo từ trước thì bạn có thể copy sang tiện ích mới hoặc vào chỉnh sửa chủ đề và thay toàn bộ đoạn version='1' bằng đoạn sau version='2' visible='true'.
Và thay thế đoạn
<b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h4 class='title'><data:title/></h4> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable>
Bằng đoạn sau
<b:includable id='main'>
<b:include name='widget-title'/>
<div class='widget-content'>
<data:content/>
 </div>
</b:includable>
Xong rồi lưu lại và vào bố cục để xem thành quả nhé.
Lưu ý với các tiện ích Blog1 và PopularPost bạn không nên thay vì chúng có cấu trúc khác nhau nên khi thay sẽ bị vỡ layout.
Chúc các bạn thành công!

Bài viết được chia sẻ từ một số blog khác! 
Đọc tiếp Nâng cấp Layout, Default Widget và b:skin lên bản mới tháng 4 16, 2018

Phú Cường Blogger@phucuongblogger
tháng 4 07, 2018

Bài viết hôm nay mình sẽ hướng dẫn các bạn tạo một menu tựa giống menu Facebook ở bottom hoàn toàn bằng css cực nhẹ và đẹp nhé!


Hình ảnh có liên quan

CÁCH THỰC HIỆN

Thêm toàn bộ CSS này vào trước thẻ ]]></b:skin> trong mẫu
.mobile-theme-bsw{float:right;vertical-align:inherit;margin:5px!important;background:#eee;padding:5px 10px;border-radius:100px;color:#888}#log-out-bacsiwindows-btn{z-index:-1;position:absolute;bottom:70px;background:#fff;width:100%;text-align:center;padding:10px;box-sizing:border-box;font-size:15px;color:#d25252!important;font-weight:500;border:1px solid #ddd;border-left:0;border-right:0}.fbuser_info_BSW{font-weight:500}.right_btn_{position:absolute;right:0;font-size:24px;color:#fff!important;padding:10px}.left_btn_{position:absolute;left:0;font-size:24px;color:#fff!important;padding:10px 18px}.bsw_bsw_wrapper{margin:6px auto 15px}#top_wrapmenu_bacsiwindows_v13{height:50px;background:#4267b2;position:relative}#top_wrapmenu_bacsiwindows_v13_s{width:75%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}#search_bacsiwindows_v13{}.search_bacsiwindows_v13{background:rgba(0,0,0,.2);width:100%;text-align:center;height:27px;line-height:27px;font-size:14px;color:#555}.search_bacsiwindows_v13::placeholder{color:#ccc!important}#bttop,.go_group_BSW a,.comment_t,#bsw_loading_,.post_comment,.ghim,.pinned_post{display:none!important}.bacsiwindows_slidemenu_v3{visibility:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;background:#eee;box-shadow:0 0 30px rgba(0,0,0,.1);display:block;font-size:16px;font-weight:400;height:100%;left:0;position:fixed;overflow:auto;transform:translate(10%,0);transition:all .35s ease-in-out;width:100%;z-index:20;opacity:0;top:0}.bacsiwindows_slidemenu_v3.show{visibility:visible;transform:none;opacity:1}.info_bacsiwindows_{padding:0;margin:0 0 30px;height:50px;position:relative;border-bottom:1px solid #eee;background:white}.info_bacsiwindows_ img{border-radius:50%;height:auto;width:35px;position:absolute;top:50%;left:0;transform:translate(65%,-50%)}.profile_text_BSW{z-index:1;position:absolute;bottom:0;padding:10px;text-align:center;width:100%;box-sizing:border-box}.profile_text_BSW a{display:block;line-height:1.5;font-size:16px}.bacsiwindows_slidemenu-onmobile_-menu-v13{list-style:none;margin:0;padding:0;border:1px solid #ddd;border-left:0;border-right:0}.bacsiwindows_slidemenu-onmobile_-menu-v13 li{display:block;position:relative;background:white}.bacsiwindows_slidemenu-onmobile_-menu-v13 a{font:400 14px Roboto;background:transparent;color:#444;display:block;line-height:24px;padding:10px 20px;text-decoration:none}.bacsiwindows_slidemenu-onmobile_-menu-v13 a:after{content:'';background:#f5f5f5;height:1px;width:84%;position:absolute;bottom:0;right:0}.bacsiwindows_slidemenu-onmobile_-menu-v13 a i{background:#444;width:16px;height:16px;line-height:16px;text-align:center;color:#fff;border-radius:100px;padding:7px}.bacsiwindows_slidemenu-onmobile_-menu-v13 a:hover{background-color:#eee}.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active{color:#333333}.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active .bsw_dropdown_-icon{color:#333333}.nav-item_BSW{padding:0}.nav-item_BSW i{margin:0 10px 0 0}.nav-item_BSW2{padding:0 0 0 15px}.bsw_dropdown_{display:none;list-style:none;margin:0;padding:0}.bsw_dropdown_ a{color:#666;padding-left:62px}.bsw_dropdown_ a:hover{background:#ddd}.bsw_dropdown_-icon{color:#757575;height:16px;right:16px;position:absolute;text-align:center;top:16px;width:16px;transition:.5s;opacity:0;transform:rotate(180deg)}.bsw_dropdown_-icon.show{opacity:1;transform:none}.bacsiwindows_slidemenu_v3::-webkit-scrollbar-track,.bacsiwindows_slidemenu_v3::-webkit-scrollbar-thumb,.bacsiwindows_slidemenu_v3::-webkit-scrollbar{width:0}#responsive_menu_v3_bacsiwindows{z-index:21;position:fixed;bottom:0;left:0;width:100%;background:#fff;text-align:center;box-shadow:0 0 30px rgba(0,0,0,.2)}.responsive_menu_v3_bacsiwindows a{display:inline-block;width:15.5%;text-align:center;margin:0;padding:15px 0;box-sizing:border-box;color:#888;font-size:16px}.responsive_menu_v3_bacsiwindows a:hover{color:#4267b2}.responsive_menu_v3_bacsiwindows{display:inline;position:relative}div#overlay{display:none;z-index:3;background:#fff;position:fixed;width:100%;height:100%;left:0;top:0;text-align:center}div#jQsearchBSWv3{display:none;position:fixed;z-index:4;margin:auto;width:100%;background:#FFF;color:#000}.form-search .jsSearchBSWv3{background:#eee;border:0;padding:10px 20px;color:#444;font:400 15px Roboto;position:fixed;left:15px;top:15px;box-sizing:border-box;border-radius:100px;margin:0;width:93%}.form-search input:focus{outline:0}#close{position:fixed;right:8px;top:12px;border-radius:50%;padding:15px 20px;cursor:pointer;color:#999}.trending-search-bsw .content{position:fixed;top:60px;padding:10px;background:#fff;box-sizing:border-box;width:100%;text-align:left;height:80vh;overflow:auto}.trending-search-bsw .content a{display:block;font:400 15px Roboto;color:#888;margin:0 0 10px;padding:0 10px 10px}.number-noty{font-size:10px;position:absolute;background:#da5858;padding:2px 4px;border-radius:4px;top:-5px;color:#fff}#top_wrapmenu_bacsiwindows_v13,#top-menu-bacsiwindows,#top-wrap-bsw-menu{display:none}#res_menu_bsw{background:#fff;border-bottom:1px solid #ccc;position:relative}.logo_text{padding:10px}.logo_text img{width:40px;height:40px;border-radius:50%;vertical-align:middle}.logo_text a{vertical-align:middle;font:500 18px Roboto;text-transform:uppercase;color:#555;margin:0 0 0 10px}
Thêm toàn bộ code này vào trước thẻ đóng </body>




Chỉ đơn giản vậy thôi bạn đã có ngay 1 menu cực ngàu đúng không nào!.
Chúc bạn thành công.
Tạo menu tựa giống Facebook ở bottom responsive cho blogspot

Nội quy chung Phú Cường Blogger

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Phú Cường Blogger - Life Is Share
- Thành lập: 22/09/2017
- Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Team Solomid...
- Tác giả blog: Nguyễn Phú Cường hiện đang là sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!