Cách chỉnh sửa hiển thị ảnh ở chế độ hộp đèn cho blogger

Làm thế nào để hiển thị ảnh ở chế độ hộp đèn cho blogger - chế độ hộp đèn Lightbox

Gần đây, chúng tôi đã chỉ cho bạn làm thế nào để vô hiệu hóa hình ảnh hộp đèn , nhưng chúng tôi đã không nói về một cách để tùy chỉnh hình ảnh Lightbox trong blogger. Kể từ khi,blogger là một nền tảng linh hoạt , chúng tôi có thể ghi đè lên hộp đèn kiểu hiện có để tùy chỉnh và làm cho nó trông giống như trang web của bạn. Điều này cung cấp cho bạn đủ tự do để thay đổi phong cách của Lightbox theo nhu cầu mong muốn của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn Làm thế nào để tùy chỉnh hình ảnh Lightbox trong Blogger.

Trước khi chúng tôi bắt đầu làm việc với các hướng dẫn của chúng tôi, chúng tôi đã tập hợp hai ảnh chụp màn hình dưới đây chứng minh rằng cách Lightbox của bạn sẽ xuất hiện trước và sau khi áp dụng tuỳ biến. Nó chắc chắn sẽ trông thanh lịch và tinh tế hơn. Trước khi:

Trước khi :

Sau khi :

Điều đầu tiên bạn cần làm là đăng nhập vào Tài khoản Google của bạn và đi đến Blogger >> Template >> Edit HTM L. Bây giờ trong các mẫu mã hóa tìm kiếm cho ]]> </ b: skin> tag và chỉ ở trên đó dán miếng sau của kiểu mã hóa. (Lưu ý: Trong CSS sau đây, chúng tôi đã bổ sung thêm ý kiến để giúp bạn xác định rằng làm thế nào bạn có thể tùy chỉnh các khía cạnh khác nhau của Lightbox của bạn như màu chữ, màu nền, nút đóng và vv).

/* MBL Blogger Lightbox
———————————————– */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
border-top:1px solid #d2d2d2!important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Xin chúc mừng: Lưu mẫu bằng cách nhấn các nút màu da cam "Save Template" nằm ngay phía trên màn hình của bạn. Bây giờ bạn đã tùy chỉnh hình ảnh của bạn thành công Lightbox với kỹ thuật CSS đơn giản. Chúng tôi hy vọng hướng dẫn này có thể giúp bạn trong việc học như thế nào để tùy chỉnh một hộp ánh sáng hình ảnh trong blogger. Đừng cho chúng tôi biết nếu bạn đã sử dụng kỹ thuật này? Tại MyBloggerLab, chúng tôi có hộp đèn vô hiệu hóa vì nó cản trở trong khi một người đang đọc hướng dẫn dài. Tuy nhiên, những người có hình nền hoặc các trang web danh mục đầu tư có thể sử dụng nó tự do. Nếu bạn thích bài viết này, sau đó chia sẻ nó với bạn bè của bạn trên Facebook, Twitter và Google+.

Xem thêm…

Thêm nút sửa nhanh bài viết trong blogger

