Erik Shared: Tutorial Blogger

Tutorial Blogger

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Membuat Top Menu dengan Kotak Pencarian di Blog.

Ngasal 4/25/2015 Add Comment

Top Menu Dengan Kotak Pencarian - Top menu adalah hanya sekedar menu tambahan dari menu navigasi, biasanya Top menu ini digunakan untuk Link,About,Sitemap,Contact,Disclaimer,etc.

Top menu ini biasa digunakan diatas header, jika anda bingung cara pemasangan pada top menu anda bisa cari kode seperti ini <header atau 'header-wrapper' pada umumnya header menggunakan kode seperti itu, jika sudah ketemu letakan kode pada tutorial dibawah ini di atas header supaya blognya makin Joss.

Untuk yang ingin tau seperti apa Top Menu dengan Kotak Pencarian itu bisa lihat demo dibawah :

Demo

Langsung ke Tutorialnya oke.

1. Login Blogger tentunya

2. Masuk Dashboard Blogger > Menu Blogger > Template

3. Pada Template blogger Klik Edit HTML

4. Cari <header lalu paste kode dibawah ini tepat diatas kode <header

<div id='nav-wrap'>
<nav class='menu'>

<ul class='nav-menu'>
<li><a href='erikshared.my.id'>About</a></li>
<li><a href='erikshared.my.id'>Contact Us</a></li>
<li><a href='erikshared.my.id'>Privacy Policy</a></li>
<li><a href='erikshared.my.id'>Disclaimer</a></li>
</ul>


<ul class='nav-search'>
<form action='/search' method='get'>
<input class='navsearch' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/>
<button class='subsearch' type='submit'><i class='fa fa-search'></i></button>
</form>
</ul>

</nav>
<div class='clear'></div>
</div>

5. Lalu tinggal kita buat CSS nya. Letakan CSS dibawah dengan mencari kode ]]></b:skin> pada template.

