Add a Google Sitemap to your Blogger Blog

Add a Google Sitemap to your Blogger Blog
Add a Google Sitemap to your Blogger Blog

The XML Sitemap file is like a directory of all web pages that exist on your website or blog. Search engines like Google and Bing can use these sitemap files to discover pages on your site that the search bots may have otherwise missed during regular crawling.

 

The Problem with Blogger Sitemap Files

An complete sitemap file should mention all pages of a site but that’s not the case if your blog is hosted on Blogger.

The default XML sitemap file of any Blogger blog will have only the 26 most recent blog posts –see example. That’s a limitation because some of your older blog pages, that are missing in the default XML sitemap file, may never get indexed in search engines. There’s however a simple solution to fix this problem.

Generate a Complete Sitemap for your Blogger Blog

This section is valid for both regular Blogger blogs (that use a .blogspot.com address) and also the self-hosted Blogger blogs that use a custom domain (like postsecret.com).

Here’s what you need to do to expose your blog’s complete site structure to search engines with the help of an XML sitemap.

  1. Open the Sitemap Generator and type the full address of your blogspot blog (or your self-hosted Blogger blog).
  2. Click the Create Sitemap button and this tool will instantly generate the necessary text for your sitemap. Copy the entire generated text to your clipboard (see screenshot below).
  3. Next go to your Blogger dashboard and under Settings – > Search Preferences, the enable Custom robots.txt option (available in the Crawling and Indexing section). Paste the clipboard text here and save your changes.

And we are done. Search engines will automatically discover your XML sitemap files via the robots.txt file and you don’t have to ping them manually.

Menghapus/Menghilangkan Navbar di template Blogger

Cara menghilangkan atau menghapus Navbar di template blogspot
Menghapus/Menghilangkan Navbar di template Blogger

Navbar (navigation bar) default dari blogger biasanya terletak pada bagian paling atas dari sebuah blog. Navbar ini sering kali di hapus oleh para blogger karena di anggap memiliki kode yang tidak valid atau error, di samping style nya yang kurang memuaskan bagi para blogger.

Bagaimana cara Menghapus/Menghilangkan Navbar di template Blogger? Pada tutorial ini saya akan share cara untuk menghilangkan navbar blogger tersebut ataupun hanya sekedar menyembunyikannya saja. 

Berikut salah satu caranya :
Masuk ke akun blogger anda. Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).

Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
Beri tanda centang pada Expand Template Widget.
Cari kode ]]></b:skin>, lalu letakkan kode berikut diatas kode ]]></b:skin>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Lalu, klik Simpan Template.

Note: Pada langkah di atas sobat sudah menyembunyikan / tidak menampilkan Navbar bawaan Blogger, namun pada template blog sobat masih terdapat kode dari Navbar tersebut.

Untuk cara kedua Menghilangkan Navbar bawaan Blogger, Sobat dapat melakukan langkah di bawah ini :
Sama seperti cara pertama. Masuk ke akun blogger anda Klik pada Template.
Lalu klik Edit HTML dan klik Proceed / Lanjutkan.
Beri tanda centang pada Expand Template Widget.
Cari kode <body>, lalu letakkan kode berikut diatas kode <body>

<script type=’text/javascript’>
<![CDATA[
<!– /*<body>*/ –>
]]>
</script>

Simpan Template Anda.
Anda akan melihat gambar konformasi seperti di bawah ini.

Note: Klik Delete Widget untuk menghapus Navbar.

Jika Anda melakukan cara ini, Anda juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat, namun cara ini sangat banyak mengurangi error pada blog.

Untuk cara ketiga dalam Menghapus/Menghilangkan Navbar Blogger, sama halnya dengan cara sebelumnya, cuma kode yang kita cari seperti dibawah ini :

<b:section class=’navbar’ id=’navbar’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Navbar1′ locked=’true’ title=’Navbar’ type=’Navbar’>
bla…
bla…
bla…
</b:widget>
</b:section>

