Recent Trend

Home » Digital Life
Hiển thị các bài đăng có nhãn Digital Life. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Digital Life. Hiển thị tất cả bài đăng

Thiết kế Blogger template hoàn hảo

vào lúc 0

Thiết kế Blogger template hoàn hảo


CÁCH TẠO BLOGGER ĐÁP ỨNG TRÊN THIẾT BỊ DI ĐỘNG

Bạn có thể tạo menu điều hướng đáp ứng thanh trên cùng cho chủ đề Blogger như bạn đã thực hiện trên mẫu HTML thô. Sử dụng menu Điều hướng tĩnh trong Blogger là cách tốt nhất để tránh nhiều vấn đề. Mặc dù bạn có thể sử dụng tiện ích 'Trang', 'Danh sách liên kết' để chèn liên kết động vào menu của mình, nhưng sẽ rất khó để trình đơn thả xuống.

Vì vậy, bạn không cần phải tạo dữ liệu động như bạn đã làm và sẽ làm cho bố cục của người khác trên Blogger. Nếu bạn sử dụng Bootstrap Framework, thì bạn có thể sử dụng navebar từ đây Hoặc bạn có thể kiểm tra bài viết hành động về menu phản hồi từ w3schools .

Đặt mã vào chủ đề XML của bạn, nơi bạn muốn hiển thị thanh menu điều hướng. Sau khi tạo menu đáp ứng di động, chỉ cần dán URL nhắm mục tiêu vào thẻ neo. Thí dụ:

<ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
          </ul>

 Nhưng bạn có thể động URL trang chủ thành <li></li>thẻ như<li><a expr:href='data:blog.homepageUrl >Homepage</a></li>
TẠO BLOGGER ĐỘNG
Vì cấu trúc cơ bản của Chủ đề Blogger là:
1. Tiêu đề
2. Blog
3. Thanh bên
4. Chân trang,

chúng ta nên tạo động này để chúng ta không cần mã lại.

1. Tạo tiêu đề động:

Đặt mã sau vào div tiêu đề.

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
          <b:widget id='Header1' locked='true' title='' type='Header'/>
          </b:section>

2. Tạo bài đăng trên blog động:

Đặt đoạn mã sau vào bài div.

<b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'/>
          </b:section>

3. Tạo Sidebar động:

Đặt mã sau vào div sidebar.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
          </b:section>

4. Tạo một Footer động:

Đặt mã sau vào div footer.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
          </b:section>

SỬ DỤNG DỮ LIỆU MẶC ĐỊNH ĐỘNG TRONG BLOGGER
Blogger cung cấp một số thẻ dữ liệu mặc định mà chúng tôi có thể gọi dữ liệu cụ thể để hiển thị. Ví dụ: Nếu chúng tôi muốn tên tác giả của bài đăng được xuất bản trong mỗi bài đăng, thì chúng tôi có thể sử dụng <data:post.author/>.
Sử dụng này sau các thẻ sau.
<div class='post-footer-line post-footer-line-1'>
Tương tự, có nhiều thẻ dữ liệu Blogger để hiển thị dữ liệu cụ thể trong Blog được xuất bản. Thẻ dữ liệu Blogger này sẽ chỉ hoạt động trong tiện ích Blog.
[sly fa-apple] THẺ DỮ LIỆU BLOGGER
Bảng thẻ Blogger
Tên thẻ Mô tả
 <data:post.dateHeader/>  Ngày của bài viết là tiêu đề.
 <data:title/>  Tiêu đề của blog.
 <data:description/>  Mô tả của blog.
 <data:olderPageTitle/>  Tiêu đề của trang cũ của bài viết.
 <data:newerPageTitle/>  Tiêu đề của trang mới hơn của bài viết.
 <data:commentLabel/>  Số lượng bình luận.
 <data:authorLabel/>  Nó sẽ hiển thị "được đăng bởi".
 <data:post.title />  Tiêu đề của bài viết.
 <data:post.body/>  Nội dung của bài viết.
 <data:post.author/>  Tên tác giả của bài viết.
 <data:post.url/>  Liên kết url của bài đăng.
 <data:post.timestamp/>  Ngày và thời gian của bài viết.
 <data:label.name/>  Nhãn của bài viết.

