Permulaan : Cara Buat Akun Blogspot

Mendaftarkan diri sebagai seorang pemilik blog dengan menggunakan platform blogger tidaklah sesusah yang disangka.
Dengan mengikuti beberapa langkah ringkas berikut, anda sudah bergelar seorang blogger.



Sebelum memulakan pendaftaran untuk akaun blogspot, anda mestilah mempunyai akaun google dahulu. Akaun lain pun boleh, tetapi untuk jangka masa panjang, ada akaun google akan lebih memudahkan memandangkan blogger.com adalah produk dari google.

Jika anda sudah mempunyai akaun google, boleh sign dahulu atau klik disini.http://mail.google.com/mail/?hl=en&tab=im.

Jika anda masih belum mempunyai akaun google, sila daftarkan dahulu disini untuk memudahkan proses pendaftaran akaun blogspot.

Berikut adalah langkah-langkah yang diperlukan untuk mendaftar akaun blogspot.

1. Buka link www.blogger.com

2. Apabila paparan sudah keluar, klik pada 'create a blog'


3. Seterusnya masukkan maklumat yang dikehendaki kemudian klik 'continue'.


4. Kemudian masukkan blogname dan juga blog address

• Blog name lebih merujuk kepada trademark sesebuah blog
• Blog address adalah digunakan oleh pengunjung untuk membuka blog anda. Blog address antara perkara paling penting bagi sesebuah blog. Untuk memudahkan pemahaman, sila rujuk Tips Pemilihan URL Untuk Blog.

5. Pilih template yang anda rasa sesuai, kemudian klik 'continue'


6. Siap. Anda sudah mempunyai akaun blogspot anda sendiri ada boleh mula untuk menaip entri pertama anda.:)

More about → Permulaan : Cara Buat Akun Blogspot

Post Entri Dalam Blog

Post entri dalam blog merupakan perkara yang paling asas bagi seorang blogger.
Dalam entri anda akan menaip apa yang anda mahu sampaikan samada luahan rasa, perkongsian, info dan apa-apa sahaja yang anda mahu.

Kalau tidak buka ruangan untuk menaip bagaimana hendak post entri kan.:)



Berikut adalah cara bagaimana anda hendak memulakan langkah untuk menaip dalam blog anda.

1. Buka link www.blogger.com (link ini diperlukan setiap kali anda hendak login kepada akaun blogger). Masukkan email dan password anda.

2. Pada paparan muka depan, klik pada 'new post'



3. Masukkan tajuk untuk entri anda dan juga isi kandungan entri anda.(biasa bab ini mengambil masa untuk menaip entri).

Kemudian apabila sudah siap, klik pada button 'publish'


4. Apabila sudah tekan button publish, siap untuk sebuah entri dalam blog anda.

• jika anda hendak tengok entri anda itu, klik pada 'view post'
• jika anda rasa masih ada kekurangan dan hendak edit, klik pada 'edit post'
• jika anda hendak menaip entri baru, klik pada 'create a new post' (anda juga boleh mulakan dari awal dengan klik pada 'dashboard' pada bahagian atas-kanan)

More about → Post Entri Dalam Blog

Disable Right Click

Adakah anda tidak suka orang lain mengambil apa sahaja kandungan dalam blog anda.?
Dan pada masa yang sama anda tidak suka dengan kod² yang berserabut yang perlu di edit dalam 'edit html'. Kini ada cara mudah untuk realisasikan hasrat anda.:)

Kenapa Perlu Disable Right Click.?
Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk megelakkan orang lain mengambil apa yang ada dalam blog mereka. Samada tidak senang ayat mereka ditiru bulat² (copy paste), ataupun untuk mengelakkan bandwidth habis digunakan. Kebiasaan alasan yang aku selalu baca adalah kerana ada orang yang copy entri mereka bulat².

Berikut adalah contoh msg yang akan keluar apabila anda aktifkan disable right click



Berikut adalah cara yang mudah untuk menggunakan fungsi ini.


1. Copy kode ini.
<script language=JavaScript> <!-- //edit by unwanted var message="Masukkan Mesej Anda Disini"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> </script
2. Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Layout>Add a Page element >html/javascript.


Apabila sudah siap, save dan lihat kesannya pada blog anda.

More about → Disable Right Click

Ketahui Bilangan Pengunjung Online Dalam Blog

