Tempatnya Belajar dan Berbagi

Written By Unknown on Senin, 02 September 2013 | Senin, September 02, 2013

Tempatnya Belajar dan Berbagi

Membuat Acrobatic Horizontal Menu di Blog

Posted: 01 Sep 2013 02:44 AM PDT


Menu navigasi horisontal untuk sebuah blog sangatlah penting, karena akan memudahkan pengunjung untuk menulusuri keseluruhan isi dari blog itu. Setelah sebelumnya saya menulis tentang cara membuat menu navigasi horisontal dan kotak pencari, kali ini saya akan memberikan lagi sebuah tutorial untuk menu navigasi. Tapi kali ini berbeda dengan sebelumnya, menu navigasi ini bisa bejungkir balik seperti sirkus, makanya dinamakan acrobatic horizontal menu.

Cara kerja menu ini saat cursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik. Untuk lebih jelasnya temen-temen bisa lihat demonya disini. Nah, bagi temen-temen yang suka dan ingin memasangnya, di bawah ini saya akan berikan penjelasannya :

1.  Login di blogger dengan akun anda.
2.  Pilih Rancangan ---> EDIT HTML
3.  Simpan CSS berikut diatas kode ]]></b:skin>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}
4.  Kemudian cari kode berikut
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Keterangan :
Untuk penyimpanan menu ini, anda tidak diharuskan/diwajibkan menyimpannya dibawah kode diatas saja, anda bisa menyimpannya ditempat yang sesuai dengan template anda.

5.  Simpan kode berikut tepat setelah kode diatas (tidak wajib)
<ul class='v2' id='topnav'>

<li><a href='/' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
6.  Sekarang anda simpan Script berikut diatas kode </head>
<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'  type='text/javascript'/>    <script type='text/javascript'>      $(document).ready(function()  {      $(&quot;#topnav  li&quot;).prepend(&quot;<span/>&quot;); //Throws an  empty span tag right before the a tag    $(&quot;#topnav  li&quot;).each(function() { //For each list item...  var  linkText = $(this).find(&quot;a&quot;).html(); //Find the text  inside of the a tag  $(this).find(&quot;span&quot;).show().html(linkText); //Add the  text in the span tag  });    $(&quot;#topnav  li&quot;).hover(function() { //On hover...  $(this).find(&quot;span&quot;).stop().animate({  marginTop:  &quot;-40&quot; //Find the span tag and move it up 40 pixels  }, 250);  } , function() { //On hover out...  $(this).find(&quot;span&quot;).stop().animate({  marginTop:  &quot;0&quot; //Move the span back to its original state (0px)  }, 250);  });      });  </script>
7. Simpan Template anda.

Kode menu yang saya berikan diatas tampilannya adalah saat mouse menyorot yang berjungkir balik adalah tulisan dan background-nya, jika temen-temen hanya ingin tulisannya saja yang berjungkir balik, anda bisa pakai kode dibawah ini :
<ul id='topnav'>

<li><a href='/' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
Sekarang lihat hasilnya, apa menu navigasinya sudah bisa bermain sirkus? Selamat berkreasi dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Mengenal Nama dan Fungsi Tombol Fasilitas Penyuntingan Text di Area Penulisan Posts Dan Pages

Posted: 01 Sep 2013 02:44 AM PDT


Seperti janji saya kemarin pada artikel membuat blog di Wordpress.com, kali ini saya akan mengenalkan kepada temen-temen semua tentang nama dan fungsi tombol fasilitas penyuntigan teks di area penulisan post dan page. Jika anda sebelumnya adalah pengguna blogspot, sedkit banyak pasti mengetahuinya, tapi bagi temen-temen yang baru untuk blog Wordpress.com ini ada baiknya akan saya berikan penjelasan, ya setahu saya (he.. he... he....). 

Nah, kini saatnya untuk mengetahui nama dan fungsi dari tombol-tombol fasilitas  penyuntingan teks tersebut :
  1. Bold, menebalkan text.
  2. Italic, mencetak miring text.
  3. Strikethruough, mencoret text.
  4. Unordered list, menampilkan daftar peluru pada text.
  5. Orderd list, menampilkan daftar peluru berbentuk angka pada text.
  6. Blockquote, membuat baris tulisan khusus pada text.
  7. Align left, membuat rata kiri text.
  8. Align center, membuat rata tengah text.
  9. Align right, membuat rata kanan text.
  10. Insert/edit link, membuat dan mengedit link pada text.
  11. Unlink, menghapus link pada text.
  12. Insert More tag, memecah text menjadi dua bagian (read more).
  13. Proofread Writing, untuk pemeriksaan ejaan taxt.
  14. Toggle fullscreen mode, menampilakan halaman penuh penulisan.
  15. Show/Hide Kitchen Sink, menampilkan dan menyembunyikan tombol tambahan fasilitas penyuntingan text.
Untuk melihat tombol tambahan fasilitas penyuntingan yang lainnya, klik tombol (Show/Hide Kitchen Sink).
  1. Paragraph, membuat format gaya penulisan text.
  2. Underline, menampilkan garis bawah pada text.
  3. Align full, membuat rata kanan dan kiri pada text.
  4. Select text color, memberi warna pada huruf.
  5. Paste as Plain Text, menempelkan text melalui mode bebas pengkodean.
  6. Paste from Word, menempelkan text dari aplikasi word.
  7. Remove formatting, membersihkan format yang ada pada tulisan seperti semula.
  8. Insert custom character, menampilkan daftar karakter dan simbol penulisan.
  9. Outdent, membuat text menjorok keluar.
  10. Indent, membuat text menjorok kedalam.
  11. Undo, kembali satu aksi ke belakang aktifitas penyuntingan.
  12. Redo, kembali satu aksi kedepan aktifitas penyuntingan.
  13. Help, bantuan.
  1. Visual, menampilkan mode penulisan dalam bentuk icon.
  2. HTML, menampilakan mode penulisan dalam bentuk kode HTML.