Bạn có thể nhận thêm Thẻ dữ liệu Blogger từ Hỗ trợ Blogger .

THẺ NEO ĐỘNG TRONG BLOGGER LÀ GÌ?
Dynamic Anchor In Blogger được chuyển đổi thành văn bản neo chung với URL. Ví dụ: Nếu URL của trang chủ là http://www.compromath.comthì thẻ sau sẽ được chuyển đổi <a expr:href='data:blog.homepageUrl >Homepage</a>thành
<a href="http://www.compromath.com">Homepage</a>
Một số thẻ neo động cho Chủ đề Blogger

URL NEO ĐỘNG

Bảng dữ liệu
Biểu thức Giải thích
 <a expr:href='data:blog.homepageUrl >Homepage</a>  Một văn bản có URL của trang chủ
 <a expr:href='data:post.url'>Read More</a>  Đọc thêm văn bản với URL của bài
 <a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a> Tên nhãn với URL của nhãn
 <a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>  Văn bản bài đăng mới hơn với URL bài đăng mới hơn
 <a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a>  Bài viết cũ hơn với URL bài cũ hơn
 <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>  Tên tác giả có URL
 <a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>  Bình luận Văn bản để bình luận với URL

HOẠT ĐỘNG NĂNG ĐỘNG HƠN
Hiển thị / Ẩn, Thiết kế tùy chỉnh, Trang đích tùy thuộc vào loại trang và URL
Nếu chúng tôi muốn ẩn thanh bên trong Trang chủ nhưng muốn hiển thị trong bài đăng, trang chúng tôi đã xuất bản hoặc nếu chúng tôi muốn hiển thị thiết kế cơ thể riêng biệt và mới khi URL của blog là http:www.compromath.com/p/contact.html, sau đó nó có quyền truy cập để làm điều đó với việc sử dụng các thẻ có điều kiện. Sử dụng các thẻ có điều kiện, chúng tôi có thể sử dụng HTML, CSS, JavaScript bổ sung theo ý muốn và điều này làm cho Blogger năng động hơn.

TẠO TRANG ĐÍCH TRONG BLOGGER
Bạn có thể đặt mã trước </head>thẻ hoặc sau <body>thẻ.
<b:if cond='data:blog.pageType == "index"'>
          <style>
          .sidebar{display:none;}
          .post-wrapper{width:100%}
          </style>
          </b:if>
          <b:if cond='data:blog.pageType == "item"'>
          <b:if cond='data:blog.pageType == "static"'>
          <style>
          .sidebar{display:block;}
          </style>
          </b:if>
          </b:if>
Tìm hiểu thêm các thẻ điều kiện năng động cho Blogger. Bằng các thẻ có điều kiện này, bạn có thể nhắm mục tiêu URL cụ thể, Trang, v.v ...

#Tạo Thẻ tiêu đề động
Bây giờ hãy đi để tạo thẻ tiêu đề Blog của bạn. Nó là tổ hợp của Thẻ dữ liệu Blogger và Thẻ có điều kiện.

Thay thế <title></title>thẻ của bạn với các mã sau đây.
<b:if cond='data:blog.pageType == "index"'>
          <title>Blogger, Code and Ubuntu Platform - <data:blog.pageTitle/></title>
          <b:else/>
          <b:if cond='data:blog.pageType != "error_page"'>
          <title><data:blog.pageName/> - <data:blog.title/></title>
          </b:if></b:if>
          <b:if cond='data:blog.pageType == "error_page"'>
          <title>Page Not Found - <data:blog.title/></title>
          </b:if>
Thay thế Blogger, Code và Ubuntu Platform bằng tên tiêu đề bạn muốn cho blog của bạn.

 #Custom Design Blogger Blogger với CSS

Chúng tôi đã hoàn thành 80% Phát triển chủ đề Blogger. 20% còn lại là về thiết kế tùy chỉnh với CSS.
Trước khi chỉnh sửa thiết kế, bạn nên tìm hiểu cách chỉnh sửa mẫu Blogger .