Thời gian để thời gian internet thay đổi xu hướng của nó và như vậy là bài viết Blogger cũ của bạn, nhưng bạn nhận ra nó khi mọi người ping bạn về nó qua email hoặc phương tiện truyền thông xã hội. Điều gì nếu bạn cần phải chỉnh sửa bài viết Blogger của bạn, sau đó bạn phải làm theo các bước thói quen bình thường bằng cách vào bảng điều khiển Blogger, tìm kiếm các bài viết từ tiêu đề của nó và sau đó chỉnh sửa nó. Điều này sẽ rõ ràng là một tỷ lệ phần trăm của thời gian nếu bạn có những gì 100 bài viết để chỉnh sửa, nhưng bạn có thể tiết kiệm thời gian của bạn bằng cách thêm vào một liên kết nút Edit nhanh trong mỗi trang bài. Trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào để thêm một nút Quick chỉnh sửa trong bài viết Blogger.

Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn. Bây giờ từ Blogger Bảng điều khiển, đi đến Template >> Edit HTML. Trong mẫu mã, tìm kiếm  <b:includable id='comments' var='post'>  tag và ngay dưới nó dán dòng mã sau đây. (Mã này sẽ tạo ra một nút chỉnh sửa nhanh chóng cho blogger, nếu bạn muốn, bạn có thể thay đổi các biểu tượng bằng cách thay thế các URL hình ảnh sau đâyhttp://img2.blogblog.com/img/icon18_edit_allbkg.gif với bất kỳ khác).

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

Sau khi thêm đoạn mã trên, tìm kiếm <data: post.body /> và ngay dưới nó dán đoạn mã sau đó sẽ hiển thị một nút chỉnh sửa nhanh chóng vào cuối bài viết của mình. Trong ngắn hạn, các mã đầu tiên sẽ tạo ra một nút chỉnh sửa nhanh chóng và điều thứ hai sẽ hiển thị nó trong bài viết của mình. (Hãy nhớ rằng: Có 2 đến 3 thẻ <dữ liệu post.body /> trong từng mẫu, vì vậy hãy chắc chắn để thêm mã sau mỗi thẻ).

<b:include data='post' name='postQuickEdit'/>

Lưu ý: Nếu bạn không thể tìm thấy các  <data: post.body />  thẻ, sau đó dán đoạn mã trên dưới   <div class='post-footer-line post-footer-line-1'>  vì mỗi mẫu có dòng khác nhau các mã. Xin chúc mừng: Sau khi mọi thứ được thực hiện, lưu mẫu bằng cách nhấn nút "Save Template".Tuyệt vời, bạn đã thêm thành công một nút chỉnh sửa nhanh chóng trong bài viết blogger.Bây giờ kiểm tra trang web của bạn để xem nếu tất cả mọi thứ đang làm việc theo kế hoạch.Chúng tôi hy vọng hướng dẫn này có thể giúp bạn trong việc tìm hiểu làm thế nào để thêm một nút chỉnh sửa nhanh chóng trong bài viết blogger. Hãy nhớ rằng chỉ quản trị sẽ có thể nhìn thấy nút này vì vậy bạn nên đăng nhập vào tài khoản blogger của bạn để thực hiện chỉnh sửa. Nếu bạn đang sử dụng nó, sau đó cảm thấy tự do để chia sẻ ý kiến của bạn trong các ý kiến dưới đây. Đây là một khách đăng bài của Syed Ahsan Ali của EasyEarningMethods.com .

Xem thêm…

Làm thế nào để Thêm một nút Reddit trong bài viết Blogger

Trong khi phần còn lại của công ty mạng xã hội khác đang hướng tới một thảm họa, vẫn còn là một trong những công ty đó có đạt được các hypes được Reddit. Trong quá khứ, chúng tôi đã cho các bạn làm thế nào để thêm Facebook, Twitter và Google+ nút . Gần đây, một trong những người sử dụng của chúng tôi yêu cầu chúng tôi rằng Làm thế nào để thêm một nút Reddit trong blogger để đạt được tất cả các lưu lượng truy cập tiềm năng từ nó. Người dùng có thể upvote bài viết của mình để cung cấp cho bạn một vị trí cao trên trang Reddit, mà có thể giúp bạn trong việc nhận được một số mục tiêu  giao thông đặc biệt là từ Mỹ . Trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào để thêm một nút Reddit trong bài viết của blogger.
Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản blogger của bạn. Bây giờ đi đến Template >> Edit HTML >> và tìm kiếm <data: post.body /> tag và chỉ ở trên nó dán đoạn sau của mã hóa. (Mẹo: Nhấp vào bất cứ nơi nào trong Blogger Template Editor, và Nhấn phím Ctrl + F để cho phép tìm kiếm nhanh). Nếu bạn muốn đặt nút bên dưới bài viết của mình, sau đó dán đoạn mã sau ngay dưới <data: post.body /> tag.
Thêm ở dọc trang:

<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>

Thêm dọc trang (mẫu 2)

<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script>

Thêm nút ở ngang :

<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>

Xin chúc mừng: Sau khi mọi thứ được thực hiện, lưu mẫu bằng cách nhấn " Save Template"nút. Bây giờ đi và kiểm tra trang web của bạn để xem tất cả mọi thứ đang làm việc tốt. Nếu bạn đã làm theo các bước một cách chính xác, bạn sẽ thấy nút Reddit chỉ làm việc tốt. Đó là tất cả các folks, chúng tôi khá chắc chắn rằng hướng dẫn này đã giúp bạn trong việc học làm thế nào để thêm một nút Reddit up-phiếu trong bài viết Blogger. Bạn không thể tìm thấy nút này trên rất nhiều các trang web, nhưng nếu bạn có một hình nền hoặc trang web của cơ sở ảnh sau đó, nút này nhỏ có thể giúp bạn để đá giao thông nhắm mục tiêu của bạn cũng như thu nhập. Bạn đang sử dụng nút Reddit trong trang web của bạn? Nếu có chia sẻ kinh nghiệm của bạn với chúng tôi. 

Xem thêm…

Làm thế nào để hiển thị tên Tác giả  trong bài viết ở Blogger

Làm thế nào để hiển thị tên Tác giả  trong Blogger bài viết

Tên tác giả là một trong những cách tốt nhất để đưa ra một số nhận cho nhà xuất bản bài viết.Hầu hết các nhà phát triển mẫu chất lượng như Templateism và ThemeForest luôn luôn bao gồm tên tác giả trong các chủ đề của họ theo mặc định. Gần đây, một trong những độc giả của chúng tôi đã viết một email hỏi về cách hiển thị tên tác giả trong bài viết blogger, vì vậy nó có thể giúp người sử dụng biết rằng những người thực sự đã viết bài đăng này. Trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào để hiển thị tên tác giả trong bài viết Blogger.

Blogger.com thu thập các dữ liệu của các tác giả từ hồ sơ của blogger của bạn trong trường hợp bạn không kết nối với tài khoản Google+ của bạn với Blogger. Nếu bạn không có kết nối hồ sơ của bạn thì bạn có thể thay đổi tên của tài khoản blogger của bạn . Bất cứ khi nào tác giả rằng sẽ xuất bản một bài viết, tên hiển thị này sẽ xuất hiện như là tên của tác giả. Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn, sau khi đăng nhập đi đến Template >> Edit HTML. Bây giờ trong trình soạn thảo tìm kiếm blogger template cho <data: post.body /> tag và chỉ ở trên nó dán đoạn sau của mã hóa. Nếu bạn muốn hiển thị tên tác giả ở cuối nội dung bài viết của bạn sau đó, dán mã dưới đây  <data: post.body />   tag.

<span class='author_mbl'>By: <a expr:href='data:post.authorProfileUrl'> <data:post.author/></a>  </span>

Để cung cấp cho một chút phong cách của bạn chỉ đơn giản là có thể dán các mã CSS sau đây trong phong cách trang (Mẹo: Dán nó chỉ ở trên ]]> </ b: skin> tag). Bạn có thể tùy chỉnh nó theo bản chất của mẫu của bạn, đây là cơ sở rất CSS mã hóa.

