Tempatnya Belajar dan Berbagi

Memasang Jam di Blogspot
Memasang Translate Gambar Bendera di Blog
Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog
Membuat Bingkai Tulisan di Blog

Posted: 26 Jun 2013 06:14 AM PDT

Tutorial ini sangat sederhana sekali, kadang kita terlalu asyik dalam kegiatan blogging kita sehingga lupa waktu. Nah, untuk temen-temen yang bertipe seperti itu tutorial ini mungkin agak sedikit berguna. Disamping memasang musik player di blog, memasang jam juga bisa meningkatkan kenyamanan kita dalam kegiatan blogging kita. Jam selain berfungsi sebagai penunjuk waktu juga bisa dijadikan sebagai aksesoris bagi blog. Dengan memasang jam, blog kita akan terlihat lebih hidup dan menarik.

Bagi Anda yang lebih mengutamakan konten daripada tampilan lebih baik tidak usah memasangnya karena akan memperlambat loading page pada blog Anda. Tapi bila tidak terlalu mempermasalahkan loading blog maka tidak ada salahnya untuk memasang aksesoris ini.

Saat ini ada cukup banyak layanan yang menyediakan aksesoris jam gratis seperti timeanddate.com, clock4blog.eu, clocklink.com, widgetbox.com dan masih banyak lagi. Pada postingan kali ini saya akan membahas tentang memasang jam analog dari World time server. Karena layanan ini bisa menyediakan waktu yang lebih akurat dan banyak pilihan warna yang bisa Anda pilih sesuai selera.

Untuk memasangnya, silahkan ikuti langkah-langkah dibawah ini:

Kunjungi situs http://www.worldtimeserver.com/clocks
Pilih salah satu bentuk jam analog yang Anda inginkan dengan mengklik link dibawah gambarnya masing-masing
Kemudian Anda akan masuk kehalaman kustomasi seperti ini:

Clock Color : Pilih warna sesuai dengan selera dan template Anda. Size : Pilih ukuran yang Anda inginkan. Location : Pilih lokasi Anda. City Name : Isi nama kota Anda. Ini bersifat optional. Jika Anda tidak ingin menampilkan tinggal dikosongkan aja

Jika sudah, klik Update HTML Code
Copy kode dalam kotak Object HTML Code
Buka blogger. Klik menu Layout -> Page Elements
Klik Add a gadget. Klik tombol + pada HTML/ Javascript
Pastekan kodenya dalam kotak lalu klik Save
Selesai. Silahkan klik View blog untuk melihat tampilannya

Demikian tadi penjelasan cara memasang jema di blog, selamat mencoba dan semoga bermanfaat.

Memasang Translate Gambar Bendera di Blog

Posted: 26 Jun 2013 06:15 AM PDT

Kebanyakan blog menggunakan bahasa internasional, yaitu bahasa Inggris dengan tujuan agar blognya dapat dimengerti oleh semua orang diseluruh dunia. Namun jangan khawatir apabila blog yang kita miliki berbahasa Indonesia, dengan menggunakan tambahan widget google translate maka blog kita yang berbahasa Indonesia akan dapat diterjemahkan ke dalam beberapa bahasa yang digunakan di dunia, seperti bahasa Inggris, Perancis, Italia, Jerman, Brazilia, Portugal, Yunani, Jepang, Cina, Korea, maupun bahasa Arab.

Pada kesempatan kali ini saya akan memberikan tutorial kepada teman-teman tentang cara memasang translate yang berupa gambar bendera. Tips ini baru saya dapatkan dari o-om. Baik, langsung saja pada langkah-langkahnya :

Pertama login ke blogger terlebih dahulu
Klik Tata Letak
Klik tab Elemen Halaman
Klik Tambah Gadget
Pilih Tambah HTML/JavaScriptCopy pastekan code translate di bawah kedalam kolom yang tersedia.

Tampilan Ke-1

Copy Code ini :

Tampilan Ke-2

Copy Code ini :

Temen-temen bisa menambah negara mana lagi yang mau ditampilkan, silahkan dicoba. Semoga bermanfaat

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Posted: 26 Jun 2013 06:14 AM PDT

Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.

Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke menu blogger. Klik Design -> Edit HTML
2. Backup template anda
3. Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE91aZj1DYYFC33arr7lGigAPwKFNJbGnD-01lgLS7canc-REOSIo5GT-nCbXpMB2AjOtqYj6VKYhVkUGXRC5gda83NDzwfh9s4v5wW8kry85ZTB9c5vC7oqK1ZEqYrPx0UqTukBg5hdCo/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

Keterangan:

Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:

background: #1c426d url(http://url-gambar);

4. Setelah itu cari kode seperti dibawah ini

Cari kode di template anda yang paling mendekati dengan kode diatas

5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.

6. Sehingga susunannya menjadi seperti ini:

<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>

</b:section>

</div>

<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'/>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

7. Kalau sudah, Save Template lalu lihat hasilnya.

Jika anda tidak mau menggunakan kotak pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.

Selamat mencoba. Semoga bermanfaat.