/* ERIKSHARED TOP MENU */
.menu {
font:normal normal 13px Open Sans Condensed, Arial, sans-serif;
padding:0 0;
background:#ffffff;
margin:0 auto;
height:38px;
border:1px solid #f0f0f0;
overflow:hidden;
text-transform:uppercase;
}
.nav-menu {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.nav-menu li {
display:block;
float:left;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-right:1px solid #f0f0f0;
}
.nav-menu li a {
background:#ffffff;
color:#8D8D8D;
display:block;
padding:0 8px;
}
.nav-menu li a:hover {
background:#f5f5f5;
}
ul.nav-search {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:right;
}
.navsearch {
padding: 10px;
border-left: 1px solid #ddd;
color: #666;
border-top:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #ddd;
transition:all 0.5s ease-out;
font:normal normal 14px Open Sans Condensed, Arial, sans-serif;
float:left;
}
.navsearch:focus {
background:#fafafa;
}
.subsearch {padding:10px;color:#555;font:normal normal 14px Open Sans Condensed, Arial, sans-serif;border:none;background:#fff;cursor:pointer;}
.subsearch:hover {background:#fafafa}

6. Tinggal Simpan Top menu tadi.

Ohiya jika tidak tampil font awesome nya. Kalian harus memasang dulu font awesome. Simpan kode ini diatas </head> atau juga bisa di bawah <head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Nahh segitu dulu tutorial dari saya gan. Semoga blog Kamu kalau pake Top Menu ini bisa menjadi lebih Enak diliat :v #GueNgomongApaSih

Cara Memasang Alexa Rank di Blog 2015

Tutorial Blogger

Ngasal 4/13/2015 2 Comments

Ngasal

Cara Memasang Alexa Rank di Blog 2015 - Hai sobat ? Apa kabar ?. Udah agak lama tidak update artikel lagi, dan akhirnya saya menulis artikel tentang "Cara Memasang Alexa Rank di Blog 2015". Kemarin juga sempat menulis artikel tentang "Cara Membuat Icon Post/Post Info di Blog". Nah langsung saja ikuti tutorial dibawah ini.

Sedikit penjelasan tentang Widget Alexa Rank. Widget ini berfungsi untuk agar kita mengetahui seberapa besar Backlink yang kita peroleh selama menjadi Blogger, dan tentunya juga berfungsi untuk melihat visitor Blog Anda dengan Alexa Rank. Lihat dibawah untuk Tutorialnya.

Script yang digunakan beserta contohnya :

<a href="http://www.alexa.com/siteinfo/erikshared.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=erikshared.blogspot.com" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/erikshared.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=erikshared.blogspot.com" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/erikshared.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/b?url=erikshared.blogspot.com" type="text/javascript"></script></a>
KETERANGAN :
√ Ganti url yang berwarna merah dengan url blog Anda/Website Anda.

Cara Memasang Widget Alexa Rank di Blog :

Masuk ke dashboard Blog Anda

Pilih menu "Tata Letak"

Klik "Tambahkan Gadget"

Pilih widget "HTML/Javascript"

Lalu masukan kode/script widget alexa rank yang sudah Anda pilih.

Terakhir klik "Simpan"

Nah segitu ulasan saya kali ini tentang "Cara Memasang Alexa Rank di Blog 2015". Semoga artikel ini dapat bermanfaat bagi Anda. Terima Kasih.

Cara Membuat Icon Info/Post Info di Blog

Tutorial Blogger

Ngasal 4/03/2015 9 Comments

Ngasal

Hai sobat Erik Shared ? Apa kabar ? Sekian lama admin gak update artikel lagi , sekarang admin mau update lagi nih. Tentang "Cara Membuat Icon Info di Blog". Gambar/Demo bisa dilihat diatas.
Sedikit penjelasan, Icon Info/Post Info itu apa sih min ? Post info itu untuk memberi tahu kepada pengunjung bahwa : Penulis , Tanggal postingan , dan Komentar yang telah di publikasikan. Oke langsung ke tutorialnya aja.

1. Login ke blog kalian.
2. Pada Dashboard kalian pilih template. Lalu Edit Html.
3. Pertama simpan CSS dulu . Simpan dibawah ]]></b:skin> atau bisa di </style>

.post-info {
background:transparent;
margin:0 0 12px;
color:#666666;
font-size:11px;
margin-top:10px;
}
.post-info a {
display:inline-block;
color:#666666;
}
.author-info, .time-info, .comment-info, .review-info {
margin-right:12px;
display:inline;
}

4. Selanjutnya HTML taro aja nih HTML di tempat yang agan mau pasang Post-info, biasanya sih
ditaro di tempat <div class='post-outer'>.

<div class='post-info'>
                <b:if cond='data:top.showAuthor'>
                    <b:if cond='data:post.authorProfileUrl'>
                    <span class='author-info'>
                    <i class='fa fa-user'/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                        <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                        <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                        </a>
                    </span>
                    </span>
                    <b:else/>
                    <span class='author-info'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                        <span itemprop='name'><data:post.author/></span>
                    </span>
                    </span>
                    </b:if>
                </b:if>
                <b:if cond='data:top.showTimestamp'>
                <b:if cond='data:post.url'>
                <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
                <span class='time-info'>
                <i class='fa fa-calendar'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                </span>
                </b:if>
                </b:if>
                <b:if cond='data:blog.pageType != "item"'>
                <b:if cond='data:blog.pageType != "static_page"'>
                    <b:if cond='data:post.allowComments'>
                    <span class='comment-info'>
                    <i class='fa fa-comments'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
                    </a>
                    </span>
                    </b:if>
                </b:if>
                </b:if>
            </div>

5. Simpan Template.
Dan segitulah ulasan saya kali ini. Semoga Bermanfaat.

Cara Agar gambar tidak Melebihi Postingan Blog

Tutorial Blogger

Ngasal 3/27/2015 8 Comments

Ngasal

Cara agar gambar posting tidak melebihi halaman blog. Memasukan gambar didalam posting blog, merupakan salah satu cara agar isi artikel lebih mudah untuk dimengerti oleh pembaca. Namun, jika ukuran gambar melebihi lebar halaman posting, maka tampilan artikel terlihat menjadi tidak rapi. Apalagi sampai menyentuh widget-widget yang berada di samping kanan blog.

Screenshot By : Faji Awesome

Sebenarnya, blogger sudah menyediakan tool untuk mengatur ukuran gambar, gambar bisa dikecilkan atau dibesarkan. Caranya klik gambar maka akan ada tool dengan pilihan small, medium, large, x-large atau ukuran gambar yang sebenarnya. Tapi pada postingan tertentu, mungkin kita ingin menambahkan gambar yang lebar dengan title gambar yang terlihat jelas.

Menggunakan tool dari blogger tidak cukup untuk mengatur lebar gambar, terkadang gambar masih melebihi lebar halaman posting blog. Berikut ini adalah cara agar gambar dipostingan blog tidak melebihi lebar halaman blog.

Ikuti langkah-langkah dibawah ini.

Login ke blogger. Ke pengaturan template.
Klik edit html, dan cara kode ]]></b:skin> , gunakan Ctrl f untuk memudahkan pencarian.
Letakan kode berikut di atas ]]></b:skin>