Berapakah bilangan pelawat yang berada dalam blog anda ketika ini.?
Mungkin amat sukar untuk anda menjangkakannya (tidak boleh rasanya.:)
Kalau anda mempunyai statistik blog, mungkin anda tahu mengikut hari ataupun jam,
tetapi anda tidak tahu berapa bilangan pengunjung dalam keadaan masa sebenar.


whous.amung.us menawarkan widget yang dapat menunjukkan bilangan pengunjung yang online pada masa sebenar.
Antara kelebihan menggunakan widget ini adalah paparan yang menarik, dan juga cara pasang pada blog dengan mudah. Boleh lihat demo widget ini dipasang di blog, DISINI.

Berikut adalah langkah yang diperlukan untuk meletakkan widget ini didalam blog anda.


1. Buka web http://whos.amung.us/

2. Pilih kedudukan widget yang dikehendaki (widget akan berada dalam keadaan statik dalam blog anda), selepas itu copy code yang tersedia.


3. Setelah copy code, pastekan di dalam html/javascript yang terdapat dalam page element blog anda.
Dashboard > layout > page element > add a gadget > html/javascript.

4. Save, dan lihat hasilnya..:)

More about → Ketahui Bilangan Pengunjung Online Dalam Blog

Popular Post Dalam Blog (berdasarkan page view)

Sebelum ini sudah ada tutorial untuk widget popular post berdasarkan komen terbanyak yang terdapat dalam sesebuah entri. Untuk kali ini, tutorial adalah untuk memasukkan popular post berdasarkan kepada jumlah bilangan page view bagi sesebuah entri.

Widget ini agak simple, diambil dari foxrecord.com. Widget ini akan berfungsi serta merta sebaik sahaja kod diletakkan di blog.

Tutorial untuk meletakkan widget ini adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Masukkan kod berikut ke ruangan HTML/javascript(tidak perlu ubah apa-apa)

<script src="https://sites.google.com/site/unwanted86/javascript/toppostpageview.js" type="text/javascript"></script>

3. Save dan lihat hasilnya. (anda mungkin perlu klik pada 3/4 link dalam blog anda untuk linknya terus berfungsi)

Catatan:
1:Jumlah popular post yang ditetapkan hanya 5.
2:Post terus diletakkan berdasarkan ranking tanpa memaparkan bilangan page view.

Selamat mencoba.

More about → Popular Post Dalam Blog (berdasarkan page view)

Top Commentor Widget

Siapakah yang paling kerap komen pada blog anda.? Jika itu persoalannya, widget ini adalah jawabannya. Widget top commentor ini merupakan antara yang paling 'lengkap' ada ketika ini untuk sesiapa yang menggunakan platform blogger.

Ini kerana, dengan widget ini anda boleh menentukan siapakan yang paling kerap komen dengan ciri-ciri tambahan tertentu iaitu anda boleh tetapkan samada komen untuk keseluruhan blog anda sejak diwujudkan, ataupun pada jangka masa yang tertentu seperti sebulan atau lain-lain jangka masa Selain itu, dengan widget ni, senarai pengomen yang anda tidak mahu masukkan dalam senarai pun boleh dikecualikan.

Tutorial untuk memasang widget top commentor adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript
2. Paste kod berikut ke ruangan HTML/javascript

<script type="text/javascript">
function getYpipe(feed) {
document.write('<ol>');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://URL ANDA.blogspot.com
&ExcludedNick1=NAME1
&ExcludedNick2=NAME2
&ExcludedNick3=NAME3
&ShowHowMany=10
&ExcludeCommentsBefore=08-01-2010 (i.e. 01-01-2010)
&IncludeCommentsBefore=08-31-2010 (i.e. 01-31-2010)
&_callback=getYpipe
&_id=932ec72eca30a5b8a83365f4eb4349cd
&_render=json"
type="text/javascript"></script>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/top-commentor-widget.html">Get this widget here</a></small>

Catatan:
-.Tukarkan URL ANDA dengan url blog anda
-.NAME 1, NAME 2, NAME 3 - letakkan dengan nama yang anda tidak kehendaki. Anonymous automatic terkecuali, Untuk tahu senarai nama yang mungkin anda tidak mahu, savekan dahulu, apabila dipaparkan diblog,baru anda tahu. Jika tidak mahu abaikan bahagian ini.
-.SHOW HOW MANY - gantikan dengan berapa bilangan yang anda mahu dipaparkan
-.Comment Before: Contoh yang diberi adalah coment untuk bulan 8 sahaja. Jika mahu senarai pengomen dari keseluruhan, tinggalkan kosong bahagian ini
3. Apabila selesai, save dan lihat hasilnya.

More about → Top Commentor Widget

Ketahui Jumlah Post dan Jumlah Komen dalam Blog

Berapakah bilangan post dan bilangan komen yang anda terima bagi keseluruhan selama anda berblogging.? Jika itu yang menjadi persoalan, jawapannya adalah mudah sekali.:)



