Tutorial Merapikan Widget Pada Blogspot

Bismillahirrohmanirrokhim ..

hai sobat .. apakabar kalian malam ini .. ??
Kabar saya sendiri malam ini lumayan baik .. apalagi malam ini saya akan berbagi  artikel tentang "Tutorial Merapikan Widget Pada Blogspot" yg mungkin akan sobat butuhkan untuk merapikan Widget di Blog sobat .. dan juga bisa menjadi Hiasan di Blog sobat .. karena bentuknya yg rapi ..

Silakan di edit sendiri codenya menurut keinganan sobat .. ini screenshootnya ..

1 Gadget untuk 4 widget

contoh gambar di atas hanya 1 gadget untuk 4 widget .. tp bila sobat mau mengubahnya untuk menjadikan 1 gadget menjadi 10 widget atau 2 widget atau berapapun .. edit saja menurut keinginan sobat ..

Codenya di bawah ini ..

<table border="1" width="300">
<tr bgcolor="#FF6C74"><td align="center"><b>JUDUL 1</b></td><td align="center"><b>JUDUL 2</b></td></tr>
<tr><td align="center">CODE WIDGET DISINI</td><td align="center">CODE WIDGET DISINI</td></tr>
</table>
<table border="1" width="300">
<tr bgcolor="#FF6C74"><td align="center"><b>JUDUL 3</b></td><td align="center"><b>JUDUL 4</b></td></tr>
<tr><td align="center">CODE WIDGET DISINI</td><td align="center">CODE WIDGET DISINI</td></tr>
</table>

Tutornya :
- Login ke Blogger sobat ==> Dasbor ==> Tata letak ==> Add Gadget ==> pilih HTML/Javascript dan masukkan Code di atas
- simpan dan lihat hasilnya ..

Keterangan :
- 300 adalah lebar .. sesuaikan dengan Lebar sidebar sobat
- FF6C74 adalah warna ..
- JUDUL 1234 adalah Nama" Widget sobat
- Code widget disini adalah tempat  menaruh Code widget sobat
- untuk cara editnya di coba" saja .. pasti sobat sudah tahu ..

Sekian  dulu Artikel dari saya yg berjudul "Tutorial Merapikan Widget Pada Blogspot" semoga artikel iini membawa manfaat untuk kita ..

Dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. amin ..

Tutorial Merapikan Tulisan Artikel Pada Blogspot

Bismillahirrohmanirrokhim

"Tutorial Merapikan Tulisan Artikel Pada Blogspot" ,sebelumnya saya akan memberi sedikit penjelasan  tentang apa yg dimaksud dengan judul  di atas .. maksud dari judul di atas adalah .. untuk merapikan setiap Tulisan dari artikel kita menjadi Rata Kiri dan kanan .. sedangkan dari bawaan Blogspot sendiri biasanya hanya bisa menjadi rata Kiri saja ..

Artikel ini sangat bagus bila di masukkan/diterapkan di Blog sobat .. karena bisa merapikan setiap artikel kita yg biasanya tidak rata .. langkah"nya pun sangat mudah ,dengan sedikit kerja tetapi mendapat hasil yg banyak .. [saya perkirakan begitulah artikel ini :p] ..

Saya mendapatkan artikel ini, disaat saya berkunjung ke blog sahabat .. dan bila sobat menginginkan artikel" Tentang seputar Blogspot dan Lain" silakan sobat Lihat di sini dan di sini , saya tidak bermaksud mempromosikan, tetapi saya hanya sekedar memberikan infomasi yg mungkin sobat" butuhkan ..

Untuk selanjutnya kita melangkah pada penerapan Artikel di atas ..

langkah"nya :

1. Login ke Blogspot sobat ==> Dasbor ==> Template ==> Edit HTML ==> lanjutkan dan centang kotakan kecil di atas ..

2. cari code ]]></b:skin> [untuk mempermudah pencarian silakan sobat pencet F3 pada keybbord sobat]

3. Bila sudah ketemu .. silakan masukkan code di bawah ini, tepat di atas code ]]></b:skin>

.post-body.entry-content {
  text-align: justify;
}

4. Simpan Template dan lihat hasilnya ..

nah sekarang sobat sudah merapikan Tulisan artikel" sobat secara Otomatis .. jadi saya cukupkan dulu postingan artikel ini sampai disini , somoga artikel ini memberi manfaat untuk kita semua ..

Dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. amin ..

Sumber : http://eltelu.blogspot.com/2012/10/cara-menjadikan-setiap-kalimat-atau.html

Tutorial memasang Recent Post Bergerak Tanpa Gambar/thumbnail

Bismillahirrohmanirrokhim ..

Kali ini saya akan berbagi atikel tentang "Tutorial memasang Recent Post Bergerak Tanpa Gambar/thumbnail" yg berfungsi untuk memperlihatkan sebagian dari artikel" tebaru Kita supaya bisa mempermudah para pengunjung blog kita untuk mencari artikel" yg di perlukan oleh mereka .. di samping itu bisa mempercantik halaman blogspot kita ..

Langkah"nya sangat simple ..

1. Login ke Blogspot sobat ==> dasbor ==> Tata Letak ==> Add widget ==> Pilih HTML/Jacascript

2. Masukkan Code di bawah ini ..

<marquee behavior='scroll' align='left' direction='up' height='250px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'><script style="text/javascript" src="http://kelambit-blogspot.googlecode.com/files/Recent%20Post.js"></script> <script style="text/javascript"> var numposts = 25; var showpostdate = false; var showpostsummary = false; var numchars = 100; var standardstyling = true; </script> <script src="http://g4lax1.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></marquee>

Ket : Ganti Code yg saya tandai dengan warna merah sesuai keinginan sobat
- angka 2 adalah kecepatan geraknya, semakin besar angkanya semakin cepat
- Angka 25 adalah total artikel sobat yg akan di tampilkan
- http://kelambit-blogspot.googlecode.com/files/Recent%20Post.js bisa di ganti dengan file js sobat, klo masih belum punya/edit biarkan saja ga perlu di ganti
- http://g4lax1.blogspot.com ganti dengan alamat URL Blogspot sobat

3. Simpan dan lihat ..

untuk sobat yg ingin memasang widget bergerak dengan  gambar silakan Lihat di sini ..
sampai disini dulu artikel saya kali ini, semoga bermanfaat untuk kita semua ..

Dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. amin ..

Sumber Creator format code : Json [klo ga salah]

Tutorial Supaya Blog Bisa cepat Terindex Mesin Pencarian Google