.post img { vertical-align:bottom; max-width:90%; max-height:90% }

4.Selanjutnya save template, selesai.

Gambar dengan ukurang yang besar, otomatis tidak melebihi lebar posting blog. Dengan begitu, tampilan posting blog akan terlihat rapi, dan juga bisa menambah kecepatan loading blog. Untuk mengoptimalkan lagi lebar gambar, agar tidak melebihi halaman blog. Ada baiknya, sebelum gambar di upload ke blog. Gambar di kompress terlebih dahulu.

Terkadang, gambar dengan ukuran extra besar, masih bisa melewati batas halaman blog. Walaupun sudah ditambah pengaturan seperti diatas. Tapi pada umumnya, blog yang sudah diberikan pengaturan gambar seperti diatas. Gambarnya tidak akan melewati batas halaman. Mengatur ukuran gambar bisa dibilang sebagai salah satu cara untuk meningkatkan search engine optimazation atau yang biasa disingkat seo dalam dunia website.

Semoga Bermanfaat.

Cara Membuat Tooltip Link Otomatis di Blogspot

Tutorial Blogger

Ngasal 3/26/2015 3 Comments

Ngasal

Erik Shared - Sobat? Apa kabar nih? Admin baru update lagi karena sibuk sekali saya belajar Coding/Edit Code. Nah sekarang ada kesempatan nih , mau share sesuatu lagi . Yaitu "Cara Membuat Tooltip Link Otomatis di Blogspot". Simak Demo & Tutorialnya.

Berikut adalah tutorialnya :
1. Login Pada Blogger.
2. Pada Dashboard»Template.
3. Pastekan CSS ini tepat diatas ]]><b:skin>

#tooltip { background-color: #000; border: 1px solid #333; border-radius: 5px; color: #fff;display: none; font-size: 13px; position: absolute; padding: 4px 8px; box-shadow : 0 3px 4px black;}

Setelah mempaste CSS tersebut. Tinggal memasang tooltip nya.
4. Pastekan lagi kode berikut diatas </body>

<script src='http://yourjavascript.com/41216612533/tooltip.js' type='text/javascript'></script>

<script type='text/javascript'>

$().ready(function() {

$('[title]').style_my_tooltips( {

tip_follows_cursor: 'on',

tip_delay_time: 100

})

});

</script>

5. Simpan deh.
*Note : Kalau tidak ketemu antara ]]></b:skin> dan </body> . CTRL+F pas template itu, Lihat gambar
. Untuk mencari </body> juga seperti itu.

Berikut adalah tutorial bagaimana Cara Membuat Tooltip Link Otomatis di Blogspot . Semoga artikel ini membantu Anda. Terima Kasih.....

