Một số thủ thuật hay gặp trong blogspot

Trang 1

Cách tạo Breadcrumbs cho Blogspot

Cách tạo Breadcrumbs cho Blogspot - Cách tạo breadcrumbs cho Blogger - Cách tạo

breadcrumbs cho Blogspot hiện trên kết quả tìm kiếm - Cách hiển thi Breadcrumbs trên kết quả tìm kiếm

Breadcrumb là gì ?

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình

đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1

website Nếu một website có cấu trúc phức tạp mà lại không có Breadcrumb thì người

dùng dễ lâm vào tình trạng : ô mình đang ở trang nào đây, mục nào đây nhỉ?

Lợi ích của Breadcrumbs với người dùng

Giúp người dùng biết được vị trí của mình trên website

Thuận tiện khi di chuyển giữa các trang, không phải quay trở về trang chủ

Giảm tỷ lệ thoát (bound rates) -> tăng chất lượng website & tỷ lệ mua hàng

Breadcrumbs rất quan trọng đối với Google

Giúp Google đánh giá chính xác PR, PA và keyword relation của một trang web

Đánh giá được tổng thể cấu trúc của website,

Bạn sẽ có nhiều cơ hội đạt vị trí cao với những từ khóa mong muốn

Cách tạo Breadcrumbs cho Blogspot

Để tạo Breadcrumbs cho Blogspot bạn cần thực hiện qua các bước sau đây :

Bước 1: Vào Template (Mẫu) => Edit HTML (chỉnh sửa HTML) Tìm tới

dòng ]]></b:skin>(dùng tổ hợp phím Ctrl + F để tìm cho nhanh nhé)

Và thêm Code dưới đây ngay trên nó

#Breadcrumbs{color: #000;font-size:

14px;margin-bottom:15px;padding:10px;background:#FFCC00;border:2px solid #BBBBBB;

font-weight:bold; text-decoration:none; }

#Breadcrumbs a{color: #000,font-size: 14px}

#Breadcrumbs div{float:left;}

Các bạn có thể tùy chỉnh CSS theo ý của mình nhé

(các bạn có thể tải toàn bộ code của blog về để sửa cho dễ cũng được bằng cách Template (Mẫu) => Sao lưu/Khôi phục => Tải xuống mẫu hoàn chỉnh ,sau khi thực hiện xong các

Trang 2

bước thì các bạn up lên là Ok)

Bước 2: Các bạn tìm kiếm đoạn code sau : <b:includable id='post' var='post'> và dán

đoạn code dưới đây dưới nó :

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>

Trang 3

Sau đó lưu mẫu lại, vào một bài viết nào đó để thấy kết quả hiển thị của Breadcrumbs !

Bước 3: Để có cơ hội hiển thị Breadcrumbs cho Blogspot trên kết quả tìm kiếm các bạn

How To Create a Drop Down Menu?

A drop down menu is needed when you have too much content on your blog or you love keeping things organized To add a drop down menu to your blogger blogs do this:

1 Go To Blogger > Design > Page Elements

2 Select a HTML/JavaScript Widget just under the header and paste the

following code inside it,

Trang 4

<li><a href='#'>Sub Page #1</a></li>

To add another tab just paste this code above </ul>

<li>

<a href='#'>Tab Name</a>

</li>

3 Now Go to Design > Edit HTML

4 Backup your template and search for ,

]]></b:skin>

3 Just above it paste the code below,

/* - MBT Drop Down Menu */

Trang 6

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav

li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

Trang 7

text-decoration: none;

}

Make these changes:

• Change #060505 to change background color of the Main menu

• Change the yellow highlighted text to change font color, size and family

• Change #BF0100 to change the background of a tab on mouse hover

• Change #BF0100 to change the background color of the drop down menu

• Change #060505 to change the background color of drop down menu on mouse hover

4 Save your template and you are done!

Visit your Blogs to see a beautiful Navigation menu just below Header Have Fun! :)

If you have any questions feel free to post them

Customize Labels Widget with Stylish Cool Effects

Labels widget displays list of the categories of posts Creating labels helps to categorize the posts in groups So it helps visitors to see the posts under a category Default bloggerLabels widget is not so Stylish Don't worry, here I am sharing some cool interesting labels widget styles for you This Labels widget can style using simple CSS codes To do this follow the steps

• Sign In to Blogger Dashboard

Trang 8

.Label li {

background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%,

#2B2B2B 100%) repeat scroll 0 0 transparent;

Trang 11

}

Related Posts Blogger Widget and LinkedWithIn for Blogger

Related posts Widget, as the title says , this Widget will generate the list of related posts this Widget can be added either in homepage (under each posts) or inside the post By

placing this related posts Widget, there is chance the spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your blog and will keep your visitors from suddenly quit from your blog Let's see how to add related posts widget to Blogger

Using LinkedWithIn Widget

• It is very simple to add LinkedWithIn Widget

• Go to LinkedWithIn website and follow the simple instructions

• Give e-mail id, blog url, select platform as Blogger and select number of posts should

be displayed

Bước 1 Add Related Posts Manually To Blogger

