misther-junett: Maret 2011

Tutorial Blog
Link
Others
TOURING
- Semarang
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Kendal
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Grobogan
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
RSS

Kamis, 31 Maret 2011

MENAMPILKAN JADWAL SHALAT DI BLOGSPOT / Showing SCHEDULE pray at BlogSpot

Agar mengingatkan kepada kita akan waktu sholat biar para pengunjung blog kita tidak terlalu terlena ketika memmbaca berbagai artikel yang kita tulis di blog. Jadwal waktu sholat ini bisa sobat dapatkan di http://www.islamicfinder.org, untuk cara mendapatkannya silahkan ikuti langkah-langkah berikut ini : Silahkan sobat kunjungi situs http://www.islamicfinder.org atau hanya klik di sini !

Silahkan sobat kunjungi situs http://www.islamicfinder.org atau hanya klik di sini !

Klik link yang bertuliskan Add new sevices to your site di halaman bagian bawah

Alihkan perhatian ke nomor pilihan ke 2. Klik menu Dropdown yang bertuliskan Select a Country

Klik nama negara yang sobat inginkan, lalu klik Go. Contoh : Indonesia

Klik nama kota yang sobat inginkan. Contoh : Jakarta

KLik tombol Generated Code

Copy kode yang di berikan, lalu paste pada notepad untuk nanti keperluan di simpan ke blok kita

Silahkan tutup window situs tersebut

Selesai.

Itu baru cara mendapatkan kode jadwal shalat, selanjutnya untuk memasukkan kode tersebut ke dalam Blog ikuti cara berikut :

Klik menu Rancangan

Klik menu Elemen Halaman

Klik tulisan Tambah Gadged

Pilih + HTML/JavaScript

Paste kode Jadwal sholat tadi ke kolom yang di sediakan

Klik tombol TAMBAHKAN KE BLOG di bawah

Klik tombol Simpan Perubahan

Pindahkan elemen yang baru di buat pada tempat yang sobat sukai

Klik tombol Simpan

Selesai

----------------------------------------------------------------------------------------
Showing SCHEDULE pray at BlogSpot

To be reminiscent of the prayer time we will let our blog visitors are not too complacent when memmbaca various articles that we wrote on the blog. This prayer time schedule can be found in http://www.islamicfinder.org pal, to how to get it please follow the steps below: Please visit the site http://www.islamicfinder.org pal or just click here!

    Please visit the site http://www.islamicfinder.org buddy or just click here!
    Click the link labeled Add new Sevices to your site at the bottom of the page
    Divert attention to a number of options to 2. Click the dropdown menu labeled Select a Country
    Click the name of a buddy want, and click Go. Example: Indonesia
    Click a city name that my friend wanted. Example: Jakarta
    Click the Generated Code
    Copy the code given, then paste it into notepad for later use in our store to the block
    Please close the window site
    Done.
That's just how to get the code schedule of prayer, then to insert the code into the blog follow the following ways:

    Click the Design menu
    Click the Page Element
    Click on Add Gadged
    Select + HTML / JavaScript
    Paste code into the column before the prayer schedule which is served
    Click ADD TO BLOG button below
    Click the Save Changes button
    Move the new elements that made the place like a pal
    Click the Save button
    Completed

Memasang Widget Google Translate di Tiap Posting / Google Translate Widget in Each Post

Hmm... dari judul aja udah ketahuan ketinggalan zamannya. Udah banyak OB yang memposting ini. Yah, daripada ngga ada sama sekali, mending di-ada-in. Kata-kata klasik yang muncul hanya sekedar untuk menambah daftar postingan. Widget ini berguna agar yang diterjemahkan adalah halaman yang bersangkutan saja, atau dengan kata lain "tidak seluruh blog". Demonya dapat kamu kunjungi blog utuharies.blogspot.com. Tertarik untuk memasang widget ini, ayo kita ulas trik blogger-nya "tarik mang..." :

Login dulu ke account blogger kamu.
Pilih tab Tata Letak --> Edit HTML --> centang "Expand Widget Templates".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Masukkan kode Google translate berikut di atas kode yang berwarna merah :

<div style='text-align: right;'><div id='google_translate_element'/><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div>

Keterangan :

Translate akan muncul di kanan bawah postingan kamu.
Kode yang berwarna biru dapat kamu ganti dengan center (tengah) atau left (kiri).
Kode translate hanya berlaku untuk blog yang berbahasa Indonesia, coba perhatikan kode yang berwarna merah (id).