Tìm tất cả các lớp & id của div, phần, điều hướng vv là rất khó khăn, nhàm chán, lãng phí thời gian bằng tay. Nhưng tôi sẽ cho bạn biết các thủ thuật để thu thập tất cả các lớp và id với CSS mặc định trong vòng vài giây.

1. Sao chép tất cả mã CSS miễn phí cho Blogger từ liên kết .

2. Dán vào để xác thực hoặc định dạng.

3. Sau khi định dạng, sao chép tất cả CSS và dán vào bất kỳ trình soạn thảo HTML / CSS nào.

4. Sửa đổi lớp CSS và id nếu có định dạng xấu.

5. Dán vào Chủ đề Blogger của bạn trong vòng <b:skin> [[ /******CSS ******/ ]]></b:skin>.
6. Lưu chủ đề của bạn.
7. Tiếp theo tùy chỉnh CSS của bạn với các công cụ kiểm tra từ trình duyệt.

[sly fa fa-lightbulb-o] Mẹo cho Bootstrap: Bạn có thể chèn lớp CSS vào thành phần HTML cụ thể. Giả sử nếu bạn muốn chèn nhãn Bootstrap vào <data:post.author/>, sau đó bọc các phần tử này bằng span và chèn lớp nhãn như bên dưới:
<span class='label label-success'><data:post.author/></span>
Mẹo cho Font-Awesome: Bạn có thể chèn biểu tượng Font Awesome như bên dưới.
<span class='label label-success'><i class='fa fa-user'/><data:post.author/></span>

TÙY CHỈNH CHỦ ĐỀ BLOGGER KHÁC

LÀM CÁCH NÀO ĐỂ SẮP XẾP TÁC GIẢ, NHÃN, NGÀY LÊN VÀ XUỐNG TỪ THÂN BÀI?
1. Trước tiên, hãy truy cập Bảng điều khiển Blogger → Bố cục → Bài đăng trên blog → Chỉnh sửa và bạn sẽ thấy một cửa sổ bật lên.
2. Từ ' Tùy chọn trang bài ' kiểm tra nút bạn muốn hiển thị và bỏ chọn tùy chọn bạn muốn ẩn.
3. Sau khi cuộn xuống, bạn sẽ nhận được ' Sắp xếp các mục '. Kéo mục đã chọn của bạn lên và xuống để đặt.
4. Lưu lại.

Nếu nó không hoạt động thì hãy chuyển mã liên quan từ Blogger Editor bằng tay.

CÁCH THÊM BƯỚC NHẢY TRONG BÀI VIẾT TRÊN BLOGGER
Xem bài viết này về cách thêm nút nhảy break / nút đọc thêm trên Blogger .

CÁCH TÙY CHỈNH TIÊU ĐỀ NGÀY BLOGGER
Thêm CSS sau vào Chủ đề Blogger theo tùy chỉnh của bạn.
.date-header{}

CÁCH HIỂN THỊ / ẨN NHÃN TRÊN BLOGGER
Thêm CSS sau vào Chủ đề Blogger
.post-labels{display:none;visibility:hidden}để ẩn và
.post-labels{display:block;}hiển thị.

CÁCH XÓA NGÀY VÀ GIỜ KHỎI BÀI VIẾT TRÊN BLOGGER
Đặt CSS vào chủ đề Blogger của bạn.
.post-timestamp{display:none;visibility:hidden}

CÁCH THÊM NGÀY GIỜ TRONG BLOGGER
Chuyển đến Bảng điều khiển Blogger → Bố cục → Bài đăng trên blog → Chỉnh sửa → Tùy chọn trang bài s
Kiểm tra tùy chọn ngày bạn muốn hiển thị.

Hoặc

Sử dụng mã sau đây trong chủ đề Blogger của bạn sau<div class='post-footer-line post-footer-line-1'>
<span class='post-timestamp'>
           <b:if cond='data:top.showTimestamp'>
             <data:top.timestampLabel/>
             <b:if cond='data:post.url'>
               <meta expr:content='data:post.url.canonical' itemprop='url'/>
               <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
             </b:if>
           </b:if>
          </span>

CÁCH THAY ĐỔI TÊN TÁC GIẢ TRONG BLOGGER
Tìm kiếm <data:post.author/>từ trình soạn thảo HTML Blogger của bạn và thay thế bằng tên bạn muốn bằng thẻ p. Thí dụ:<p>Elliyas</p>

