Blogger Corner

Menu Navigator

2009-07-11T17:41:00.000-07:00

Assalamu'alaikum wr.wb.

Salam sobat blogger Indonesia. Hari ini posting saya tentang bagaimana membuat navigator macam milik saya di atas. Tak sukar rasanya untuk membuat itu. Hanya beberapa trik, misalnya menempatkan kode tersebut di bawah kode header. dengan memberi atau tidak tanda centang pada edit HTML blog sobat.

Ahhhhh.... kelamaan, okey...okey... kita mulai saja ya.

Ini adalah kode deklarasi variabel sobat. Silahkan copy dan paste tepat di atas kode ]]>.

Ini Kode yang mesti dicopy:


#navigator {
 background: url(http://www.templatesimages.com/images/BoxTube/navigator.gif) no-repeat center center;
 float: left;
 width: 880px;
 padding-right: 10px;
 padding-left: 10px;
 margin-top: 0px;
 margin-bottom: 8px;
 height: 32px;
 font-family: "Trebuchet MS", Tahoma, "VAGRounded BT", Verdana;
}
#navigator ul {
 float: left;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
#navigator ul ul {
 margin: 0px;
 padding: 0px;
 float: left;
}
#navigator ul ul ul{
 margin: 0px;
 padding: 0px;
 float: left;
}
#navigator ul li {
 float: left;
 font-size: 14px;
 color: #FFFFFF;
 display: inline;
 font-weight: bold;
 margin: 0px;
 padding: 0px;
}

#navigator ul ul li {
 padding: 0px;
 float: left;
 font-size: 14px;
 color: #FFFFFF;
 display: inline;
}
#navigator ul ul ul li {
 padding: 0px;
 float: left;
 font-size: 14px;
 color: #FFFFFF;
 display: inline;
}
#navigator li a {
 text-align: center;
 padding-right: 12px;
 padding-left: 12px;
 color: #FFFFFF;
 text-decoration: none;
 text-transform: capitalize;
 display: block;
 margin: 0px;
 height: 32px;
 line-height: 32px;
 float: left;
}
#navigator li a:hover {
 color: #FFFFFF;
 text-decoration: none;
 text-transform: capitalize;
 padding-right: 12px;
 padding-left: 12px;
 background: #292929 url(http://www.templatesimages.com/images/BoxTube/navs.gif) center center;
 text-align: center;
 display: block;
 margin: 0px;
 line-height: 32px;
 height: 32px;
 float: left;
}

Kemudian copy kode berikut dan letakkan tepat di bawah kode header berikut:

Ini dia kode yang harus dicopy:



    
        Home

        Perkuliahan

        Skripsi/Thesis

        Olimpiade Matematika

Obral-obrol

Daftar isi

Meletakkan kode navigator di bawah kode header memunculkan efek navigator berada dibawah header. Jika anda ingin navigator berada diatas header, tinggal copy saja kode navigatornya di atas kode header.

Selamat mencoba sobat.

Hilangkan Navbar

2009-04-15T08:37:00.000-07:00

Assalamu'alaikum wr.wb.

Sekedar numpang untuk menghilangkan navbar. Supaya blog nampak lebih indah saja kok. Ni dia kodenya.
Ini untuk menghilangkan seluruh navbar.


/* Hide navbar
--------------------------------------*/
#navbar {
        height:10px;
        visibility:hidden;
        display:none }

pasang tepat di atas


]]></b:skin>

atau sekedar membuat transparan, dengan kode:

<style type='text/css'>
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
</style>

pasang tepat di bawah kode:


<body>

Selesai, dan selamat mencoba.

Kode Navbar Bawah

2009-03-21T11:32:00.000-07:00

Salam sobat indonesia...
Kadang orang tak ingin blognya ada navbarnya...
Eh ternyata, ada pula yang justru ingin di tambahi navbar di bawah macam kolom karya ilmiah saya. Tak papa, saya coba berbagi, namun yang pasti, belajar saya ya dari Kang rohman. Hehehe
Key, kita mulai ya...

Untuk membuat navbar bawah ada kode yang harus ditambahkan pada HTML blog sobat.

Kode tersebut adalah


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}

#navbar-bawah a:hover{
color: #00FFFF;
}

#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 11px;
z-index:10000;
bottom:0;
}

Pasang kode tersebut tepat di atas kode :


]]></b:skin>

Nah... itu baru mendefinekan variabelnya. Untuk memasang dalam body HTML, yang dilakukan adalah menambahkan kode :