Tambahan :
Jika kamu ingin meletakkan Google translate di kanan atas tepat di bawah judul posting, cari kode di bawah ini :

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>ta:blog.pageType == "item"'><data:post.body/></b:if>

Copy kode Google translate di atas dan paste-kan di bawah kode yang berwarna merah.

Jangan lupa disimpan.

Catatan penting :
Gunakan bahasa Indonesia yang baik dan benar dalam melakukan posting, sehingga hasil translate akan mendekati maksud serta tujuan penulis.

Sekarang lihatlah tampilan salah satu postingan di blog kamu, udah terpampang translate-nya atau belum...
-----------------------------------------------------------------------------------------------------------

Google Translate Widget in Each Post
Google TranslateHmm ... of the title aja've caught behind his time. Already many OB who posted this. Well, instead of guns exist at all, mending in-there-in. Classical words that appear merely to add to the list of posts. This widget is useful for the translated page in question only, or in other words "not all blogs." The demo can you visit the blog utuharies.blogspot.com. Interested to install this widget, let's review his tricks blogger "pull mang ..." :

    Login to your blogger account.
    Select the Layout tab -> Edit HTML -> check "Expand Widget Templates".
Tip: Before you edit the template, you should save your existing template by clicking Download Full Template writings. Then save the hard drive or other storage media, so if things happen that do not want you already have a back-up to restore it to normal.

    Find the code below:

    <b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
    </ B: if>
Tip: If you look hard, try to press the button F3 on your keyboard. Then will arise a search toolbar under the menu browser (Firefox), so you just insert your text.

    Enter Google translate the following code above the red code:

    <div style='text-align: right;'> <div id='google_translate_element'/> <script>
    googleTranslateElementInit function () {
    google.translate.TranslateElement new ({
    PAGELANGUAGE: 'id'
    }, 'Google_translate_element');
    }
    </ Script> <script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/> </ div>

Description:

    Translate will appear at the bottom right of your post.
    Code blue can you replace with center (middle) or left (left).
    Translate the code only applies to Indonesian-language blogs, look at the red code (id).
Additional:If you want to put Google translate on the top right just below the post title, look for the code below:

    <div class='post-body'>
    <b:if cond='data:blog.pageType == "item"'>
    <style>. fullpost {display: inline;} </ style>
    <p> <data:post.body/> </ p>
    <b:else/> ta: blog.pageType == "item" '> <data:post.body/> </ b: if>
Google translate Copy the code above and paste it below the red code.

    Do not forget to save.

Important note:Use the Indonesian language properly and correctly in the post, so the results will translate approached intent and purpose of the author.
Now look at the display one of the posts on your blog, already plastered translate it or not ...

Sabtu, 19 Maret 2011

Menu Navigasi Dalam Navigasi Bar (Navbar) / Menu Navigation The Navigation Bar (Navbar)

Pernahkah anda mengalami kesulitan untuk membuat menu navigasi seperti 'Home', 'About','Daftar Isi',Links dll?
Disini,kita akan belajar membuat navigasi bar (navbar) blogger menu sederhana,seperti kasus diatas.

Jadi,bukan hanya membuat sebuah navbar,melainkan membuat 'menu navigasi' di dalam navbar itu sendiri.
Bingung?

Contoh hasil dari kreasi navbar ini,bisa anda lihat seperti gambar di bawah ini [klik gambar untuk hasil yang lebih besar]:

Sedangkan jika anda ingin memastikan seperti apa sih hasil sebenarnya,silakan kunjungi situsnya langsung di SINI.
Bagaimana? tertarik untuk membuatnya?

Langkah Membuat Navbar Blogger Sederhana

Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali.
Sekali lagi,tutorial membuat navbar ini hanya untuk blogspot dari blogger saja ya :p

Pertama,Pergilah ke Dashboard blogger anda,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML.
Selanjutnya,contreng tulisan Expand Widget Templates.
Lalu cari kode berikut:

</head>
[untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F]

Setelah ketemu,letakkan kode css berikut persis di atas kode </head> tersebut.