Bismillahirrohmanirrokhim ..

Met Pagi sobat .. Pagi ini saya ingin berbagi sedikit pengalaman Blog dengan sobat , yaitu tentang artikel" yg sudah kita buat, bisa cepat terindex oleh mesin pencarian Google atau search Engine [dengan catatan klo betul ini yg dimaksud]
Terus terang saja saya sendiri masih Bingung dengan apa yg akan saya Posting malam Ini .. Apakah betul Ini yg dimaksud oleh temen" Blogger , dengan terindexnya artikel kita di Web Master .. akan membawa artikel kita di depan halaman Mesin pencarian google .. Entahlah ..
Tp dari pengalaman saya .. memang ada beberapa artikel yg telah saya Buat berada di halaman depan mesin pencariian google, hanya karna ada kesalahan" yg saya perbuat [tidak sengaja] akhirnya artikel" yg sudah ada di depan halaman google .. Hilang dalam waktu 3 hari .. tetapi saya sudah cukup Puas dengan hasil yg saya peroleh [karna Artikel" yg saya buat juga berasal dari google dan pastinya Juga dari Blog" sahabat]

Apa kesalahan" yg telah saya perbuat .. sebenarnya banyak .. tp ini mungkin yg paling fatal .. yaitu ..
- Karna ada suatu yg ga bisa saya ceritakan disini , akhirnya saya  merubah nama dan alamat Blogspot saya tanpa di modalin dengan ilmu tentang Itu [ilmu yg memadai].. Jadi saya asal ubah saja .. ga taunya itu sangat berpengaruh pada Blogspot saya .. dan akhirnya, hmm .. pasti sobat sudah bisa menebak apa yg terjadi dengan Blog saya .. :) ..
Tetapi kemarin malam sudah saya kembalikan ke nama dan alamat yg asli .. [entah apa jadinya nanti.. hahah .. namanya juga belajar] ==> cukup Curhatnya ...

*Tutorial Supaya Blog Bisa cepat Terindex Mesin Pencarian Google*

1. Kenalkan/daftarkan Blogspot sobat dengan Google .. Alamatnya di sini
-caranya sobat Tinggal memasukkan URL sobat ke tempat yg sudah di sediakan .. lalu masukkan CAPTCHA dan  Click "Kirim Permintaan" .. Owalah .. lihat gambar aja wes ..

Submit Url

2. Setelah terlihat tulisan yg berbunyi " Permintaan anda telah diterima dan akan segera di Proses" .. silakan sobat Cllick "Alat Webmaster" yg sudah saya tandai dengan warna Hijau ..

3. Sobat akan di bawa ke Halaman depan/Beranda Webmaster .. Click "Tambahkan Situs" dan masukkan URL sobat .. setelah itu click "Terus" .. contoh URL saya : http://g4lax1.blogspot.com/

4. Veryfikasi Blog sobat
-  Lihat sebelah kiri sobat .. Dibawah Dasbor .. silakan Click "Configurasi" dan pilih "Pengguna" .. akan terlihat seperti gambar di bawah ..

laman veryfikasi

- Arahkan Kursor/mouse sobat ke Panel "Pemilik" yg sudah saya tandai dengan warna merah dan silakan Click "Laman veryfikasi pemilik" yg sudah saya tandai dengan warna Hijau ..

- Pilih atau click tulisan yg berwarna biru "Verifikasikan dengan menggunakan metode yang berbeda" 

- Sobat akan di bawa ke tempat Code veryfikasi .. lihat gambar ..

Code Verifikasi Tag HTML