Ikuti tutorial di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript
(masih tidak faham? rujuk sini )

2. Copy kod di bawah dan letakkan ke dalam ruangan HTML/javascript

<center><script style="text/javascript">
function totalPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script></center>
<small><a href="http://tutorialuntukblog.blogspot.com/2011/01/ketahui-jumlah-post-dan-jumlah-komen.html" target="_blank">get this</a></small>

3. Save. Itu sahaja dan lihat hasilnya.

More about → Ketahui Jumlah Post dan Jumlah Komen dalam Blog

Ketahui Kelajuan Load Element Blog

Kecepatan sesebuah blog untuk dibuka oleh pengunjung juga memainkan peranan penting dalam dunia blogging. Selain bergantung kepada jenis browser yang digunakan dan kecepatan internet, perkara penting lain adalah kandungan element yang mencorakkan sesebuah blog.



Bagaimana anda hendak tahu selaju mana blog anda load, dan apakah element yang tidak mendatangkan masalah, dan elemen manakah yang menyumbang kepada masalah lambat load pada blog anda.?

Caranya mudah sahaja.

1. Buka website ini. http://tools.pingdom.com

2. Masukkan url blog anda, kemudian tekan 'test now'


3. Setelah seketika, anda akan dapat sedikit informasi tentang blog anda, dan yang paling penting adalah masa load setiap element. Tindakan seterusnya bergantung kepada kehendak anda.:)


p/s: Kebiasaanya yang menyebabkan lambat adalah gambar beranimasi ataupun javascript.

More about → Ketahui Kelajuan Load Element Blog

Cara Letak Sitemap Di Blog

Sitemap boleh digunakan oleh pemilik blog untuk meletakkan entri yang ada dalam blog dengan lebih kemas/tersusun. Fungsi sitemap hampir sama dengan archive, tetapi sitemap lebih kepada kategori/label, manakala archive lebih kepada susanan entri mengikut tarikh.


Boleh dikatakan sitemap lebih mudah didapati untuk self-hosting, tetapi terdapat juga sitemap yang boleh diletakkan di blogspot. Sitemap untuk blogspot ini adalah berdasarkan kategori/label yang anda masukkan semasa menaip entri blog.

Contoh blogspot yang menggunakan sitemap ini anda boleh lihat di Sitemap OhBest.

Tutorial untuk membuat sitemap ini adalah seperti berikut

1. Dari dashboard > posting > edit pages > new page
2. Copy code berikut dan paste di ruangan pages.

<script style="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/Sitemaprev2.js
"></script>
<script src="http://www.URL BLOG.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

note: Tukar URL BLOG dengan url blog anda

Contoh:


3. Save/publish page anda.
Catatan : Anda juga boleh pilih untuk link manually, dan letakkan link di mana sahaja yang anda rasakan perlu.

More about → Cara Letak Sitemap Di Blog

Tutorial Buat Scroll Box Untuk Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)



Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.



1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>

Catatan: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas



4. Save dan lihat hasilnya.:)

More about → Tutorial Buat Scroll Box Untuk Blog Archive

Energy Saver Untuk Blog Anda.

Blog anda boleh diletakkan dalam mode energy saver jika anda mahu. Kalau dunia realiti ada Earth Hour untuk menunjukkan sokongan kepada penjimatan tenaga, blog anda pun boleh.:)



Contoh blog apabila diletakkan energy saver seperti gambar di bawah.



Tutorial untuk letakkan energy saver ini seperti berikut.


1. Dari dashboard > design > edit html.
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi Find (ctrl + F), cari kod </head>

3. Copy kod di bawah dan paste SEBELUM kode </head>

<script language='javascript' src='https://sites.google.com/site/AryoPanji/javascript/savetheenvironment.js' type='text/javascript'/>

4. Save dan lihat hasilnya.

