Search Engine Buat Blog sendiri

Pernah mencoba gadget search yang di sediakan di widget blog kita??? kalo belum silahkan coba kalian pasang gadget tersebut... bagaimana dengan hasil search nya??? mengecewakan??

Untuk membuat fasilitas Search yang benar-benar focus searching di blog kita, pertama yang kita lakukan adalah masuk ke situs http://www.google.com/cse/ setelah itu login pake akun google... setelah login pilih CREATE A CUSTOM SEARCH ENGINE seperti gambar di bawah...

1. Set up your search engine

kemudian isikan data yang diperlukan di  Describe your search engine... 

di kolom Define your search engine isi dengan URL blog kita dan bisa ditambahkan dengan URL page di blog kita supaya pencarian lebih detail.. lihat gambar

setelah itu pilih Standart Edition dan jangan lupa centang agreement dan pilih NEXT...

2. Try it out

Di langkah selanjutnya kita bisa memilih tampilan visual search box yang kita buat, bisa juga di custom warna dan tulisanya, setelah itu bisa kita uji search boxnya masukan kata kunci yang ada dalam blog kita misal mboloz, computer, blogging atau apa lah yang berhubungan dengan blog kita, lihat hasilnya.. jika sudah sesuai keinginan kita pilih NEXT, jika belum maksimal bisa balik ke Back to Step 1 dan tambahkan URL2 di atas tadi mungkin bisa URL per posting supaya akurat....

 3. Get the code 

Nah ambil code yang ada di box, dan buat widget baru dan paste code tersebut, jadi sudah search engine buat searching content di blog kita sendiri...

 Semoga bermanfaat.

Read more...

Membuat widget hanya tampil di homepage

Banyak cara yang bisa dilakukan untuk mempercepat sebuah blog, yaitu salah satunya seperti judul postingan saya. Paling tidak dengan ini blog Sobat akan terlihat lebih dinamis, dan lebih seger untuk dilihat.

Langkahnya seperti ini :

1. Mencari kode Widget

• Login ke account blogger

• Klik Tata Letak

• Pilih Edit HTML

• Centang atau cek " Expand Widget Template".

Cari kode widget, contoh kode widget "Recent Comment" (ini hanya sekedar contoh)

<b:widget id='HTML5' locked='false' title='Recent Comment' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

• Jadi cara mencarinya adalah dengan nama widget. Apabila nama widgetnya "Recent Comment", cari kode widget dengan nama tersebut. Gunakan F3 atau Ctrl + F untuk mempermudah pencarian.

2. Menambahkan kode

* Tambahkan kode hingga menjadi seperti dibawah ini. tulisan yang berwarna hijau adalah kode yang ditambahkan.

<b:widget id='HTML5' locked='false' title='Recent Comment' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

Kemudian Save. Semoga bermanfaat..

Read more...

Cara membuat related post/artikel terkait

Related post / artikel terkait sangat dibutuhkan bagi suatu blog, karena dengan menampilkan related post/ artikel terkait, pengunjung akan lebih mudah untuk mencari artikel lainnya di blog Sobat. Ada syarat yang perlu diketahui dalam pembuatan related post / artikel terkait. Related post ini akan muncul berdasarkan label artikel yang sama, jadi jika artikel yang tidak diberi label, tidak akan muncul related postnya.

Langkah membuat related post/artikel terkait sebagai berikut :

1. Login  ke account blogger anda
2. Klik Layout
3. Edit HTML
4. download template dulu sebagai backup
5. Centang expand widget template
6.  Letakkan code di bawah ini di atas code </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

7. kemudian cari code berikut

<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  </b:loop>
  </b:if>

mengganti dengan

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Pada yang berwarna merah max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label.

8.  Kemudian terakhir save

Read more...

Cara membuat Menu dan Sub Menu

Biasanya pada template blogspot yang kita temukan/download ada yang tidak menggunakan menu dan sub menu, termasuk template yang saya gunakan ini. Akan tetapi jika anda mau membuat menu dan sub menu seperti gambar diatas ? Berikut ini caranya :