- Pilih Tag HTML dan Copy Codenya Ke Template sobat tepat Di bawah Code <head> [saat kembali ke blog sobat jangan tutup halaman Veryfikasi [webmaster]

- Setelah langkah di atas sudah sobat selesaikan .. kembali lagi ke halaman Veryfikasi dan Click Tombol "Veryfikasi"

- Blogspot sobat sudah terVeryfikasi dan semoga artikel sobat Cepat terindex

5. Memasukkan/tambahkan Sitemap/Peta situs

- Setelah Blog sobat terveryfikasi teruskan dengan Click "Alat Webmaster" dan sobat akan kembali lagi ke halaman depan/Beranda Webmaster

- Click Alamat blogspot sobat yg sudah Di Daftarkan tadi [di Tutor bagian 2] dan pilih "Peta Situs"

Tutor mengetahui Sitemap/Peta situs Kita ..

a. masuk Kesini  lalu masukkan Url Sobat dan Click "Generate Sitemap"

Generate Sitemap

b. Disinilah Letak Code Sitemap/Peta Situs Sobat .. Copy semua code yg saya tandai dengan kotakan warna Hijau dan masukkan Ke Blog Sobat ..

code Sitemap

caranya : Dasbor ==> Setelan ==> Preferensi Penelusuran ==> Pilih edit robots.txt khusus ==> Aktifkan/Ya ==> Pastekan Code Sitemapnya ==> Simpan perubahan ..

- Kembali ke Web Master ..  Click Peta situs /tambahkan peta situs .. lalu masukkan Code Sitemap yg sudah saya tandai dengan kotakan warna merah di atas .. lalu Click "Mengirim Peta situs" 

Halaman sitemap

- Selesai dan tunggu hasilnya .. [1 jam - 1 hari]
*Dan ini hasilnya punya saya .. [tanpa ada maksud apapun kecuali hanya berbagi pengalaman]

untuk Grafik yg warna Biru itu adalah pertanda sudah terkirim .. 132 terkirim .. 

untuk Grafik yg warna merah itu pertanda sudah terkirim dan terindex .. 101 terindex

132 - 101 = 31 .. Belum terindex atau masih tertunda ..

Cat : saya belum tahu efek pasti dari Artikel ini .. dan saya cman mengerjakan tutorial" yg ada di Google yg pastinya dari Blog" Sahabat .. Cman dari sumber" BLogspot yg sudah Berpengalaman , contoh grafik di atas adalah Pertanda baik Buat Kemajuan Blogspot Kita .. paling tidak langkah Kita sudah lebih maju dari sebelumnya .. tinggal meneruskan apa yg harus kita teruskan atau meneruskan apa yg belum kita ketahui ..

Sampai di sini Artikel berbagi pengalaman tentang "Tutorial Supaya Blog Bisa cepat Terindex Mesin Pencarian Google" Semoga artikel ini bermanfaat untuk Kita semua ..

Dan semoga Rahmat serta Hidayah-NYA selalu tercurah Untuk Kita semua .. Amin ..

sumber : google

Tutorial Desain Halaman Blogspot melalui Tab bawaan Blogger

Bismillahirrohmanirrokhim .. 

Malam ini saya akan mencoba membuat Artikel tentang "Tutorial Desain Halaman Blogspot melalui Tab bawaan Blogger" ,Sebenarnya saya kurang berbakat dalam hal desain, tetapi saya berharap dengan adanya artikel ini bisa menjadi inspirasi saya untuk bisa mendesain halaman blog menjadi lebih baik ..

karna saya sudah pernah memposting artikel tentang bagaimana caranya creatif blog,silakan lihat di sini dan cara membuat artikel pada blog, lihat di sini maka anggap saja artikel ini adalah terusan/sambungan dari ke dua artikel tersebut ..

langkah langkahnya :
1. Login ke blogger sobat ==> dasbor ==> Template dan pilih Sesuaikan
2. Disinilah tempatnya untuk desain halaman Blog .. lihat gambar ..

Gambar Template Blog

3. saya anggap sobat sudah memilih jenis "Tampilan halaman Blog" dan disini kita hanya meneruskan untuk model desainya .. terserah sobat memulai dari mana .. tetapi saya akan mencontohkan urut"nya seperti yg pernah saya lakukan dalam mendesain blog saya ..

*Click  "Tata Letak"

Gambar Tata Letak

ket :

- Untuk kotakan yg saya tandai dengan warna Hijau itu adalah pilihan untuk model bidang halaman bagian atas

- Untuk Kotakan yg saya tandai dengan warna biru itu adalah pilihan untuk model bidang halaman bagian bawah

- silakan dipilih terlebih dahulu ,, setelah sobat yakin dengan pilihan , kita melangkah pada tab selanjutnya ..

* Click "Latar Belakang"

Latar Belakang

- Click pada Tombol pilihan gambar latar yg sudah saya tandai dengan bulatan warna merah dan sobat akan di lihatkan pada banyak pilihan gambar latar belakang seperti gambar di bawah ini gambar ..

Gambar Pilihan Latar Belakang

Ket :

- Kotakan yg saya tandai dengan warna merah adalah Menu pilihan Latar belakang [saya contohin dengan memilih kategori "alam"

- Dan pilihan gambarnya adalah yg tampak pada banyak gambar di atas ..

- Silakan di pilih dan di coba dengan cara Click satu persatu menu dan Pilhan gambar latar belakangnya 

- bila sudah di rasa pas .. silakan Click "selesai" dan bila di rasa masih kurang pas silakan click "Batal" untuk memulai Pilihan baru di Menu gambar ..

Cat : disini sobat juga bisa memilih gambar latar belakang dari Komputer sobat sendiri dengan cara Click "ungguh Gambar" [tentunya setelah sobat berkreasi dengan pembuatan latar belakang sendiri .. :p ]

* Kemudian Pilih / click "Sesuaikan Lebar"

Gambar edit Desain lebar Blog

Ket :

- untuk menyesuaikan lebar desain halaman Blog silakan geser dan sesuaikan dengan selera sobat

- bila di rasa pas maka beranjak ke Tab berikutnya ..

* Yg terakhir adalah pilihan "Tingkat Lanjut"

Gambar edit komponen halaman Blogspot

Ket :

- Disinilah letak untuk mengedit semua komponen Yg ada di halaman Blog sobat , tentang warna,bentuk dan ukuran tulisan dan banyak lagi [silakan di coba dan jangan ragu" untuk mencobanya]

- Kotakan warna merah itu adalah Tab" Komponen halaman sobat .. silakan Click satu persatu dan edit  untuk menyesuaikan tampilan Halaman Blog sobat .. saya contohkan dengan Click Tab "Judul Blog" dan Titik" merah yg saya tandai dengan Kotakan warna Putih itu adalah tanda dimana sobat akan mengadakan perubahan pada setiap sobat berganti menu Komponen halaman blog sobat ..

4. Bila semua sudah di rasa sesuai dengan keinginan sobat maka silakan Click pada tab "Terapkan Ke Blog" yg berada di pojok kanan atas .. dan "Lihat BloG" sobat

5. Selesai

dengan adanya Artikel ini saya berharap supaya sobat Mendesain Halaman Blog sobat dengan seindah mungkin .. Dan saya Berharap untuk bisa mencontoh dari Desain sobat .. hehhehe ..

Semoga Artikel ini bisa bermanfaat untuk Kita semua .. atas segala kekurangannya saya harap sobat bisa memakluminya .. karna saya masih Bejara dan masih sangat Newbie di bidang Blogspot ini ..

Semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. amin ..

sumber : http://nicroganteng.blogspot.com

Tutor membuat profil admin di bawah potingan

Bismillahirrohmanirrokhim ..

"Tutor membuat profil admin di bawah potingan" ini, salah satu fungsinya adalah sebagai ucapan terimakasih kepada para pengunjung bLog sobat , juga bisa sebagai penghias halaman posting .. atau bisa juga di ubah fungsinya menurut selera sobat ..

Langkah"nya ..

1. Login ke Blogger Sobar ==> Dasbor ==> template ==> Edit HTML ==> Teruskan dan centang kotakan kecil di atas ..

2. Cari code  <div class='post-footer'> [untuk memudahkan pencarian pencet F3 Di keybord sobat]

3. Bila sudah ketemu , taruh code di bawah ini, tepat di atas nya ..

Untuk melihat file Click Spoiler

<!-- Profil Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-penulis'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><b><data:post.author/></b></a></h4>
<div class='kontainer'>
<img src='http://i1223.photobucket.com/albums/dd514/nicro2/th_images.jpg'/>
Artikel <a expr:href='data:post.url'><i><data:post.title/></i></a> ini ditulis oleh <b><data:post.author/></b> pada hari <i><data:post.dateHeader/></i>. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang <b><data:post.title/></b> dapat Anda sampaikan melalui kotak komentar dibawah ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://galaxitutorial.blogspot.com/' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Profil Admin -->

Cat : Silakan Edit Semua code yg saya tandai dengan warna merah menurut selera sobat ..

4. Kemudian cari code ]]></b:skin>

5. Bila sudah ketemu silakan taruh Code di bawah, ini tepat di atas nya ..

Untuk melihat file Click Spoiler

.admin-penulis {
   display:block;
   width:auto;
   background:CFC9C9;
   padding:0;
   margin:30px 0 10px 0;
   font:normal 12px Arial, Sans-Serif;
   color:#222;
   border:2px solid #fff;
   box-shadow:0 1px 3px #000;
   -moz-box-shadow:0 1px 3px #000;
   -webkit-box-shadow:0 1px 3px #000;
   }

.admin-penulis .kontainer {
   padding:5px;
   }

.admin-penulis h4 {
   background:#699019;
   border:none;
   border-bottom:1px solid #699019;
   color:#fff;
   text-transform:normal;
   text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
   font:bold 12px Arial,Sans-Serif;
   padding:5px 10px;
   margin:0 0 0 0;
   display:block;
   }

.admin-penulis h4 a {
   color:#FEEA83;
   }

.admin-penulis img {
   width:70px;
   height:70px;
   margin:0 10px 0 0;
   float:left;
   border:1px solid #954B02;
   padding:2px;
   background:#ffffff;
   box-shadow:none;
   -moz-box-shadow:none;
   -webkit-box-shadow:none;
   }

6. Click Pratinjau , bila tidak ada yg error .. silakan Click "simpan template" dan lihat hasilnya

Sampai di sini dulu artikel saya tentang "Tutor membuat profil admin di bawah potingan" semoga bermanfaat untuk kita semua ..

dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk ita semua .. amin ..

Sumber :  http://www.wakrizki.net

Tutorial Mempercantik Halaman Posting Dengan Spiler dan Scroll

Bismillahirrohmanirrokhim ..

Sebelumnya Saya akan menginfokan tentang pergantian Nama Blogspot saya dan Alamat URLnya ..
Nama Blogspot dan URL lama :
- Kel4mbiT.BloGSpoT dengan alamat URL : g4lax1.blogspot.com

Nama Blogspot Dan URL Baru :
-Galaxi|Belajar Tutorial dengan alamat URL : galaxitutorial.blogspot.com

Ada banyak faktor yg menyebabkan pergantian dari nama dan alamat URL blogspot saya, tetapi saya tidak akan membahasnya disini .. [tidak penting .. hahaahaah]

Yuk .. dari pada saya ngelantur .. lebih baik ikutin tutor di bawah ini ...

"Tutorial Mempercantik Halaman Posting Dengan Spoiler atau dengan  Scroll"

saya akan menuliskan 2 artikel singkat,dimana dari ke 2 artikel tersebut hampir mempunyai manfaat yg sama .. yaitu untuk meringkas postingan/artikel kita .. caranya sangat mudah ,sobat tinggal masukan artkel mana yg mau di kasih spoiler atau scroll ..
untuk mempraktekan langsung silakan sobat menuju Halaman Posting sobat dengan jalan Click Entry baru " ..  Lihat Codenya Dibawah ini :

1. Code Script Spoiler untuk halaman posting

- Membuat Spoiler dengan isi teks

Untuk melihat file Click Spoiler

<div style="margin-bottom: 2px;">Untuk melihat file Click Spoiler<div style="margin-top: 5px; text-align: center;"><input value="Spoiler" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Spoiler'; }" type="button"> </div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">isi file disini</div></div></div

- Membuat Spoiler dengan isi gambar/image

Untuk melihat file Click Spoiler

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">

<b>Spoiler</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">

<div style="display: none;">

<img src="Link gambar" border="0" alt="Post spoiler">

</div>

</div>

</div> 

- Memasang spoiler dengan isi Video

Untuk melihat file Click Spoiler

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">

<b>Spoiler</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">

<div style="display: none;">

<img src="Link gambar" border="0" alt="Post spoiler">

</div>

2. Script Scroll untuk halaman posting

<div style="overflow:auto;width:450px;height:250px;padding:10px;border:1px solid #eee">isi file disini</div>


Ket : Ubah semua Code atau tulisan yg saya tandai dengan warna , sesuaikan dengan selera dan halaman posting sobat ..

sampai di sini dulu saya menuliskan artikel ini , semoga bermanfaat untuk kita semua ..

dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..

Tutorial Mempercantik Kolom Kotak Komentar

Bismillahirrohmanirrokhim ..

Selamat malam sob .. malam minggu yg sangat melelahkan .. fiuh ... ambil nafaaaaaas .. fiiiiiiuh .. hmm ..

"Tutorial Mempercantik Kolom Kotak Komentar" ini akan saya posting untuk sobat sobat yg membutuhkan . fungsinya adalah untuk memperindah bagian dari blogspot kita, Khususnya di bagian kolom komentar selain itu juga untuk mempermudah kita membaca komentar" dari pengunjung blog, dikarenakan kolom kotak komentar akan terlihat rapi ..

Artikel ini saya peroleh dari hasil saya berkunjung ke blog sahabat .. OK, bila sobat ingin memperoleh Tutor lengkap tentang Blogspot silakan kunjungi di sini atau di sini ...

"Tutorial Mempercantik Kolom Kotak Komentar"

1. Login ke Blogger ==> Dasbor ==> Template ==> Edit HTML ==> Lanjutkan dan centang kotakan kecil di atas ..

2. Cari code ]]></b:skin> [gunakan F3 untuk mempermudah pencariannya]