Catatan: Anda perlu biarkan selama 1 menit untuk energy saver memulakan operasi.:)

More about → Energy Saver Untuk Blog Anda.

Apa Itu SEO

Bergelar seorang blogger, antara perkataan yang akan jumpai dalam dunia blogging ini adalah SEO. Boleh dikatakan SEO ini memang agak glamour terutamanya di kalangan blogger yang sudah agak lama bertapak di dunia blogging.



Bagi blogger baru, mungkin masih tertanya-tanya, apakah sebenarnya SEO ini. Apakah kesan yang dibawa kepada seseorang blogger. Kenapa sesetengah orang terkejar-kejarkan SEO, kenapa sesetengah orang tidak kisah berkaitan SEO. Kali ni admin akan terangkan secara ringkas pengenalan kepada SEO, semestinya kepada blogger baru di arena blogging ini.:)

Apa itu SEO.

- SEO adalah ringkasan kepada Search Engine Optimization. Kalau bahasa mudahnya adalah cara untuk mengoptimumkan apa yang anda buat di blog anda supaya blog anda tersenarai di search engine seperti google, yahoo, bing dan lain².


Apa tujuan SEO.

-Tujuan utama SEO bagi seorang blogger yang menggunakan teknik SEO adalah untuk mendapatkan trafik dari search engine. Kemudian baru berkaitan dengan pagerank, eaning dan sebagainya. Tetapi tujuan utama adalah trafik dari search engine.


Perlu ke SEO pada blogging.

- Pada blogger yang pentingkan trafik untuk ke blog mereka, YA.
Dan paling kurang tahu basic² utama dalam SEO ini.
- Bagi blogger yang berblogging sekadar diari, mengisi masa lapang, atau berblogging sekadar ada blog, SEO tidak begitu penting.


Banyak ke teknik SEO ini.

-Ya, ada banyak teknik SEO.
Admin akan terangkan dalam post-post lain selepas ini.


Kalau buat SEO ni konfirm berjaya ke.?

- Admin tidak boleh kata konfirm. Tetapi bagi sesiapa yang menggunakan dan mencubanya boleh dikatakan akan menampakkan hasilnya.



Contoh hasil SEO.?

Ini admin ambil dari blog admin satu lagi, http://tuju-delapan.blogspot.com. Berkaitan bulan ramadhan, so target SEO admin berkaitan ramadan. Gambar di bawah contoh trafik hasil SEO.




Ada beza ke SEO dan SERP.

Yup berbeza.
SEO - Search Engine Optimizationn - Lebih kepada teknik
SERP - Search Engine Results Page - Kedudukan dalam search engine. (kurang glamour:)



Perkaitan keduanya.?

Power SEO, akan power SERP.
Boleh kata SEO adalah usaha, SERP adalah hasil.

So, apa tekniknya.?

- nanti admin akan bagitahu dalam next entri. Ini kan baru pengenalan.

More about → Apa Itu SEO

Tutorial Sembunyikan FB Fan Page di Blog

Bagi blogger yang mempunyai facebook fanpage sendiri, adalah biasa untuk meletakkan fanpage tersebut di blog. Biasa untuk letakkan di sidebar blog, untuk kali ini admin akan tunjukkan pula cara untuk sembunyikan facebook fan page ditepi blog anda.




Anda juga boleh tengok contoh page yang diletakkan di tepi dalam blog di blog demo ini.

Tutorial sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:
1. Dari dashboard > design > edit HTML
2. Menggunakan fungsi find, (ctrl + F), cari kod </head>
3. Copy dan paste kod di bawah SEBELUM kod </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Nota: Jika anda dapati kode di atas sudah ada sebelum anda copy paste, abaikan langkah 1, pergi terus ke langkah 2.
4. Selepas selesai klik Save Template

Langkah 2:
1. Dari dashboard > design > page element > add a gadget > HTML/javascript
2. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">Tutorial Here</a></span></div></div>

Catatan : ganti "URL PAGE ANDA" dengan url facebook anda.
4. Save atau Simpan

More about → Tutorial Sembunyikan FB Fan Page di Blog

Tutorial Letak Button Follow dan Dashboard Dalam Blog

Dalam template asal blogger, sudah diletakkan untuk widget follower dan juga dashboard. Walau bagaimanapun, anda boleh melakukan sedikit pengubahsuaian. Tutorial kali ini akan tunjukkan cara untuk letak button follow dan dashboard dalam blog seperti gambar di bawah.