<style type="text/css">
#pelajaranblognav img {
margin: 0px 0px -8px 0px;
vertical-align: middle;
}
#pelajaranblognav {
background-color: #222222;
width: 100%;
left: 0px;
text-align: center;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}
#pelajaranblognav ul {
margin: 0px;
padding: 0px;
list-style: none;
color:white;
font-family:arial;
font-size:11px;
}
#pelajaranblognav a {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:visited {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:hover {
background: #222222;
color: green;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav li {
float: left;
margin: 0px;
padding: 0px;
}
#copyright a {
text-decoration: none;
font-family:arial;
font-size:11px;
}
#copyright {
color: black;
text-decoration: none;
float:right;
font-family:arial;
font-size:11px;
}
</style>

Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut:

<body>

Jika sudah ketemu,letakkan kode berikut persis di bawahnya.

<div id="pelajaranblognav">
<table border="0" bgcolor="#222222">
<tr>
<br/><ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="http://pelajaran-blog.blogspot.com/">Belajar Blog</a></li>
<li><a href="http://cepat-terindex-google.blogspot.com/">Belajar Seo</a></li>
<li><a href="#">Links</a></li></ul>
<td>
<a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a>
</td>
<td>

<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="

http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>


</td>

<td>
<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="

http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>

</td>

</tr>
</table>
</div>
<div id="copyright">
Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a>
| Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a>
|  Buat <a  href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html"  target="blank"><b>Navbar</b></a> Ini Di Blog Kamu
</div>

Setelah itu Simpan Template,dan lihat hasilnya sekarang :D

Keterangan:

Untuk tanda #,gantilah dengan url alamat yang ingin anda tuju.
Untuk http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro,gantilah dengan alamat iklan banner anda.
Untuk http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg,gantilah dengan url gambar banner anda.
Untuk http://url_blog_anda.blogspot.com/,gantilah dengan url blog anda.

Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing.
Goosd Luck Ya!

---------------------------------------------------------------------------------------------------------------------------------------

Menu Navigation The Navigation Bar (Navbar)
Have you ever had difficulty to make a navigation menu like 'Home', 'About', 'Contents', Links, etc.?
Here, we will learn to create a navigation bar (navbar) bloggers a simple menu, like the case above.
So, not only create a navbar, but make 'navigation menu' in the navbar itself.
Confused?
Sample results from this navbar creations, like the picture you can see below [click image for greater results]:
Navigation Bar / Blogger Navbar
Meanwhile, if you want to make sure like what actual results, please visit the site directly HERE.
How? attracted to him?
Simple Steps to Make Blogger Navbar
Simple as the title of this article, the placement of rows of css code and the code for navbarnya, very simple.
Once again, the tutorial makes this navbar blogspot from bloggers just to be yes: p
First, Go to your Blogger Dashboard, select Layout, then as usual select Edit HTML tab.
Next, tick the writing Expand Widget Templates.
Then find the following code:
</ Head>
[For help, seek to use the keyboard by pressing alt + F]
After the meet, put the following css code right above the code </ head> it.
<style type="text/css"># Pelajaranblognav img {margin: 0px 0px 0px-8px;vertical-align: middle;}# Pelajaranblognav {background-color: # 222222;width: 100%;left: 0px;text-align: center;font-family: Arial, Tahoma, Verdana;font-size: 12px;z-index: 10000;bottom: 0;}# Pelajaranblognav ul {margin: 0px;padding: 0px;list-style: none;color: white;font-family: arial;font-size: 11px;}# Pelajaranblognav a {background: # 222222;color: # FFFFFF;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav a: visited {background: # 222222;color: # FFFFFF;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav a: hover {background: # 222222;color: green;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav li {float: left;margin: 0px;padding: 0px;}# Copyright a {text-decoration: none;font-family: arial;font-size: 11px;}# Copyright {color: black;text-decoration: none;float: right;font-family: arial;font-size: 11px;}</ Style>
If you already put the css code, it is now looking again the following code:
<body>
If you've met, put the following code just below it.
<div id="pelajaranblognav"><table border="0" bgcolor="#222222"><tr><br/> <li> <a href="#"> Home </ a> </ li><li> <a href="#"> About </ a> </ li><li> <a href="#"> Table of Contents </ a> </ li><li> <a href="http://pelajaran-blog.blogspot.com/"> Learning Blog </ a> </ li><li> <a href="http://cepat-terindex-google.blogspot.com/"> Learning Seo </ a> </ li><li> <a href="#"> Links </ a> </ li> </ ul><td><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width = "500" height = "80 "/></ a></ Td><td> <center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/ Pictures/AWS_ad3_150by150.jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/><center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/></ Td> <td>
<center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/><center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/>
</ Td>
</ Tr></ Table></ Div><div id="copyright">Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"> <b> RSS Articles </ b> </ a>| Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"> <b> RSS Comments </ b> </ a>| Create <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"> <b> Navbar </ b> < / a> This On You Blog</ Div>
After that, Save Template, and see the results now: D
Description:

        To sign #, replace with the url address you want to go.
        To http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro, change the address of your banner ads.
        To http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg, replace with your banner image url.
        To http://url_blog_anda.blogspot.com/, replace with url of your blog.
