Showing posts with label Tutor Blog. Show all posts
Showing posts with label Tutor Blog. Show all posts

February 12, 2013

cara membuat tombol next page pada blog


Pada postingan kali ini saya akan berbagi artikel tentang cara membuat tombol next page pada blog, yang mana tombol ini berfungsi buat mengarahkan para pengunjung untuk melihat halaman demi halaman yang berada pada blog kita berdasarkan angka yang tertera dalam tombol tersebut.

Artikel ini diperuntukkan buat blog-blog yang memang templatenya belum memiliki tombol next page, dan apabila template blog anda sudah memilikinya tombol next page ini, silahkan anda abaikan saja segera artikel ini namun anda jangan segera keluar dari blog saya ini dan anda saya perintahkan untuk segera mencari artikel-artikel lain yang ada pada blog Catatan Penaini...oke...! ( galak amat ya...ini mah pemaksaan namanya bos...hehehehehe...).
Bila anda masih bingung juga seperti apakah tampilannya, silahkan anda lihat gambar seperti yang ada dibawah ini.


Bagaimana...sudah jelaskah gambarnya...? apabila sudah jelas, kini kita akan mulai ke cara pembuatannya. Silahkan ikuti panduannya ya...
  • Masuk ke akun blogger anda. ( ingat blog anda...bukan blog orang lain...! )
  • Pada  tampilan Dashboard klik Design kemudian klik Edit HTML
  • Untuk menjaga hal-hal yang tidak diinginkan saya sarankan backup dulu template blog anda dengan mengklik Download Full Template.
  • Centang kotak kecil yang bertuliskan Expand Template Widged.
  • Silahkan anda cari kode ]]></b:skin>
  • Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></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;}

  • Kemudian cari kode </body>
  • Copy kode yang ada dibawah ini dan paste kan diatas kode </body>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>
  • Dan terakhir silahkan Save Template anda.
  • lalu nikmati hasinya, dijamin anda pasti puas, hahaha
Bagaimana mudah bukan...? silahkan anda mencobanya.


Sumber: http://davotmarbun.blogspot.com/2011/11/cara-membuat-tombol-next-page-pada-blog.html#ixzz2KgqsGIKt

May 05, 2011

Mendaftarkan Blog ke Search Engine Google Full

Sebenarnya cara yang relatif mudah untuk menarik pengunjung ke blog kita. ialah banyak-banyaklah berkunjung ke blog lain, isi shoutbox nya dan kalau perlu berkomentar, semakin akrab semakin baik. karena dengan cara demikian sebenarnya kita telah beriklan  tentang keberadaan blog kita sendiri.

Namun jika blog kita ingin menarik pengunjung dari hasil pencarian - dan ingin terindex  ke dalam  mesin pencari (Search Engine) seperti google dan yahoo.  yang  harus kita lakukan adalah mendaftarkan  blog kita ke dalam mesin pencari tersebut.

Memasukan Url or Alamat Blog Ke Google.

Daftarkan blog kita ke google melalui situs sini. Google add Url.
Url : isi dengan alamat blog anda
Commnets : masukan keterangan tentang blog anda. >> add url


Verifikasi dan Submit ke Webmaster Tools.

Langkah selanjut memperifikasi dan men submit sitemap blog anda ke webmaster tool.
1. buka google webmaster tools kemudian daftar mengunakan gmail account yang kita miliki.
2. klik tab Add a Site
Webmaster Tools
3. Enter the URL of a site you'd like to manage. masukan alamat blog anda - tampa di awali dengan http:// atau www. misal >> nasuhasmith13.blogspot.com
klik Continue.


4. Kemudian pada halaman Verification status, ( untuk blogspot biarkan pemilihan pada Meta Tag . red ). Salin / copy semua tulisan <meta name="google-site-verification" dst.. dgn cara pilih klik kanan mouse copy. 

verification status

5. Login / masuk pada blog anda ( blogger.com ), kemudian dalam halaman Template, pilih >> tab Edit Html. masukan dan simpan meta name verifikasi yang tadi kita copy setelah tag :  <title><data:blog.pageTitle/></title> 


Setelah beres klik tombol >> Save Template / Simpan Perubahan.
6. Kembali ke halaman google webmaster tool. kemudian klik tombol Verify, untuk mengkonfirmasi pendaftaran.
7.  Jika berhasil ter Verifikasi maka anda akan masuk pada halaman Dasboard .