Anda juga boleh tengok demo button follow dan dashboard ini di test blog ini.

Tutorial adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang dibuka.

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

Catatan : Gantikan 'ID BLOG ANDA'

Bagaimana untuk cari ID Blog.?
> Anda klik pada 'new post' dari dashboard, dan akan ada paparan seperti gambar di bawah. Noombor yang admin highlight adalah contoh NO ID BLOG

3. Setelah anda selesai letakkan ID blog anda, save dan lihat hasilnya.:)

Update:
TAMBAHAN:
Bagi sesiapa yang mempunyai masalah kehadiran navbar dalam blog, anda boleh hilangkan  

More about → Tutorial Letak Button Follow dan Dashboard Dalam Blog

Tutorial Hilangkan Navbar Pada Blog

Navbar berperanan untuk memudahkan blogger kembali kepada link² tertentu. Walau bagaimanapun, beberapa pengubahsuaian yang dilakukan yang menyebabkan kehadiran navbar ini sedikit menyemakkan.:). Jadi tutorial kali ini akan menunjukkan cara untuk hilangkan navbar pada blog anda.

Antara pengubahsuaian yang menyebabkan navbar ini tidak diperlukan adalah tutorial letakkan button follow dan dashboard dalam blog.

Tutorial untuk hilangkan navbar adalah seperti berikut.
Terdapat 2 cara, anda boleh pilih mana yang bersesuaian dengan blog anda.


CARA 1:

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find ( ctrl + F), cari 'navbar'
(hasil cari biasanya samada navbar-iframe atau navbar sahaja)

3. Dari kod yang ada di bawah navbar,
Tukarkan 'display:block' kepada 'display:none'

contoh:

#navbar-iframe {
display: none ;
}

4. Save dan lihat hasilnya.


CARA 2:

Nota: Cara kedua digunakan jika anda tidak mempunyai 'navbar' dalam 'edit HTML' blog anda.

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi find ( ctrl + F), cari kod body {


3. Copy dan paste code berikut SEBELUM code body {

#navbar-iframe {
display: none ;
}

contoh:
 

#navbar-iframe {
display: none ;
}

nody {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

4. Save dan lihat hasilnya.:)

More about → Tutorial Hilangkan Navbar Pada Blog

Cara Membuat Tombol Share Media Sosial di Blog

Pada kesempatan ini saya akan membahas tentang cara membuat tombol share di blog. Dari sekian banyak cara untuk meningkatkan lalu lintas blog Anda salah satunya bisa dengan memanfaatkan media jejaring social seperti facebook, twitter dan Google+. Dengan media social itu sangat membantu untuk meningkatkan mesin pencari dalam menemukan blog Anda. Yang perlu kita lakukan adalah berbagi postingan blog kita ke situs media tersebut untuk mendapatkan pengunjung ke blog kita. Oke, langsung saja ikuti langkah di bawah ini untuk membuat tombol sharing atau berbagi posting ke media social Facebook, Twitter, Google Plus, Pinterest, StumbleUpon, Delicious, LinkedIn dan Reddit.

1.   Login ke blooger Anda

2.   Klik Template - Edit HTML

3.   Tekan Ctrl+F dan cari kode  :

<data:post.body/>

4.   Saat pencarian Anda akan menemukan beberapa kode yang sama, cari kode pertama saat pencarian.

5.   Setelah menemukan kode tersebut paste kode di bawah tepat selelah kode di atas.