<br/><br/>
<div id='navbar-bawah'>
<p> 
Pakdhe's Blog | <a href='http://karyailmiah-ardhiprabowo.blogspot.com/'><b>Karya Ilmiah</b>
</a>| <a href='http://olimpiadematematika-ardhiprabowo.blogspot.com/'><b>Olimpiade</b>
</a>| <a href='http://tech-ardhiprabowo.blogspot.com/'><b>Blog</b>
</a>| <a href='http://perkuliahan-ardhiprabowo.blogspot.com/'><b>Kuliah</b>
</a></p>
<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> |
 Design by <a href='http://news-ardhiprabowo.blogspot.com/'>Pakdhe</a>  © 2009 
   <br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>

diantara kode


</div> <!-- end outer-wrapper -->

dan kode


</body>

Rasanya hanya itu yang ditambahkan, secara detil langkah tesebut adalah sebagai beikut:

1. Masuk ke accoun blogger sobat.
2. Masuk ke tata letak
3. Jangan lupa beri centang pada kolom expand template widgets
4. Cari kode ]]></b:skin>
5. Copy paste kode di bawah tepat di atas kode tersebut:


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}

#navbar-bawah a:hover{
color: #00FFFF;
}

#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 11px;
z-index:10000;
bottom:0;
}

6. Cari kode </div> 
7. Copy paste kode di bawah tepat diantara kode diatas dan kode </body>


<br/><br/>
<div id='navbar-bawah'>
<p> 
Pakdhe's Blog | <a href='http://karyailmiah-ardhiprabowo.blogspot.com/'><b>Karya Ilmiah</b>
</a>| <a href='http://olimpiadematematika-ardhiprabowo.blogspot.com/'><b>Olimpiade</b>
</a>| <a href='http://tech-ardhiprabowo.blogspot.com/'><b>Blog</b>
</a>| <a href='http://perkuliahan-ardhiprabowo.blogspot.com/'><b>Kuliah</b>
</a></p>
<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> |
 Design by <a href='http://news-ardhiprabowo.blogspot.com/'>Pakdhe</a>  © 2009 
   <br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>

8. Selesai.
9. Masih belum bisa???
10. Hehehehe, coba terus ya...

Kode Marquee Untuk Twitter Anda

2009-02-22T19:05:00.000-08:00

Sobat blogger, twitter, salah satu internet service macam facebook, saat ini telah berkembang pesat. Terhitung lebih dari 5juta orang telah bergabung dalam twitter di seluruh dunia. Hebatnya lagi dengan kontak twitter, katanya sih…, bisa meningkatkan traffic dan pagerank blog kita. Wikikikikikiki….
Memang twitter secara otomatis masuk dalam sidebar kita, namun, kalau halaman kita sudah penuh sesak macam punya saya, rasanya lebih cocok kalau dibuat dalam marque saja. Kebetulan twitter saya juga saya modif dengan tabel. Ok kita mulai saja…

Kode twitter secara sederhana adalah sebagai berikut:

<div id="twitter_div">
<h2 class="sidebar-title" style="display:none;">Judul Twitter Sobat</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/UserTwitterSobat" id="twitter-link" style="display:block;text-align:right;">Follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ UserTwitterSobat.json?callback=twitterCallback2&count=5"></script>

Untuk memasukkan twitter dalam maquee cukup tambahkan kode berikut:

<marquee direction="up" onmouseover="this.stop()" width="93%" onmouseout="this.start()" scrollamount="2" height="100px" align="center">
<center><br/><br/>

Kode twitter
</marquee></center>

Jika anda menginginkan link follow me on twitter-nya tidak masuk dalam marquee cukup kelurakan kode di bawah ini setelah kode </marquee>

<a href="http://twitter.com/UserTwitterSobat " id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>

Sehingga kodenya menjadi

<marquee direction="up" onmouseover="this.stop()" width="93%" onmouseout="this.start()" scrollamount="2" height="100px" align="center">
<center><br/><br/>

Kode twitter

</marquee></center>
<a href="http://twitter.com/UserTwitterSobat " id="twitter-link" style="display:block;text-align:right;">Follow me on Twitter</a>

Supaya menjadi lebih rapi, maka twitternya dikemas dalam border yang rapi. Kebetulan saya saya hanya menggunakan tabel dengan border 1 pixel. Untuk membuat dalam tabel, cukup ditambahkan kode berikut:

<center><span style="color: rgb(255, 0, 0); font-weight: bold;">::</span> <span style="color: rgb(0, 0, 0); font-weight: bold;"> Follow me on Twitter </span> <span style="color: rgb(255, 0, 0); font-weight: bold;">::</span></center>
<br/>
<table border="1" width="95%"><tbody><tr><td><center><marquee direction="up" onmouseover="this.stop()" width="80%" onmouseout="this.start()" scrollamount="2" height="100px" align="center"><center><br/><br/>

Kode twitter sobat

</center>
</marquee></center></td></tr></tbody></table>
<a href="http://twitter.com/ UserTwitterSobat " id="twitter-link" style="display:block;text-align:left;"> Follow me on Twitter </a>

Ok, selesai. Pada prinsipnya saya hanya membuat marquee dalam tabel. Itu saja, untuk modisikasinya, saya serahkan sobat.

Selamat Mencoba...

Perlunya memberi centang [v]

2009-02-16T05:58:00.000-08:00

Sobat blogger, sederhana sekali posting ini. Hanya masalah memberi centang atau tidak pada saat editing HTML dari sebuah template. Kapan kita perlu memberi centang dan kapan kita tak perlu memberi centang. [...]

Ketika meberi centang pada tulisan Expand Template Widgets, maka kode HTML yang tertayang menjadi sangat rumit, njelimet dan susah dipahami. Dengan memberi centang maka kita dapat melakukan edit sampai dengan navigasi CSS nya sekalipun. Bahkan kita dapat memodifikasi dari template kita.

Namun, jika hanya sekedar memindah-mindah sidebar, tak usahlah memakai centang segala. Kode yang muncul menjadi sederhana dan mudah dipahami. Ok sobat, sederhana sekali bukan.

Salam Blogger...

Mengubah header menjadi custom.

2009-02-14T13:46:00.001-08:00

Assalamu'alaikum wr.wb.

Sobat tak puas dengan header standar bawaan blogger? Sobat ingin header macam lain? Template macam minima memang enak mengubah header, tapi minim estetiknya. Template ini berawal dari tictac yang tiga kolom di kanan dan kiri. Saya juga sudah ada template yang sidebarnya ada di kanan semua seperti di sini.

Memang untuk template yang bukan minima, banyak proses yang harus digunakan. Untuk template basicnya yang tictac macam ini, prosesnya harus melewati editing gambar, bisa melalui Photoshop (ini yang saya lakukan), Corel, atau sekedar picture manager.

Ok deh kita mulai saja.

Langkah yang harus dilakukan:

Download template ini di sini, kemudian aplikasikan pada blog latihan sobat. Jika sobat belum punya blog latihan, sebaiknya buat satu buah blog yang khusus untuk berlatih.
Masuk ke google account sobat --> pengaturan --> edit HTML
Jangan lupa beri centang pada tulisan Expand Template Widgets yang ada disebelah kanan atas kode HTML
Cari kode header wrapper

#header-wrapper {
margin: 0 0 0 -10px;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0
url(http://www.geocities.com/ardhiprabowo_pasca/Header- Pakdhe5.jpg) no-repeat 0px 0px;
}
Tulisan yang berwarna merah adalah file headernya. Blok tulisan berwarna merah tersebut, kemudian copy dan paste dibrowser sobat. Maka browser akan menampilkan gambar tersebut seutuhnya.
Klik kanan dan klik save image as, lalu letakkan di komputer sobat.
Nah sekarang sobat sudah memiliki file dengan ukuran yang sama dengan file header saya. Silahkan berkreasi dengan file tersebut.

Penjelasan diatas baru langkah pertama. Langkah selanjutnya adalah mengupload file hasil kreasi sobat ke geocities. Jika belum memiliki panduannya bisa diikuti disini. Langkah selanjutnya gantilah huruf yang berwarna merah dengan file sobat. SELESAI.

Mudah bukan?

Semoga bisa memberikan penjelasan.

Wassalamu’alaikum wr.wb.

Bagaimana meng-Upload File ke Geocities?

2009-02-14T08:18:00.001-08:00

Assalamu'alaikum wr.wb.

Dulu saya sama sekali tak faham bahwa banyak sekali fasilitas diinternet yang bermanfaat. Geocities, photobucket dan banyak fasilitas lain sama sekali tak saya hiraukan. Ketika ke internet yang saya cari ya hanya jurnal dan jurnal. Karena memang itu dunia saya waktu itu. Sekarang, saya mencoba untuk berbagi informasi yang dulu tak pernah saya lakukan, ya melalaui blog ini…

Hehehe lama buanget prolognya kita coba perlahan ya:

Kalo sudah punya account yahoo, jadi lebih mudah. Tinggal masuk ke www.geocities.com, lalu masukkan password account yahoo sobat, jadi deh account geocitiesnya. Hehehe