3. Bila sudah ketemu silakan masukkan kode di bawah ini, tepat di atas code  ]]></b:skin>

Untuk melihat file Click Spoiler

/*-------------------------------------------------------------- Kustomisasi Kolom Komentar Blogspot Oleh: Semar Bingung Blog: http://eltelu.blogspot.com/ --------------------------------------------------------------*/ .comments { padding: 4px; background: #eeeeee; border: 1px solid #999999; -moz-border-radius: 5px 5px 5px 5px; } .comments-content .comment-thread { padding: 4px; background: #ffffff; border: 1px solid #cccccc; } .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px; } .comments .comments-content .comment:first-child { padding-top: 0px; } .comments .avatar-image-container { height: 36px; padding-left: 4px; background: #ffffff; border: 1px solid #cccccc; -moz-border-radius: 3px 3px 3px 3px; } .comments .comment-block { padding-top: 4px; padding-bottom: 8px; padding-left: 4px; padding-right: 4px; background: #fcfcfc; border: 1px solid #cccccc; -moz-border-radius: 3px 3px 3px 3px; } .comments .comments-content .inline-thread { border: 1px solid #cccccc; -moz-border-radius: 3px 3px 3px 3px; } .comments .comments-content .comment-replies { margin-left: 48px; } .comments .comment .comment-actions a { margin-right: 4px; padding: 2px; background: #f3f3f3; border: 1px solid #cccccc; -moz-border-radius: 3px 3px 3px 3px; } .comments .continue a { padding: 2px; background: #f3f3f3; border: 1px solid #cccccc; } .comments .comments-content .datetime { float: right; margin-right: 4px; } .comments .comments-content .icon.blog-author { float: right; margin-right: 3px; } .comment-form { max-width: 100%; width: 100%; }

4. Click prantinjau untuk melihat apakah ada code yg error, bila tidak ada code yg error silakan Click simpan template .. dan lihat hasilnya ..

Semoga artikel ini bermanfaat untuk kita semua ..

dan semoga Rahmat serta Hidatah-NYA sellau tercurah untuk kita semua .. amin ..

Sumber : http://eltelu.blogspot.com

Tutorial Menampilkan Judul Posting Saja Saat Click Label

Bismillahirrohmanirrokhim ..

Selamat Malam sobat , kali ini saya akan membuat artikel yg berjudul "Tutorial Menampilkan Judul Posting  Saja Saat Click Label" hasil dari saya berkunjung ke Blog sahabat .. manfaat artikel ini, selain bisa membuat Blog terlihat lebih rapi juga bisa mempermudah para pengunjung blog untuk mencari artikel" yg mereka cari ..

yuk .. langsung saja menuju TKP ..

1. Seperti biasa login ke blogger sobat ==> dashboard ==> template ==> edit HTML ==> lanjutkan dan centang kotakan kecil di atas ..

2. Cari code <b:include data='post' name='post'/> [Gunakan F3 untuk mempermudah pencarian]
3. Bila sudah ketemu ganti code di atas dengan code di bawah ini ..

<b:if cond='data:blog.homepageUrl !=

data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

4. Click pratinjau , bila tidak terjadi Error silakan Click Simpan template

semoga artikel "Tutorial Menampilkan Judul Posting  Saja Saat Click Label" membawa manfaat untuk kita semua ..
dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. amin ya Robbal 'alamain ..

Sumber : http://kraeng-francisco-tutorial.blogspot.com

Tutorial Mebuat Template seo Friendly dengan mengubah H1, H2 dan H3

Bismillahirrohmanirrokhim ..

Sebelumnya Kelambit Blogspot sudah memposting tentang "Tutorial Memasang Permalink Tag Menjadikan lebih Seo Friendly" sekarang Kelambit Blogspot akan meneruskan postingan agar Blog sobat semakin Seo Friendly , Dengan tema "Tutorial Mebuat Template seo Friendly dengan mengubah H1 H2 H3"

manfaatnya dari judul di atas akan membuat postingan sobat berada di urutan atas pada mesin pencarian Googgle [Halaman Pertama] dengan cara sedikit mengedit tempalate sobat ..

sebelum Kelambit Blogspot  menuliskan tutornya alangkah lebik baik menerangkan apa yg dimaksud dengan H1, H2 dan H3 pada template blog ..

H1 adalah header title atau judul yg terdapat di atas halaman
H2 adalah judul dari posting
H3 adalah Widget

berikut adalah langkah "Tutorial Mebuat Template seo Friendly dengan mengubah H1, H2 dan  H3"

1. Login ke blogger ==> dasbor ==> template ==> edit HTML ==> lanjutkan dan centang kotakan kecil di atasnya ..

2. Cari code di bawah ini :

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Bila sudah ketemu Rubah tag h3 yg di tandai dengan warna merah menjadi h2 ..

3. Lalu cari kode <h3 class='mobile-index-title entry-title'> <data:post.title/> </h3>

ubah h3 menjadi h2

4. Lanjut dengan mengganti H2 menjadi H3 [kebalikan dari tutor yg di atas] , cari Code di bawah ini ..

<!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if>

5. bila sudah ketemu rubah tag h2 yg di tandai dengan warna biru menjadi h3 ..

Cat : Tergantung pada widget sobat di homepage, apabila widget anda ada 10 buah, maka ubah semua widget tag h3 yg 10 buah itu  menjadi h2 ..

6. Click Prantinjau .. bila tidak terjadi error dikarenakan salah edit atau faktor lain .. silakan Click simpan template ..

Dengan mengatur / mengubah tag h1, h2 dan h3  akan menjadikan template blog  menjadi seo friendly .. dan yg pastinya akan di sukai oleh search engine ...

Sekian dulu artikel dari Kelambit Blogspot, semoga membawa manfaat bagi kita semua ..

dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. amin ..

Sumber : http://teknik-blog-tutorial.blogspot.com/

Tutorial Memasang Permalink Tag menjadikan lebih Seo Friendly

Bismillahirrohmanirrokhim ..

Apa yg dimaksud dengan Permalink Tag .. disini Kelambit Blogspot akan mecoba sebisanya untuk membahas tentang apa itu Permalink Tag ..dari berbagai sumber yg kelambit blogspot peroleh dari google .. permalink adalah kependekan dari "Permanen Link" yg apa bila di jabarkan, menjadi alamat link permanen dari suatu halaman blog atau web.
Apa perlunya  memasang permanen link pada Blog ..nah ini .. dengan memasang permanen link .. maka search engine akan lebih menyayangi blog sobat denagn kata lain , permalink lah yg memperingan pekerjaan google untuk menemukan kata kunci yg di sematkan pada mesin pencari / search engine .. Yg pasti intinya adalah Permalink tag bisa membikin template blog sobat akan menjadi lebih SEO Friendly ..

Ok sekarang  bagaimana caranya memasang pemalink tag di blog  .. ikuti tutor di bawah ini ..

1. Login ke blogger ==> dasbor ==> template ==> Edit HTML ==> lanjutkan dan centang kotakan kecil di atasnya ..

2. Cari Code <div class='post-footer'> [seperti biasanya pake F3 untuk mempermudah pencariannya]

3. bila sudah ketemu .. tempatkan code di bawah ini , tepat di atas Code <div class='post-footer'>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p class='post-url'>
<b:if cond='data:post.url'>
Article : <a expr:href='data:post.url' expr:title='data:post.title' rel='tag'><data:post.title/></a>
</b:if>
</p>
</b:if>


4. Pratinjau bila tidak ada yg error .. silakan Click Simpan template

Sampai di sini dulu Tutorial Memasang Permalink Tag .. semoga bermanfaat untuk kita semua ..

Semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..

Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail

Bismillahirrohmanirrokhim ..

Sebelumnya Kel4mbiT.BloGSpoT pernah menulis Artikel tentang "Tutorial  Membuat Artikel Terkait Pada BlogSpot" dimana artikel ini menampilkan "Judul" artikel terkait pada setiap postingan Sobat ..
Sekarang ini Kel4mbiT.BloGSpoT akan mencoba menampilkan Artikel sejenis yaitu "Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail" dimana artikel tidak ahanya  menampilkan "Judul" saja pada setiap artikel yg terkait .. tetapi juga di barengi dengan sebuah gambar pada artikel yg terkait pada postingan sobat .. jadi intinya sobat tinggal memilih satu di antara 2 artiket tersebut .. pilih yg sesuai dengan design Blogspot sobat ..

yuk .. kita melangkah pada tutor nya ..

*Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail*

1. Login ke Bloggger sobat ==> Dasbor ==> Template ==> Edit HTML ==> Lanjutkan dan centang kotakan kecil yg ada di atasnya ..

2. Cari Code </head> [Tekan F3 pada keybord sobat  untuk mempermudah pencarian] .. dan bila sudah ketemu .. letakkan Code di bawah ini , tepat di atas Code </head>

Untuk melihat file Click Spoiler

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts*{
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4D-epCowbO-VzP0bra2mtx23hemQ3MJJabulqF3PuJTZ6aA6BVk5ruK9RS5VA-KpbBMEbgLFTpFDVNl-ExVWdqz1dnwReuc_ILCvGzfNl-9iR6gCafmII-n3MxXrNtOuayXCPTQcWqmw/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Keterangan :
- Code yg Kel4mbiT.BloGSpoT tandai dengan warna biru itu adalah untuk menampilkan Gambar/Thumbnail di setiap halaman .. jadi apa bila sobat tidak ingin menampilkan di setiap halaman, maka hapus saja 2 code biru di atas ..
- Rubah/ Ganti setiap Code yg Kel4mbiT.BloGSpoT tandai dengan warna merah menurut selera sobat

3. Selanjutnya carilah kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> [di karenakan Code template di masing" Blogger  berbeda, maka silakan cari salah 1 dari 2 code di atas] Bila sudah ketemu, letakkan Kode di bawah ini, tepat di bawah salah satu Code di atas ..

Untuk melihat file Click Spoiler

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>

Ket :
- Ganti code yg Kel4mbiT.BloGSpoT tandai dengan warna merah menurut selera sobat ..
- Ganti Juga Tulisan yg seperti Code warna biru di atas .. Bila ingin menampilkan di halaman Posting saja ..

4. Click Preview untuk melihat apakah ada yg Error .. bila tidak ada yg Error , sialkan sobat click "Simpan Template"

Nah sampai di sini dulu Artikel tentang "Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail"
Apabila sobat masih sedikit tidak mengerti tentang tutorial di atas .. silakan tanyakan melalui post komentar di bawah ini ..

Semoga artikel ini memeberi manfaat untuk kita semua ..

Dan semoga Rahmat serta Hidayah-NYA akan selalu tercurah untuk kita semua .. amin ..

Tutorial Membuat Artikel Terkait Pada Blogger

Bismillahirrohmanirrrokhim ..

kali ini Kelambit Blogspot, akan memberikan 1 lagi tutorial tentang "Membuat Artikel Terkait Pada Blogger", yg berfungsi untuk menampilkan artikel" sobat yg terdahulu di setiap sobat memposting artikel baru. hal ini sangat penting di lakukan untuk memberikan layanan pada pengunjung setia Blog kita, yaitu untuk mempermudah pencarian artikel" yg mereka butuhkan .. di samping semua itu pemasangan kotak artikel terkait ini akan membuat blog sobat terlihat semakin elegant .. :)

Lihat Tutornya :

1. Login Blogger sobat ==> Dasbor ==> Template ==> Edit HTML ==> Lanjutkan dan centang kotakan kecil di atasnya ..
2. Cari Code <div class='post-footer-line post-footer-line-1'> [untuk memudahkan sobat dalam pencarian ,tekan F3 pada keyboard sobat]
3. bila sudah di temukan .. letakkan Code di bawah ini , tepat di bawah code <div class='post-footer-line post-footer-line-1'> ...

Untuk melihat file Click Spoiler

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<Script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</Script>
</Div>
<script type="text/javascript">RelPost();</script>
</Div>
</b:if>

cat : code yg "Kelambit Blogspot" tandai dengan warna merah, silakan di ganti menurut selera sobat ..

4. Pratinjau .. untuk melihat apakah ada code yg Error , bila tidak ada Error .. silakan  Click "Simpan Template" , dan lihat hasilnya di potingan paling bawah sobat .. :)

Kelambit Blogspot akhiri postingan "Tutorial Membuat Artikel Terkait Pada Blogger" sampai di sini. semoga artikel ini memberikan manfaat untuk Kita semua ...

dan Semoga Rahmat serta Hidayah-Nya selalu tercurah untuk kita semua .. amin ..

Tutorial Membuat dan Memasang Tandatangan Di Setiap Postingan

Bismillahirrohmanirrokhim ..

Selamat pagi sobat .. selamat beraktifitas ..
kali ini Kelambit Blogspot akan memposting tentang  bagaimana cara "Membuat dan Memasang Tanda Tangan Di Setiap Postingan" . Disamping Untuk memperindah di setiap postingan sobat juga tandatangan ini menjadi Bukti bahwa di setiap postingan sobat .. sobatlah sang Pembuatnya ..
Klo ingin lihat contoh jadinya .. silakan tarik drag sobat ke bawah postingan Kelambit Blogspot ini ..


Yuk Ikuti tutor di bawah ini :

1. Langkah pertama sobat .. silakan masuk ke sini .. dan sobat akan di bawa ke sebuah halaman web yg menyediakan fasilitas ini .. lihat gambar

2. Pilih proceed , untuk memulai pembuatan signature tandatangan, dan sobat akan di arahkan pada 4 pilihan  cara pembuatan signature tandatangan ini .. saya sarankan pake "using the signature Creation Wizard" Lihat gambar yang Kelambit blogspot tandai dengan lingkaran merah ..

3. sobat akan memulai pembuatan dengan step 1 ..  isi kolom tersebut dengan Nama atau identitas blog sobat .. kemudian Next Step .. lihat gambar ..

4. pada step ke 2 ini , Pilih bentuk karakter sinagture tantangan sobat diantara beberapa pilihan yg ada .. seperti gambar di bawah ini .. lalu next Step

5. pada step ke 3,  pilih ukuran dari  karakter sinagture tandatangan sobat , caranya sama seperti tutor di atas [no 4] .. lalu next step ..

6.  kemudian pilih kemiringan dari karakter sinagture tandatangan sobat , cara yg sama seperti tutor di atas [no 4] .. lalu next step ..

7. Pada Step ke 4 , Pilih warna dan background karakter sinagture tandatangan sobat .. caranya click pada code warna untuk mengeluarkan kotak pilihan warna .. untuk background hilangkan centang pada kotakan kecil lalu centang lagi bila sobat menginginkan backgroun Transparan .. lihat gambar .. jangan lupa next step untuk melanjutkan ke Step berikutnya .. :)