Jika sudah ketemu, hapus kode tersebut lalu Simpan Template Anda.

Silakan Anda pilih cara mana yang Sobat gunakan untuk Menghapus/Menghilangkan Navbar BloggerSaya yakin dari ketiga cara tersebut pasti berhasil.

Widget Share Button for blogspot

Tips memasang Widget Share Button di blogspot
Widget Share Button

Widget Share Button Facebook, Twitter, Google keren di Blogspot, merupakan salah satu kelengkapan blog yang cukup penting.

Seiring dengan perkembangan media sosial, Wid

Widget Share Button pada dasarnya bukan hanya memudahkan pengunjung melakukan share pages di situs kita. Lebih dari itu, hal ini sangat berdampak positif pada blog kita. Karena, bisa menjadi media marketing gratis yang dapat menyebar kemana-mana.

Tertarik?

Untuk itu, ada beberapa cara yang dapat dilakukan. Di antaranya adalah mencoba langkah-langkah berikut ini;

Login ke dasbor blog anda

get Share Button seperti Facebook, Twitter, Google sangat dibutuh sebuah blog saat ini.  Widget ini, memungkinkan kita untuk berbagi secara cepat berbagai konten kepada publik.

  • Pilih rancangan
  • Pilih tambah gadget
  • Pilih Html/Java script
  • Copy kode Html di bawah ini
  • Pastekan di Html/ Java Script dibawah ini
  • Simpan
  • Selesai

<!–Widget Share Button Melayang Start–>

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id=’pageshare’ title=”bagikan ke teman anda”>
<div class=’sbutton’ id=’gb’><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like layout=”box_count” show_faces=”false” font=””></fb:like></div>
<div class=’sbutton’ id=’rt’><a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”vertical” >Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=”text/javascript”></script></div>
<div class=’sbutton’ id=’gplusone’><script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script><g:plusone size=”tall”></g:plusone></div>
<div class=’sbutton’ id=’su’><script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script></div>
<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’><script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script><a class=”DiggThisButton DiggMedium”></a></div>
<div class=’sbutton’ id=’fb’><a name=”fb_share” type=”box_count” href=”http://www.facebook.com/sharer.php”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script></div><br/><div style=”clear: both;font-size: 9px;text-align:center;”><a href=”  http://expo2012online1.blogspot.com/2012/07/cara-memasang-widget-share-button.html” target=”blank” title=”Cara Memasang Widget Share Button”><font color=”blue”>[Get Widget]<font></font></font></a></div></div>

Catatan : untuk tulisan warna PINK anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna BIRU bisa anda hapus jika anda ingin tampilan yang simple.

Contoh hasilnya? Click here 😉 Liat disamping sebelah kanan..  Klik suka bila perlu.. hehehe….  

Unite Blogger Template

Template blogspot cantik dengan slider
Unite Blogger Template

Template name : Unite
Release date : July 2012
Author : www.soratemplates.com
Designer : para.llel.us

Template features :
WordPress Look, 2 Columns, Right Sidebar, 3 Columns Footer, Business, Elegant, Featured Content Slider, Fixed Width, Light Background, Top Navigation Menu, Email Subscription Form.

Basic Instructions : How to install a Blogger Template

Configure Post Date:

Log in to Blogger Dashboard –> Settings –> Format and change this:

If you don’t do this, it will display “UNDEFINED”.

Configure Featured Content Slider:

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<div id=’Slide’>
<img alt=’Slide 1′ height=’341′ src=’/image.jpg‘ width=’948’/>
……….

Now replace image.jpg with your slider image.

Configure Dropdown Menu:

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<ul class=’sfmenu’>
<li class=’current’><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><a href=’#‘>Features</a>
<ul>
<li><a href=’#‘>Home page</a>
……….

Just replace “#” with your menu item URL. 

Project 10 Fashion Blogger template

Project 10 Fashion Blogger template with slider by sora template
Project 10 Fashion Blogger template

