Đang tải... (xem toàn văn)
Một số thủ thuật hay gặp trong blogspot
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 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"'> <div id='Breadcrumbs'> <div itemscope='' itemtype='http://data-vocabulary.org/Breadcrum'> <a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'> <span itemprop='title'> Tên blog của bạn </span> </a> » </div> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> <div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'> <a expr:href='data:label.url' itemprop='url' rel='tag'> <span itemprop='title'> <data:label.name/> </span> </a> » </div> </b:if> </b:loop> <span> <data:post.title/> </span> </b:if> </b:loop> </div> </b:if> Thay phần chữ màu đỏ "Tên blog của bạn" thành tên bạn cần thay nhé. 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 làm như sau: Đăng nhập Blog => Cài đặt => Tùy chọn tìm kiếm => Robots.txt tùy chỉnh (bật nó lên) rồi thêm đoạn mã sau vào : User-agent: Mediapartners-Google Disallow: User-agent: * Allow: /search Allow: / Sitemap: http:// .địachỉblog .blogspot.com/sitemap.xml Phần sitemap đổi link http:// .địachỉblog blogspot.com thành link blog của bạn nhé Chúc các bạn thành công ! 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, <div id='mbtnavbar'> <ul id='mbtnav'> <li> <a href='#'>Home</a> </li> <li> <a href='#'>About</a> </li> <li> <a href='#'>Contact</a> </li> <li> <a href='#'>Sitemap</a> <ul> <li><a href='#'>Sub Page #1</a></li> <li><a href='#'>Sub Page #2</a></li> <li><a href='#'>Sub Page #3</a></li> </ul> </li> </ul> </div> Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </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 ----*/ #mbtnavbar { background: #060505; width: 960px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #mbtnav { margin: 0; padding: 0; } #mbtnav ul { float: left; list-style: none; margin: 0; padding: 0; } #mbtnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #mbtnav li a:hover, #mbtnav li a:active { background: #BF0100; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #mbtnav li { float: left; padding: 0; } #mbtnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #mbtnav li ul a { width: 140px; } #mbtnav li ul ul { margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { left: -999em; } #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 { left: auto; } #mbtnav li:hover, #mbtnav li.sfhover { position: static; } #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { background: #BF0100; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #mbtnav li li a:hover, #mbtnavli li a:active { background: #060505; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; 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 • Go to Template -> Edit HTML • Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin> • Save Template Black Forest Theme Labels With Animated Scaling .Label li { background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent; border: 1px solid; border-radius: 6px 6px 6px 6px; float: left; font-size: 116%; list-style: none outside none; margin: 2px; padding: 4px; transition: all 0.3s ease 0s; } .Label li:hover { transform: rotate(351deg) scale(1.7); } .Label a { color: #fff; text-decoration: none; } Yellow Customized Labels Widget .Label li:before { background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47); border-bottom: 1px solid #D99D38; border-left: 1px solid #D99D38; content: ""; height: 1.39em; left: -0.69em; position: absolute; top: 0.2em; transform: rotate(45deg); width: 1.3em; z-index: 1; } .Label li:after { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D99D38; border-radius: 4.167em 4.167em 4.167em 4.167em; box-shadow: 0 1px 0 #FAEABA; content: ""; height: 0.5em; left: -0.083em; position: absolute; top: 0.667em; width: 0.5em; z-index: 9999; } .Label li { background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47); border-bottom: 1px solid #D99D38; border-radius: 0 0.25em 0.25em 0; border-right: 1px solid #D99D38; border-top: 1px solid #D99D38; box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #996633; float: left; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 0.75em; font-weight: bold; list-style: none outside none; margin: 0 0 7px 20px; padding: 0.417em 0.417em 0.417em 0.917em; position: relative; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: 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. 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