Cara Membuat Garis Tepi/Border pada Bagian Posting Blog

Tutorial Blogger

Ngasal 3/24/2015 4 Comments

Ngasal

Seperti gambar diatas, kali ini saya akan membagikan sebuah "Cara Membuat Garis Tepi/Border pada Bagian Posting Blog".
Mungkin ini tidak asing bagi blogger master. Namun ini bisa juga berguna untuk membatasi sebuah gambar postingan, dimana jika gambar postingan terlalu besar maka akan ketauan.
Dalam tutorial ini akan ada sebuah cara. Membuat garis tepi. Garis tepi/border bisa dilihat pada screen shoot diatas.

Langsung pada tahap tutorial.
1.Login ke blogger.
2.Pada Dashboard > Template.
3.Tekan CTRL+F pada keyboard lalu cari ]]><b:skin> atau juga </style>
Jika sudah pastekan kode ini diatas ]]><b:skin> atau </style>

.post {border:1px solid #ddd;padding:15px;}

4.Simpan Template.

Sedikit penjelasan
border:1px = Berguna untuk mengatur besar/kecilnya garis tersebut.
#ddd = Untuk mengganti warna garis tersebut.
padding:15px = Untuk mengukur ukuran dan panjang garis tepi/border tersebut.

Pada warna #ddd Kalian bisa ubah dengan warna kesukaan seperti #FFFFF. Untuk melihat kode warna bisa langsung KESINI....
Nah bagaimana? Mudah bukan Tutorial Cara Membuat Garis Tepi/Border pada Bagian Posting Blog? Sekian dari tutorial saya. Terima Kasih.

Menampilkan dan Menyembunyikan Widget di Halaman Blog

Tutorial Blogger

Ngasal 3/20/2015 2 Comments

Ngasal

Keberadaan widget memang akan mempermudah kita dalam mendesain atau mempercantik tampilan blog kita. Namun, kadangkala justru juga akan merusak tampilan yang ada. Kali ini saya akan kembali berbagi tips dan trik. Trik ini berhubungan dengan widget di blog yang mau di tampilkan maupun di sembunyikan pada halaman tertentu. Mungkin sobat sudah mengerti apa yang saya maksudkan. Fungsi dari menampilkan atau menyembunyikan widget tertentu di blog adalah untuk menampilkan atau menyembunyikan widget yang mungkin sobat anggap penting dan tidak penting pada suatu halaman. Alhasil, Sobat bisa sesuka hati menampilkan maupun menyembunyikan widget tertentu dalam suatu halaman tertentu saja.

Menyembunyikan dan menampilkan widget blog pada halaman tertentu merupakan salah satu proses penataan widget blog yang menurut saya perlu diketahui dan diterapkan oleh sobat blogger pada blognya masing-masing. Saya menyarankan hal ini karena tata letak widget dan konten yang berkualitas juga merupakan kriteria penilaian tersendiri baik dari admin blog maupun pengunjung blog. Jika ditinjau dari segi keindahan tampilan blog, memang hal ini perlu kita terapkan pada blog. Langsung saja sobat simak cara-cara dibawah ini.

1. Menampilkan widget hanya pada Homepage saja
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE WIDGET SOBAT
</b:if>

2. Menyembunyikan widget dari halaman Homepage
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.url != data:blog.homepageUrl'>
KODE WIDGET SOBAT
</b:if>

3. Menampilkan widget hanya pada halaman Static Page
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType == "static_page"'>
KODE WIDGET SOBAT
</b:if>

4. Menyembunyikan widget dari halaman Static Page
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType != "static_page"'>
KODE WIDGET SOBAT
</b:if>

5. Menampilkan widget hanya pada URL tertentu saja
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.url == "URL Pilihan Anda disini"'>
KODE WIDGET SOBAT
</b:if>

6. Menyembunyikan widget dari URL tertentu
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.url != "URL Pilihan Anda disini"'>
KODE WIDGET SOBAT
</b:if>

7. Menampilkan widget hanya pada Archive Page saja atau halaman arsip
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType == "archive"'>
KODE WIDGET SOBAT
</b:if>

8. Menyembunyikan widget dari halaman Archive Page
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType != "archive"'>
KODE WIDGET SOBAT
</b:if>

9. Menampikan widget pada halaman postingan saja
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType == "item"'>
KODE WIDGET SOBAT
</b:if>

10. Menyembunyikan widget dari halaman posting
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType != "item"'>
KODE WIDGET SOBAT
</b:if>

11. Menampilkan widget hanya di halaman Error 404
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType == "error_page"'>
KODE WIDGET SOBAT
</b:if>

12. Menyembunyikan widget di halaman Error 404
Letakkan kode widget diantara kode berikut ini

<b:if cond='data:blog.pageType != "error_page"'>
KODE WIDGET SOBAT
</b:if>

Lantas bagaimana cara menampilkan atau menyembunyikan widget default dari blogger sendiri? seperti About me, Archive, Label dan lain sebagainya. Biasanya kode default blogger akan tampak seperti dibawah ini :

<b:widget id='HTML1' locked='false' title='JUDUL WIDGET ANDA' type='Profile'>
<b:includable id='main'>
KODE WIDGET DEFAULT BLOGGER ANDA
</b:includable>
</b:widget>

Untuk mengontrol widget ini anda hanya perlu untuk menyisipkan kode kontrol sesuai dengan apa yang anda mau. Misalnya anda ingin menampilkan widget hanya pada Homepage saja , maka letakkan kode pada no 1 diatas seperti dibawah ini :

<b:widget id='HTML1' locked='false' title='JUDUL WIDGET ANDA' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE WIDGET DEFAULT BLOGGER ANDA
</b:if>
</b:includable>
</b:widget>

Bagaimana, mudahkan? Anda pasti bisa berkreasi sendiri dengan kode-kode diatas dengan menyembunyikan widget yang menurut sobat tidak penting di tampilkan pada halaman tersebut. Jika ada yang kurang di mengerti atau ada masukan dari sobat semua, silahkan komentar di bawah...

Cara Melindungi Credit Link Template dengan Auto Redirect

Tutorial Blogger

Ngasal 3/20/2015 9 Comments

Ngasal

Membuat tempate itu bukan pekerjaan yang mudah. Maka dari itu Anda si Pembuat template harus mencoba 1 hal sederhana namun banyak makna. Yaitu "Cara Melindungi Credit Link dengan Auto Redicrect ala Erik Shared". Kalau Anda membagikan template gratis , takut credit hilang ? Pake ini aja Sob...

Berikut adalah kode JS nya :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
if ($("#ITUNYA,.ITUNYA").attr("href") != "http://www.erikshared.com/") {
window.location.href = "http://www.erikshared.com/";
}
});
//]]>
</script>