• Go to Template -> Edit HTML

• Find </head>

• Copy the below code above </head>

<! Related Posts with thumbnails Scripts Start >

<b:if cond='data:blog.pageType == "item"'> /* remove this */

#related-posts {

Trang 12

var relatedpoststitle="Related Posts";

</script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger

Widgets</a>

<script

src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>

</b:if> /* remove this */

<! Related Posts with thumbnails Script End >

Customization

• RED marked - remove red marked portion to add this Widget to Homepage

Trang 13

• Brown - place the URL of the image in quotes to display if there is no image in the

post

• maxresults=5 - change the value to change the number of posts to be displayed.

• splittercolor="#DDDDDD" - change the color of splitter line between posts Check

here to seecolor codes selector

• relatedpoststitle="Related Posts" - Change the Name of title.

Bước 2 Add To Post Footer

• Find <div class='post-footer'> and copy the below code above it

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://netoopsblog.blogspot.com'><img alt='Blogger Widgets'

src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a>

</b:if></b:if>

• Remove Orange marked to add related posts to homepage too

• Change RED marked to change the number of posts should be displayed

I hope this article will help you If so please like and share our blog You can check here more Exciting Widgets

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Trang 14

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget This trick is done using simple CSS3 rather than using

complex JavaScripts A great feature of this trick is each Post shown in each Flat UI color,

so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good

Demo shows in bottom right side →

Features of this Widget

• Flat UI colors used (it will attract users attention)

• Automatic Post Numbering

• CSS3 Hover Animation

Sign in to your Blogger Account and Active Popular Posts Widget

• First Add Popular post Widget to Blogger

o Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from

the Widget List appear

o Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save

• Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>

Trang 15

• Copy the following code and Paste just above it

<! Popular posts multi colored UI theme >

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

Trang 16

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

-moz-transform: scale(1.2) rotate(-711deg) ;

-webkit-transform: scale(1.2) rotate(-711deg) ;

-o-transform: scale(1.2) rotate(-711deg) ;

-ms-transform: scale(1.2) rotate(-711deg) ;

transform: scale(1.2) rotate(-711deg) ;

}

<! popular posts multicolored UI theme >

• Click on Preview Template (You can see the template without saving)

• Save the Template

View Your Blog it is ready to attract users I think this article will help you if so please share and Like us to spread our Blog

If any problems with this trick don't hesitate to ask, do comment here

Google Official Contact Form for Static Pages in Blogger

Blogger released it's brand new Contact Form Widget for Blogger Users It helps to send mails to blog owner without Sign In to Google or any other account Anyone can send mails

e-by providing a valid e-mail address and Message But there is a problem with that Widget

We posted an article about "How to add Blogger Official Contact Form?" It only works as a Widget (it occupies in Sidebar / Footer), it can place in Static Pages In many popular

websites/blogs they use a page for Contact Form By default this Contact Form can only used as widget, we are introducing a technique to use Google Official contact Form on Blogger Static Pages

Add Blogger Official Contact Form To Static Pages

• Select Pages -> Create Blank Page

Trang 17

• Switch to HTML mode from Compose Mode.

• Click on HTML in left top of the Page

• Copy the Following code inside it and Save

Email<span style="font-weight: bolder;">*Mandatory</span></td><td>

</td></tr>

Message<span style="font-weight: bolder;">*Mandatory</span></td><td>

id="ContactForm1_contact-form-</td></tr>

<input class="contact-form-button contact-form-button-submit"

id="ContactForm1_contact-form-submit" type="button" value="Send" />

</td></tr>

Trang 18

</tbody></table>

• Go to Template -> Edit HTML

• Click on Jump to Widget and take Contact Form1

• Click on the arrow before <b:widget id='ContactForm1' locked='false' title=' Contact Us' type='ContactForm'>

• Delete the portion inside <b:includable id='main'> </b:includable>

Trang 19

• Now Sidebar Widget will not appear.

Multi colored random posts Widget for Blogger EXCLUSIVE.!!!!

Trang 20

Random Posts widget is an awesome widget for your Blogger Blog.We posted about How

to add random posts widget, Most important feature of this widget is it lets your Blog

visitors to surf more blog posts in your blog.Its let your users to spend more time in your Blog Surely it increases your Blog's internal links that lets your blog higher traffic.This is the modified version of the Random posts widget we posted earlier, one of our visitor

"Yogesh Gamer" asked me to make this widget like Multi colored Popular posts Widget So after that I just tried and it got success Please do check this widget and comment your suggestions

Check out Related Articles Awesome Random Posts Widget For Blogger Awesome Multi-Colored Popular Posts Widget for Blogger

Features of This Widget

• Flat UI colors used (it will attract users attention)

• Automatic Post Numbering

• Click on Add Gadget and look for HTML/Javascript and select it

• Copy the below code inside it and click save

Trang 21

background: none repeat scroll 0 0 #FF4C54;

width: 75%;

}