Membuat Bingkai Tulisan di Blog

Posted: 26 Jun 2013 06:14 AM PDT

Selamat siang temen-temen blogger semua, ketemu lagi dengan saya pada tutorial blog. Pada postingan sebelumnya saya sudah menjelaskan bagaimana memperindah blog kita dengan membuat shadow efek pada gambar, dan pada kesempatan kali ini saya akan memberikan penjelasan mengenai cara membuat bingkai pada tulisan di blog agar kelihatan lebih menarik. Tentunya temen-temen sudah tidak sabar lagi, oke kita langsung saja pada permasalahannya.

Ada tiga jenis kotak yang biasa dipakai untuk membingkai sebuah tulisan, yaitu: border, overflow (biasanya disebut kotak scroll), dan textarea. Tentu saja ketiganya memiliki karakteristik yang berbeda. Nah, untuk mengetahui itu semua, berikut akan dijelaskan satu persatu mengenai bingkai tersebut.

Border

Seperti namanya, border berarti bingkai yang membatasi tulisan yang berada di dalamnya. Dan untuk membuatnya kamu tinggal mengkopi script berikut:

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#EFEFEF; text-align: center;">Tulisan temen-temen yang akan ditampilkan disini</div>

Tulisan temen-temen yang akan ditampilkan disini

Keterangan:

Border: 1px solid #CCC, berarti ketebalan garis (border) adalah 1px dengan warna abu-abu (mengenai kode warna dapat dilihat disini).
Margin: 10px 0px, berarti margin atas-bawah 10 px dan margin kiri-kanan 0 px.
Padding: 10px, berarti jarak tulisan ke border adalah 10px.
Perintah auto pada width dan height supaya lebarnya mengikuti lebar kolom yang tersedia, sedangkan tingginya mengikuti isi (tulisan) yang dimasukkan kedalamnya. Kamu bisa merubah perintah auto kedalam bentuk pixel, misalnya: 100px.
Background-color:#EFEFEF, berarti kotak berwarna abu-abu. Jika ingin dihilangkan warnanya, ganti kode #EFEFEF dengan none atau hapus perintah background-color berikut kode warnanya.
Text-align: left, berarti tulisan dalam bentuk rata kiri. Jika kamu ingin mengubahnya, ganti saja left-nya dengan right, center, atau justify (rata kanan = right, rata tengah = center, dan rata kiri-kanan = justify).

Untuk semua perintah tersebut temen-temen bisa mengubahnya sesuai dengan selera Anda.
Overflow

Overflow berarti tulisan yang melebihi media yang tersedia. Ada tiga perintah dalam overflow, yaitu scroll, hide, dan auto. Jika scroll yang digunakan maka tulisan yang melebihi media akan dibuatkan scroll. Jika hide, maka tulisan yang melebihi media akan disembunyikan. Dan jika auto, maka tulisan yang melebihi media akan dibuatkan scroll dan sisanya akan disembunyikan. Untuk membuatnya Anda tinggal mengkopi script berikut:

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: #E0ECF8; text-align: justify;">Tulisan yang temen-temen ingin tampilkan disini</div>

Tulisan yang temen-temen ingin tampilkan disini.

Keterangan:

Jika tulisan tersebut melebihi lebar (lebarnya 95% dari lebar container) yang tersedia dan tingginya melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.
Perintah-perintah tambahan pada overflow ini mirip dengan perintah-perintah pada border sehingga untuk memahaminya bisa dilihat pada keterangan border.

Textarea

Textarea berarti kotak yang melingkupi daerah text itu berada. Pada textarea tidak menggunakan width dan height (lebar dan tinggi) tetapi menggunakan rows dan cols (baris dan kolom) untuk menyatakan lebar dan tinggi areanya. Tetapi akibatnya akan sama dengan overflow, yaitu akan dibuatkan scroll dan disembunyikan jika text melebihi area baris dan kolom yang ditentukan. Untuk membuatnya kamu tinggal mengkopi script berikut:

<textarea rows="5" cols="50">Tulisan yang temen-temen ingin tampilkan disini</textarea>

Keterangan:

Pada script di atas menunjukkan 5 baris dan 50 kolom. Dengan demikian tulisan yang melebihi 5 baris dan/atau melebihi 50 kolom akan disembunyikan.

Note :
Untuk menuliskan kode script kedalam bingkai, kamu harus melakukan encoding terlebih dahulu, karena jika tidak akan dianggap sebagai perintah bukan sebagai teks. Seperti < harus ditulis <, > harus ditulis >, " harus ditulis ", dll.

Itu tadi penjelasan mengenai cara membuat bingkai tulisan, jika temen-temen masih kesulitan jangan malu-malu untuk menulisnya di kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat.

Media Umum Jatim | Berita Nasional

Tempatnya Belajar dan Berbagi

Written By Unknown on Kamis, 27 Juni 2013 | Kamis, Juni 27, 2013

Tempatnya Belajar dan Berbagi

0 komentar:

Posting Komentar

Search

Popular Posts Today