Nah, itu tadi penjelasan nama dan fungsi dari tombol-tombol yang ada di area penulisan teks pada Wordpress.com. Jika anda masih bingung, saya malah tambah bingung karena penjelasan diatas tadi kan cukup jelas, yah mau gimana lagi. Kasih komentar boleh, tapi jangan nanya ya.......
jangan lupa untuk berlangganan dan follow blog ini.

Memasang Gambar Pada Pojok Blog

Posted: 01 Sep 2013 02:44 AM PDT


Sebenarnya gambar untuk sebuah blog mempunyai banyak maksud dan fungsinya, fungsi yang paling menonjol adalah untuk memperjelas suatu pembahasan. Dan fungsi lainya hanya sebagai aksesoris atau mempercantik tampilan suatu blog saja, supaya pengunjung lebih betah dan lama-lama mengintip blog yang kita kelola. Kali ini saya akan memberikan tutorial yang sangat sederhana, tutorial yang sifatnya hanya untuk menambah aksesoris blog anda. Tapi bisa juga berfungsi untuk menghemat ruangan blog, karena lokasi penempatannya berada di pojok kanan atau kiri.
Nah, bagi temen-temen yang tertarik dan ingin menambah aksesoris untuk blog, di bawah ini akan saya jelaskan langkah-langkah pemasangannya :
  1. Login ke blogger dengan akun anda
  2. Rancangan >> Edit HTML
  3. Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya.
    #gambar_mojok {
    position:fixed;_position:absolute;bottom:0px; left:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  4. Text yang dicetak tebal adalah posisinya, kalau pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top"
  5. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
    <div id="gambar_mojok">
    <a href="http://creatingwebsite-maskolis.blogspot.com">
    <img src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" border="0" /></a>
    </div>
  6. Jika anda pingin yang ada disitu bukan gambar tetapi jam, kalender, hit counter atau widget-widget yang lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
  7. Simpan hasil kerja kamu dan lihat hasilnya
Keterangan :
  • Kode url yang berwarna bitu http://creatingwebsite-maskolis.blogspot.com" ganti dengan url blog anda.
  • Warna merah http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif adalah url gambar yang anda bisa ganti sesuai keinginan.
Jika anda sudah selesai, jangan lupa kasih komentar di bawah. Dan jika anda ingin copy paste artikel ini silahkan saja, karena blog saya ini blog bebas copy paste. Selamat mencoba dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Memasang Banner Berjajar Horisontal di Blog

Posted: 01 Sep 2013 02:44 AM PDT


Untuk membuat blog lebih kelihatan menarik, terkadang kita perlu untuk memasang banner agar tidak terlalu banyak space kosong. Apalagi banner yang kita pasang berupa animasi sehingga lebih atraktif. Dalam memasang banner kita harus menentukan posisi yang menarik sehingga pengunjung dengan mudah melihatnya dan jika klik banner tersebut maka akan muncul informasi yang relevan atau masuk ke website Anda. Dalam memasang banner hal yang perlu diperhatikan adalah penataan yang strategis agar mudah dilihat dan disesuaikan dengan komposisi template web. Jadi tidak asal tempel karena mata pengunjung tidak suka melihat seuatu yang kurang menarik.

Pemasangan banner dapat disusun secara vertical dari atas ke bawah juga secara horizontal arah menyamping dari kiri ke kanan. Tergantung selera masing-masing pemilik blog. Tapi saya pribadi lebih suka pada susunan yang horizontal menyamping karena akan langsung terlihat semua tanpa harus memutar scroll mouse, apalagi bila ada banyak banner yang akan dipasang.

Sebenarnya sangat mudah untuk menata banner agar dapat dipasang berjajar menyamping horizontal, kita hanya memanfaatkan fungsi table. Jika anda tertarik berikut ini kode yang diperlukan :
<table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse"
border width="383">
<tr>
<td>kode banner1</td>
<td>kode banner2</td>
<td>kode banner3</td>
</tr>
</table>
Tetapi perlu diingat usahakan ukuran bannernya sama, misalnya jika banner 1 berukuran 125 x 125 px maka banner ke-2 dan ke-3 juga 125 x 125 px, tujuannya agar setelah jadi akan terlihat rapih.

Baiklah saya contohkan misalnya saya akan memasang tiga buah banner iklan.

Banner 1 memiliki kode :
<a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a>

Banner 2 memiliki kode :
<a href="http://www.neobux.com/?r=ncmajid"><img src="http://images.neobux.com/imagens/banner3.gif" width="125" height="125"></a>

Banner 3 memiliki kode :
<a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a>

Sehingga lengkapnya menjadi :
<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 383px;">

<tr><td><a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a></td>

<td><a href="http://www.neobux.com/?r=ncmajid"><img src="http://images.neobux.com/imagens/banner3.gif" width="125" height="125"></a></td>

<td><a href="http://www.etoro.com/B903_A27325_TClick.aspx" Target="_Top"><img border="0" src="http://www.etoro.com/B903_A27325_TGet.aspx" alt="" width="125" height="125"></a></td>
</tr></table> 
Maka kode tadi bila dipasang dengan benar akan menghasilkan tampilan banner seperti di bawah ini:


Mudah bukan? selamat berkreasi dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.
di Senin, September 02, 2013

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)