Hopefully useful and modify according to your taste each one.
Goosd Luck Yes!

Selasa, 15 Maret 2011

Cara Membuat Menu Blogger plus search

Bismillahirahmanirrahim. Pada tutorial kali ini kita akan membahas bagaimana caranya membuat menu bloggger. Menu blogger yang akan kita buat nantinya terdapat pula fasilutas kotak pencarian blogger (search blogger). Sebelum kita masuk ke langkah-langkah pembuatan menu blogger + kotak pencarian blogger sebaiknya kalian liat dulu tampilan menu bloggernya pada link demo di bawah ini.

Download Demo

Pertama kalian harus login dulu di blogger
Setelah login pilih Racangan --> Edit HTML dan beri cheklis pada Expand Template Widget
Copy paste kode di bawah ini sebelum kode ]]></b:skin>

#menusemua{height:120px;margin-top:12px;float:left;width:920px;} #menueko{height:34px;float:left;width:600px}
#menueko,#menueko ul{padding:0;margin:0;list-style:none;line-height:1} #menueko{margin-bottom:1px}
#menueko ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#menueko li{float:left;list-style:none;margin:0;padding:0 6px 0 0}
#menueko ul li{list-style:none;margin:0;padding:0}
#menueko li a,#menueko li a:link{color:#fff;display:block;border:1px solid #fff; margin:0;padding:8px 8px 8px 8px;text-decoration:none;text-transform:uppercase;font:bold 11px Arial,Helvetica,sans-serif;background:#0D606B;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#menueko li a:hover,#menueko li a:active{color:#AAEDF6;display:block;text-decoration:none;background:#003D45}
#menueko li.current_page_item a{color:#fff;}
#menueko li:hover,#menueko li.sfhover{position:static}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7no1vU2RjWqUdnAAXIFmfFrm7FNsetGAYKvjDRbs8CJ75rs5C7TPDIae20E8lQbTPLqVuTGPwoTqQCbJjg3vMhg85XINgZtVg1HyE88Z1c-Fvu2B2SosBwna4j_cKb1Hnnn2eoE9iTF8Y//) 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;
}

Lalu Copy paste lagi kode di bawah ini di widget HTML

<li><a href='http://cktpanellistrik.blogspot.com/2010/04/panel-distribusi-lvmdplvsdp.html'>Panel listrik</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/2010/07/tool-parse-html.html' title='posts rss'>Tools</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/posts/default' title='comments rss'>Posts RSS</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/comments/default' title='comments rss'>Comments RSS</a></li>
</ul>

Simpan template dan liat hasilnya

Mungkin sampai disini dulu tutorial kali ini. Kalian ada yang kurang paham bisa tanyakan pada kotak komentar dan kalau ada kekurangan mohon tulis juga saran dan kritiknya di kotak komentar. Terima kaish telah berkunjung dan tunggu posting-posting lainnya.

Jumat, 11 Maret 2011

Menyimpan File Java Script di Hosting Google Codes

Banyak sekali pertanyaan yang masuk, baik melalui komentar ataupun melalui email. Setelah saya pilah-pilah ternyata ada pertanyaan saya dan lumayan banyak yang menanyakan tentang cara menyimpan file .js ke dalam hosting google codes.

Memang terkadang kita sebagai blogger kebingunan untuk menyimpan beberapa file javascript atau .js yang digunakan untuk mempercantik tampilan blog kita. Mau ditaruh di hosting pribadi takutnya sewaktu hosting kita bermasalah atau habis lebih-lebih kita gak kuat membayar hehehehe. Tapi rupanya google mengerti dengan kita selaku pengguna blogger, yang gak punya hosting pribadi untuk menyimpan file-file penting dan dengan google codes kita sudah disediakan oleh google tempat untuk menaruh file pribadi kita terutama file javascript .js Nah bagaimana caranya ?