8. pada Step ke 5, lihat hasil dari Creatif sobat .. Silakan Upload untuk mendapatkan URL nya atau bisa juga langsung dengan cara click kanan pada signature tandatangan sobat , lalu pilih "Copy Image URL" .. contoh gambar ..

* Sekarang bagaimana cara memasukan Hasil URL Signature Ke dalam setiap Postingan sobat .. [otomatis]

1. Login ke Blogger Sobat ==> Dasbor ==> template ==> Edit HTML ==> Lanjutkan dan centang kotakan kecil di atasnya .. [untuk memudahkan pencarian Pencet F3 di keybord sobat]

2. Cari Code <data:post.body/> dan bila sudah ketemu .. tempatkan code di bawah ini , tepat di bawah code  <data:post.body/> ..

 <div style='display:block;float:right;margin: 0px 10px 0px 0px;'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<img alt=' ' src='http://i1223.photobucket.com/albums/dd514/nicro2/th_A50AC823AB368B0CAC55FDA46E5250841.png'/></b:if></div>

cat : ubah URL signature yg saya tandai dengan warna merah itu dengan URL signature tandatangan sobat ..

3. Click Pratinjau, bila tidak ada yg error .. silakan click Simpan Template ..

4. Selesai .. dan lihat di postingan sobat 