#ITUNYA adalah kode pemanggil dari JS tersebut, Kalian bisa mengubahnya sesuka hati, tapi ingat ganti juga HTML nya...

Sekarang bagian HTML nya . Bagian Footer kurang lebih begini :

<footer class='footer-wrapper'>
<span class='credit-link'> Template by <a class='ITUNYA'
href='http://www.erikshared.com/' id='ITUNYA' title='Tutorial Blog
Terbaru & Tutorial Seo'>Erik Shared</a></span>
</footer>

Ingat juga , ini masih bisa ditangani oleh blogger yang ahli dalam bidang JavaScript. Terima Kasih

Cara Merubah Nextpost/Previous Menjadi Halaman Angka

Tutorial Blogger

Ngasal 3/19/2015 5 Comments

Ngasal

ERIKSHARED - Hai Kawan ? kali ini saya akan membagikan tutorial yang sederhana yaitu "Cara Merubah Nextpost/Previous Menjadi Halaman Angka." Seperti gimana ? Langsung liat aja tutorialnya dibawah

Langkah-Langkah ikuti dibawah:

Login ke Blogger >> Template
Pas di template langsung cari aja ]]></b:skin>

Pastekan diatas ]]></b:skin> :

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Jika kalian sudah paste script diatas tinggal paste lagi code dibawah
Paste script ini dibawah </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