Date Released: Sep, 2012
Designer: Sora Templates
Price: FREE

Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.

Template features : WordPress Look, 3 Columns, 4 Columns Footer, Right Sidebar, Fashion, Featured Content Slider, Fixed Width, Gray Background, Social Widget, Page Navigation Widget.

Basic Instructions : How to install a Blogger Template

Note: You must publish at least 5 posts and your blog must be in public mode, if not, you will be redirect to this site, we’re really sorry for caused you this trouble.

Configure Featured Content Slider: 

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<div id=’layerslider’ style=’width: 748px; height: 300px;’>
<div class=’ls-layer’ rel=’slidedelay: 5000′>
<img class=’ls-bg’ src=’/image.jpg‘/>
……….

Replace”image.jpg” with your slider image.

Configure Dropdown Menu:

Login to blogger dashboard –> layout –> Edit HTML. Now scroll down to where you see the codes below:

<ul class=’menu’ id=’menu-top-menu’>
<li><a href=’#‘><i style=’font-family:Ropa Sans;’><span>Homepage</span></i></a></li>
<li><a href=’#‘><i style=’font-family:Ropa Sans;’><span>Blog</span></i></a></li>
     ……….

Just replace “#” with your menu item URL.

Configure Social Widget:

Search for:

<div class=’left-social-icons’>
<a class=’social-facebook’ href=’#‘ target=’_blank’><span/></a>
<a class=’social-twitter’ href=’#‘ target=’_blank’><span/></a>
……….

 Just replace “#” with your Social Account URL.

Configure Page Navigation Widget:

search for:

var posts=3, // Number of posts in each page 
       num=2, // Number of buttons will display

Metro Modern Solar Blogger Theme

template Metro Modern Solar Blogger Theme cantik dan SEO Friendly
Metro Modern Solar Blogger Theme

Date Released: Nov, 2012
Designer: Hong Hoa
Price: FREE

Features: SEO Ready
Metro Modern Solar template is optimized for Search engines like Google. This template helps your website to rank higher in search engines. Show a thumbnail image (small image) for every post using this template.
Width of your website adjusts to the user browser resolution. User can enjoy Full page content. Show featured posts in home page using this template. Engage your users by showing your top content in home page. Metro Modern Solar template comes with hierarchical dropdown navigation menu.

Navigation Menu

Open Metro Modern Solar template.xml file in a text editor like notepad for following changes. Find following code in the template. Update the links and text for your navigation menu.

<div id=’menu-module’>
<div class=’mattblackmenu’ id=’ddtopmenubar’>
<ul>
<li><a href=’/’>Home</a></li>
<li><a href=’#’ rel=’ddsubmenu1′>Freebies</a></li>
<li><a href=’#’ rel=’ddsubmenu2′>Blogging</a> </li>
<li><a href=’#’ rel=’ddsubmenu3′>Blogger</a></li>
<li><a href=’#’>Wordpress</a></li>
<li><a href=’#’ rel=’ddsubmenu4′>Marketing Online</a></li>
<li><a href=’#’>MMO</a></li>
<li><a href=’#’ rel=’ddsubmenu5′>Others</a> </li>
<li><a href=’#’ rel=’ddsubmenu6′>Tools</a> </li>
</ul>
</div>
<!–Top Drop Down Menu 1 HTML–>
<ul class=’ddsubmenustyle’ id=’ddsubmenu1′>
<li><a href=’#’>Ebooks</a></li>
<li><a href=’#’>Wallpapers</a></li>
<li><a href=’#’>Web Gallery</a></li>
<li><a href=’#’>Others Freebies</a></li>
</ul>
………
</ul>

Edit the above code and add your navigation links

Featured Posts in Home page

