Tunggu ya!!!!
Antologi Puisi & Cerpen
Tunggu ya!!!!
Menu Tab View Tanpa Edit HTML 2
Pertama, silahkan login ke akun Anda. Klik RANCANGAN kemudian klik TAMBAHKAN GADGET, pada halaman ELEMEN LAMAN. Kalau sudah terbuka tab baru, copy kode di berikut ke dalamnya.
- Copy kode berikut untuk Menu Tab View dengan border yang melengkung.
<style type="text/css">
#badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; -moz-box-shadow: 2 4 4 #cccccc;
-webkit-box-shadow: 2 4 4 #cccccc;
-goog-ms-box-shadow: 2 4 4 #cccccc;
box-shadow: 2 4 4 #cccccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 10px;}
div.TabView div.Tabs
{height: 30px;overflow: hidden;}
div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
text-align:center ; height: 18px; /* tinggi menu atas */
padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
font-weight: normal; color: white; /* warna font menu atas */ -moz-box-shadow: 1 2 2 #000000;
-webkit-box-shadow: 1 2 2 #000000;
-goog-ms-box-shadow: 1 2 2 #000000;
box-shadow: 1 2 2 #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-goog-ms-border-radius: 15px;
border-radius: 15px;}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active -moz-box-shadow: 1 2 2 #000000;
-webkit-box-shadow: 1 2 2 #000000;
-goog-ms-box-shadow: 1 2 2 #000000;
box-shadow: 1 2 2 #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-goog-ms-border-radius: 15px;
border-radius: 15px;color: #000000;background: #fff290; /* background menu atas */ }
div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions ---------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="badan">
<div id="TabView" class="TabView">
<div style="width:355px;" class="Tabs">
<a>Daftar Isi</a>
<a>Recent Post</a>
<a>Komentar</a>
<a>Link Blog</a>
<a>Tukar Link</a>
</div>
<div style="width:355px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 3
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 4
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 5
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Hasilnya seperti gambar di bawah.
- Copy kode berikut untuk Menu Tab View biasa.
<style type="text/css">
#badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; }
div.TabView div.Tabs
{height: 30px;overflow: hidden;}
div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
text-align:center ; height: 18px; /* tinggi menu atas */
padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
font-weight: normal; color: white; /* warna font menu atas */ }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {color: #000000;background: #fff290; /* background menu atas */ }
div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions ---------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="badan">
<div id="TabView" class="TabView">
<div style="width:355px;" class="Tabs">
<a>Daftar Isi</a>
<a>Recent Post</a>
<a>Komentar</a>
<a>Link Blog</a>
<a>Tukar Link</a>
</div>
<div style="width:355px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 3
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 4
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 5
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Hasilnya akan seperti ini. Catatan: Silahkan ganti tulisan berwarna HIJAU sesuai keinginan Anda. Untuk tulisan berwarna MERAH ganti sesuai dengan judul Menunya dan WIDTH sesuaikan dengan ukuran sidebar blog Anda.
Oke!!! Silahkan berkreasi untuk lebih bagusnya agar sesuai dengan warna blog Anda. Kalau ada yang kurang jelas, silahkan tinggalkan komentar.
Membuat Menu Tab View tanpa Edit HTML
Caranya sangatlah gampang, tidak perlu susah-susah. Sobat blogger tinggal menggabungkan kode tab view menu ke dalam sidebar Anda. Masih bingung? Oke, langsung saja ikuti petunjuk berikut ini.
Silahkan login ke Blogger, pilih RANCANGAN, kemudian pada Elemen Halaman, klik Tambah Gadget. Silahkan pilih HTML/Javascript. Copy paste kode di bawah ini ke dalamnya:
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Tulisan warna kuning adalah judul dari menu Anda, sedangkan tulisan warna merah adalah isi dari menunya. Untuk lebar, huruf (font), dan tingginya, silahkan sesuaikan dengan lebar sidebar blog Anda. Hasilnya bisa Anda lihat di sini!
Kalau belum jelas, silahkan berkomentar. Ditunggu ya???
Selamat Belajar!!!
Mengenal Kode HTML
HTML adalah singkatan dari Hypertext Markup Language yang merupakan bahasa dari World Wide Web (WWW) yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser
Tag-tag dasar HTML:
<html> : Definisi sebuah dokumen HTML
<title> : Definisi judul dalam dokumen
<body> : Definisi body dokumen
<h1> - <h6> : Definisi heading 1 s/d 6
<p> : Definisi sebuah paragraf
<br> : Sisipan line break
<!-- > : Definisi kompentar dalam source code
Tag-tag pemformatan:
<b> : Teks yang ditebalkan
<big> : Teks dengan ukuran yang besar
<em> : Teks yang diberi tekanan
<i> : Teks yang dimiringkan
<small> : Teks yang kecil ukurannya
<strong> : Teks yang ditebalkan
<sub> : Subscipt
<sup> : Superscript
<ins> : Teks yang disisipkan
<del> : Teks yang dihapus
<u> : Teks yang diberi garis bawah
Tag-tag Link dan List:
<a> : Definisi untuk ancor
<link> : untuk warna text sebelum diklik
<vlink> : untuk mengubah warna text link setelah diklik
<alink> : akan mengubah warna link aktif
<ol> : Ordered list / untuk penomoran
<ul> : Unordered List / bullet
<li> : List item
<dl> : Definition term
<dd> : Definition description
Karakter khusus dalam file HTML :
& quot ; ( " )
& amp ; ( & )
& frasl ; ( ⁄ )
& lt ; ( < )
& gt ; ( > )
& nbsp ; ( spasi )
& copy ; ( © )
Selamat belajar dan sukses selalu!!!
Dan Kuberharap
Aku tak tahu harus berucap apa padamu kali ini
Hanya beberapa kata untuk menggambarkan isi hatiku
Dan kuberharap,
Kata itu mampu mewakili seluruh perasaanku
Perasaan yang tak pernah mampu kugambarkan
Semoga pula kau menerima dengan raut riang
Sebab hanya itu yang bisa kuberi
Aku tak tahu dengan apa aku membingkainya
Hanya sehelai kertas berisikan puisi untukmu
Dan kuberharap,
Itu akan membuat sedikit senyummu merekah
Menenggelamkan kelam dan gelisah yang ada
Semoga pula kau menyimpannya pada satu sudut ruang hatimu
Sebab hanya itu yang bisa kuberi
Semoga kau selalu gembira
Semoga kau selalu bahagia
Selamat ulang tahun
Semoga apa yang menjadi doamu terkabul
Makassar, 15 Oktober 2010
Umurmu genap 22 tahun. Tambah dewasa dengan semua masalah.
Puisi Malam Ini
Bahagia
Senang
Rindu.....
Rindu.....
Rindu,
Gembira
Kecewa!
Apalagi cerita selanjutnya?
Bulukumba, 11 September 2010
Saat aku ingin mendengar lembut suaramu
Meminta Untuk Hari Esok
Masih dengan harapan yang tergenggam erat
Meminta pada-Mu untuk hari esok
Tak meminta yang lain
Untuk hari esok
Kuhadapkan telapak tangan ini pada-Mu
Kelak rindu pada kekasihku tetap untuknya
Tetap mekar dan mengakar hingga ke pusara bumi
Andaipun tak ada lagi cahaya pada siang-Mu
Untuk hari esok
Aku tetap merindu pada kekasih di tiap detak jantungku
Hingga roh dan jasadku Engkau pisahkan
Untuk hari esok
Aku meminta meski dengan tubuh yang kotor
Sebab ketulusan mencintainya
Untuk hari esok
Aku bersujud memohon pada-Mu
Jadikan bidadariku yang terakhir
Pelepas rinduku
Untuk hari esok hingga kelak Engkau memanggilku
Makassar, 11 Juli 2010
Cara Membuat Akun Blog dan Blog di Blogger
- Silahkan ketik https://www.google.com atau klik di sini. Anda akan dibawa ke tab seperti gambar berikut:
- Silahkan klik Get started. Selanjutnya akan terbuka seperti gambar berikut.
- Isikan biodata Anda ke dalam kotak-kotak yang tersedia. Mulai dari alamat email dan seterusnya. Jangan lupa centang persetujuan Persyaratan dan Layanan, lalu klik Lanjutkan.
- Setelah terbuka halaman baru, isikan lokasi negara (Indonesia) dan nomor telepon Anda untuk verifikasi akun. Silahkan klik “Kirim kode verifikasi ke ponsel saya” untuk memperoleh kode verifikasinya. Lihat gambar di bawah ini.
- Kemudian Anda akan dibawah ke tahap selanjutnya, yaitu tempat memasukkan kode verifikasi akun google Anda. Setelah menerima pesan via SMS, masukkan kodenya kemudian klik verifikasi. Lihat gambar berikut:
Catatan: “Jika Anda tidak menerima pesan kode verifikasi, silahkan klik “Coba kirim ulang” (lihat gambar di atas).” - Sedikit lagi blog Anda akan selesai dibuat. Setelah itu, Anda akan diarahkan ke tahap selanjutnya, yaitu nama dan alamat url blog Anda. Lihat gambar di bawah ini.
- Silahkan isi “Judul blog”. Ini adalah judul blog Anda yang nantinya akan muncul pada publikasi blog, dasbor, dan profil Anda. Anda bisa menggantinya nanti ketika ingin mengubah namanya. Selanjutnya, klik Cek Ketersediaan atau isi kolom setelah http:// dengan alamat url yang Anda inginkan (lihat gambar). Misalnya, Anda tulis blog-percobaan. Jika tersedia, maka alamat blog Anda nantinya adalah http://www.blog-percobaan.blogspot.com. Kemudian klik “Lanjutkan”.
- Sekarang Anda sampai pada proses terakhir dari proses pembuata akun blog, yaitu memilih template dasar untuk blog Anda. Silahkan pilih template yang Anda sukai kemudian klik lanjutkan. Lihat gambar.
- Kini blog Anda sudah jadi. Anda akan dibawa ke jendela pemberitahuan bahwa blog Anda sudah jadi. Lihat gambar berikut.
- Silahkan klik mulai blogging untuk memulai membuat postingan pertama Anda. Klik publish dan selesai.
Selamat belajar dan sukses selalu. Jangan lupa komentarnya.