<!-- share start here http://satu-delapan.blogspot.com/ --><b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NwH7z8J8rPp31-gkfnML16bQ4OaxTpuJYgCzJQBEIW18jyhD3EMs94FgNeyASOi5MB1yazeHPt-3VFaVtUnWGVIWM5UDwb5IZ3gFbOKQN_cqNTuexrfzfVaLC12E33W8WPGQBwiPKSc/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCaJHFedXHsuswGLCzROzJApi_i3z9CWTwjMeRyqrnvJ6hHUePeFeqCbLvCqSmPBESjbcU3ClOn1fr5H-ZDlMgTFTmv3IAZCqcoIO0uA-uCeSmoAnnsNyGrid-9-1j3NYy15Du0nOmHU/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgm3-pdMxEwNOE6cxJavUyWUXf3uRIHr7HaFBY1hA8UYb2oxqMcT_rmUoBbEGObU6yCRin2-4GfjdBD-YtkBEQjofwhYFSg3FUS26Td5GesKBpJlhT8gwTT5BcVqmpVpctX9RD82dg7K0/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYmjARAyoKwJT8OSF0EYyz1qoVPkG7w5NwqKmoTTlmh8WrY7-bYWkSO3HYUvdUc0iBHw4gd6fwpngNTAH_85gH6BwqdmIos_PD4nYDIMXB9LvFmHGxWyDaHKsBhYDBeo_h6dcs1h4A_Uw/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxKgE-X-ezvwhGZdsFvc6SlMr_Gf9UsBuQ_RoU-DEPuglrsHfTWsmfd23ijBFs5Ebd8eJJB3RWeiqBxAtcSPHpLNI8txdNXGAG6JSthgZSzs9nIsO_SAE2aHuR9Lh0K4A1-MOX4smprQ/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNKAnSrMD1O9i7BAAXU8DtBD7oVOe2fKf_vOULS5u-9SmCWN3VYEySUgTiPblBnDzHF2B0zvfdIItNG_hTJYpRZoDm9WiPCXa1f1C1Kxs32b07j1XoKYce3hgTiK0AM7em4AgHgSWVuro/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GOKlYJTg70Fo7P8_TsXXfHwOIcIUyUm9UDtslLqYrL3adMw9hoIT2lVk4FSDug-6iQ0CQ5S5RL9z3PIkzJWZafMCfRzHl1TcnX2-iF2GgbiQ9m1hn3Nybay5P_1WNazNcPQZsWbqp14/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9v_VLLLkH3yCeQzIzRhQMoxbZjawiHXjbVy60dwBy3dazAhpagXSnwNgCjrNdnkKLha_mWvHjPOAncAWK5rub52kRhtS-3aXsvAYz502loyXfhEordYNpLNoDsbPSw09BTAkfoSrZpsA/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ-shFDGLW40TULJGdNThGTDisiuYQDbJ2Gz9N8bJTEE4GTHe-5J793K7diIWYYOpVSaHjerLJ1E8IfMs8eZNwvwlEMbbJFTH9oSTQAsK4vklkv2yKhUXyvJufrZxC7gpH4b7E8DH3ptNd/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if><!-- share end here http://satu-delapan.blogspot.com/ -->

6. Langkah terakhir Klik Simpan template. hasilnya seperti gambar di bawah ini:

Gimana cukup mudah kan untuk menambahkan tombol media social di blogger. Apabila ada kesalahan atau tidka jelas silahkan tinggalkan komentar Anda, umpan balik Anda sangat berharga buat penulis .

Sumber : satu-delapan.blogspot.com

More about → Cara Membuat Tombol Share Media Sosial di Blog

Cara Menambah Sitemap Blog di Google Webmaster Tools

Dengan mengirim halaman sitemap blogger Anda ke Google Webmaster Tools akan membantu blog Anda diindeks di Google dan meningkatkan lalu lintas organik maksudnya lalu lintas yang dating ke blog Anda melalui mesin pencari seperti Google. Hal ini sangat penting dengan mengirim sitemap blogger Anda ke Google yang tentunya dalam hal SEO juga dengan memberi tahu Google tentang blog Anda dan isinya. So, setiap kali Anda melakukan postingan baru sitemap Anda akan untuk mengindeks di mesin pencari. Langsung aja ikuti langkah-langkah di bawah ini.

Berikut adalah beberapa langkah mudah yang harus lakukan untuk mengirim sitemap blogAnda:  

1.   Login ke Google Webmaster Tools.

2.   Klik pada blog yang Anda ingin menambahkan sitemap

3.   Klik tombol sitemap seperti gambar di bawah ini :

4.  Next, perhatikan di sudut kanan atas halaman, klik Tambahkan/Uji Peta Situs – lihat gambar di bawah :

5.   Selanjutanya akan muncul kotak kecil dengan URL blog Anda

6.   Tambahkan kode di bawah ini setelah URL blog Anda

atom.xml? redirect = false & start-index = 1 & max-results = 500

kode di atas adalah kode untuk sitemap blog Anda yang akan ditambahkan

7.   Klik Uji Peta Situs, bila Anda ingin memastikan tidak terjadi kesalahn

8.   Klik Mengirim Peta Situs

9.   Terakhir segarkan atau Refresh halaman

