- MI. AS-SHOLAHIYAH
- Depok, Jawa Barat
- Lembaga Pendidikan As-Sholahiyah didirikan sejak tahun 1962, kala itu pendidikannya masih bersifat pengajian lekar, dan baru kemudian pada tahun 1967 As-Sholahiyah resmi dijadikan sebagai sebuah lembaga Pendidikan yang bergerak pada pendidikan dasar keagamaan atau lebih lazimnya disebut Lembaga Pendidikan Madrasah Diniyyah. seiring dengan perubahan dan peningkatan dunia pendidikan, pada tahun 1983, MD. As-Sholahiyah pun mengadaptasikan dirinya, dari lembaga pendidikan diniyyah menjadi Lembaga Pendidikan Ibtidaiyah. Hingga kini MI. As-Sholahiyah masih eksis dan ikut serta memajukan dunia pendidikan di bawah naungan "Yayasan Pendidikan Islam As-Sholahiyah Az-Zainiyah".
Sabtu, 02 Juli 2011
Minggu, 22 Agustus 2010
Text Berjalan di Bar menu
Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.
Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.
Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.
Untuk template klasik silahkan ikuti langkah-langkah berikut ini :
</head> <script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"
scrollSpeed = 130
lineDelay = 0
// Do not change the text below //
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>
Untuk template baru silahkan ikuti langkah-langkah berikut ini :
</body> , kode ini letaknya berada paling bawah sebelum kode </html> <script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"
scrollSpeed = 130
lineDelay = 0
// Do not change the text below //
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>
sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.
Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.
Selamat mencoba !!!
Selengkapnya...
Cepat Terindeks di Google
Menyambung postingan kemarin bahwa saya akan memposting tips-tips bagaimana agar blog kita lebih cepat terindeks di google. Tentunya tips-tips berikut tidaklah seratus persen menjamin bahwa blog kita akan lebih cepat terindeks, akan tetapi bolehlah untuk di coba dan sebenarnya ini sudah saya buktikan sendiri kebenarannya.
Seperti keterangan yang lalu, bahwa setelah kita mendaftar di google, blog kita tidaklah langsung terindeks pada mesin pencari google, akan tetapi bisa memakan waktu 3 sampai 4 minggu bahkan apabila bernasib kurang baik bisa sampai 8 minggu barulah blog kita terlisting pada mesin pencari nya. Nah agar tidak terlalu bosan menunggu, sedikit tips bagi sobat, silahkan coba dan buktikan.
- Memperbaiki Pengaturan blog
Untuk langkah-langkah pengaturan (Setting) blog, secara lengkap sudah saya posting silahkan baca di sini !, akan tetapi karena postingan tersebut di buat sebelum ada layanan blogger berbahasa indonesia, maka settingannya berbahasa inggris. Tapi toh saya yakin bahwa sobat pasti faham dengan yang saya tulis.
- Link ke blog dengan page rank tinggi
Salah satu cara agar blog kita lebih cepat terindeks di google adalah kita di link oleh blog yang mempunyai page rank yang tinggi, dan biasanya blog-blog tersebut adalah blog terkenal. Contoh blog Indonesia yang sangat terkenal adalah blog miliknya mas fatih syuhud yaitu http://fatihsyuhud.com, blognya kang Agus hery di http://edittag.blogspot.com, dan masih banyak lagi yang lainnya. Saran saya pasanglah terlebih dahulu link blog mereka pada halaman blog milik sobat, setelah itu mintalah agar blog sobat di linkback atau di link balik oleh mereka. Permintaan untuk di linkback bisa di ajukan pada buku tamu (shoutbox) atau bisa juga melalui komentar pada postingan atau jika ingin lebih pribadi kirim melalui email. Saya yakin mereka akan segera memasang link sobat pada blog mereka, atau jika dalam waktu tiga hari masih belum di linkback, ajukan kembali permintaan untuk dilinkback karena untuk blog-blog terkenal dalam sehari tidak hanya satu atau dua blog saja yang pasang link blog mereka, maka wajar saja apabila ada satu atau dua blog yang terlewatkan untuk di linkback.
- Pasang tag meta
Salah satu cara agar blog kita lebih di lirik atau di kenali oleh mesin pencari miliknya om google adalah memasang tag meta di bagian header pada kode template blog. contoh tag meta untuk blogger seperti ini :
<meta name="description" content="Deskripsi dari blog sobat di sini "/>
<meta name="keywords" content="kata kunci atau keyword simpan disini, buatlah beberapa keyword yang sobat anggap sangat berhubungan dengan blog sobat "/>
Yang harus diperhatikan adalah tulisan-tulisan yang tercetak merah. Tulisan-tulisan tersebut haruslah di sesuaikan dengan kondisi blog sobat.
Untuk deskripsi, silahkan isi dengan deskripsi blog sobat. contoh untuk blog milik saya adalah "Panduan praktis membuat blog di blogger.com. tips, trik, serta download software secara gratis".
Untuk kata kunci (keyword), silahkan isi dengan kata kunci yang berhubungan dengan blog sobat. contoh untuk blog ini adalah : blog tutorial, cara membuat blog, bikin blog, cara bikin blog, dan sebagainya. Jangan lupa untuk menyisipkan tanda koma untuk memisahkan antara keyword yang satu dengan keyword yang lainnya.
Untuk judul blog, silahkan isi dengan judul dari blog sobat.Contoh : untuk blog ini adalah Blog tutorial.
Bagi yang belum mengetahui dimanakah tag meta di simpan, jawabannya adalah di dalam kode header blog, atau jika masih bingung simpan saja di bawah kode <title><data:blog.pageTitle/></title> .
Sebenarnya masih ada beberapa tips yang bisa dilakukan, akan tetapi kayanya udah lemes nih ngetiknya, jadi dicukupkan sekian dulu deh, selamat mencoba dan mudah-mudahan blog sobat lebih cepat terindeks di google. Satu pertanyaan aja deh buat tambahan, sudahkah blog sobat terindeks di google? coba tuliskan alamat blog sobat pada search engine google di bawah postingan ini ! Selengkapnya...
Pasang Game di Blog
Kemarin ada yang rikues minta di buatkan tutorial cara Pasang Game di blog, dan sepertinya tutorial yang akan di tulis tidak terlalu sulit, maka langsung saya buatkan saja.
Sebagai catatan kecil saja, memasang game di blog memang menyenangkan bagi sebagian orang, namun hal ini akan mengakibatkan loading blog anda akan sedikit berat. Jadi silahkan dipikir dulu baik dan buruknya.
Untuk memasang Widget game, anda bisa mendapatkannya secara gratis di internet, silahkan lakukan googling saja. Sebagai contoh, salah satu penyedia layanan ini adalah http://www.khemer.com. Contoh game yang bisa di pasang adalah seperti ini :
Caranya menginstall nya seperti ini :
Untuk template Baru :
- Silahkan kunjungi http://www.khemer.com.
- Silahkan lihat dan coba game-game yang ada dengan cara meng klik pada judul game.
- Setelah menemukan game yang di rasa cocok, perhatikan ke bagian bawah.
- Copy kode yang ada pada text area, lalu paste pada notpad atau text editor lainnya, kemudian save dulu di komputer.
- Sekarang anda mempunyai kode game untuk di pasang di blog.
- Silahkan close halaman browser anda jika di rasa cukup.
- Sign in di blogger dengan ID anda.
- Klik Layout.
- Klik tab Elemen Halaman.
- Klik Tambahkan sebuah Elemen Halaman.
- Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript.
- Copy kode game yang tadi di dapat, lalu paste pada pop up window yang muncul.
- Klik tombol SIMPAN PERUBAHAN.
- Pindahkan elemen yang baru anda buat tadi pada tempat yang di di rasa cocok.
- Klik tombol SIMPAN yang ada di sebelah atas.
- Selesai. Silahkan lihat hasilnya!
Untuk template Klasik :
- Sign in di blogger dengan ID anda.
- Klik Layout.
- Klik tab Edit HML.
- Copy seluruh kode template anda, kemudian paste pada notepad. Silahkan di save dulu untuk backup (sangat penting).
- Copy kode game yang tadi di dapat, lalu paste pada tempat yang dinginkan.
- Klik tombol Simpan Perubahan Template.
- Selesai. Silahkan lihat hasilnya!
Gampang bukan? Selamat mencoba !
Cara membagi Dua Kolom Header
Untuk memasukan search engine di header, ataupun iklan, atau photo, atau apa sajalah namanya, anda perlu membelah atau membagi dua kolom header anda. Namun perlu di ketahui sebelumnya bahwa desain template itu sangat komplek dan menggunakan banyak teknik, agar kita (kita... lho aja kali, padahal gua juga iya 
) lebih terfokus, maka kang rohman mengambil sampel template buatan kang rohman sendiri yaitu Template magazine 1 yang jika anda ingin mengetahui teknik ini, anda harus terlebih dahulu mendownload nya disini!, dan kang rohman sarankan jangan pada blog kesayangan anda tapi buatlah satu blog percobaan trus upload deh tuh template magazine nya, kan sayang apabila blog yang anda sayangi jadi berantakan gara-gara jadi bahan percobaan.
Sudah siap anak-anak , padahal banyak pembaca blog ini yang sudah bapak-bapak atau ibu-ibu, pak polisi juga suka baca juga lho, ya pak prie? (tapi kemana pak blognya, ko saya cari-cari jadi ga ada sekarang, di delete ya blognya), kalo anak mudanya sih banyak seperti eko priyanto yang kerjanya nge blog mulu ampe lupa pulang kerumah, trus juga oom sang guru blogger yang walaupun ilmunya segudang masih tetep mau silaturahmi ke blog ku ini, kemudian masenchipz yang rajin komentar, dan E..alahh.. ko jadi acara kirim-kirim salam kaya di raddio aza... ya wis lah kita kemmbali ke lapppppp... pokok bahasan atuh.. emangnya mas tukul yang suka kembali ke lappppp..top.
Yup... serius nih, dah download trus diupload templatenya kan? kalo sudah sok atuh di baca sajah trik atau cara membagi dua kolom header. Nih triknya kaya gini :
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman dan anda akan melihat format kolom header anda menjadi seperti ini :
Kolom header anda sudah menjadi dua bagian, yang sebelah kiri dan sebelah kanan. Trus bagaimana kalau sudah begitu? ya terserah anda, kolom sebelah kanan saya buat menjadi elemen layaknya yang ada di sidebar, jadi mau di masukan seach engine, mau iklan, mau gambar, ya terserah yang masukin.
Ya udah, cukup..cukup..dan cukup... soalnya jari saya sudah mulai pegal-pegal gara-gara ngetik mulu dari tadi... sampai ketemu lagi deh pada tutorial berikutnya.
Selengkapnya...
Photo Profile Berbingkai
Sobat Edelweis rupanya berkeinginan agar photo yang terpampang di profilemenjadi ada figura nya supaya tampak lebih sedap di pandang mata, Sebuah keinginanyang wajar kalau menurut saya. Yups..untuk itu akan saya bahas sedikit trik agar photo tersebut menjadi ada figuranya.
Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian untuk photo frofile, contoh kode photo frofile untuk template lama seperti ini :
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
untuk template baru seperti ini :
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor; }
Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :
float:left; --> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.
padding:4px; --> padding disini maksudnya adalah jarak antara photo dengan figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).
border:1px solid #ddd; --> nah ini yang menjadi bingkai photonya, nilai figura adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai 1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd --> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya jika tidak cocok.
Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!
Untuk template klasik :
- Sig in di blogger
- Klik menu Template
- Klik menu Edit HTML
- Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting
- Cari kode yang mirip dengan kode di bawah ini : .profile-img img { float:left; padding:4px; border:1px solid #ddd; margin:0 8px 3px 0; }
- Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini : .profile-img img { float:left; padding:4px; border:8px solid #ddd; margin:0 8px 3px 0; }
- Klik tombol Pratinjau untuk melihat hasil perubahan
- Jika sudah OK, klik tombol Simpan Perubahan Template
- Selesai.
Untuk template baru :
- Sign in
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
- Klik kotak kecil di samping tulisan Expand Template Widget
- Tunggu beberapa saat sampai proses selesai
- Cari kode yang mirip dengan kode di bawah ini : .profile-img { float: left; margin: 0 5px 5px 0; padding: 4px; border: 1px solid $bordercolor; }
- Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini : .profile-img img { float:left; padding:4px; border:8px solid $bordercolor; margin:0 8px 3px 0; }
- Klik tombol Pratinjau untuk melihat perubahan
- Bila sudah OK, klik tombol SIMPAN TEMPLATE
- Selesai.
Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau di buatin bingkai tho).
Jika penasasaran ingin melihat photo ganteng dengan figura yang antik, silahkan klik di sini !
Selamat mencoba deh !
Cara Membuat Teks Berjalan di Tab dan Navbar Atas
1. Login dan buka Account Blogger anda Klik Tata Letak dan Edit HTML, lihat contoh gambar dibawah :
2. Beri tanda Chek pada Expand Template Widget
3. Copy Paste kode Java Script dibawah ini :
4. Letakan kode diatas seperti pada gambar
5. Klik Pratinjau untuk melihat apakah anda memasukannya dengan benar, apabila sudah benar dan teks yang berjalan sudah sesuai dengan yang kita inginkan ya..tunggu apa lagi tinggal si simpan aja lagi. Untuk menyesuaikan teks yang diinginkan ganti huruf yang berwarna merah, sedangkan untuk mengatur kecepatan ganti teks yang berwarna biru.
Nah gampang sekali bukan mengikuti tutorial dari saya? Jangan lupa komentarnya...
Yawdah Semoga bermanfaat bagi kita semua, kita berjumpa pada tips berikutnya, Selengkapnya...
