REKANAN

Followers

umpan balik

Waktu Sholat Hari ini

Showing posts with label Belajar memperindah dan mempercantik blog. Show all posts
Showing posts with label Belajar memperindah dan mempercantik blog. Show all posts

Menampilkan Google Map Atau Peta Google Di Blog

SYDNEY, AUSTRALIA - OCTOBER 14:  Artwork of th...Image by Getty Images via Daylife

Guna memperindah penampilan blog yang kita miliki, atau apapun tujuannya, banyak blogger yang menambah hal-hal menarik di dalam blog pribadinya dengan menampilkan hiasan-hiasan; misalnya menampilkan kalender, menampilkan jam cantik, menampilkan text-text berjalan dengan berbagai bentuknya, menampilkan peta guna memberitahu tempat atau lokasi dimana blogger tinggal, dan ada yang menampilkan film atau video kenangan di dalam blog pribadinya. Pada kesempatan yang lalu saya pernah menulis tentang beberapa tentang itu yang dapat anda baca juga, antara lain; cara upload film atau video ke youtube serta bagaimana cara menampilkan film atau video youtube di dalam blog pribadi anda. Serta cara menampilkan jam, kalender dan lain lain dapat anda cari di blog sederhana ini dengan klik judulnya yang berada di sebelah kiri halaman blog ini.

Pada kesempatan ini saya ingin berbagi pengalaman sederhana tentang bagaimana cara menampilkan peta google atau google map di dalam blog. Langkah dan caranya dapat anda ikuti seperti dijelaskan di bawah ini:

1. Kunjungi website google . com (harus google . com), kemudian klik map. Atau anda bisa langsung Klik di sini. Tentukan lokasi kota atau desa dari peta google atau google map yang ingin anda tampilkan di blog anda. Apakah anda ingin menampilkan kota anda atau mau menampilkan desa di mana anda tinggal atau ingin menampilkan tempat lain yang bernilai historis bagi anda, Itu semua dapat anda lakukan dengan mudah.

Adapun cara menentukan lokasi peta yang ingin ditampilkan, bisa dilakukan dengan cara:

a. Memanfaatkan mesin pencarian peta yang ada. Yaitu masukkan nama kota yang ingin ditampilkan, kemudian klik search maps.

b. Jika kota, desa atau kampung yang anda cari tidak dikenal peta google atau google map, anda bisa mencarinya secara manual, yaitu mengeser atau drag dengan mouse anda. Seperti yang saya lakukan ketika mencari lokasi peta dari google map untuk saya tampilkan di bagian bawah posting ini.

Setelah lokasi peta yang anda inginkan ditemukan, anda bisa memperbesar atau memperkecil gambar peta dengan cara; cari tanda “+ atau “ yang berada di sebelah kiri peta, kemudian klik beberapa kali atau klik dan tahan. Untuk memperbesar gambar peta, klik tanda “ + “, sedangkan tanda " – " untuk pemperkecil atau mejauhkan tampilan gambar peta.

2. Pilih jenis peta yang anda inginkan. Ada map, ada satellite, ada earth. Untuk melihat dan menampilkan masing-masing jenis peta tersebut, klik saja tiap jenis peta yang ada, maka anda dapat memilih sesuai selera anda.

3. klik link di pojok kanan atas dari peta tersebut.Anda bisa langsung mengcopy Embed yang deberikan google map. namun demikian Sebelum mengcopy embed yang diberikan oleh google, sebaiknya anda rubah ukuran tampilan peta agar selaras dengan halaman blog anda dengan klik costumize and preview embedded map. Setelah melakukan perubahan ukuran, copy kode embed yang ada di bawah gambar peta untuk anda letakkan di posting blog anda. Lihat gambar di bawah ini.



4. Paste code embed dari peta google atau google map tadi di posting blog anda. Caranya sama seperti ketika anda memposting artikel-artikel blog anda yang lain. Mudah dan sederhana bukan?

Agar lebih jelas bentuk tampilan peta di halaman blog atau blog posting, perhatikan contoh peta google atau google map di bawah ini. Ini adalah lokasi sebuah Desa dari peta google atau google map di mana penulis dilahirkan. Ma’af ini bukan untuk mempopulerkan diri saya lo! He he he …..


View Larger Map

Demikian keterangan mengenai bagaimana cara menampilkan peta google atau google map di blog pribadi anda. Selamat mencoba. Semoga bermanfaat.





Reblog this post [with Zemanta]
Baca Selengkapnya...

MEMBUAT MACAM MACAM EFEK MARQUEE

Sebelum melanjutkan baca artikel tentang membuat macam macam efek marquee ini, saya rekomendasikan kepada anda untuk membaca juga artikel yang ini. Artikel itu juga tentang membuat efek marquee, tapi agak diperjelas, sehingga anda nanti dapat mengembangkan sendiri macam macam efek marquee yang kami ulas di posting ini.