*Note : Kalau tidak ketemu antara ]]></b:skin> dan </body> . CTRL+F pas template itu, Lihat gambar
. Untuk mencari </body> juga seperti itu

Gimana ? Mudah kan , Semoga bermanfaat ;)

Pasang Meta Tag Agar Blog Seo Friendly 100% di Chkme

Info Seo Tutorial Blogger

Ngasal 3/07/2015 12 Comments

Ngasal

Pasang Meta Tag Agar Blog Seo Friendly 100% di Chkme

Merupakan salah satu hal yang paling berpengaruh terhadap traffic atau pengunjung blog di search engine. Hampir semua blogger tidak ketinggalan dengan tips ngeblog ini yaitu menyelipkan meta tag dalam setiap templatenya. Walaupun sekarang beredar kabar meta tag sudah tidak dibutuhkan oleh robot search engine lagi, namun menurut saya masih penting, karena meta tag ini berfungsi untuk memberikan informasi tertentu kepada robot (mesin pencari) mengenai halaman web tersebut.

Langsung saja kita ke tutorial Pasang Meta Tag nya :

1. Pastikan Anda login ke blogger masing-masing

2. Masuk ke menu Template ► Edit HTML ► Lalu cari kode ini <b:include data='blog' name='all-head-content'/>

Bagi Anda yang tidak menemukan kode di atas itu dikarenakan biasanya isi template berbeda-beda. Jadi yang tidak menemukan kode di atas, taruh saja di bawah kode <head>
3. Setelah dapat silahkan copy kode berikut ini lalu pastekan di bawah kode di atas.

<meta content='Your Verification Site Google' name='google-site-verification'/>

<meta content='Your Verification Bing' name='msvalidate.01'/>

<meta content='Your Blog Catalog' name='blogcatalog'/>

<meta content='Your Verification Alexa' name='alexaVerifyID'/>

<meta content='-5;120' name='geo.position'/>

<meta content='id' name='geo.country'/>

<meta content='id-us-en' name='language'/>

<meta content='INDEX, FOLLOW, all' name='ROBOTS'/>

<meta content='no-cache' http-equiv='Pragma'/>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

<meta content='true' name='MSSmartTagsPreventParsing'/>

<meta content='Blogger' name='generator'/>

<meta content='-1' http-equiv='Expires'/>

<meta content='follow, all' name='Googlebot-Image'/>

<meta content='follow, all' name='Scooter'/>

<meta content='follow, all' name='msnbot'/>

<meta content='follow, all' name='alexabot'/>

<meta content='follow, all' name='Slurp'/>

<meta content='follow, all' name='ZyBorg'/>

<meta content='ALL' name='SPIDERS'/>

<meta content='ALL' name='WEBCRAWLERS'/>

<meta content='no-cache' http-equiv='Cache-Control'/>

<meta content='general' name='rating'/>

<link href='https://plus.google.com/117041961334236765169' rel='author'/>

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

<meta content='Deskripsi' name='description'/>

<meta content=' KEYWORD' name='keywords'/>

</b:if>

<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>

<link href='http://erikshared.blogspot.com/atom.xml' rel='alternate' title='ERIKSHARED - Atom' type='application/atom+xml'/>

<link href='http://erikshared.blogspot.com/rss.xml' rel='alternate' title='ERIKSHARED - RSS' type='application/rss+xml'/>

*Catatan : Sebelum Anda memasang meta tag di atas, sebaiknya Anda periksa dulu meta tag apa yang sedang terpakai di blog Anda. Jika menemukan meta tag yang sama silahkan dihapus saja dan ganti dengan struktur seperti di atas..