Somoga Postingan ini memberi manfaat untuk Kita semua ..

Dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..

Tutorial Membuat Breadcrumb di Blogspot

Tutorial Membuat Breadcrumb di Blogspot ini berfungsi untuk memaksimalkan Seo On Page yg biasanya di tandai dengan rentetan tulisan di atas judul posting saat sobat membuka tautan Judul Posting .. Contohnya seperti gambar di bawah ini .. :

Sekarang untuk tutor membuat dan Codenya , ikuti langkah di bawah ini :

1.  Login Blogger ==> Dasbor ==> Template ==> Edit HTML ==> Lanjutkan dan centang kotakan kecil di atasnya ...

2. Cari kode ]]></b:skin> [untuk memudahkan pencarian tekan F3 di keybord sobat]
3. Letakam code di bawah ini , tepat di atas kode ]]></b:skin>


.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

4. langkah selanjutnya cari code <b:includable id='post' var='post'>
5. bila sudah ketemu , letakkan code di bawah ini, tepat di bawah code <b:includable id='post' var='post'>


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><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> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

6. Prantinjau, bila tidak terjadi error .. silakan click simpan template

Ket : sekarang blog anda sudah jadi seo friendly untuk optimasi seo

Semoga Bermanfaat untuk kita semua ..

Dan semoga Rahmat Serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..