Efek marquee ada banyak macam nya. Setelah kita praktik membuat text berjalan yang kami bahas di sini, dan juga merupakan salah satu dari sekian macam macam efek marquee, sekarang anda kami ajak untuk membuat hal yang sama tapi dengan ber macam macam efek marquee. Karena text yang akan kita buat nanti tidak hanya berjalan satu arah saja, tapi ada yang bolak balik, naik turun berjalan ke atas, berkedip kedip di tempat, berjalan sambil kedip kedip dan sebagainya. itulah maksud saya dengan ber macam macam efek marquee. Singkatnya, kita akan membuat beraneka macam efek marquee.


Langsung saja pada kode-kode efek marquee yang akan kita pakai untuk menciptakan macam macam bentuk di atas:

1. seperti yang kemarin kita buat, yaitu berjalan dari sebelah kanan ke kiri.

Selamat datang ..

Kode yang dipakai:

<marquee direction="left"> Selamat datang .. </marquee>

2. dari kiri ke kanan

Selamat datang ..

Itu menggunakan kode sbb.

<marquee direction="right"> Selamat datang .. </marquee>

3. bolak balik dari kanan ke kiri kembali kiri ke kanan

Selamat datang ..

Kode yang dipakai:

<marquee behavior="alternate"> Selamat datang .. </marquee>

4. dari bawah ke atas

selamat datang ..

Kode yang digunakan

<marquee direction="up"> selamat datang .. </marquee>

5. Dari atas ke bawah

Selamat datang ..

Kode yang dipakai

<marquee direction="down"> Selamat datang .. </marquee>

6. dari atas bawah kembali dari bawah ke atas

Selamat datang ..

Kode yang digunakan

<marquee behavior="alternate" direction="up">Selamat datang..</marquee>
7. menyudut dari atas ke bawah

Selamat datang ..
Anda bisa menggunakan kode berikut ini

<marquee><marquee direction="down">Selamat datang .. </marquee></marquee>

8. menyudut dari bawah ke atas

Selamat datang..
Kode yang di pakai

<marquee><marquee direction="up"> Selamat datang.. </marquee></marquee>

9. serong ke atas dan kembali

selamat datang ..

Kode yang digunakan

<marquee direction="up"><marquee behavior="alternate">selamat datang .. </marquee></marquee>

10. menyudut dari bawah ke atas kembali menyudut dari atas ke bawah

selamat datang..

Kode yang dipakai

<marquee behavior="alternate" direction="down"><marquee behavior="alternate">selamat datang.. </marquee></marquee>

11. jala sambil kedip kedip

selamat datang..

Kode yang dipakai

<marquee direction="left"><blink> selamat datang </blink></marquee>
12. Dengan background warna

Selamat Datang..

Kode yang dipakai:

<marquee bgcolor=" COLOR " style="color: COLOR "> Selamat Datang.. </marquee>

13. Jalan berlawanan

Selamat Datang.. Selamat Datang..

Kode yang digunakan

<marquee> Selamat Datang.. </marquee> <marquee direction="right"> Selamat Datang.. </marquee>

14. Text banyak

Hallo
selamat datang
apa kabar
salam sejahtera


Kode yang digunakan:

<marquee direction="right"> Hallo <br> selamat datang <br> apa kabar <br> salam sejahtera </marquee>

Inilah beberapa macam efek marque yang bisa kita buat. Selamat mencoba. Semoga sukses.

Baca Selengkapnya...

Membuat Text Berjalan

Digg API on AIRImage by Samji via Flickr

Agar blog kita terlihat lebih menarik dalam tampilan, kita bisa menghiasnya dengan memasang berbagai hiasan seperti pasang text berjalan. Text berjalan yang akan kita pasang nanti sering disebut marquee, Atau kita orang Indonesia menyebutnya text berjalan. Itu dilakukan untuk memanjakan pengunjung yang datang dan agar mereka tidak bosen dan mau balik berkunjung lagi ke blog kita yang kita pasangi meskipun hanya text berjalan.

Text berjalan atau Marquee ini sering kita lihat di situs2 bisnis. Biasanya marquee atau text berjalan yang dipasang di situs bisnis dengan kalimat “selamat datang…” yang bergerak dari kiri ke kanan atau sebaliknya. Misalnya kalimat ini :




Selamat Datang …




Untuk membuat text berjalan, kita cukup menyisipkan kode di bawah ini pada kalimat yang akan kita buat berjalan:

<marquee align="center" direction="left" scrollamount="3" width="60%" height="100">
Selamat Datang …
</marquee>

Kata " Selamat Datang …" bisa kita ganti dengan TEXT, LINK, atau GAMBAR yang ingin kita buat menjadi berjalan. Jika text akan jadi text berjalan, kalu gambar jdi gambar berjalan dst.

Keterangan :

1. Direction "Left" ---> text akan berjalan ke kiri, kamu bisa ganti "right" kalau ingin text berjalan ke kanan, "up" text berjalan ke Atas atau "Down" text berjalan ke bawah.
2. scrollamount="3" ---> Kecepatan geraknya, bisa diganti juga.
3. width ---> Batas horizontal text berjalan.
4. Height ----> Batas vertikal text berjalan.

Adapun cara memasang text berlajan cukup mudah, yaitu seperti memasang iklan dari kumpulblogger:

Masuk "Layout"---->"Add Gadget"---->"HTML / JavaScript"----> Simpan..

Mudah bukan bagaimana cara membuat text berjalan. selanjutnya anda bisa baca bagaimana membuat berbagai macam efek marquee sebagai lanjutan dari membuat text berjalan ini. selamat mencoba.




Reblog this post [with Zemanta]
Baca Selengkapnya...

MEMASANG JAM UNTUK MEMPERCANTIK BLOG

Flag of the Cocos (Keeling) Islands (Australia)Image via Wikipedia

Untuk mempercantik blog, anda dapat memasang di widget blog anda sebuah Jam. Untuk memasang widget jam, anda bisa mengunjungi situs Clocklink.com. atau situs Worldtimeserver.com yang menyediakan secara gratis widget jam. Anda tidak perlu mendaftar di situs tersebut, untuk mendapatkan widget jam.

Untuk mengambil tampilan jam yang anda inginkan, masuk dahulu ke situs Clocklink.com. Situsnya akan muncul seperti yang di bawah ini.





Kemudian klik “Want a Clock on Your Website?”, atau yang saya kasih contreng merah. Setelah itu pilih jenis Jam yang anda anggap paling cantik. Di sana tersedia jenis : Analog, Animal, Animation, Digital dan sebagainya, sebagai bentuk tampilan jam.

Kita pilih atau klik digital saja misalnya, maka akan terbuka model-model dari jam.
Pilih salah satu jam yang anda sukai dan mungkin dapat mempercantik blog anda, dengan mengklik view HTML tag yang terdapat di bawah gambar model jam.

Kemudian muncul kotak dialog agreement klik aja Accept. Pilih warna apabila terdapat pilihan warna, pilih time zone, hal ini bisa berdasarkan kota dengan mengklik Select by City, maka akan muncul dua menu Dropdown
Pada Country, pilih Indonesia
Pada City, bila anda berada di Surabaya pilih Surabaya atau dengan kata lain sesuaikan dengan domisili kota anda
Pilih ukuran dengan mengklik Size, bila tersedia berbagai ukuran
Kemudian kopi kode HTML yang ada pada notepad

Langkah selanjutnya adalah :
1. Login ke blogger dengan ID anda
2. Klik Tata Letak
3. Tambah Elemen Halaman dengan mengklik Tambah Gadget
4. Pilih HTML/JavaScript
5. Kopi dan pastekan kode HTML yang anda simpan pada notepad tadi disitu
6. Kemudian klik SIMPAN dan selesai

Silahkan lihat hasilnya. Ini contoh jam nya.




Cantik bukan? Selamat mencoba mempercantik blog anda dengan memasang jam. semoga bermanfaat.




Reblog this post [with Zemanta]
Baca Selengkapnya...

CARA MEMBUAT NOMOR HALAMAN NAVIGASI UNTUK BLOGGER ATAU BLOGSPOT

Untuk kali ini kita bahas cara membuat nomor halaman navigasi untuk blogger atau blogspot. Banyak blog yang ada nomor halaman navigasi nya atau nomor halaman kemudi di bagian bawah dari blog blog itu, pikir saya waktu itu (sebelum menemukan artikel ini) halaman akan muncul sendiri setelah posting kita banyak. Ternyata tidak begitu. Halaman navigasi akan muncul setelah kita mengatur sendiri template untuk blog kita. Artikel ini memang sudah lama saya cari. Karena sangat penting, maka saya posting di blog saya ini. Membuat halaman navigasi di blogger atau blogspot ini, saya peroleh dari blog ariawijaya.com. utuk itu mari kita ikuti dan praktikan tekniknya. Atau anda bisa berkunjung ke sini.

Untuk hasilnya akan terlihat seperti gambar dibawah ini:



Contoh hasil kode navigasi berurut ini, anda bisa lihat di sini.
adapun cara membuat nomor halaman navigasi untuk blogger atau blogspot adalah sebagai berikut:


PERTAMA

Login ke blogspot anda dan klik dashboard blogger anda. Pilih tata letak, kemudian pilih edit html. Beri tanda centang pada option expand widget templates, lalu cari kode berikut:

]] > </b:skin>

Sudah ketemu? letakkan kode css dibawah ini tepat diatas kode “ ]] > </b:skin> “ tersebut :


.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;
}


KE DUA:


Cari lagi kode seperti ini:


</body>

Kalau sudah ketemu, persis diatasnya letakkan script dibawah ini:


<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

KE TIGA:

Ini bisa dibilang langkah terakhir, yaitu cari lagi kode berikut:


'data:label.url'


Ketemu? kalau sudah, hapus kode tersebut dan gantilah dengan kode di bawah ini:



'data:label.url + "?&max-results=5"'



Sudah diganti? Kalau sudah simpan templates anda, dan anda bisa lihat hasilnya sekarang

Nah selesai! Demikian cara membuat nomor halaman navigasi untuk blogger atau blogspot. Semoga berguna.







Reblog this post [with Zemanta]
Baca Selengkapnya...