Jika Anda pengguna Gmail, tentunya akan sangat mudah menggunakannya karena dengan gmail Anda sudah secara otomatis dapat menggunakan layanan hosting dari Google ini. Oke silahkan masuk ke http://code.google.com/hosting/ . Langkah selanjutnya klik new project seperti gambar di bawah ini.

cara menyimpan file javascript ke google gratis

Jika sudah masuk, Anda akan dihadapkan dengan form pengisian. Jangan kaget dan jangan bingung karena ini cukup mudah. Lihat gambar dibawah ini

form yang harus diisi untuk mendaftar di hosting google codes gratis

Sudah terbuka ? oke langkah selanjutnya yang perlu Anda lakukan adalah mengisi form tersebut dengan keterangan file project yang akan anda simpan,

Project Name, isikan dengan nama halaman Anda
Project Summary, isi dengan judul proyek Anda
Project Description, berikan deskripsi/keterangan sesuka Anda
Version Control System, pilih Mercurial
Source Code Licenses, pilih GNU General Public License v3
Centang Use a Separate Content License dan pilih salah satu, setelah itu, click: create project.

Sudah,mudah bukan ? kalau sudah lanjut ke langkah selanjutnya, yakni meng-upload file yang ingin Anda simpan, perhatikan gambar dibawah ini

langkah-langkah cara menggunakan hosting google codes

Anda harus Click di tab : Download>New Download kemudian ;

isi: summary, dengan nama file javascript anda ;
browse file dari computer anda ;
Submit file.

Kalau sudah di submit, berarti file Anda terlah tersimpan di hosting google codes. Dan daftar file yang telah Anda upload / simpan akan terlihat seperti gambar dibawah ini.

menyimpan file javascripts ke dalam hostin google

Lalau jika Anda ingin menggunakan dan memanggil file yang telah Anda simpan, caranya dengan meng Klik salah satu file yang telah Anda submit. Kalau sudah akan terlihat seperti gambar dibawah ini

Dan copy link file Anda yang ingin Anda gunakan dengan cara klik kanan pada nama file, lalu klik copy link location dan pastekan…

Oke mudah dan cepat bukan ?

Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.

Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:

Silahkan login terlebih dahulu pada akun Blogspot pembaca
Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
Copy paste kode berikut di atas tag </head>
<script type="text/javascript" src="http://nestoriko.googlepages.com/chrome.js"> </script>
Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>
.chromestyle{ width: 100%; font-weight: bold; } .chromestyle:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .chromestyle ul{ border: 1px solid #BBB; width: 100%; background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x; padding: 4px 0; margin: 0; text-align: center; } .chromestyle ul li{ display: inline; } .chromestyle ul li a{ color: #494949; padding: 4px 7px; margin: 0; text-decoration: none; border-right: 1px solid #B5E2FE; } .chromestyle ul li a:hover, .chromestyle ul li a.selected{ background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x; } .dropmenudiv{ position:absolute; top: 0; border: 1px solid #B5E2FE; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA ,direction=135,strength=4); } .dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid #B5E2FE; padding: 2px 0; text-decoration: none; font-weight: bold; color: black; } .dropmenudiv a:hover{ background-color: #EBF7FF; }
Cari struktur seperti dibawah ini pada template pembaca
<b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> </b:widget> </b:section> </div>
Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
<div class="chromestyle" id="chromemenu"> <ul> <li><a href="http://tutorial-website.blogspot.com">Home</a></li> <li><a href="#" rel="dropmenu1">Menu1</a></li> <li><a href="#" rel="dropmenu2">Menu2</a></li> </ul> </div>  <div id="dropmenu1" class="dropmenudiv"> <a href="URL sub menu1">Sub Menu1</a> <a href="URL sub menu2">Sub Menu2</a> <a href="URL sub menu3">Sub Menu3</a> </div>  <div id="dropmenu2" class="dropmenudiv"> <a href="URL sub menu1">Sub Menu1</a> <a href="URL sub menu2">Sub Menu2</a> <a href="URL sub menu3">Sub Menu3</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu") </script>
Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
<div class="chromestyle" id="chromemenu"> <ul> <li><a href="http://tutorial-website.blogspot.com">Home</a></li> <li><a href="#" rel="dropmenu1">Menu1</a></li> <li><a href="#" rel="dropmenu2">Menu2</a></li> <li><a href="#" rel="dropmenu3">Menu3</a></li> </ul> </div>  <div id="dropmenu1" class="dropmenudiv"> <a href="URL sub menu1">Sub Menu1</a> <a href="URL sub menu2">Sub Menu2</a> <a href="URL sub menu3">Sub Menu3</a> </div>  <div id="dropmenu2" class="dropmenudiv"> <a href="URL sub menu1">Sub Menu1</a> <a href="URL sub menu2">Sub Menu2</a> <a href="URL sub menu3">Sub Menu3</a> </div>  <div id="dropmenu3" class="dropmenudiv"> <a href="URL sub menu1">Sub Menu1</a> <a href="URL sub menu2">Sub Menu2</a> <a href="URL sub menu3">Sub Menu3</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu") </script>
Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
"URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.

Selamat mencoba !!!

Membuat Multi Level Drop-Down Menu

Dengan di temaninya sebungkus rokok dan segelas kopy plus martabak akhirnya Alhamdulillah kang fatur bisa jalan jalan di dunia tidaknyata alias Internet. Dan Alhamdulillah saya mendapat oleh-oleh dari salah seorang hali bloger orang Arab Saudi untuk dibagikan kepada para sobat semua.

Oleh-oleh yang saya dapatkan dan yang saya akan bagikan pada malam ini yaitu tentang Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery. Mungkin para sobat juga sudah banyak mendengar tentang masalah ini, dan sudah banyak para ahli yang mempostingkannya, namun saya hanya sekedar ingin berbagi sama para sobat yang masih awam seperti saya dan mudah mudahan postingan kali ini dapat bermanfaat.

Baik, untuk para pemula semuanya kalau belum tahu apa itu Multi Level drops-Down Menu di bawah ini contoh gambarnya :

Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.

1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja

3. Tambahkan juga script berikut setelah script JQuery yang tadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />



<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

/* jqueryslidemenu
----------------------------------------------- */

.jqueryslidemenu{
font: bold 12px Verdana;
background: #ffffff;
width: 100%;
height: 250px;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template maka Hasilnya seperti pada gambar di bawah ini :

Untuk Sobat yang sudah hali dengan CSS silahkan edit sesuai selera sobat untuk kode warna silahkan klik disini.

Sekian dulu dari saya, insya Allah postingan selanjutnya menyusul, mau nerusin ngopy dulu takut keburu dingin.

Semoga bermanfaat! Thanks to Dinamic Drive

Jquery Multi Level Menu Horizontal

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya

langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"

Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. Miss u all. bye²

Kamis, 10 Maret 2011

Menu 3 Level dengan CSS & JQuery

Tidak dapat disangkal lagi bahwa menu dengan sub submenu (3 level) merupakan komponen yang cukup sering dipakai dalam beberapa website, terutama jika website tersebut memiliki struktur navigasi halaman yang ‘beranak bercucu’. Okay langsung saja, disini ada beberapa bumbu yang saya gunakan dalam pembuatan menu 3 level ini, yaitu:

CSS 2.0
JQuery
XHTML

Dengan struktur file sebagai berikut:

/menu.html
/menu.css
/script.js
/jquery-1.4.2.min.js

Browser compatibility: IE 6 (masih perlu di-cross check lagi), IE 7, IE 8, Firefox 2+, Chrome 4+, Opera 9+, Safari 4+
Langkah 1: Buat struktur menu berikut pada file menu.html

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a>
           <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
           </ul>
         </li>
         <li><a href="#">Clients</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
   </li>
   <li><a href="#">Clients</a>
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
     </ul>
   </li>
   <li><a href="#">Contact Us</a></li>
</ul>

Langkah 2: Buat style untuk mengatur tampilan pada langkah 1 (menu.css)

body{
font-family: Helvetica, arial, sans-serif;
}

#nav{
background: #e5e5e5;
float:left;
margin: 0; padding: 0;
}

#nav li a, #nav li{
float: left
}

#nav li{
list-style: none;
position: relative
}

#nav li a{
padding: 0.5em 2em;
text-decoration: none;
background: #1764bf;
color: white;
border-right: 1px solid #114b8f;
border-left: 1px solid #1764bf;
border-bottom: 1px solid #4173af;
border-top: 1px solid #274f7f;
}

#nav li a:hover{
background: #4d88cf;
}