1. Login ke ke account blogspot.com anda
2. Klik Rancangan (Tata Letak)
3. Klik Edit HTML
4 Cari kode ]]></b:skin>
5. Letakkan kode dibawah ini,  diatas kode no 4 tadi

/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#FF6600;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

 6. Kemudian cari kode ini:
</b:section>
</div>

7. Letakkan kode dibawah ini di bawah kode no 6 tadi

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</div>

</div> 
<!-- end navbar -->

Keterangan:

• http://tokocampuran.blogspot.com diganti dengan alamat blog anda
• Nama Label diganti dengan nama label pilihan anda yang ada di blog anda
• Judul Menu diganti dengan judul menu yang anda inginkan

8. Simpan

Read more...

Cara mengganti icon atau gambar di Address Bar pada Blogspot

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon kecil pada address bar (kotak untuk mengetikkan alamat web) . jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

lalu dibarengi dengan alamat blognya.

Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).

kalau belum bisa membuat gambarnya ikuti langkah-langkah berikut ini :

1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon
2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs

• http://www.favicongenerator.com atau
• http://www.favicon.co.uk
  Anda dapat memilih ukuran favicon (16x16, 32x32, 48x48, 64x64) atau
• http://favicon-generator.org
  atau
• http://www.favicon.cc
  Anda dapat membuat favicon sendiri sesuai kreasi Anda

3. Klik pada tombol Browse...
4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
5. Klik pada tombol Generate Favicon.
6. Setelah proses selesai, klik pada Click Here to Download your favicon.
7. Save ke komputer anda.
Setelah itu .....
masuk ke "Tata Letak --> Edit HTML" trus tempatkan script berikut sebelum kode

</head>

<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='shortcut icon'/>

atau bisa juga seperti kode dibawah ini : 

<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>

Ganti huruf yang berwarna Merah dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di tempat hosting gambar.
contohnya kamu mengupload gambar kamu di photobucket dan juga di imageshack sebagai contoh kamu meng-upload di Album Picasa caranya seperti di bawah ini :

1. Login ke picasa dengan account google di http://picasaweb.google.com
2. Tekan tombol I accept.
3. Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol launch picasa dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.
4. Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol upload.
5. Isikan form title, date, dan seterusnya. jika selesai tekan tombol continue.
6. Tekan tombol browse dan arahkan pada file yang akan anda upload
7. Tekan tombol start upload untuk menguploadnya ke dalam server picasa
8. Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full
9. Klik kanan gambar tersebut dan pilih properties.
10. Anda akan mendapatkan URL gambar yang kurang lebih seperti ini http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).
11. Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML
12. Link gambar yang bertuliskan http://img98.imageshack.us/img98/9617/image3cr0.gif anda ganti dengan link yang baru yaitu http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).
13. Lakukan hal yang sama untuk gambar2 yang lain

atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
Dicoba...

Read more...

Cara menghilangkan tanda obeng pada blogspot

Untuk menghilangkan tanda obeng pada blog ternyata sangat lah mudah.
Maksud obeng pada blogspot itu hanya sekedar untuk mengedit, itupun hanya tampil pada saat author sudah login dan tidak akan muncul di lainnya.
 
Langsung saja, ini langkahnya :

• Login ke account
• masuk ke tata letak, kemudian klik edit HTML, beri tanda centang pada Expand template widget
• Jangan lupa untuk membackup code HTMLnya baik itu di word atau media lainnya untuk menghindari kerusakan pada tampilan nantinya.
• selanjutnya cari kode ]]></b:skin> dengan menggunakan Ctrl + F agar pencarian cepat
• Selanjutnya copy paste kode .quickedit{display:none;}
• Jangan Lupa Save
• Semoga berguna...

Read more...

Cara Memasang Toolbar Canggih Wibiya di Blog

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibiya ini sangat canggih. Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? Untuk demonya silakan lihat blog ini bagian bawah yang melayang, ada tools yang berisi pencarian, who's online, facebook, live chat dll.

Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

• Buka website wibiya.com dan klik tombol "Get It Now"

• Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol "Next" 

• Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"

• Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next" 

• Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on blogger

• Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger

• Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

Read more...