>Kalo itu ya udah pada bisa ya, wakakakaka.

Kalo belum punya daftar dulu di Yahoo.
Cari tulisan Sign Up, klik link-nya
Didalamnya banyak isian yang harus diisikan, isi aja semua sampai puas.
Selesai… dan sobat sekarang punya account Yahoo yang otomatis punya email dan account ke geocities.

Sekarang bagaimana mengupload file ke geocities?

Masuk ke www. geocities.com
Cari tulisan sign in (Gak tau knapa tulisannya keciiiil bgt ada di sudut agak kiri atas)
Ketik username dan password yahoo sobat, dan sekarang sobat sudah masuk ke geocities kan?
Klik tulisan manage > easy upload > dan tinggal browse ayjyah file yang mau diupload.
Selesai.

Sekarang untuk memanggil file sobat ketik ajah http://www.geocities.com/account sobat/file sobat

Selesai. Semoga bisa membantu sobat.

Wassalamu'alaikum wr.wb.

Panduan Joomla

2009-01-27T17:01:00.000-08:00

Terhitung mulai Februari 2009 nanti, Pakdhe mencoba untuk menyusun panduan untuk membangun website dengan menggunakan joomla. Panduan ini disusun berdasarkan pengalaman Pakdhe dalam menyusun websitenya Jurusan MAtematika beberapa waktu lalu. Yah, pokoknya serba otodidak saja, so, afwan ya kalo ntar banyak salah. Saling berbagi saja ya...

Free template

2009-01-23T13:28:00.000-08:00

Get your free template here:

Tic tac 3 column - 1000px width

Link blogger ganti warna?

2009-01-23T11:04:00.000-08:00

Pengen link-nya ngilang garis bawahnya?
dan berganti-ganti warna kaya gini?
Gampang kok...

Select all pada text berikut:

a:link {<br />color: #666666; text-decoration:none;}a:visited {color: #000000; text-decoration:none; }a:hover { color: #940f04; text-decoration:underline; } a:active {color: #cc3333; text-decoration:none;}

Kemudian cari kode di template dan ganti kodenya.

Mouse cursor elegant

2009-01-03T12:47:00.000-08:00

Saya menemukan satu paket sursor mouse yang elegant. Saya bermaksud untuk membaginya kepada anda semua karena saya juga menemukan alamat pemberi ini dengan gratis. Namun sayang, ketika saya melacak lagi alat tersebut, saya tak berhasil menemukan cursor ini.

Ekstrak file dengan winRAR atau yang sejenis, kemudian tinggal klik saja file exe yang ada didalamnya. Insya Allah tak ada virusnya.

Ok lah, download ajah ya!

Blog latihan dan uji coba

2008-11-23T19:06:00.000-08:00

Terima kasih pada kang rohman dengan tutorial terbaik-nya. Saya bangun blog sebagai latihan saya. Blog saya bisa dilihat disini.

Tambahan tutorial Read More baru

2008-11-14T08:39:00.000-08:00

Assalamu’alaikum wr.wb.
Di blog kang rohman di kolom-tutorial.blogspot.com sudah ditutorkan cara membuat read-more cara yang baru. Namun, beberapa diantara tutorial tersebut ada yang berbeda jika diaplikasikan pada template standar yang disediakan.

Kebetulan saya menggunakan tic tac green dan beberapa informasi yang dituliskan belum sesuai dengan kondisi pada template tersebut. Dalam tulisan ini saya hanya akan membantu beberapa sobat yang belum berhasil dengan template standar khususnya tic tac.

Untuk langkah-langkah yang lain, saya tak akan bahas. Saya hanya membahas pada bagian bahasa HTML pada lay-out template.

Oya, karena kekurangan saya, maka beberapa revisi saya cantumkan dalam lampiran.

Free download - Pembuktian Phytagoras

2008-11-12T20:02:00.001-08:00

Pembuktian ini saya susun dengan bantuan SWiSHmax pada materi geometri ruang. Terima kasih pada ibu Kusni yang telah memberi saran pada tampilan ini.

Silahkan download disini.

Baru dari saya

2008-11-12T18:32:00.002-08:00

Assalamu'alaikum wr.wb.

Ini content baru dari saya, mungkin nanti akan menjadi baik dengan perkembangan keilmuan.
Halaman ini berisi karya saya dan beberapa informasi tentang blog dan fasilitasnya yang telah berhasil saya aplikasikan di blog saya.

Terima kasih.
Wassalamu'alaikum wr.wb.

Ardhi.