Submit a Sitemap

Setelah blog kita terverifikasi, langkah selanjut mensubmit sitemap / peta situs blog kita. Untuk blogspot sitemapnya tidak serumit blog lain.
Untuk mensubmit sebuah sitemap dalam halaman dasboard cari tulisan Sitemaps kemudian klik link tulisan Sumbit a Sitemap.

submit a sitemap  
Setelah itu pada halaman sitemaps klik tombol Add a site, dan masukan kode ini pada kotak isian >> Submit Sitemap
atom.xml?redirect=false&start-index=1&max-results=500

Keyword dan Keterangan Blog

Keyword atau kata kunci merupakan bagian dari penjelasan di atas. Walaupun menurut sebagian master seo. google dan search engine lainnya sudah tidak mendata lagi informasi dengan bantuan keyword yang ada pada sebuah situs web/blog.

Dan saya pun tidak akan menjelaskan panjang lebar tentang keyword ini, karena begitu luas dn dinamisnya – yang tidak mungkin saya bisa jabarkan dalam satu artikel. Namun untuk panduan dasar bisa anda donwload E-book “ Search Engine Optimization – Starter Guide pdf “.
Sedangkan untuk menyimpan atau menambah meta keyword dan meta description, tambahkan saja kode berikut ini, di bawah kode verifikasi di atas.

<meta content='ISI DESCRIPTION ' name='description'/>
<meta content='ISI KEYWORDS ' name='keywords'/>
<meta content='ISI AUTHOR NAME' name='author'/>
<meta content='index,follow' name='robots'/> 
 
Sumber yang relafan: http://catalog-tutorial.blogspot.com 

April 26, 2011

Cara membuat Widget Pos Link bergambar di bawah postingan Blog.

Kali ini saya akan berbagi tentang Cara Membuat Widget Pos Link bergambar seperti yang ada di blog ini, sesuai dengan Permintaan sahabatku yang menanyakan bagaimana cara membuat  Widget Pos Link bergambar
 
Mungkin utuk postingan ini sudah banyak yang tau bagaimana melakukanya, tapi saya rasa masih ada yang belumtau hususnya bagi para Bloger Pemula,
 
Langsung saja saya kasih taulangkah langkahnya:
  • Silahkan anda Klik disini
  • Lalu Isi kolom-kolomnya seperti yang ada di gambar bawah ini, untuk Width/post yang akan anda tampilkan di blog boleh ada ganti, atara 3, 4 dan 5:

  • kalau sudah selesai mengisinya silahkan anda klik Get Widget!
  • sebelum anda meng klik Install Widget seperti yang ada di gambar bawah ini, baiknya anda membacanya dulu agar lebih paham.
  

April 21, 2011

Cara Membuat Link Blog Mengeluarkan Warna Kuning

Kalau dulu saya memposting tentang Link Mengeluarkan Bintang saat mous di sorotkan ke bagian ter tentu, maka kali ini saya akan berbagi tentang cara membuat Link Blog Mengekuarkan Warna Kuning, agar Link Pada Blog anda kelihatan hidup dan menawan.