/*submenu*/
#nav li ul{
display: none;
position: absolute;
left: 0;
top:100%;
padding:0;margin:0;
}

#nav li:hover > ul{
display: block;/*memunculkan submenu ketika a pada menu level 1 di hovers*/
}

#nav li ul li, #nav li ul li a{
float: none;
}

#nav li ul li{
_display:inline;/* dukungan untuk ie6 */
}

#nav li ul li a{
width: 150px;
display: block;
}

/*sub submenu*/

#nav li ul li ul{
display: none;
}

#nav li ul li:hover ul{
left:100%;
top:0;
}

Untuk font, warna, dan ukuran dapat disesuaikan dengan selera Anda masing-masing.
Pada langkah 2 ini sebetulnya menu 3 level sudah bisa berjalan dengan baik, namun jika Anda ingin mempercantiknya dengan efek slidedown, silakan lanjutkan ke langkah berikutnya.
Langkah 3: Membuat efek slidedown dengan Javascript (script.js)

var subsubmenu = function (){
 this.navLi=$('#nav > li').children('ul').css('display', 'none').end();
 this.init();
};

subsubmenu.prototype={
 init : function(){
  this.setMenu();
 },

 //Memberikan efek slide

 setMenu: function(){

  this.navLi.hover(function(){
  //mouseover
   $(this).find('>ul').stop(true,true).slideDown(250);
  }, function(){
  //mouseout
   $(this).find('>ul').stop(true,true).fadeOut(200);
  });
 }

}

new subsubmenu();

Framework yang saya gunakan ialah JQuery versi 1.4.2, tidak menutup kemungkinan dapat berjalan dengan baik pula pada JQuery versi lebih lama. Karena perintah yang digunakan ialah perintah dasar.
Langkah 4: Nyalakan rokok, aduk kopi, dan download contohnya agar lebih jelas
Jika rekan-rekan sekalian menemukan bug/bugfix silakan tulis dalam komentar, bagaimana pun juga saya hanyalah seorang nubie yang tak luput dari bug (terutama Internet Explorer).

Untuk membuat menjadi vertikal caranya cukup sederhana dengan mengubah/menambah sedikit baris style pada selektor terkait dibawah ini#nav li ul li, #nav li ul li a{
float: none;
}
#nav li a{
display:block;
}
#nav li ul{
left:100%;
top:0;
}
hanya perlu dirapikan sedikit

MENGATUR DAFTAR ISI

Untuk mengatur daftar isi seperti text dan link supaya lebih rapih di lihatnya.
kita akan menggunakan kode OL(ordered list) UL(unordered list) dan LI(list item).
Contoh kita akan mengatur text atau linknya dengan menggunakan UL dan LI .
Contoh:

Kode di atas akan menghasilkan daftar isi dengan bundaran seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya

Nah keterangan di atas seperti ini: <ul> adalah bentuk type bundarannya, dan <li> adalah yang mengatur barisannya.. Nah untuk Bentuk <ul> itu bermacam macam jenisnya, ada SQUARE, CIRCLE dan DISC.. yang bundar, yang kotak dan yang kotak kosong.

Contoh untuk UL yang bentuk SQUARE.
Kodenya:
Nah kode di atas akan tampil UL berbentuk kotak seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya

Untuk UL yang bentuk CIRCLE.
Kodenya:
Nah kode ul yang ini akan menghasilkan kotak kosong seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya

Dan untuk UL yang bentuk DISC itu sama dengan bentuk UL yang pertama di atas akan menghasilkan UL bundar.

Nah sekarang kita akan mengatur daftar isinya dengan menggunakan OL(ordered list) untuk pengganti UL(unordered list), UL itu bentuknya bundar, kotak dan kotak kosong. Tapi kalau OL itu bentuk huruf dan angka.
Contoh untuk menggunakan OL berbentuk huruf:
Kode di atas akan tampil dengan barisan urutan huruf seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya
Di sini isi text dan linknya

Untuk OL yang berbentuk angka Kodenya:
Nah kode OL yang ini akan tampil dengan urutan angka seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya
Di sini isi text dan linknya