This is going to be little challenging. Follow the steps below carefully.

  • First of all decide which Label (category) you want to use for Featured posts section. In the demo, we used a label called “hothot”. All posts from “hothot” label are displayed as Featured post.
  • Go to Layout, Click Edit on Feature Gadget. Make sure ONLY following options are checked in the Show section. Please uncheck if Icons and/or Date of last update is already selected (Title of most recent item and Thumbnail of most recent item)
  • Now, you have to add 5 blog list URLs to display 5 featured posts in the home page. Please add exactly 5 urls. I added following URLs to the blog list

http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=1
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=2
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=3
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=4
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=5

Here “hothot” in the url refers to the Label that you want to use. Index number refers to the recent post number to display. Do not forget to change the domain in the above urls. I used http://metro-modern-solar-lovely.blogspot.com to refer to my blog. Use your blog url instead.

  • Now, you are all done. You may have to wait up to 24 hours for this to work. Sometimes it work immediately.

Carousel Slider Widget

This template has a Carousel Slider widget which appears on all post pages. Configuration for this slider is in the template code. Find following code in the template xml file. Update label1 = “hot” with any label you want. We are using “hot” label posts. numposts1 = 15 represents that 15 posts will be loaded in the slider. Change this number as per your wish

showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = “hot”;

Metro Social Widget

In Template code, Find following. Update the social links with your social links

<div class=’social’>
<span class=’fade’><ul>
<li><a href=’http://facebook.com/blogthietke’><img src=’http://2.bp.blogspot.com/-QDVCH07Xois/UTPWhsanV8I/AAAAAAAABK4/BhziRxg3KK4/s1600/Facebook+alt+1.png’/></a></li>
<li><a href=’#’><img src=’http://1.bp.blogspot.com/-bTjkcbUwcMk/UTPWhW3wtuI/AAAAAAAABLE/qsalOcpRG-0/s1600/Google++alt.png’/></a></li>
<li><a href=’http://pinterest.com/honghoavi’><img src=’http://3.bp.blogspot.com/-aCvgNwCdcTI/UTPWhx3I4qI/AAAAAAAABK8/10x2ZowT8rQ/s1600/Pinterest+alt.png’/></a></li>
<li><a href=’http://feeds.feedburner.com/blogthietke’><img src=’http://3.bp.blogspot.com/-ZaolXcz404Q/UTPWiKShvzI/AAAAAAAABLA/K5OW3Jcy4ng/s1600/RSS+Feed.png’/></a></li>
<li style=’padding:0px’><a href=’#’><img src=’http://4.bp.blogspot.com/-OHlEUI32044/UTPWihT5wbI/AAAAAAAABLM/VBu99K-pMwI/s1600/YouTube+alt+1.png’/></a></li>
</ul></span><div style=’clear: both;’/>
</div>

Pagination

This template comes out of box with pagination. First set how many posts to display per page in Settings — Posts and comments page. Here you have to update “Show at most” option to the number of posts you want to display per page. Then, go to the template code and find following. Update perPage value to the same value.

var pageNaviConf = {
perPage: 4,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}

Bottom Navigation

You can have Footer navigation links using this template. Go to Layout — Click Edit on Bottom Navi widget. Paste the following code. Ofcouse, please update the links and text with your navigation links.

<p align = “center” >
<a href = “http://www.lovelytemplates.com/wordpress-themes” > WordPress Themes
<a href = “http://www.lovelytemplates.com/blogger-templates” > Blogger Templates
<a href = “http://www.lovelytemplates.com/wordpress-themes/premium-themes” > Best Premium Themes
<a href = “http://www.lovelytemplates.com/wordpress-themes/usages/wordpress-photography-templates” > Photography WordPress themes
<a href = “http://www.lovelytemplates.com/wordpress-themes/usages/wordpress-business-templates” > Business WP Themes
<a href = “#” > Add your Link
</a></a></a></a></a></a></p>

Meta Description

This template uses Search preferences options for meta description. Go to settings — Search Preferences and enter a description for your site. This description will come as meta description for your home page. Helpful for Search engines. Also, you can add meta descriptions for every page you create in blogger. This template is completely optimized for SEO.