Langsung saja saya kasih tau cara-caranya:
    • Login Ke akun Blog Sobat
    • Pada Dasbor Klik Rancangan/tata Letak
    • Edit HTML
    • Centang Kolom (Expand Widget)
    • Cari Kode a:hover { tapi yg berdekatan dengan a:link{ atau berdekatan dengan a:visited{
    • Copy Paste Kode di bawah ini pas di samping a:hover { 
     
    text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40,   2px -10px 10px #f10;

    • Lalu Save dan lihat hasilnya.

    Selamat mencoba semoga berhasil
    jangan lupa tinggalakan komentar anda di blog ini:


April 18, 2011

Cara Membuat Read-More Otomatis di Blog

Kali ini saya akan Memposting tentang Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog anda secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. 

Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.
  •  Silakan masuk ke acount blogger
  •  Pilih Edit Html
  •  Jangan lupa  centang pada bacaan "Expand Widget Template
  •  Cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.
 =====================================================


<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

  • Lalu, cari kode html berikut ini : <data:post.body/> atau <p><data:post.body/></p>
  • ganti kode tersebut dengan kode di bawah ini :
 =====================================================

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;
READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
 
 =====================================================
 
Keterangan : 
  • Tulisan READMORE bisa anda ganti dengan kata-kata lain misal "baca selanjutnya". 
  • Summary noimg 430 = tinggi artikel terpenggal tanpa image
  • Summar img 430 = tinggi artikel terpenggal dengan image
  • lalu, klik save template dan lihat hasilnya.

 Selamat mencoba semoga berhasil
Jangan lupa tinggalkan komrntar anda di blog ini 


April 17, 2011

Cara Membuat Recent Post Blog Bergambar

 Kali ini saya akan berbagi trik tentang membuat Recent Post Bergambar pada blog sahabat agar kelihatan lebih indah dan mempermudah para pengunjung blog sahabat untuk mencari postingan terbaru dari blog sahabat... saya mendapatkan trik ini dari Sini

Trik ini sangatlah mudah dan saya yakin sahabat pasti bisa melakukanya, berikut cara-caranya:

1.Login Pada blogger.
2.Klik Layout pada Dashboard anda.
3.Klik Add a Gadget lalu pilih HTML/Javascript.
4.Masukkan kode script dibawah ini dan Save.

_____________________________________________________________

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://nasuhasmith13.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


_____________________________________________________________


Hal yang perlu diubah adalah:
  • boxwidth - Lebar widget
  • cellspacing - Space antara cells (default adalah 1 sudah bagus)
  • borderColor - Warna Border (Warna template widget bisa anda ganti.Defauld adalah putih)
  • thumbwidth & thumbheight - Lebar dan panjang thumbnail (default adalah 40 sudah bagus)
  • fntsize - Ukuran huruf judul postingan
  • acolor - Warna huruf judul postingan
  • aBold - Bila ingin ditebalkan adalah true, jika tidak false saja.
  • numposts - Berapa banyak recent post yang akan ditampilkan
  • home_page : http://nasuhasmith13.blogspot.com/ (Ganti dengan URL blog anda)
     

Cara Membuat Daftar Isi Blog Otomatis

Kali ini saya akan membantu sahabat yang ingin mempunyai Daftar Isi Otomatis pada Blognya agar kelihatan indah dan memudahkan para pengunjung untuk mencari artikel yang ada pada blog sahabat.. keunggulan dari Daftar Isi blog otomatis ini adalah jika sahabat memposting postingan baru pada blognya maka akan secara otomatis akan muncul di daftar isi otomatis ini.

Dengan trik mudah, hemat dan praktis maka tidak ada alasan utuk sahabat mengatakan tidak bisa melakukan hal ini, nah ikuti cara-caranya berikut ini:

1. Masuk ke akun blogger
2. Pilih menu tata letak / Layout
3. Pilih tambah gadget
4. Pilih html/javascript
5. COPy-PASte kode di bawah ini :

<a href="http://nasuhasmith13.blogspot.com/search?max-results=200" target="_blank"><span style="font-weight:bold;">DAFTAR ISI</span>&raquo;</a> 

Ket: 

http://nasuhasmith13.blogspot.com diganti dengan alamat blog anda.
* results=200 diganti dengan jumlah yang anda inginkan, angka 200 menunjukkan jumlah judul yang akan di tampilkan.

6. Klik SAVE

Sumber:  forantum.blogspot.com 


Selamat mencoba semoga berhasil
Jangan lupa tinggalkan komentar anda di blog ini 

April 15, 2011

Cara Membuat Tab Navbar Icon 3D

Kali ini saya akan berbagi tentang Cara Membuat Tab Icon 3D seperti yang ada di blog ini, sesuai dengan sahabatku yang menanyakan bagaimana cara membuat  Tab Icon 3D seperti yang ada pada blog ini....
mungkin langsung saja saya kasih taulangkah langkahnya:
  
  • lalu sesuaikan panjang lebar ukuran tab nevbarnya sesuai dengan blog anda:

  •  kalau sudah selesai tinggal klik Generate Animation
  • lalu coppy pastekan kodenya di HTML/JavaSecript Blog anda dan taruh di bagian atas blog anda, lalu lihat hasilnya


Selamat Mencoba semoga berhasil
jangan lupa tinggalkan komentar anda di blog ini





 

April 08, 2011

Cara cek blog apakah sudah terindex di Google

Bismillah... CARA MENGECEK APAKAH BLOG KITA SUDAH TERINDEX GOOGLE ATAU BELUM., Mungkin bagi sebagian orang hal semacam ini lupa untuk dilakukan, tapi apa salahnya kalau kita memantau perkembangan blog kita. Biar mesin pencari bisa mengenali blog kita, tentu saja kita juga harus berkenalan dengan mereka.

Disini saya akan menjelaskan cara untuk mengetahui apakah blog kita sudah terindex oleh mbah google atau belum. untuk mengetahuinya, silahkan kalian ikuti petunuknya dibawah ini :

1. Silahkan berkunjung ke http://indexedbygoogle.com/
2. Pada Kotak di samping kata "IS" silahkan masukkan URL Blog kalian Lalu KLIK "GO"


Disini akan terjadi dua kemungkinan, yang pertama adalah kabar baik dan yang kedua adalah kabar buruk. Untuk kabar baiknya kita akan mendapat jawaban "YES" dan berarti itu menandakan bahwa blog kita sudah terindex oleh mbah google,

google index


Sebaliknya kabar buruk yang akan kalian terima adalah mendapatkan jawaban "SORRY :)", karena ini berarti blog kalian belum terindex oleh mbah google.

google index


Selain cara diatas, masih ada cara lain untuk mengeceknya, yakni dengan memasukan URL blog kita pada kotak pencarian google, contohnya salah satu penulisan kata kuncinya seperti ini : "site:namabloganda.com" (tanpa tanda petik). apakah akan tampil atau malah ga ada sama sekali.

Nah.. jika beberapa dari kalian ada yang mendapat kabar buruk, hal pertama yang harus dilakukan adalah melakukan submit URL blog pada mesin pencarinya, baik itu di google ADD URL, google Analityc, Google webmastertool, dan lain-lain. Untuk cara submit URL nya kalian bisa membacanya Disini

Saran saya, akrab lah dengan seluruh mesin pencari, dan tips diatas bukan hanya di terapkan untuk mesin pencari google aja. Kalian juga harus melakukan submit URL blog kalian di mesin pencari lainnya, seperti google, yahoo, bing, altavista,dll

Submit Blog For Yahoo, Google, Bing

Blog, Website atau yang lainnya yang kita miliki atau kita buat akan percuma jika orang lain tidak mengetahuinya. Kenapa...? ya karena tujuan kita membuat Blog atau website itu untuk apa ...? ( Kecuali Private Blog Ya ). Dari yang saya pelajari, Hampir semua Blogger ataupun webmaster ingin agar hasil karya mereka diketahui orang banyak alias dipublikasikan.

jadi proses publikasi ini sangat penting buat si pembuat blog atau website. Karena disamping bisa diketahui orang, banyak diantaranya juga bertujuan untuk meningkatkan pagerank mereka sehingga mereka dapat mengoptimalisasikan SEO dari blog atau website mereka.

Sekarang yang akan kita bahas yaitu bagaimana cara mempublikasikan blog atau website kita itu ...? salah satu jawabannya yaitu kita harus bersahabat dengan yang namanya mesin pencari atau biasa dikenal dengan search Engine seperti Google, Yahoo, Bing, Altavista dan lain-lain.

Gimana caranya...?

Kita harus mendaftarkan URL dari blog atau website kita di mesin pencari tersebut atau lebih akrab dikenal dengan istilah ADD URL / SUBMIT URL. Untuk Prosesnya silahkan baca dibawah ini.

1. ADD URL di GOOGLE

== Silahkan Kunjungi http://www.google.com/addurl/
== Masukkan URL Blog atau website kalian, Kata Kunci (Comment) dan Verifikasi kata
== KLIK ADD URL



2. SUBMIT URL di YAHOO

== Silahkan kunjungi http://siteexplorer.search.yahoo.com/submit
== KLIK Submit A Website or webpage
== Masukkan URL kalian lalu KLIK sUBMIT URL



catatan : Untuk mendaftar di yahoo, kalian diharuskan mempunyai akun yahoo terlebih dahulu.

yang terakhir ini biasanya ada sebagian dari kalian yang belum mengetahuinya, yaitu mendaftarkan URL di mesin pencari buatan Microsoft alias BING.
Untuk mendaftarkan URL di Bing ikuti langkah berikut :

1. Silahkan Kunjungi http://www.bing.com/webmaster/SubmitSitePage.aspx
2. Masukkan Verifikasi Huruf pada kolom yang tersedia
3. masukkan URL kalian
4. KLIK SUBMIT URL



Ok.. itu saja yang bisa saya berikan, masih banyak lagi cara agar supaya blog atau website kita lebih terkenal atau bahkan bisa menaikkan pagerank blog atau website kita. Silahkan dicoba dan Apabila ada yang mau menambahkan silahkan tinggalkan komentar kalian. Terima kasih.
 
 

April 07, 2011

Cara membuat tulisan di tab blog berjalan

hay sahabat semuanya apakabar? pastinya baik-baik saja kan? untuk pertemuan kali ini saya akan sedikit berbagi ilmu tentang membuat Tulisan di tab blog agar bisa berjalan dan semau kita mau nulis apa di huruf berjalan itu.

ok langsung saja:
1. Login dulu ke blog sahabat
2. Pilih tataletak tambah gadget 
3. Pilih HTML/JavaSceript
4. Coppy-Paste kan kode di bawah ini

<script>
function tb8_makeArray(n){
this.length = n;
return this.length;
}

tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "Welcome To My Blog ";
tb8_messages[1] = "Jangan Lupa Jadi Follow Di Blog Ini";
tb8_messages[2] = "terimakasih ataas kunjungannya";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return; } tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

5. Tinggal simpan dan lihat hasilnya:

Catatan:Untuk Tulisan yang berwarna merah silahkan di ganti dengan tulisan yang anda  inginkan.

Selamat Mencoba Semoga Berhasil
Dan  jangan lupa tinggalkan komentar anda di blog ini

April 03, 2011

Cara Memasang Fasilitas Print di Blog

Mungkin teman-teman pernah melihat logo print ketika kita membuka sebuah artikel atau apa pada suatu website, dan anda menganggap itu tidak bisa di pasang pada blog, tapi tenag saja karena kali ini saya akan memberitahu bagaimana cara memasanga Fasilitas Print di Blog anda:

yang harus anda lakukan adalah:
1. Login ke Blog anda
2. Masuk halaman pada Dasbor pilih rancangan Elemen Halam
3. Tambah Gadget pilih HTML/JavaSecript
4. Masukkan kode di bawah ini kedalamnya

......................................................................................................................

<a href="javascript:print(document)"><img src="http://i396.photobucket.com/albums/pp48/putro16/iconprint.png" alt="print this page" border="0"/>&#160;Print halaman ini</a> 
...................................................................................................................... 

5. Selesai

Untuk tulisan Print halaman ini Bisa anda ganti dengan tulisan lain.

Selamat mencoba semoga berhasil...!!!
dan jangan lupa tinggalkan komentar anda di blog ini

Cara Merubah Tampilan Blog Sesuka hati

Untuk postingan kali ini saya mau menampilkan permintaan dari salah satu sahabatku nan jauh di mato tentang bagaimana merubah Background Blog-nya.... agar sesuai dengan keinginanya tanpa merubah Template yang ada.... mungkin langsung saja saya kasih tau caranya.

lngkah-langkahnya yang harus kalian lakukan:
1. Login ke akun anda
2. Pilih Tataletak-Rubah tampilan seperti gambar di bawah ini:

3. Klik Background Lakukan seperti gambar di bawah ini yang di beri kolom warna merah:


 4. Pilih Upload Imeg lihat gambar di Bawah:

5. Pilih Brows sperti gambar di bawah, terus pilih gambar sesuka hati anda dari Pc anda:
 

 6. kalau gambarnya sudah ketemu silahkan di klik. setelah selesai proses Upload pilih Done.    jangan lupa di atur Gambarnya antara pinggir kiri,tengah, kanan.  lalu lihat hasilnya dan klik APPLY TO BLOG selesai.....

Selamat Mencoba semoga berhasil..
Jangan Lupa tinggalkan jejak anda di blog ini terimakasih...


April 01, 2011

Cara membuat Auto Hiden Navbar Blog

Auto Hiden Navbar, Adalah memungkinkan kita untuk menghilangkan Navbar dan menampilkan Navbar ketika Mous di arahkan kebagian dimana Navbar itu berada, dan caranya juga sangat mudah sekali jadi saya rasa tidak ada alasan bagi anda untuk bilang tidak bisa untuk melakukannya....hehehe

ok langsung aja saya jelaskan caranya:
1. Login dulu ke Blog anda
2. Pilih tata letak Edit HTML
3. Cari Code body {
4. Coppy Paste kode di bawah ini pas di atas kode body {

....................................................................................................................... 
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}  
 .......................................................................................................................  

5. Simpan. Mudah banget kan?

Selamat mencoba semoga berhasil....!!!
dan jangan lupa tinggalkan jejak anda di blog ini

Cara Membuat Buku Tamu Facebook di Blog.

Hay.... saudara setanah air ku....hehe untuk kali ini saya akan sedikit berbagi tetntang bagaimana membuat Buku Tamu Facebook di Blog anda yang bisa melayang-layang, tidak dipungkiri bukan kalau Facebook merupakan salah satu jejaring social yang sangat membantu utuk mempublikasikan atau megenalkan blog kita ke rekan-rekan kita? makanya kali ini saya akan memposting tentang Buku Tamu Facebook....

Langkah-langkahnya agar anda tidak salah langkah:
1. Login dulu ke akun Blog anda
2. masuk halaman pada Dasbor pilih rancangan Elemen Halamn
3. tambah Gadget Pilih HTML/JavaSecript
4.Masukan Kode di Bawah ini kedalamnya.

.....................................................................................................................
<div title="[:: Isi Buku Tamu Dengan Sopan ::][:: Click Here to Buku Tamu::]">
<style type="text/css">
.gb_fixed{
position:fixed;
top:40px;
left:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#000000;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<center>
<div style="text-align: center;">
<span style="color: blue; font-size: x-small;">Selamat Datang</span>
<span style="font-size: x-small;"><b style="color: red;">Jgn Lupa Comment</b></span><span style="color: blue; font-size: x-small;">
</span><span style="font-size: x-small;"><b style="color: blue;"></b></span>
</div>
<iframe src="http://www.facebook.com/plugins/livefeed.php?app_id=172413529458534&amp;width=290&amp;height=400&amp;xid=355411944445" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:400px;" allowtransparency="true"></iframe><div style="color: #999999;"></div>

</center>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:white">[TUTUP ]</b></a></div>
</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i1237.photobucket.com/albums/ff473/muhammadsuteja/tabs-ua-1-1.gif" />
</a>
</div></div>
.....................................................................................................................

5. Simpan dan lihat hasilnya

Selamat mencoba dan semoga berhasil....!!!
dan jangan Lupa tinggalkan jejak anda di blog ini


Cara membuat Toolbar Melayang

Pada kesempatan kali ini saya akan berbagi tentang bagaimana membuat Toolbar Melayang di blog kamu seperti yang ada di samping kanan blog ini... agar blog kamu lebih kelihatan keren dan memberi kemudahan kepada pengunjung untuk meninggalkan jejaknya di blog kamu!

langsung ke pokok pembahasan...... 

1. Login ke akun blog anda
2. pada "Dasbor" pilih rancangan-Edit HTML
3. Letakan Code berikut ini tepat diatas Code ]]></b:skin>

......................................................................................................................


#tejanavbar{font-family:Comic Sans Ms;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSK9laqfl_-hmboL1-DFdt_TQOE6aw-4e9lBip5FJoV-eFP5AOjyFUn7Vu1bcfxqxcPVzPPmbAFjBpfUTaugL4ZnbBLKjUU1uzaBEyFS3nKgI338Vx66w2koan1BbNNcRKQZSMm-CuSp_l/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
#tejanavbar .left{float:left;text-align:center;font-size:11px;font-style:normal;font-weight:bold;color:white;padding:2px 10px;}
#tejanavbar .right{float:right;padding:0px 2px;cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rM4jqtBWdvcEcb3JeHWFS50-SV-VhfcRWDQnqrZTiOPvWhWe7GfEtRIEQUT1wH5p0hesLPY94w4Rx6pa9fa3hZe22vNIlj1YhAQUwKiIlpeppSfsdSfFN5uNnnu3MnOda3Xw2av39-o/s1600/Cursord.png), default}
#tejanavbar a{color:red;text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 20px;-moz-outline-style:none;}
#tejanavbar a:hover{color:white;text-shadow: rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 20px;border:0px;-moz-outline-style:none;cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rM4jqtBWdvcEcb3JeHWFS50-SV-VhfcRWDQnqrZTiOPvWhWe7GfEtRIEQUT1wH5p0hesLPY94w4Rx6pa9fa3hZe22vNIlj1YhAQUwKiIlpeppSfsdSfFN5uNnnu3MnOda3Xw2av39-o/s1600/Cursord.png), default}


.......................................................................................................................

4. Terahir letakkan script berikut tepat di bawah <body> 


.......................................................................................................................


<div id='tejanavbar' style='position:fixed;'>
<span class='left'><IMG align='top' alt='0' height='20' onclick='window.open(&quot;http://tejahtc.blogspot.com/?sm=1&quot;);' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKWubTwEa7irkano7bcUipAKLcy4z0Q8xyIKKEKzqY-ixCYCpj387FQQnB_vblpZWVoU5Lxw3czX5-YQSA1VGdEbBO0o8_vezQHULao7zHeZhTskfqeVaprDOA8iHOZMO-sQP7SBF_G3HF/s1600/tejaicon3232.png' width='26'/>
<span style='font-family:kristen itc;'><blink>&quot;WELCOME TO MY BLOG&quot;</blink></span></span>
<span class='right' style='font-family:verdana;'>
<IMG alt='1' height='20' onclick='window.open(&quot;http://www.facebook.com/pages/Sharing-Ilmu-pengetahuan/125513924175946&quot;);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPQiZKc2I/AAAAAAAAEDU/zD_grWbBNuQ/DADnfb.png' title='Facebook Page' width='20'/>
<IMG alt='2' height='20' onclick='window.open(&quot;http://www.facebook.com/pages/Sharing-Ilmu-pengetahuan/125513924175946&quot;);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPJwm1nBI/AAAAAAAAEDM/UMIdfmgbSII/DADnbookmark.png' title='My Favorites' width='20'/>
<IMG align='top' alt='3' height='20' onclick='this.setHomePage(http://websitenokia.blogspot.com/);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPQsgWT1I/AAAAAAAAEDc/-8SnRmd2RvQ/DADnhome.png' title='Set As HomePage' width='20'/>
<IMG align='top' alt='4' height='20' onclick='window.open(&quot;http://id-id.facebook.com/msuteja&quot;);' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4pbp_0GRZTV7BWN9yQUWJ8W-Vv8FHYx36pzrEd_7enS9sqBkpk2gkMssEG3QKbxwYjgOV4cySSUYJWxkffiwRVFGWlzfq73bA0Mz8FpeN_Jn5I5X7eFeNWbbJpCeQJtJCEh6-HAI9f0l/s1600/facebook.png' title='Add Me On Facebook' width='20'/></span></div>


.......................................................................................................................
Simpan selesai... mudah kan?


Selamat Mencoba dan Semoga Berhasil.....!!!!!!
dan jangan lupa tinggalkan jejak anda di blog ini
 

March 31, 2011

Cara pasang Google translate

kali ini saya akan berbagi ilmu tentang bagai mana memasang Google Translate di Blog kesayangan anda agar lebih terlihat rupawan nan menawan :))

ok langsung aja ya? pertama-tama silahkan saudara Login ke blog masuk halaman pilih Tata letak-html/javascript-Copy-Paste kan code di bawah ini kedalamnya so seved selsai.......
................................................................................................ 

<center><a href="http://pinginbelajar.blogspot.com/2009/05/translate-versi-google.html" target=" blank"><b>Google Translate</b></a></center>
<div style="overflow:no; width:50%px; height:100%px; padding: 5px; background: #FFFFFF;">
<style>
.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }
.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; }
.google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }
</style>
<div style="overflow:no; width:100%px; height:100%px; padding:5px 0px 0px 0px;">
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;margin-right:3px" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" title="Arabic" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" title="Korean" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;margin-right:3px" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" title="Japanese" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;margin-right:3px" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" title="Chinese Simplified" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;margin-right:3px" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" title="Russian" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;margin-right:0px" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" title="Portuguese" align="absbottom" /></a>
</center>
</div>

<div style="overflow:no; width:100%px; height:100%px; padding:7px 0px 0px 0px;">
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" title="English" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;margin-right:3px" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" title="French" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;margin-right:3px" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" title="German" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;margin-right:3px" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" title="Spain" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;margin-right:3px" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" title="Italian" align="absbottom" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;margin-right:0px" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" title="Dutch" align="absbottom" /></a>
</center>
</div>
</div>
..........................................................................................................................

semoga Sukses......!!!!!!!! jangan lupa tinggalkan komentar anda terimakasih.....!!!!
Related Posts Plugin for WordPress, Blogger...