CÁCH XÓA TÊN TÁC GIẢ KHỎI CÁC BÀI ĐĂNG TRÊN BLOGGER
Đặt CSS vào chủ đề Blogger của bạn.
.post-author vcard {display:none;visibility:hidden}

TẠO FULLWIDTH CHO TRANG
Chỉ cần làm theo các bước đơn giản dưới đây để ẩn thanh bên (sidebar) trong trang blogger hoặc bài đăng nhất định của bạn:

1. Truy cập Blogger.com >> Thêm trang / bài đăng mới
2. Bây giờ chọn Chỉnh sửa tab HTML của Mẫu Blogger.
3. Dán CSS sau:

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:99%!important;} .post { width:99%!important; }
</style>

4. Thay thế chiều rộng: 99% theo nhu cầu của bạn, thậm chí bạn có thể sử dụng pixel thay vì tỷ lệ phần trăm tức là 960px.
Bổ sung: Nếu bạn cũng muốn ẩn Tiêu đề khỏi một trang nhất định, thì chỉ cần dán mã sau đây trước </ style> trong mã ở trên. (nó sẽ không ảnh hưởng đến việc thu thập thông tin vì các bot có thể dễ dàng nhìn thấy những thứ này)

.post-title, .post-nhãn, post-icon, post-Author {display: none!important;}

5. Bây giờ xuất bản nó và sau đó truy cập trang web của bạn để kiểm tra các trang blog của bạn với cái nhìn hoàn hảo.
Xem hướng dẫn cụ thể
0 nhận xét

Introducing Blogger shortcode Plugin

vào lúc 0

Introducing Blogger shortcode Plugin


Installation Steps
Follow these steps to install the Shortcode Plugin on your blogger blog.
1 Go To Blogger > Template > Backup your template 

2 Click Edit HTML 

3 Search </body> 

4 Paste the following dynamically updated JS file just above it
<!-- Blogger Shortcode Plugin Dynamic JS File -->
<script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>
5 Next Search For <head>
6 Paste the following CSS files just below it
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Note that in the above code I have included latest versions of jQuery and FontAwesome libraries. I suggest that you use these versions instead of any old versions you may already be using.
  
7 Save your template and you are all done!
New functions are dynamically inserted inside the Shortcode JS file and you need to install it only once. I will keep updating this page to introduce any update made to the script and new shortcodes created will be appended to the Table List on this page.
Shortcode Syntax
Shortcodes have a name and attributes. The attributes are options that help you configure an object. Shortcodes are symbolized by Square brackets. The braces are opened and closed just like HTML but with a much simpler format as shown below:
Suppose you need to embed a Dailymotion video inside your blog posts, sidebar or blog comments then you can do it in two ways.
[dailymotion src="x2lhjki"][/dailymotion]
or simply
[dailymotion src="x2lhjki" /]

Now if you wish to change the color of the player button, hide player info and edit the player dimension then you can insert attributes as shown below
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0"][/dailymotion]
or simply
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0" /]

