Coba lagi ya
»» read more
Sabtu, 19 Desember 2009
CONTOH THREADED COMMENT
Tadi malam disalah satu rumah sakit telah terjadi kebakaran..
»» read more
Jumat, 03 April 2009
Cara Membuat Nomor Halaman Posting Pada Blogspot
Setiap kali kita menulis posting baru pada blogspot, maka posting terbaru akan muncul di atas atau di depan posting yang lama secara otomatis, meskipun sebenarnya kita bisa mengganti urutan tersebut dengan cara mengganti waktu pembuatan dari posting tersebut. Kita juga bisa mengatur jumlah postingan yang akan mucul per halaman pada blogspot. Cara mengatur jumlah posting per halaman pada blogspot pernah disinggung di panduan menggunakan blogspot yang bisa pembaca download dari blog ini. Untuk mengaturnya silahkan buka tab menu Pengaturan pada dasbor blogspot Anda, kemudian pilih sub tab menu Format. Silahkan atur jumlah posting per halaman pada bagian Tampilkan. Nah, untuk melihat postingan yang lama, pada template blogspot sudah tersedia link dibagian bawah posting yang bertuliskan biasanya "Posting Lama" dan link "Posting Lebih Baru" jika ingin kembali pada halaman postingan yang lebih baru. Yang membuat sedikit repot adalah ketika kita ingin membuka postingan yang jauh lebih lama. Dengan kondisi seperti itu, kita harus membuka satu persatu halaman-halaman postingan blogspot untuk sampai pada postingan lama yang ingin kita tuju. Namun, ada cara untuk mengatasinya, yaitu dengan membuat link tiap halaman postingan, sehingga kita bisa melompat ke halaman yang lebih lama atau lebih baru tanpa melewati halaman-halaman diantaranya. Kita akan membuat nomor halaman posting pada blogspot. Nomor-nomor tersebutlah sebagai link untuk menuju halaman yang dituju. Langkah-langkahnya adalah sebagai berikut:
»» read more
- Login terlebih dahulu pada akun blogspot Anda
- Klik link menu Tata Letak, kemudian pilih sub tab menu Edit HTML
- Backup terlebih dahulu template pembaca. Hal ini bertujuan agar pembaca bisa mengembalikan ke kondisi semula jika terjadi kesalahan pengeditan. Klik tulisan yang bertuliskan Download Template Lengkap
- Jangan beri centang pada kotak kecil yang ada disamping tulisan Expand Template Widget
- Cari kode ]]></b:skin> pada template tersebut
- Copy paste struktur CSS berikut tepat diatas kode ]]></b:skin>
- Cari lagi struktur seperti berikut pada template pembaca
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section> - Kemudian copy paste struktur berikut tepat di bawah struktur yang Anda temukan pada langkah 7
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script> - Klik tombol menu SIMPAN TEMPLATE
- Contoh pembuatan nomor halaman posting tersebut bisa pembaca lihat pada bagian bawah halaman blog saya ini.
Cara Membuat Nomor Halaman Posting Pada Blogspot
Setiap kali kita menulis posting baru pada blogspot, maka posting terbaru akan muncul di atas atau di depan posting yang lama secara otomatis, meskipun sebenarnya kita bisa mengganti urutan tersebut dengan cara mengganti waktu pembuatan dari posting tersebut. Kita juga bisa mengatur jumlah postingan yang akan mucul per halaman pada blogspot. Cara mengatur jumlah posting per halaman pada blogspot pernah disinggung di panduan menggunakan blogspot yang bisa pembaca download dari blog ini. Untuk mengaturnya silahkan buka tab menu Pengaturan pada dasbor blogspot Anda, kemudian pilih sub tab menu Format. Silahkan atur jumlah posting per halaman pada bagian Tampilkan. Nah, untuk melihat postingan yang lama, pada template blogspot sudah tersedia link dibagian bawah posting yang bertuliskan biasanya "Posting Lama" dan link "Posting Lebih Baru" jika ingin kembali pada halaman postingan yang lebih baru. Yang membuat sedikit repot adalah ketika kita ingin membuka postingan yang jauh lebih lama. Dengan kondisi seperti itu, kita harus membuka satu persatu halaman-halaman postingan blogspot untuk sampai pada postingan lama yang ingin kita tuju. Namun, ada cara untuk mengatasinya, yaitu dengan membuat link tiap halaman postingan, sehingga kita bisa melompat ke halaman yang lebih lama atau lebih baru tanpa melewati halaman-halaman diantaranya. Kita akan membuat nomor halaman posting pada blogspot. Nomor-nomor tersebutlah sebagai link untuk menuju halaman yang dituju. Langkah-langkahnya adalah sebagai berikut:
»» read more
- Login terlebih dahulu pada akun blogspot Anda
- Klik link menu Tata Letak, kemudian pilih sub tab menu Edit HTML
- Backup terlebih dahulu template pembaca. Hal ini bertujuan agar pembaca bisa mengembalikan ke kondisi semula jika terjadi kesalahan pengeditan. Klik tulisan yang bertuliskan Download Template Lengkap
- Jangan beri centang pada kotak kecil yang ada disamping tulisan Expand Template Widget
- Cari kode ]]></b:skin> pada template tersebut
- Copy paste struktur CSS berikut tepat diatas kode ]]></b:skin>
- Cari lagi struktur seperti berikut pada template pembaca
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section> - Kemudian copy paste struktur berikut tepat di bawah struktur yang Anda temukan pada langkah 7
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script> - Klik tombol menu SIMPAN TEMPLATE
- Contoh pembuatan nomor halaman posting tersebut bisa pembaca lihat pada bagian bawah halaman blog saya ini.
Senin, 30 Maret 2009
Cara Membuat Menu Drop Down Dengan CSS
Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web. Seperti yang pernah saya katakan bahwa banyak cara mendesain sebuah menu pada web termasuk pada sebuah blog. Jika postingan sebelumnya membahas pembuatan menu drop down horizontal dengan menggunakan JavaScript, maka kali ini saya akan memberikan tutorial web tentang bagaimana membuat menu drop down dengan CSS.
Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus. Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat. Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan. Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut. Berikut cara membuat sebuah menu drop down:
Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.
Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus. Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat. Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan. Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut. Berikut cara membuat sebuah menu drop down:
Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.
- Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah <ul></ul> sebagai level utama dan <li></li> sebagai sub level. Saya berikan sebuah contoh struktur HTML dari menu drop down:
<ul>
<li><a href="URL 1">MENU 1</a></li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>, artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah "Menu 1", "Menu 2", dan "Menu 3" yang masing-masing dibungkus oleh tag <li></li>. - Struktur tersebut akan menjadi sebuah menu horizontal biasa, sama seperti tutorial menu horizontal yang pernah saya buat pada postingan yang sebelumnya. Silahkan baca disini. Nah, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu). Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya?he3x. Strukturnya akan seperti ini:
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur "Menu 1", tetapi sudah ikut membungkus sub menu dari "Menu 1" juga (perhatikan end tag </li> yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:
- Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Postingan yang lalu hanya membahas pembuatan menu horizontal yang biasa, sehingga pembuatan CSS kali ini juga akan sedikit berbeda. Untuk CSS menu drop down tersebut, kita buat seperti ini:
- Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:
#menuku ul {
list-style: none;
}
#menu ul --> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama "menuku". Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.
list-style: none --> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).
padding:0 dan margin:0 --> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut. - Untuk membuat menu-menu tersebut tampil secara horizontal:
#menu li {
float: left;
}
#menu li --> artinya hampir sama dengan #menu ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).
float: left --> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri - Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.
#menu ul ul {
visibility:hidden;
width:149px;
}
#menu ul ul --> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.
visibility:hidden --> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)
width:149px --> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px. - Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
#menu ul li:hover ul,
#menu ul a:hover ul{
visibility:visible;
}
CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut. - Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
#menu li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}
Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.
background-color:#000000 -->warna backgroundnya adalah #000000
height: 2em --> tinggi dari menu tersebut sebesar 2em
width: 149px --> lebar menu sebesar 149px
display: block --> menu tersebut akan tampil dalam bentuk block
border: 0.1em solid #999999 --> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999. Untuk mengetahui kode warna CSS yang lain silahkan buka disini.
color: #FFFFFF --> tulisan menu akan berwarna #FFFFFF
text-decoration: none --> link menu tidak akan mempunyai garis bawah
text-align: center --> letak tulisan menu akan berada ditengah-tengah
- Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:
- Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut "menuku" akan dipasang. Ganti struktur pada langkah 2 menjadi seperi berikut:
<div id="menuku">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div> - Hasilnya akan seperti ini:
Minggu, 29 Maret 2009
Cara Membuat Album Foto Pada Blogspot Memakai Gadget
Tips cara membuat album foto pada blogspot ini sebenarnya sudah pernah saya berikan beberapa waktu yang lalu disini. Hanya saja posting yang pertama tersebut membahas bagaimana cara membuat slideshow album foto pada blogspot dengan memanfaatkan situs gallery foto yaitu www.slide.com. Untuk mengetahui trik pembuatan album foto di blog tersebut, pembaca boleh membukanya kembali disini. Blogspot sebenarnya menyediakan gadget yang berfungsi untuk membuat slide album foto pada blog kita. Namun, menurut saya gadget ini lebih sederhana jika dibandingkan dengan slideshow yang kita buat dari www.slide.com, sebab tampilan slide foto yang kita dapatkan dari situs www.slide.com tersebut bisa kita customize sesuai kehendak kita mulai dari tipe slide, ukuran, animasi, dan lain-lain. Meskipun demikian, tidak ada salahnya jika kita mencoba gadget slide album foto blogspot ini, sebab kesederhanaan biasanya indentik dengan kemudahan dalam pengaplikasiannya. Berikut langkah-langkah menambah album foto pada blogger:
- Login pada akun Blogspot Anda
- Klik link menu Tata Letak pada halaman dasbor. Pastikan Anda berada pada sub tab menu Elemen Halaman
- Klik link Tambah Gadget pada bagian dimana pembaca ingin memasang slide album foto tersebut
- Akan muncul window Tambahkan Gadget yang berisi daftar gadget yang bisa kita tambah. Silahkan cari dan pilih gadget Tampilan Slide
- Berikut pengaturannya:
Judul :
Isi dengan nama slide foto Anda.
Sumber :- Album Web Picasa. Album ini merupakan album gambar yang telah Anda masukkan pada pada blogspot pembaca misalnya ketika menulis posting. Silahkan klik http://picasaweb.google.com untuk melihat album Anda.
- Flickr. Flickr merupakan situs yang menyediakan tempat menyimpan foto dan video. Untuk mendapatkan layanan ini, silahkan daftar atau login menggunakan Yahoo ID Anda di www.flickr.com.
- Photobucket. Ini hampir sama dengan flickr dimana kita bisa menyimpan foto dan video secara online pada situs tersebut. Untuk mendapatkan layanan ini silahkan register di www.photobucket.com
- Lainnya. Sumber selain yang 3 diatas.
Memilih apakah berdasarkan kata kunci atau berdasarkan album
Buka link di jendela baru:
Centang jika ingin foto dibuka pada jendela baru ketika diklik - Album Web Picasa. Album ini merupakan album gambar yang telah Anda masukkan pada pada blogspot pembaca misalnya ketika menulis posting. Silahkan klik http://picasaweb.google.com untuk melihat album Anda.
- Sebagai contoh kita menambah slide foto menggunakan Album Web Picasa
Judul: beri judul slide album
Sumber : pilih "Album Web Picasa".
Pilihan : pilih "Album"
Nama Pengguna : masukkan ID akun Google pembaca. Misalkan akun Google pembaca adalah kampanye@gmail.com, maka isikan "kampanye"
Album : pilih album yang terdapat pada Album Web Picasa Anda. Perlu diperhatikan bahwa album yang muncul pada list tersebut adalah album yang diperuntukkan untuk "Public". Untuk melakukan pengaturan tersebut, silahkan masuk terlebih dahulu pada http://picasaweb.google.com (masuk menggunakan akun Google Anda). Klik tab "My Photos", setelah itu klik album yang ingin Anda atur parameternya.
Klik menu "Edit" kemudian pilih sub menu "Album Properties" sehingga akan muncul jendela "Edit album information".
Lihat dibagian paling bawah, akan ada pilihan "Visibility for this album". Silahkan pilih "Public". Kemudian klik tombol Save changes
- Pratinjau album akan terlihat pada jendela tambah gadget tersebut.
- Klik tombol SIMPAN
Selamat mencoba dan jangan lupa meninggalkan komentar ya
Sabtu, 28 Maret 2009
Cara Membuat Menu Drop Down Horizontal Dengan JavaScript
2 hari yang lalu kita telah belajar membuat menu horizontal pada blogspot. 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:
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>
<!--menu drop down pertama -->
<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>
<!--menu drop down kedua -->
<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>
<!--menu drop down pertama -->
<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>
<!--menu drop down kedua -->
<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>
<!--menu drop down ketiga-->
<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 dan jangan lupa meninggalkan komentar ya
Langganan:
Postingan (Atom)