Tutorial Memasang Meta Tag Otomatis Di Setiap Postingan Blogspot

Bismillahirrohmanirrokhim

Tutorial Memasang Meta Tag Otomatis Di Setiap Postingan Blogspot  ini sangat berguna sekali bagi sobat yang mengalami duplikat meta deskripsi. Kegunaan dari memasang dinamik meta tag otomatis ini yaitu akan memiliki meta deskripsi yang berbeda diantara postingan yang satu dengan postingan lainnya pada setiap kali posting, jadi intinya sobat tidak perlu lagi menambah secara manual pada setiap postingan.
Disini saya akan menuliskan 2 Code memasang meta Tag Otomatis :
- Yg petama untuk yg belum sama sekali memasang kode meta Tag di Blog sobat
- Yg kedua untuk yg pernah memasang code meta Tag di Blog sobat

Cara Memasang Meta Tag di Setiap Postingan Secara Otomatis :

1. Login Blog sobat ==> dasbor ==> Template ==> Edit HTML ==> Teruskan dan centang kotakan kecil di atasnya

2.  Cari kode <title><data:blog.pageTitle/></title> [untuk memudahkan pencarian masukkan kode tersebut di dalam kotak pencarian dengan cara pencet F3 di keybord sobat]

3. Bila sudah ketemu< hapus kode tersebut dan ganti dengan code di bawah ini


<b:if cond='data:blog.url == &quot;http://g4lax1.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='description' content='isi dengan deskripsi blog'/>
<meta name='keywords' content='isi dengan kata kunci pisahkan dengan koma'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='keywords'/>
</b:if>

Cat : ganti Code yg saya tandai dengan warna merah dengan data Blog sobat

4. Pratinjau, bila tidak terjadi Error .. silakan simpan template



Sumber : Google

Semoga bermanfaat untuk Kita semua ..
Dan semoga Rahmat serta Hidayah-NYA selalu tercurah Untuk kita semua .. Amin ..

Tutor membuat Menu Dropdown dan search Engine

Bismillahirrohmanirrokhim .. salam Untuk sobat Semua ..

Langsung saja menuju pokok pembahasannya ..
Kali ini saya akan memposting  tentang Tutor membuat Menu Dropdown yg dilengkapi dengan search Engine, sebenarnya tutor  dan Fungsi dari menu Dropdowwn ini  hampir sama dengan yg saya posting Kemarin .. silakan lihat di sini  Tutorial membuat navigasi dropdown menu, hanya bedanya menu dropdown ini di lengkapi dengan Search engine [kotak pencarian]. penasaran pingin lihat bentuk ikuti tutor dibawah ini untuk menaruh Menu Dropdown dan search Engine ini kke Blog sobat :

1. Masuk ke Blogger ==> Dasbor ==> pilih Template ==> Edit HTML ==> Lanjutkan dan Centang kotakan kecil di atasnya

2. Cari Kode ]]></b:skin> [untuk memudahkan pencarian silakan sobat Pencet F3 aatau Ctrl +F]

3. Bila sudah ketemu masukkan Kode di bawah ini , tepat di atas kode  ]]></b:skin>