Note that the above is just an example, full details on how to use a dailymotion shortcode will be shared in its own tutorial
Syntax Errors
Avoid making these mistakes when typing shortcode names and attributes:
Don't use camelCase or UPPER-CASE for attribute names or Shortcode names. Use only lowercase characters
Don't add spaces between Shortcode Names and the Square Braces
Shortcode macros may use single (') or double quotes (") for attribute values, or omit them entirely if the attribute value does not contain spaces.
[table col='123' row=456]
is equivalent to
[table col="123" row="456"]
A space is required between the shortcode name and the shortcode attributes. When more than one attribute is used, each attribute must be separated by at least one space.
The shortcode parser does not accept square brackets within attributes.
[tag attribute="[Some value]"]
How Does This Shortcode Plugin Works?
Shortcodes are written by providing a handler function "mbt(html)" . Shortcode handlers are broadly similar to WordPress filters: they accept parameters (attributes) and return a output. We used a jQuery function to parse through Square bracket content and attributes and then replace the Square bracket DOM with the HTML version and ignore or escape those Square braces which are enclosed across a name which is not registered through the global variable "var bhf". The Parser function recognizes registered shorctodes through the global variables only. Locations where shortcodes will work include Widgets, Blog Posts, Pages and Blog comments. Shortcodes placed elsewhere will be escaped.

0 nhận xét

Cấu trúc liên kết (đường dẫn) của Blogger

vào lúc 0

Cấu trúc liên kết (đường dẫn) của Blogger

Link structure of Blogger / Blogspot is very simple but this article will be useful for developers or in case you want to get custom link for your menu. You can follow below list for more detail (red strings are dynamic that depend on certain case).
  • Original Label pages: yourblogdomain/search/label/labelname
    • Show Posts which are in Both Labels: yourblogdomain/search/label/labelname1+labelname2
    • Show Posts which are in One of Labels: yourblogdomain/search/?q=label:labelname1|label:labelname2
  • Search pages: yourblogdomain/search?q=searchquery
  • Static pages: yourblogdomain/p/url-of-page.html
  • Items / Posts: yourblogdomain/yyyy/mm/url-of-post.html
  • Archive pages: 
    • Archive by year: yourblogdomain/yyyy/
    • Archive by month: yourblogdomain/yyyy/mm/
labelname1 / 2 must be get from label name of original label page. Which are escaped special characters to available for links, ex: ‘ ‘ space => %20. If you are working with JavaScript, use function encodeURIComponent to encode your Label Names

url-of-page usually the page title in lowercase and separate words by minus “-“. You can not change the url of page, so if two pages have the same title, Blogger will auto add number to the end of page url.
url-of-post usually the post title in lowercase and separate words by minus “-“. You can change this url in Permalink option (on right hand side) when you create a post.


You can add /atom.xml?redirect=false&start-index=1&max-results=500 behind url blogspot to copy all post
0 nhận xét

Tùy chỉnh bố cục cho Blogger

vào lúc 0

Tùy chỉnh bố cục cho Blogger


Bảng điều khiển Blogger tùy chỉnh giúp tổ chức và truy cập nhiều giao diện như thêm tiện ích mới, tiện ích chỉnh sửa, thiết lập bài đăng blogger, v.v ... Sau khi chuyển đổi HTML sang Blogger Theme, chúng ta cần tùy chỉnh thiết kế bố cục bảng điều khiển Blogger.
Vì vậy, nhà phát triển Blogger đam mê, hãy bắt đầu tùy chỉnh bảng điều khiển blogger của bạn bằng CSS. Tôi nghĩ bạn biết cách tạo một phần mới cho Mẫu Blogger . Như bạn đã biết, thật dễ dàng để tìm ra id của từng phần.

Nhớ lại:
Bạn không được phép tùy chỉnh phông chữ, màu sắc, hình nền. Bạn chỉ được phép cho chiều rộng, lề, nổi của bố cục phần.
Bạn nên sử dụng% cho chiều rộng. Tránh sử dụng px.

Bạn phải thêm mã CSS để tùy chỉnh bố cục bảng điều khiển Blogger nơi lưu giữ tất cả mã CSS. Sẽ tốt hơn nếu đặt mã CSS bảng điều khiển của bạn ngay sau khi <![CDATA[

bạn có thể đặt CSS như id nhưng bạn phải thêm body#layout (có khoảng trắng) trước tên id.

Ví dụ: Nếu chúng ta muốn tùy chỉnh phần chính (id name = main), thì chúng ta phải làm như dưới đây.

body#layout #main{/*CSS Code*/}

Đối với mỗi lớp học bạn phải làm điều đó. Bạn cũng có thể định nghĩa nhiều id với cùng thuộc tính CSS. Sau đó, bạn phải làm như thế nào:

body#layout #main, body#layout #sidebar, body#layout #footer{}

Bất cứ điều gì, bạn phải đặt mã sau đây để tránh danh sách được sắp xếp & danh sách không theo thứ tự. Tôi hy vọng, bạn sẽ thành công để tùy chỉnh Bố cục Bảng điều khiển Blogger của mình. Bạn có thể kiểm tra hướng dẫn sau đây để làm phong phú blog của bạn. 1. Bộ sưu tập Tùy biến Blogger .

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
0 nhận xét