Nah jadi fungsi OL itu untuk mempermudah kita menulis daftar urutan huruf dan angka. kita tidak harus susah susah menulis huruf A sampai Z dan menulis 1 sampai 100..
Dengan menggunakan kode OL kita cukup mengetikan huruf A dan nanti akan otomatis keluar huruf B,C,D dan seterusnya..
cara menulisnya dengan format seperti ini:
<ol type="A">
Dan untuk format angka tinggal di rubah hurufnya menjadi angka, contohnya seperti ini:
<ol type="1">
cukup mudahkan membuat daftar urutan angka dan huruf.?

Nah dan untuk mengisi text atau linknya kita harus menambahkan kode <li>
Contoh:
<ol type="1"><li>di sini untuk meletakan textnya</li> dan seterusnya, yang penting untuk mengisi textnya harus di awali kode <li> dan untuk penutupnya harus di ahiri kode </li> . Nah kalau sudah selesai menulis textnya nanti harus di akhiri dengan kode </ol>
selesai deh...

paham kan?.
ya sudah selamat berkreasi sendiri yah..

Membuat Membuka Link Di Tab Baru

   Pernah ga anda klik link dan munculnya di tab baru? Mau membuatnya juga? ikuti langkah di bawah ini :

*Biasanya pada link kodenya akan seperti ini :

           <a href='http://bloganda.com'>Blog Anda</a>

*Untuk membuatnya terbuka di tab baru ganti dengan :

<a href="#" target="_blank" rel="dofollow" onclick="window.open('http://bloganda.com'); return false;">Blog Anda</a>

Cat : Ganti teks yang berwarna merah dengan Alamat Link yang inginkan
        Ganti teks yang berwarna Biru dengan kata yang akan muncul mewakili Alamat Link

Selamat Mencoba :D

Rabu, 09 Maret 2011

CSS Specificity

CSS Specificity menentukan seberapa spesifik kah sebuah aturan pada CSS. Jika ada 2 atau lebih aturan pada sebuah elemen yang sama, maka aturan paling spesifiklah yang akan dipakai oleh browser.

Nilai specificity pada CSS bisa dihitung sbb:

Element Selector, yaitu selector yang berupa tag-tag html, contohnya div, ul, li, a
nilai specificity = 1 (0,0,1)
Class Selector, yaitu selector yang diawali dengan tanda titik, contohnya .menu untuk elemen dengan class="menu"
nilai specificity = 10 (0,1,0)
ID Selector, yaitu selector yang diawali dengan tanda #, contohnya #sidebar untuk elemen dengan id="sidebar"
nilai specificity = 100 (1,0,0)

Contoh 1:

1 2	a { color: red; } a { color: green; }

Kedua selector tersebut memiliki specificity yang sama, karena itu aturan yang akan dipakai adalah yang terakhir (paling bawah), sehingga elemen <a> (link) akan berwarna hijau.
Contoh 2:

#sidebar ul.menu li a { color: red; }
ul.menu li a { color: purple; }
ul li a { color: green; }
li a { color: yellow; }
a { color: teal; }

Kode di atas adalah beberapa aturan css untuk sebuah elemen link (<a>). Kode htmlnya sbb:

<div id="sidebar">
 <h2>Menu</h2>
 <ul class="menu">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="guestbook.html" style="color:silver">Guestbook</a></li>
 </ul>
</div>

Perhitungan specificity nya:

#sidebar ul.menu li a
memiliki specificity = 113
(1 ID Selector + 1 Class Selector + 3 Element Selector)
ul.menu li a
memiliki specificity = 13
(1 Class Selector + 3 Element Selector)
ul li a
memiliki specificity = 3
(3 Element Selector)
li a
memiliki specificity = 2
(2 Element Selector)
a
memiliki specificity = 1
(1 Element Selector)

Dengan melihat perhitungan specificity di atas, maka kita bisa mengetahui bahwa paling spesifik adalah aturan yang pertama. Jadi link akan berwarna merah.
Selain menggunakan selector, untuk menerapkan css kita juga bisa mendefinisikan inline style, yaitu dituliskan langsung pada tag html menggunakan attribute style, contohnya <a style="color:blue">teks</a>.
Pengaturan menggunakan inline style akan mengalahkan ketiga jenis selector di atas. Jadi pada contoh tersebut, link guestbook akan berwarna silver.
Referensi:
CSS: Specificity Wars

Artikel tersebut akan memberikan pemahaman tentang CSS Specificity menggunakan analogi Star Wars.
Namun bagi yang tidak mengerti Star Wars, mungkin artikel tersebut bisa memudahkan untuk memahami Star Wars melalui CSS