.noop-random-posts ul li:first-child + li + li + li + li + li:after {

Trang 23

var randarray = new Array();var l=0;var flag;

var numofpost=5;function nooprandomposts(json){

var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;)

{flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" +

"<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

Trang 24

All of you know about Google Search bar You'd see the style of search bar used in Google

If you didn't see Google search bar either go to Google or please see the right top of our blog, you can see a static Google search bar Here is a trick to add this Google search bar to your blog This is not the real Google search bar, instead this is a CSS3 styled search bar using Blogger's search method If you need Google'sreal search bar[but it can't

get Google's search box style] go to http://www.google.co.in/cse Let's see how to add Google type search bar to your blog

Demo shows in right top →

Features

• Floating Static (Fixed) Search bar

• CSS3 styled search bar

• CSS3 animated

• Go to Layout -> Click on Add a Gadget

• Select HTML/JavaScript from the list

• Leave the Title as Blank and copy paste the following code inside

the Content portion

OR

• Sign in to Blogger Dashboard and go to Template -> Edit HTML

• Search (Ctrl+F) <body

• Copy and paste the following code after it

<! Noop Google search box >

<input id='s' name='q' onblur='if (this.value == "") {this.value =

Trang 25

"Search ";}' onfocus='if (this.value == "Search ") {this.value =

""}' type='text' value='Search '/>

background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);

background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);

background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);

background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;border: 1px solid #3079ED;

#sbutton:hover{ background-color: #357AE8;

background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-

stop(100%,#357ae8));

background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);

background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);

background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);

background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);

Trang 26

margin: 0;

width: 17px;z-index:101;

}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}

#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s;

-webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}

<! Noop Google search box >

I hope this article will help you If any problem with this please do comment

Awesome Recent Comments Widget for Blogger, Feed Comments

Recent Comments Widget can be used to display the latest Comments in the blog

Comments are the best way to make a good contact with your blog visitors and followers

By default Blogger added commenting System to Blogger blogs Recent Comments Widget will inspire your blog visitors to post a comment on your Blog If you don't like to read full about this widget or Are you hurry to add this widget to you blog go to "How to add Recent

Trang 27

Comments Widget to Blogger Blog".

There are many changes made to Blogger Commenting System At earlier time the basic commenting System was used then it changed toThreaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System All Blogger blogs are using Threaded Comments System Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System

The Recent Comments Widget also inspire your blog visitors to post a comment Your visitors may be interested to see their names in other blogs If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment

The Recent Comment Widget shows the Commentators name with Profile link followed

by the Post nameand followed by their Comment This Widget can be added to Sidebar or

Footer or anywhere which catches the visitors eyes This Widget was coded using

JavaScript and you can also change the style of Widget according to your template

How To Add Recent Comments Widget?

• Select Layout -> Click on Add a Gadget

• Take HTML/Javascript from the list

• Give the Title and Copy the below code to it and Save

src=http://netoopsblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>

<a style="display:none" href=http://netoopsblog.blogspot.com>Recent Comments

Widget</a><style type=text/css>

.rcw-comments a {text-transform: capitalize;}

.rcw-comments {border-bottom: 1px solid #666; top: 6px!important; bottom: 6px!important;}

padding-</style>

• Change the RED highlighted with your blog name

Trang 28

If you want different Styles for this Widget, Please visit again I will post soon.

Another Way To Add Recent Comments Widget

• Go to Layout -> Click on Add a Gadget

• Select Feed from the list and give the following URL

http://tênblog.blogspot.com/feeds/comments/default

• Change the RED marked portion with your Blog URL

A Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name etc Using this method you have only limited options

Congratulations you have done

How to add Search engine Friendly Title to Blogger?

This article will help new blogger blog owners and all bloggers to make their blog search engine friendly Titles.By default Blogger blog titles are not search engine friendly.Page Title is group of text that appears on top of your browser.It is more important in showing your blog/blog posts on Search engine results.The Page title is the most important element

in your blog in terms of higher ranking in search results

Here is example,the figure shows the title of our blog post,the blog title is displayed first

and after that the post title has been displayed.

Trang 29

Google only displays 70 characters on Google search results and in case of Yahoo display bit more.So your blog posts will not display or you will not get as much rank in Search Results.Let us think about reversing of position of the blog title and post title,Giving the first priority to Post title and it will works.

It will appears like the following figure

• Replace the it with the following code

<b:if cond='data:blog.pageType == "index"'>

<b:else/>

<title><data:blog.pageName/> - NetOops Blog</title>

</b:if>

Replace the red text by your blog's Name

Done ! you have an SEO friendly page title

Verified Facebook Page tick mark for Blogger Author Comments

Trang 30

Do you noticed a tick mark in some Facebook Pages like Actors, Political Leaders Verified mark is only available for Worldwide stuff like big companies, Actors such have the chance

to be faked When we move mouse over that tick, it shows a "Verified Page" message Do

you wish to add that verified tick mark to your (Author/Admin) comment in your blog.Here

Tiêu đề	Cách Tạo Breadcrumbs Cho Blogspot
Trường học	University Name
Chuyên ngành	Web Development
Thể loại	Hướng Dẫn
Năm xuất bản	2025
Thành phố	City Name

Định dạng
Số trang	60
Dung lượng	663,61 KB