Untuk melihat file Click Spoiler

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDC0GXXM8szXqdoyIouM7y2phl0DRHPkQYKqxpTOqPHpEv40_PZerznfrS4fYw2e-7-YZXFDae29AxrIq07sSbQ1vels7j34sVJCunaPHsyP5dQFmf8z0EPmReyFcJtbSU-DdS5wexWc/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhuMgbttR3hUscZnEgsOAk6SDOvJc_vZOsuSJJZcvwD1rUIDRxHPFEEaDIt1f90yhe67djqrRGIidCeWfqaowC5R_Wng7BIPFk7KAf4h16jCdn9kmoGkWX_GtLqAfVqBgpiYHAj63SuI/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

4. Lanjut, sekarang cari Kode <div id='header-wrapper'>  atau <div class='header-outer'> [pilih salah satu yg ada di Template sobat] ... bila salah satu kode sudah di temukan .. letakkkan kode di bawah ini , tepat di bawah salah satu kode tersebut ..

Untuk melihat file Click Spoiler

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS51JIjMuQDL1jNjaHjBIL48hdPY0DsGT3zvLgy-X9uLIjs-xOhbVIqSe5R1UJTuqv75hTRReZWKlNNH9fjzgwVxRM4VM4lfiIgxbd-P98vTl5Wl-T0BJ9qlvf2Jag2ZkYujT9R6Rmd0I/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://URL-blog.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7D1LqEdf8y1JdE60Og8c6AYtwv-dal-K08EoHb7_GlS9CtqoIpnCceX1nLvEFXIa32op7Y9IO4mKfYQRNV_9GjMWdfghImGUpbQLSNo7whQgleyDUGJq2JdlvpABEKNqxCKKthSv8Bk/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVRqWKhxVV98JPeuGiacI5rHHMLwa4AMVJ5iW4s5LajJhSn-eC8VQ8CzAQ387g1uUx1GUPEb5EVD-RTpUQig_AOPjm2VJFN3StN5zyilROG_doa8AA7CLHj0c7L9ksYXxjBRszEtdoG8/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Catatan : silakan edit Kode  diatas dengan daftar menu di Blog sobat
- untuk warna hijau ==> tempat Link sobat
- untuk warna merah ==> tempat menu sobat

Sumber : google

Semoga postingan ini memberi manfaat untuk Kita semua ..
Dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..

Tutorial Membuat Navigasi Dropdown Menu

Bismillahirrohmanirrokhim .. Selamat Malam Sobat semua ....

Malam" begini ngapain enaknya .. Hmm .. Bingung Gue .. dari pada gue jadi lebih Bingung lagi .. lebih baik Gue Posting sesuatu yg mungkin ada manfaatnya buat sobat .. Yaitu "Tutorial Membuat Navigasi Dropdown Menu" .. tutor ini akan membikin sedikit Repot sobat sekalian .. Cman hasilnya .. hmmm  .. bisa meringkas banyak Menu" yg ada di Blog sobat .. dan yg pastinya akan membuat blog sobat Terlihat semakin ekslusif ... hehehe ..

Bentuknya kaya gini  ..

Dan Bila di sentuh .. contoh salah satunya kaya gini ..

Gimana .. ?.. Bila sobat tertarik .. silakan ikuti tutoral di bawah ini ..

"Tutorial Membuat Navigasi Dropdown Menu"

1. Login ke Blogger sobat ==> Dasbor ==> Template ==> edit HTML ==> Lanjutkan dan centang kotakan kecil di atasnya ...

2. Pencet F3 atau Control F untuk mengeluarkan kotak pencarian  [ini memudahkan sobat untuk mencari kode kode HTML yg Rumit]

3. Tulis /Copas Kode ]]></b:skin> di kotak pencarian [sebelah kanan atas] ==> bila sudah  muncul di kerimbuanan kode" HTML di bawahnya dan biasanya di tandai dengan sebuah warna ==> bila belum muncul tekan enter ..

4. Bila sudah ketemu .. Letakkan kode di bawah ini , tepat di atas Kode  ]]></b:skin>

Untuk melihat file Click Spoiler

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioeK-7F_OUHkMkW-swo_oudiG6L7Na07clBlYdjT5woB5v0cCx7-ImKyth8YKsDGajkQe-iVKupoCVN_nSppnYDwMdLArITzG0yZM7X89jljJ5vfFTzHdzL5onfu1KQ6BrnDhGYVM4of4O/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioeK-7F_OUHkMkW-swo_oudiG6L7Na07clBlYdjT5woB5v0cCx7-ImKyth8YKsDGajkQe-iVKupoCVN_nSppnYDwMdLArITzG0yZM7X89jljJ5vfFTzHdzL5onfu1KQ6BrnDhGYVM4of4O/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}

.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh47rvmxawWwc-t1yxE-I5UijYLdEbQtUvFXDaSl5dFRZXSIiSzJleu6GBSodwTkmrwHihyOvqmQYzTygmCpnudxtdQ6M9c1o21hw01AE6WKJ53-Ki1szJp1uIrAmz9_XDhYIHF3csKPU8/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh47rvmxawWwc-t1yxE-I5UijYLdEbQtUvFXDaSl5dFRZXSIiSzJleu6GBSodwTkmrwHihyOvqmQYzTygmCpnudxtdQ6M9c1o21hw01AE6WKJ53-Ki1szJp1uIrAmz9_XDhYIHF3csKPU8/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUA8uymAu_O3cOsLthCUpH_GIws066_5uwqC6sNSlJqZbqCOv_yd_wJOX8kZ2jnWDxQdZUBGc0VcyD2w4CZ0wSEaj4ydzg6apaDJb3RrwuX-k4NFRv1tpxqjXGfJKmZVh8lBcL_eDjbwEr/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->

5. Setelah itu Copas lagi Code <div id='header-wrapper'> atau <div class='header-outer'> dalam kotak pencarian , setelah salah satu code tersebut Muncul .. maka letakkan Code di bawah ini,  tepat bawahnya ..

Untuk melihat file Click Spoiler

<div class="nav">

<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

6. Click Prantinjau untuk melihat hasil sementara .. bila tidak terjadi Error maka silakan terusin mengisi dengan file/data sobat dengan cara mengedit Tanda, angka atau huruf yg sudah saya tandai dengan warna ..
ket :
- untuk warna ungu silakan edit dengan link URL sobat
- untuk warna merah silakan edit dengan nama" file /data sobat

7. pratinjau lagi untuk memastikan tidak terjadi Error .. dan Save ..

Sumber : google

Semoga Bermanfaat untuk Kita semua ...

Dan Semoga rahmat seta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..