Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon

Pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang bagaimana Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon di Blog, dan ini juga menjadi salah satu tutorial by request dari salah satu sahabat blogger yaitu Endiglobs.

Ok, sebenarnya ini bukanlah suatu keharusan untuk di ganti, tetapi kadang-kadang sebagian blogger lebih menyukai icon ketimbang sebuah teks karena tentu saja blog akan terlihat lebih menarik karena ada navigasi berupa icon, khususnya pada Posting Baru, Posting Lama dan Home.

Langkah-langkah menggantinya seperti di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Ganti beberapa kode seperti di bawah ini:

* Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut: <data:newerPageTitle/>

lalu ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Previous.png'/>

* Untuk mengganti tulisan Posting Lama (Older Post) cari kode berikut: <data:olderPageTitle/>

lalu ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Next.png'/>

* Untuk mengganti tulisan Home (Home Page) cari kode berikut: <data:homeMsg/>

lalu ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/sphericalcons/48/home.png'/>

4. Untuk icon silahkan di ganti dengan selera masing-masing dan bisa dicari di sini.

5. Jika sudah tinggal klik Save Templates.

Seperti itulah Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon, semoga bisa bermanfaat untuk membuat lebih menarik blognya dan selamat mencoba, salam

Membuat Back To Top Dengan Smoothscroll jQuery

  Back To Top merupakan sebuah aplikasi tambahan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini.

[image src: deconstructioncode.blogspot.com]

Kali ini saya ingin share kepada teman-teman semua tentang bagaimana Membuat Back To Top Dengan Smoothscroll jQuery, sedikit berbeda memang dengan cara memuat Back To Top yang biasanya kita jumpai (tanpa edit HTML).

Tapi ini kita harus sedikit mengutak atik templates namun hasilnya bisa saya katakan sedikit lebih baik, karena ini adalah Smoothscroll jQuery, ketika kita klik tulisan Back To Top (silahkan di coba di dalam blog ini) maka dia akan perlahan-lahan naik ke atas dengan smooth (lembut dan santai).

Fungsi:

Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".

Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Cari kode berikut: </head> lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi:

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

4. Lalu lanjutkan dengan menaruh kode javascript di bawah ini persis di bawah script jQuery tadi:

<!-- Back To Top -->
<script src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->

5. Terus cari kode <body> dan gantikan dengan <body id='top'>

6. Lanjutkan dengan mencari kode ]]></b:skin> dan masukkan kode CSS di bawah ini di atas kode ]]></b:skin>

#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

7. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

8. Jika sudah dikerjakan dengan benar, maka klik Save Templates.

Note:

1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (biar tidak double), lanjutkan saja dengan langkah selanjutnya,
2. Untuk merubah warna, posisi dan tulisan cek di di bagian tulisan yang saya beri warna HIJAU.

Referensi:

- Deconstructioncode [http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html]- David Walsh Blog [http://davidwalsh.name/jquery-top-link]- Riky Rizkiyana [http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-back-to-top-menggunakan.html]

Seperti itulah Cara Membuat Back To Top Dengan Smoothscroll jQuery, semoga bisa teman-teman coba di blognya dan bisa bermanfaat. Salam.

Membuat Judul Sidebar Rata Tengah ( Center Position )

  Met sore teman-teman semua, berhubung internet di rumah lagi hancur (lemot kayak siput, quota habis), akhirnya update artikel nya di warnet sambil menunggu waktunya Habis, Lumayanlah juga ambil PaHe 3 jam 5 ribu, hehehe
  Ok, hari ini saya ingin share kepada teman-teman semua tentang bagaimana cara Membuat Judul Sidebar Widget Rata Tengah (Center Positions), menarik bukan?

  Begini, terkadang untuk sebagian besar templates bawaan default untuk semua posisi Judul berada di Rata Kiri (Left Positions) termasuk templates saya yang sekarang ini, tetapi kalau bagi mata saya (khusus untuk judul sidebar widget) rata kiri tidak enak untuk dilihat (note: berbeda orang beda pendapat).
  Nah, karena penampilan blog selalu menjadi perhatian saya (blog terlihat klop secara keseluruhan) agar bisa juga dinikmati dengan nyaman khususnya oleh teman-teman dan umumnya untuk para pengunjung, maka saya pun mengambil inisiatif mencari cara bagaimana agar Judul Sidebar Widget tersebut berada di rata tengah.

lihat pict

Bagi teman-teman semua yang ingin membuat Judul Sidebarnya berada di Rata Tengah, silahkan ikuti langkah-langkah di bawah ini:
1. Login akun blogspot,
2. Masuk Ke Dasbor >> Rancangan >> Edit HTML >> Centang Expand Templates Widget,
3. Lalu cari kode berikut: .sidebar h2 {
Kode tambahan (untuk membuat menjadi rata tengah): text-align:center;

Ket:
- Apabila diurutan kode tersebut sudah terdapat kode: text-align:left; maka yang hanya diubah adalah tulisan 'left' nya diganti menjadi 'center',
- Apabila kode: text-align:left; nya tidak ada maka tambahkan kode: text-align:center; berada setelah kode: .sidebar h2 {
4. Jika sudah, sekarang bisa klik Save Templates.

Note:
  Cara ini juga bisa digunakan untuk Judul Widget pada Footer, langkah-langkahnya juga sama seperti di atas, teman-teman hanya perlu mencari kode: #footer { atau id.footer atau #bottom h2 { (disesuaikan saja, tiap templates berbeda). Lalu bisa juga untuk Judul Postingan, silahkan cari kode .post h3 {
  Seperti itulah cara Membuat Judul Sidebar Widget Rata Tengah (Center Positions), semoga bisa bermanfaat dan selamat mencoba. Salam...

Cara Membuat Navigasi Nomor Halaman Pada Blog Kita

  Sebenarnya tutorial seperti ini sudah bejibun bisa teman-teman temukan di Google, termasuk saya sendiri sudah mencobanya dengan keyword: page number atau membuat nomor halaman, hasilnya wow sampai ratusan ribu blog (termasuk punya saya ini, apabila nanti terindeks Google, ngarep.com, hahaha).

  Saya juga sudah mencoba beberapa script yang ada di sana (karena saya juga ingin memasangnya di blog ini), tetapi hasilnya Trial n No Respon artinya GA BISA, wkwkw, karena faktor Templates, padahal sudah beberapa templates sudah saya gunakan :(
  Makanya sering saya sampaikan di beberapa artikel terdahulu bahwa: Harap disesuaikan saja kodenya, karena tidak semua templates sama, malah terkadang kode yang dimaksud ga ketemu alias ga ada

  Ok, buat teman-teman yang mau Membuat Navigasi Nomor Halaman [Page Number Navigation], ini saya ada Alternatif lainnya (insyallah bisa digunakan di templates teman-teman):

  Ket: Untuk hasilnya ada perbedaan dengan Page Number yang lain, tentu saja, kan ini alternatif Demonya bisa langsung dilihat di dalam blog ini, atau...

lihat pict

1. Login ke akun Blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,
3. Lalu cari kode berikut (Ctrl F): <b:include name='nextprev'/>

[Harap disesuaikan saja kodenya, karena tidak semua templates sama],
4. Gantikan kode tersebut dengan kode di bawah ini:

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>
<script type="text/javascript">

var blogID = "12345678910";
var home_page = "http://tipsdantrikyusuf.blogspot.com/";
var pager_max_main = 1;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";

</script>
<script src="https://sites.google.com/site/anggasonaanotherbestblog/javascript/page_numbering_v2.js"
type="text/javascript"></script>
</b:if>

Note:

a. Harap di ubah var blog ID nya dengan ID blog teman-teman,
b. Ganti var home_page dengan alamat URL blog teman-teman,
c. var pager_max_main = 1 ini adalah kode untuk menampilkan seberapa banyak artikel dalam 1 halaman, bisa diganti dengan 2, 3, 5 terserah teman-teman.
5. Jika sudah dikerjakan dengan teliti, maka sekarang klik Save Templates.

Seperti itulah Cara Membuat Navigasi Nomor Halaman [Page Number Navigation] - Alternatif, semoga bisa terpasang dengan baik di blog teman-teman semua, selamat mencoba. Salam.

Design Template: Header dua Kolom

Kembali saya sharing tentang Design Template, setelah kemarin saya sharing tentang Blogger Tricks dan menulis artikel tentang Blogger Indonesia Dukung Internet Aman, Sehat & Manfaat. Nach, kali ini tutorialnya focus pada header dan tepatnya membagi header menjadi dua kolom

Fungsinya adalah untuk menambahkan widget pada header blog anda, disana anda bisa meletakkan artikel-artikel terpopuler anda, menambahkan pesan khusus yang disampaikan kepada pengunjung anda, atau meletakkan iklan bagi yang suka monetize blog.
Berikut tutorialnya:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Backup dulu template anda untuk berjaga-jaga bila terjadi kesalahan bisa dikembalikan seperti semula
• Percobaan saya pada template Minima yang memiliki lebar header-wrapper 660px

• Setelah itu, ganti lebar header menjadi 360px dan float menjadi left

• Sekarang buat kode untuk header kedua yaitu disebelah kanannya float:right
  

#header2 { float:right; width:250px; }

• Kemudian Copas dibawah kode header pertama

• Selanjutnya Copas kode berikut dibawah </b:section> pada <div id='header-wrapper'> seperti berikut:

Kodenya:

<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>

Hasilnya:

• Setelah itu, Save Template anda..

Blogger Triks Cara Menghilangkan Show All Post

  Nach, salah satunya adalah "Show All Post atau Tampilkan Semua Posting, dll". Kalimat ini akan muncul jika sahabat blogger mengklik salah satu label atau kategori pada salah satu artikel blog, Lihat gambar dibawah:

Berikut cara menghilangkannya:

• Cari kode berikut, biar lebih gampang mencari kodenya tekan F3 atau CTRL+F kemudian kopas kode berwarna merah pada search atau cari:

<b:includable id='status-message'>

<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

• Ganti seluruh kode tersebut dengan kode dibawah:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
</b:if>
</b:includable>

• Selanjutnya Save

Agar Blog Cepat Terindeks, di-Ping Google aja

Blog cepat terindek search engine tentu menjadi harapan kita semua. Buat apa capek-capek bikin postingan kalau tidak dikenali oleh google, akan menjadi pekerjaan yang sia-sia.  Meskipun cara perayapan robot google sudah terjadwal namun akan lebih diprioritaskan kepada postingan yang ramah dan dicintai mesin sang robot. 
Seperti halnya kenyataan di kehidupan kita yang nyata, ambil contoh saja semisal kita terjebak dalam antrian yang panjang, tentu kita harus sabar menunggu kapan giliran kita.  Berbeda dengan orang yang sudah dikenal oleh petugas yang jaga antrian, tidak akan mengalami hal yang sangat menjemukan menunggu dan menunggu.

Blog yang notabene sudah mempunyai jam terbang tinggi menjadi prioritas dalam perayapan search engine alias lebih cepat terindeks google.  Lantas bagaimana nasibnya blog-blog rencekan yang belum terkenal?  Jangan bersedih dulu, karena ada cara yang dapat ditempuh agar blog cepat terindeks yaitu dengan melakukan Ping ke Google.

Tapi perlu diperhatikan juga, ada rambu-rambu yang harus dipatuhi yaitu janganlah melakukan ping secara berlebihan karena bisa dianggap spam. Cukup hanya pada saat setelah membuat postingan baru.

Bagaimana cara melakukan ping?

1. Kunjungi http://blogsearch.google.com/ping
2. Masukkan alamat url blog anda (alamat postingan juga boleh)
3. klik Submit Blog
4. Bila berhasil  akan muncul pesan “Thanks for sharing your blog” seperti gambar di bawah ini.

Selamat mencoba melakukan Ping Google agar cepat terindeks

Cara Membuat Footer di BLog Menjadi 3 Kolom

  KEREN .. Acara ngeBlog emang paling enak, duduk manis, ngopi manis, merokok (( bagi yang suka merokok )) sekaligus ndengerin musik .. Fiuhh pasti enak banget, ditemani cewek cantik lageee .. suit suit .. nggak bisa ngegambarinnya tuh .. hehe basa basinya udahan dolo .. sekarang ane mau ngasih ente tips untuk ngebuat footer menjadi tiga kolom .. tau nggak ente dengan footer .. footer itu tambahan gadget yang terletak paling bawah .. kelebihan footer 3 kolom, tu bisa muat artikel atau apapun menjadi berdampingan .. iya nggak ?? sekarang mulai aja ..

Pertama ente masuk ke

Blogger

Kemudian isi dengan ID ente dan Password ente hehe

Masuk lagi ke Tata Letak, kemudian cari Edit HTML

Setelah itu baru ente kasih kode dibawah ini tepat diatas kode </b:skin>:

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Kemudian cari kode dibawah ini :

<div id='footer-wrapper'>

<b:section class='footer' id='footer'>
</div>

Catatan : kode yang diberi warna merah diganti dengan kode ini :

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left;

margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'

preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col3'

preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#ffae00' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:

10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

   Save template ente dan kemudian liat di tata letak blog ente sendiri .. pastinya udah menjadi 3 kolom .. kalau error, ya terpaksa diulang lagi, pasti ente kurang memperhatikan cara-cara diatas dengan seksama atau malah tidur neh ente sekalian

Script Untuk Salam Pembuka Pada Blog

  Halo .. apa kabar, mestinya baek2 aja khan .. langsung to the point aja ya .. ane ada sedikit kabar bagi ente yang suka memberikan salam kepada sesama saudara kita .. sekarang ini dengan canggihnya teknologi, semuanya bisa dikerjakan secara otomatis, dan salah satunya adalah salam pada blog kita karena udah dikasih caranya dan tinggal kita terapkan aja, tapi bisa nggak ya ?? ya itu tergantung dari diri kita sendirilah tentunya, bisa nggak ?? hehe bercanda doang kok, mestinya semuanya udah pinter2 kali ya .. yup lanjut .. sekarang langsung taruh script yang ane kasih di sini ya ..

Pertama-tama kamu masuk di Rancangan dan ke Edit HTML .. setelah itu taruh script di bawah ini diatas kode  
</head>

<script language='JavaScript'>alert(&quot;^-^ Met apa aja all .. silakan mampir di blog ane yang sederhana ini &quot;);</script>

<script language='JavaScript'>alert(&quot;^-^ Oiya .. salam manis bwt kamu yang dah klik blog Yusuf Mcsoft89 ini .. &quot;);</script>

<script type='text/javascript'>
var yourName = prompt(&quot;Ehm boleh kenal nggak ?, siapa sih nama kamu ? ??&quot;, &quot;Tulis dong nama kamu disini .. &quot;);

</script>

Yang ditebali bisa diganti sesuka hati kalian

Percepat Loading Blog Anda dengan Mengompress Kode Template

Selain dengan mengompres setiap gambar yang kita gunakan, juga ada cara lain yang bisa kita lakukan untuk mempercepat loading blog, yaitu dengan mengompres kode CSS yang ada di halaman edit HTML.
Tujuan dari kompres CSS ini adalah untuk meringankan beban file template blog. Caranya yaitu dengan mengurangi spasi dan meringkas penulisan setiap kodenya. Sebenarnya ini bisa kita lakukan secara manual satu persatu. Tapi tentu sangat merepotkan. Karena itu agar lebih prakits kita gunakan layanan gratis dari situs cssdrive. Sehingga dengan sekali klik seluruh kode CSS sudah terkompres secara otomatis.

Tapi sebelum melakukan ini pastikan bahwa anda akan jarang melakukan utak-atik template. Karena setelah kode CSS dikompres, susunannya akan menjadi sangat rapat, dan jika anda belum terbiasa bergelut dengan bahasa kode tentu hal ini jadi menyulitkan. Walaupun sebenarnya tetap bisa disiasati dengan menyimpan backup templatenya, Sehingga sewaktu-waktu bisa anda gunakan kembali jika ingin mengedit template.

Nah, jika anda sudah paham, sekarang anda sudah bisa mengikuti beberapa langkah di bawah ini:

1. Masuklah terlebih dahulu ke halaman dasbor blog anda dan kliklah "Rancangan".
2. Kemudian kliklah "Edit HTML".
3. Jangan lupa "download template lengkap" dulu untuk berjaga-jaga.
4. Selanjutnya copylah (atau langsung cut) semua kode CSS yang terletak antara kode
<b:skin><![CDATA[/*
dan kode
]]></b:skin> 

Setelah itu bukalah situs cssdrive atau anda langsung klik di sini. Maka setelah situs itu terbuka, perhatikanlah beberapa pilihan yang tersedia.

Makin ke bagian bawah yang anda centang pada menu kedua kelompok tersebut maka makin tinggilah tingkat kompresinya. Itu artinaya susunan kode CSSnya juga akan semakin rapat. Karena itu centang lah sesuai dengan kesiapan anda menerima kerapatan susunan kode CSSnya.

Jika sudah, pastekanlah kode CSS template anda tadi pada kotak yang sudah disediakan. Kemudian kliklah tombol compress it. Dan tunggulah hingga prosesnya selesai.

Nah, inilah hasil kompresinya. Di bagian bawah kotak kode tampak perbandingan berat file sebelum dan sesudah dikompres. Termasuk jumlah persentase pengurangnnya. Sekarang anda tinggal klik tombol Hightlight Code untuk menyorot semua kode CSSnya. Setelah itu copylah kode tersebut.

Selanjutnya masuklah kembali ke halaman Edit HTML blog anda dan pastekan lah semua kode ini kembali diantara kode
<b:skin><![CDATA[/*
dan kode
]]></b:skin>.

Setelah itu simpanlah template anda.

Nah selamat mencoba dan semoga loading blog anda akan terasa lebih cepat dibanding sebelumnya.

Cara Menghilangkan Tulisan Tampilkan Entri Lawas Di Dalam Blog, Blogger

  Itulah pengaturan standar dari blogspot. Tetapi sebagian blogger merasa terganggu dengan tampilan lawas ini. Alasannya membuat halaman posting kurang rapi, terlalu ribet dan mempengaruhi loading blog. Nah, terlepas dari apa yang menjadi alasan, jika anda juga ingin menghilangkan kotak tampilan entri lawas ini, anda bisa lakukan langkah-langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.
3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.  
4.Kemudian centanglah Expand Template Widget. 
5. Kemudian carilah kode: <b:includable id='status-message'>
6. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.

7. Kemudian scroll sedikit ke bawah, maka akan tampak beberapa baris kode pengiringnya, sehingga lengkapnya akan terlihat seperti dibawah ini.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

8. Nah, sekarang gantilah semua kode tersebut dengan kode di bawah ini. Agar lebih mudah anda bisa copy saja lalu timpalah (pastekan) tepat pada semua kode di atas.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

9. Jika sudah jangan lupa klik SIMPAN TEMPLATE dan tunggu hingga proses penyimpanan selesai.
10. Sekarang lihatlah hasilnya dengan mengklik Lihat Blog. Kemudian cobalah klik salah satu label blog anda. Apakah tulisan tampilkan entri lawasnya masih muncul atau sudah hilang. Selamat mencoba!
 
 

Cara Mengatasi Blog, Blogspot Yang Di Hapus Oleh Blogger

   Mungkin para sobat blogger sudah pernah mengalami blog blogspot sobat di hapus oleh blogger atau belum pernah..hhehee jangan sampai dah..., salah satunya blog ini yang di hapus oleh blogger, entah kenapa blog ini langsung di hapus oleh blogger dan bukan hanya blog saja yang di hapus tapi akun saya pun terkena imbasnya.

sobat bisa lihat gambar di bawah ini sebagai bukti bahwa blog ini pernah di hapus oleh empunya.

klo udah gini waahhhh bisa berabe..hehehh

saya ingin berbagi pengalaman dengan sobat untuk mengembalikan blog yang telah dihapus oleh blogger.

caranya :

1. Masuk ke akun gmail sobat

2. Masukan no hp ke dalam kotak yang telah disediakan dan klik verifikasi

3. Masukan kode verifikasi yang telah di kirim ke hp sobat

4. Masukan kata sandi baru untuk verifikasi

5. Coba untuk Login dengan akun dan kata sandi baru yang telah diverifikasi tadi

Semoga Bermanfaat

Membuat Tampilan Komentar Admin Berbeda

  Sering kita temukan disuatu blog terdapat background commentar yang berbeda dengan pengunjung. Perbedaan tampilan komentar sangatlah membantu pengunjung untuk mengetahui siapa pemilik dari blog tersebut. sebenarnya ini article menjawab salah satu pertanyaan teman kita. yang rasa penasaran tentang adanya tampilan komentar admin yang berbeda dengan pengunjung. Semoga dengan ada article ini dapat membantunya dan bagi yang belum mengerti juga tentunya. nah untuk membuat nya ikuti saja langkah-langkah di bawah ini.

Pertama-tama Log in dulu ke blogger 
Tata letak
Klik Edit HTML
Cari kode ]]</b:skin>
Copy paste kode dibawah ini sebelum kode diatas
 
 
.comment-body-author {
background: #ebebeb;
border:1px dotted #000000;
margin:0;
padding:0 0 0 20px;
} 


background = untuk warna latar belakang silahkan ganti dengan warna yang cocok dengan background anda
border = untuk ketebalan garis
 
Kemudian temukan kode berikut atau pokus <dl id='comments-block'>


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'
rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
 
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Untuk kode yang berwarna merah adalah kode yang harus ditambahkan ke dalam tamplate anda sesuai dengan posisi kode diatas
Setelah itu simpan tamplate anda dan lihat hasilnya. semoga berhasil

.........  Selamat mencoba  .........

Memahami Bagian - Bagian Di Dalam Blogger

Secara garis besar sebuah blog terdiri dari 4 (empat) bagian yakni Navbar, Header, Blog Post, dan Sidebar. ke empat bagian tersebut senantiasa ada dalam sebuah blog yang dibuat dalam Blogspot.com apapun jenis template yang digunakan. Terkait dengan hal tersebut. berikut penjelasan mengenai bagian-bagian nya.

• Navbar
  
  Bagian blog ini akan tampak apabila anda menggunakan domain Blogspot.com untuk menampilkan blog anda. bukan custom domain loh. Navbar merupakan bagian blog yang terletak pada posisi paling atas blog. Pada bagian ini, anda bisa menemukan 3 (tiga) menu, yakni New Post, Customize, dan Sign Out. Keberadaan menu tersebut pada navbar berfungsi untuk memudahkan dan mempercepat anda apabila ingin membuat post baru, mengedit elemen blog, dan keluar dari blog anda.
  
• Header
  
  Merupakan bagian dari blog yang terletak di bawah navbar. Bagian ini menampilkan judul dan deskripsi blog. Anda tidak hanya mengubah warna dan jenis font serta background header saja, tetapi anda bisa memasukkan image atau gambar pada bagian tersebut.
• Blog Post
  
  Sesuai dengan namanya. bagian ini menampilkan post-post yang anda publikasikan kedalam blog anda baik berupa artikel, gambar, maupun video. dibandingkan dengan bagian blog lainnya, area untuk bagian ini lebih luas karena blog post merupakan inti dari blog.
• Sidebar
  
  Sidebar merupakan bagian dari blog yan bersebelahan dengan blog post. Bagian ini terletak di sisi kanan atau kiri blog post sesuai dengan template yang anda pilih. secara default, elemen dari sidebar yang muncul adalah abaut me dan blog archiv. Meskipun demikian, anda bisa menambahkan elemen lain ke dalam bagian ini, misalnya seperti kalender, polling, slideshow, dan lain sebagainya.

Membuat Label Menjadi Flash Animasi

Ini berawal dari saya melihat flash animasi yaitu di dalam kotak da tulisan-tulisan yang bergerak-gerak, lalu dengan sengaja saya cari cari cara membuatnya, Label yang di fitur blogger standart menjadi tidak standart.

Kalau biasanya seperti ini:
Komputer (12)
Photoshop (45)
CorelDraw(8)
Maka dengan fitur widget yang baru ini maka label akan berubah menjadi bentuk flash animasi, seperti punya saya tu!
Tahu gak?

Caranya Gimana?
Pertama, pilih Tata Letak > Edit HTML
Kedua, centang Expand Template Widget
Ketiga, cari kode di bawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

Keeempat, Kalau sudah ketemu taruh script berikut ini di bawahnya.



<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/ruangsc/enes/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://twitter.com/kurniasepta'>@kurniasepta</a> Distributed by <a href='http://tipsdantrikyusuf.blogspot.com/'>Kumpulan Tutorial | Tutorial Blog | Tips Dan Trik Komputer</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "300", "300", "7", "#333333");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "200");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Cara Mempercepat Loading Blog Anda

Hal yang dapat menarik pembaca ke Blog anda adalah isi dari blog tersebut, namun disamping itu kecepatan blog juga sangat berperan penting dalam menarik pengunjung, apalagi bila pengunjung tersebut baru pertama kali datang ke blog anda.

Coba anda bayangkan... ada pengunjung yang datang ke blog anda namun karena loading blog anda sangat lambat apa yang akan mereka lakukan? Tentu saja mereka akan segera menutup blog anda bukan?

Nah... jika anda merasa blog anda sangat lambat, wajib untuk baca yang satu ini. Untuk itu saya sudah menyiapkan beberapa cara untuk mempercepat blog anda.
Oke, kita langsung saja!

Hal-hal yang mempengaruhi kecepatan blog anda yaitu:

Postingan Anda
Kecepatan blog anda sangat dipengaruhi oleh jumlah postingan anda yang terdapat pada halaman utama. Semakin banyak jumlah postingan anda yang berada di halaman utama, maka semakin lambat pula blog anda.
Nah.. Untuk itu anda harus mengatur jumlah postingan yang ada di halaman utama anda tersebut. Caranya pergi ke menu "Setting | Formatting" tab. Disana anda dapat mengatur jumlah postingan anda yang ingin ditampilkan.
Untuk hasil yang optimal, atur jumlah postingan anda tidak lebih dari 10 post karena semakin sedikit jumlah postingan yang anda tampilkan maka semakin cepat loading blog anda.


Link dan Javascript dari Pihak Ketiga

Untuk memperoleh hasil yang optimal, sangat disarankan untuk menggunakan Link, widgets dan Javascripts dari Blogger. Namun, jika anda ingin menambahkan widget dari luar sebaiknya anda taruh di bagian bawah blog anda saja atau jika anda menaruhnya di sidebar sebaiknya anda taruh di bagian paling bawah sidebar anda untuk memperoleh kecepatan yang optimal.

Foto dan Video
Kalo yang satu ini udah pasti ngebebani blog kita... malah bagian ini yang paling berat lagi untuk blog kita. Semakin banyak kita memesang gambar di blog, maka semakin lambat pula loading blog kita. Tapi meskipun berat-berat begitu, bagian multimedia ini juga gak kalah pentingnya dari postingan yang kita buat.

Dengan adanya Multimedia seperti Foto dan Video di blog kita, maka pengunjung akan semakin tertarik untuk melihatnya, selain itu juga dapat memperindah blog kita.
Tapi gimana caranya memasang banyak gambar tapi kecepatan blog kita tidak menurun ya?
Berikut ada beberapa tips untuk anda agar blog anda tetap kenceng meskipun banyak gambarnya..

• Kurangi ukuran gambar anda atau gunakan thumbnails yang mengarah ke link foto/gambar yang sebenarnya.

• Sebaiknya Upload gambar anda di Image Hosting agar blog anda tidak terbebani dengan gambar-gambar yang anda Upload. Ada beberapa Image Hosting yang dapat anda pilih tapi sebaiknya gunakan yang cocok untuk blogger seperti Picasa Web Album.

Untuk mengetahui seberapa cepat loading blog anda, anda dapat menggunakan fitur layanan dari Numion yaitu Stopwatch. Dengan menggunakan layanan ini, anda dapat mengetahui seberapa cepat loading blog anda.
Kecepatan loading blog saya hanya 20 detik ... Berapakah kecepatan blog anda? ;)

Mengubah Lebar Template Blogger

  Buka blog anda, Masuk menu Tata Letak > Edit HTML > Centang Expand Widget, Demi keamanan Back Up dulu data template anda..! ( copy –paste ke notepad atau word ).

Temukan angka width dari #header-wrapper, #outer-wrapper, dan #footer, #main-wrapper ,#sidebar-wrapper, yang merupakan patokan dari lebar halaman. untuk memudahkan pencarian tekan ctrl+f kemudian paste ke kota find. Angka yang saya blok merupakan ukuran width :

Untuk nilai width : #header-wrapper, #outer-wrapper dan #footer adalah sama, anda bisa rubah ke 750 px semua.

Dan untuk nilai width : #main-wrapper ,#sidebar-wrapper, bisa anda atur sesuai keinginan anda, main wrapper merupakan kolom posting anda dan sidebar adalah tampilan sebelah dari posting anda. Dan diantara kolom posting dan sidebar ada jarak beberapa pixel, agar antara kolom posting dan sidebar tidak terlalu dempet.

Jadi seperti ini ( contoh ) anda bisa ganti width dari masing-masing ukurannya :

#header-wrapper, #outer-wrapper, dan #footer,

750 px, 750 px, 750 px

#main-wrapper ,#sidebar-wrapper

470 px + 30 px ( jarak antara, anda bisa atur sendiri ), 250 px.

Untuk melihat hasilnya klik Preview

Apabila sudah selesai klik Save

Cara Mengaktifkan U Comment I Follow

  

Pertama : Cek dulu blog anda, apakah jangan - jangan tanpa di sadari udah Do Follow, emang sulapan :D . Cara ngeceknya begini, coba aja lihat di postingan yg sudah ada commentnya. Kemudian select satu comment aja dari nama sampai isi posting trus klik kanan - pilih View Selection Source (Untuk FireFox). Dan lihat apakah di dalam html tsb ada rel=”nofollow” kalau masih ada text "no follow" artinya blog masih belum do follow.

  Kedua : Cara mengubahnya, seperti biasa masuk ke blog anda (menu tata letak - HTML), jangan lupa "biar nongol semua scriptnya, dan cari script berikut :

<a expr:href='data:comment.authorUrl' rel='nofollow'>

<data:comment.author/></a>Ganti menjadi :

<a expr:href='data:comment.authorUrl' rel='external'>
<data:comment.author/></a>

  Ketiga : Cari script berikut :

<a expr:href='data:backlink.url' rel='nofollow'>
<data:backlink.title/></a>

Ganti menjadi :

<a expr:href='data:backlink.url' rel='external'>
<data:backlink.title/></a>

Ok selesai! Selamat berbagi backlink!

Cara Membuat Iklan Melayang ( Pop Up Iklan ) Di Dalam Blog

<style type="text/css">
#topbar{
position:absolute;
top:600px;
left:600px;
border: 3px #00FF00;
padding: 2px;
background-color: black;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>
<script src="http://h1.ripway.com/icalcell/js_pop_up.js" type="text/javascript"></script>

<div align="center">
<div id="topbar">
<div align="right"><a style="color: gray; font-weight: bold; font-style: italic;" href="" onclick="closebar(); return false"><span><button>Close</button></span></a></div>
<p><a style="font-weight: bold; color: gray;">
</a><a style="font-weight: bold; color: gray;" title="cara mudah dapatkan uang dari internet">
</a></p><p><a style="font-weight: bold; color: gray;" title="cara mudah dapatkan uang dari internet">
</a></p><p><a style="font-weight: bold; color: red;" title="cara mudah dapatkan uang dari internet">Tes Keberuntungan kamu dengan klik 1 iklan saja</a>


</p><center>
<script src="http://kumpulblogger.com/dam.php?b=51484" 

type="text/javascript"> </script>
</center>

<p></p><p>widget by <a href="http://biangblog.blogspot.com">ical</a></p></div></div>

 

Keterangan :

Kode warna merah : anda ganti dengan kode html iklan anda
Kode ( top:600px; dan left:600px; ) untuk mengatur posisi jendela pop up  

 

Seo Blogspot Dasar Blogger Pemula

  Akhirnya,posting belajar seo nongol juga di blog tutorial ini ya. Tapi,apakah teknik dan rahasia seo-nya benar-benar joss seperti yang dikoar-koarkan?

Saya sendiri sih menganggap itu hanya masalah penyamapaian saja,yang terpenting adalah mencoba dan merealisasikannya,masalah berhasil tidaknya itu urusan nanti.

Untuk dan menurut saya pribadi,10 dasar seo atau seo dasar untuk blogspot ini sangat ampuh,efisien dan yang penting gratis alias blak-blakan dipublikasikan,karena 10 teknik dasar seo ini adalah hasil dari kegagalan saya sendiri selama beberapa tahun ngeblog.

Bukan menjadi tolak ukur panduan dasar seo,namun untuk kita cara cepat terindex google,cara-cara dibawah ini layak untuk anda coba.

10 Dasar Seo Blogspot

• Membuat 10 atau beberapa Blog dari blog gratisan sebagai dummy tentu dengan domain yang berbeda-beda,misal dari blogspot,wordpress,blogdetik,weblog,dll
  Buat judul yang ingin sobat optimasi dari blog utama yang ingin sobat optimalkan,kemudian bikin duplikat judul posting dari blog utama tersebut di beberapa blog gratisan (dummy) yang telah diciptakan,serta meletakkan link menuju postingan blog utama.
• Jika menggunakan gambar gunakan nama sesuai judul posting,misal saya membuat judul posting belajar dasar seo blogspot,maka sebelum saya upload gambar tersebut pada postingan saya merubahnya terlebih dahulu dengan nama belajar dasar seo blogspot,dan kemudian saya siap menguploadnya.
• Jangan lupa pula pada gambar atau image yang telah kita pasang,gunakanlah tag alt,misal ;
  <img src='http://1.bp.blogspot.com/_IkLQaat9dkk/SjBpw1TLVVI/AAAAAAAAADg/RDKDlri9Xpg/s320/dasar-seo-blogspot.jpg' alt="belajar dasar seo blogspot.'/>

• Terapkan dan biasakan menebalkan kata atau kalimat yang ingin sobat optimasi dengan kode <strong></strong>,misal <strong>dasar seo blogspot</strong>
• Jangan lupa submit di beberapa blog-blog dofollow dan social bookmarking
• Blogwalking
• Buat judul seunik mungkin dan merangsang,seperti contoh;
  10 Dasar Seo (Rahasia Seo Telah Di Bongkar!!!),menarik bukan?
• Belajar merangkai kalimat dari mengamati kata dan kalimat yang telah diindex oleh serp Google

• Memodifikasi templates mulai dari meta tag,ukuran dan jenis huruf serta menciptakan kontent yang efektif(sedikit gambar sehingga memungkinkan cepatnya saat loading page)

• Rajin posting yang sangat dibutuhkan khalayak atau yang sedang trend dan hot dan yang terpenting adalah berdo'a.

Semoga dapat membantu optimasi dan menambah semangat dalam belajar seo,Insya Allah suatu saat nanti akan kami update jika ada senjata baru dalam seo ini :D

Bagi master-master seo yang dah nyasar,kami sangat minta saran dan tambahannya,tapi jangan ngritik ya