Dengan menyelesaikan langkah di atas Anda telah berhasil mengirim sitemap blog Anda.

Keterangan :

Pada code sitemap diatas berfungsi untuk 500 postingan, jika Anda memiliki lebih dari 500 postingan maka Anda harus menambah satu sitemap lagi bisa dengan nilai yang berbeda tergantung kebutuhan Anda. Untuk menambah sitemap baru langkahnya sama seperti diatas.

Sumber : satu-delapan.blogspot.com

More about → Cara Menambah Sitemap Blog di Google Webmaster Tools

Cara Membuat Sitemap HTML di Halaman Blogger

Sitemap blog digunakan untuk pengindeksan postingan blog sehingga memudahkan kita dalam pencarian. Pada hari ini saya akan berbagi tutorial tentang membuat sitemap HTML untuk pembaca blog Anda sehingga mereka dapat mudah memilih postingan yang ingin dibaca. Pada halaman sitemap blogger akan di tampilkan semua postingan blog Anda di satu halaman blog Anda. Ok, langsung saja…

Ikuti langkah-lankah di bawah ini :

1. Login ke Blog Anda.

2. Sekarang Arahkan ke laman -Laman Baru -Halaman Kosong .

3. Beralih ke HTML Mode.

4. Paste kode dibawah dan beri judul entri contents atau daftar isi tergantung Anda :

      <!--start here http://satu-delapan.blogspot.com/ -->
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://tuju-delapan.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
<!--end here http://satu-delapan.blogspot.com/ -->

Ganti http://tuju-delapan.blogspot.com/ dengan URL blog Anda sendiri.

5. Klik Preview untuk memastikan tidak ada kesalahan.

6. Selanjutnya Publish

7. Langkah selanjutnya untuk menambahkan ke halaman blog, masuk lagi ke Laman - klik kanan tab lihat - open link in new tabs - copy links sitemap.

 8. Setelah di copy waktunya untuk menampilkan di halaman blog. klik Template - Edit HTML - cari menu nav atau control+F ketik Home</a>  

9. Next, tambahkan link untuk sitemap atau daftar isi yang sudah kita publish di navigasi menu. tambahkan <li><a href='http://satu-delapan.blogspot.com/p/daftar-isi.html'>Daftar Isi</a></li>

10. Ganti code yang berwarna kuning dengan url yang sebelumnya kita copy (url sitemap anda), blok - klik kanan - paste. lihat gambar di bawah :

11.  Langkah terkahir Pratinjau dan Simpan template.

12. Sampai disini Anda telah berhasil menambahkan halaman sitemap di blog Anda seperti gambar di bawah ini.

Sumber : satu-delapan.blogspot.com

More about → Cara Membuat Sitemap HTML di Halaman Blogger

Mengubah Warna Hyperlink di Blogger

Desain terbaik dengan huruf yang sempurna dan warna link membuat blog kita lebih professional. Ketika kita ingin menggunakan template yang ada pada blog kita, kita perlu menyesuaikan dengan kebutuhan kita seperti mengubah font teks, ukuran font, warna hyperlink, dll. Itu sebabnya untuk membuat segalanya muda bagi para blogger saat ini saya membawa tutorial tentang cara mengubah warna hyperlink di blogger.

Lakukan langkah-langkah berikut untuk mengganti warna link dengan warna-warna yang  Anda ingin :

1. Login ke akun Blogger Anda.
2. Masuk ke Temlplate - Edit HTML
3. Sekarang tekan Ctrl  + F dan ketik <b:skin> untuk memudah dalam pencarian
4. Klik tanda panah hitam untuk expand code
   
5. Sekarang Anda akan melihat CSS style dari template anda, disini anda harus mencari Link Style. Tiap template blogger mempunyai komen sendiri dalam mediskripsikan CSS style nya. Pada Template penulis terlihat komenya dengan nama "Global Links CSS" seperti gambar di bawah ini :
   
   
   
   
   
   
6. Sekarang edit pada style {color:#32A4D6;} ganti dengan warna yang akan Anda gunakan untuk hyperlink.
   
7. Anda juga dapat menghilangkan garis bawah timeline dengan mengedit {text-decoration:underline} ganti dengan bold pada underline.  

8. Preview dan menyimpan template

9. Done.

Gimana Sob? ngerti kan sekarang?.

More about → Mengubah Warna Hyperlink di Blogger