.author_mbl a { text-decoration:none;}
.author_mbl a:hover {text-decoration:underline;}
.author_mbl { float:left; color:#555;}

Xin chúc mừng: Bây giờ lưu mẫu của bạn bằng cách nhấn màu da cam "Lưu Button" hiện nay ở phía trên cùng của màn hình của bạn. Tuyệt vời, bây giờ đi và kiểm tra trang web của bạn kết quả. Nếu bạn đã theo bước của chúng tôi một cách chính xác, sau đó là tên tác giả của bài viết của bạn sẽ xuất hiện chỉ là tốt. Chúng tôi hy vọng bài viết này đã giúp bạn trong việc học như thế nào để hiển thị tên tác giả trong bài viết Blogger. Mặc dù, kỹ thuật này là cực kỳ đơn giản, nhưng ít người tìm thấy nó khó hiểu. Bài viết này cũng có thể giúp các nhà phát triển mẫungười muốn tự động hoá các tên tác giả trong các mẫu của họ. Đừng cho chúng tôi biết suy nghĩ của bạn là gì về kỹ thuật này, nếu bạn đã sử dụng nó đoạn mã này sau đó chia sẻ ý kiến về chất lượng của bạn với chúng tôi.

Xem thêm…

cách thay đổi fonts chữ trong blogspot

Cách thay đổi font chữ trong blogger

Blog của bạn có thể là một nơi thú vị để biết thông tin nhưng hầu hết các lần chúng tôi như các blogger không thể thu hút khán giả mặc dù chúng ta có hoàn cảnh khó khăn của nội dung có sẵn. Sự khác biệt là phông chữ. Một trong những điều cơ bản nhất mà bạn có thể làm để làm cho bài viết của bạn hấp dẫn là sử dụng phông chữ tuyệt vời trên blog của bạn. Vì vậy, hướng dẫn này là một tổng quan về các phông chữ tốt nhất hiện có trên phông chữ web của Google. Trong bài viết này, sẽ chỉ cho bạn 10 phông chữ Web Google tốt nhất cho hành vào năm 2014.

Phông chữ Web của Google là gì?

Phông chữ Web Google là những bộ sưu tập tốt nhất của phông chữ mã nguồn mở trên web.Những phông chữ có thể được sử dụng trên bất kỳ trang web qua internet sử dụng API. Điều này nói cách đơn giản có nghĩa là bạn không cần phải tải về các phông chữ họ sẽ chỉ được sử dụng với một dòng mã trong của tấm Cascade Phong cách (CSS). Vì vậy, bạn có thể duyệt qua hàng trăm phông chữ mã nguồn mở ở đây và sử dụng một trong những yêu thích trên blog của bạn. Hướng dẫn này là tất cả về web-phông chữ, làm thế nào để sử dụng chúng trong blogger hay các trang web khác cũng có một vài phông chữ tốt nhất ở đây.

Làm thế nào để sử dụng Google Web Fonts?

Bây giờ bạn có một ý tưởng về những gì Google web-phông chữ được chúng ta chỉ nhanh chóng tìm hiểu làm thế nào để thêm phông chữ Web Google vào blog / trang web của bạn .Quá trình này thực sự là rất đơn giản vì bạn chỉ cần sao chép dán từ các trang web như Google đã tạo ra các liên kết nguồn gốc của phông chữ. Trước tiên, bạn cần phải đi đến cácWeb-font hàng tồn kho Google , nơi bạn sẽ được chào đón bởi bộ sưu tập tuyệt vời này của phông chữ . Ở đây bạn có thể xem trước văn bản tùy chỉnh của bạn cũng chỉ cần thay đổi Wizards Grumpy vào bất cứ điều gì bạn muốn. Điều này sẽ cung cấp cho bạn một ý tưởng cơ bản về cách văn bản của bạn sẽ xuất hiện khi bạn đặt nó trong blog của bạn.

Bạn chỉ cần chọn bất kỳ phông chữ mà bạn muốn. Ví dụ tôi có chọn Oswald, vì vậy chỉ cần nhấp vào nút sử dụng nhanh chóng hiển thị dưới đây:

 Trong bước tiếp theo bạn phải sao chép các dòng mã đó là được cung cấp cho bạn (như trong ảnh chụp màn hình dưới đây). Sau khi sao chép các dòng mã, dán nó ngay phía trên </ head>trong trang web của bạn, mẫu hoặc chủ đề.

 Đó là bây giờ bạn có tích hợp font chữ yêu thích của bạn trên blog của bạn bây giờ chúng ta hãy xem làm thế nào để sử dụng nó bình thường. Điều này cũng giống như bất kỳ font khác bạn chỉ cần sử dụng các tên thích hợp cho bạn.

font-family: "Oswald"; sans serif

Bây giờ bạn đã học được cách sử dụng phông chữ web của Google trên trang web của bạn, bạn có thể thêm bất kỳ số lượng phông chữ mà bạn muốn thêm.

10 Fonts miễn phí tốt nhất Web Google cho Blog của năm 2014:

Mở Sans:

 

Mở sans là một font typface san-serif được thiết kế bởi Steve Mattson. Nó có appereance thân thiện với màn hình lạc quan accorss web, in ấn, điện thoại di động và các thiết bị khác.Trong thực tế thiết kế gần như giống hệt với Droid Sans phông chữ. Trong khi đó, Droid Sans được sử dụng chủ yếu trong các thiết bị Android và Open Sans được sử dụng trong các trang web của Google cho văn bản.

Mở Sans đi kèm với nhiều khối lượng khác bao gồm 300 ánh sáng, 400 bình thường, bán đậm 600, 700 và cuối cùng táo bạo ngoài đậm 800. Trong ngắn hạn, nó là rất hữu ích cho các nhà phát triển web của bạn và chúng tôi chắc chắn khách hàng của bạn chắc chắn sẽ thích font này .

Kết hợp đề xuất: Droid Sans, Roboto, Oswald.

Nếu không có PT

 

Sans PT còn được gọi là ПТ Санс ở Nga đã được tạo ra bởi ParaType. Nó cung cấp cho một liên lạc nhẹ của Nga cách viết tiếng Anh mà mang lại một lịch sử vào văn bản. Trong năm 2010, PT Sans được phát hành theo ngôn ngữ tiếng Anh cho các nhà phát triển web linh hoạt hơn để sử dụng nó trên các trang web của họ.

Kết hợp đề xuất: Droid Sans.

Oswald

 

Phông chữ Oswald là một phông chữ cổ điển được thực hiện bởi sans thay thế Gothic 'serif.Họ đi vào nhiều khối lượng khác mà chỉ là hoàn hảo cho blog của bạn. Tại MyBloggerLab chúng tôi cũng sử dụng phông chữ Oswald.

Kết hợp đề xuất: Lora.

Droid Serif

 

Droid Serif là trông rất giống một phông chữ được gọi là Lora nhưng nó có hương vị riêng của nó và nó đi kèm với 400 trọng lượng bình thường. Nó có một chút liên lạc viết tay nhưng một lần nữa nó cũng có mà kiểu chữ tuyệt vời mà là lý tưởng cho các blog cá nhân.

Kết hợp đề xuất: Mở Sans, Roboto.

Người máy

 Cặp đề xuất: Droid Sans, Lato, Lora.

 

Cặp đề xuất: Oswald, Lato, Ubuntu.

Josefin Sàn

 

Cặp đề xuất: Pacifico, Droid Sans, Roboto.

Giá trị

 

Cặp đề xuất: Oswald, Lora, Open Sans, Droid Sans.

Có rất nhiều nguồn khác của web-phông chữ trên tất cả các trang web, nhưng phông chữ Google thực sự là lớn nhất và là nguồn tốt nhất mà bạn có thể sử dụng. Chúng tôi hy vọng giới thiệu này của một số phông chữ rất được mong đợi sẽ giúp các nhà phát triển web, thiết kế web và chủ sở hữu blog để làm cho trang web của họ dễ đọc hơn và thân thiện. Nếu bạn thích bài viết này, sau đó chia sẻ nó với bạn bè của bạn trên Facebook, Google+ hoặc tweet nó tại Twitter.

Xem thêm…