Logo

Kali ini saya akan menjelaskan cara membuat Tab Menu. Tab Menu sangat bermanfaat sekali karena kita bisa menghemat ruang yang ada di blog kita dan kita juga bisa meletakan beberapa gadget ataupun beberapa banner ataupun teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri dan kolom inipun hanya bisa dibuka bergantian.

Kali ini saya akan menjelaskan cara membuat Tab Menu. Tab Menu sangat bermanfaat sekali karena kita bisa menghemat ruang yang ada di blog kita dan kita juga bisa meletakan beberapa gadget ataupun beberapa banner ataupun teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri dan kolom inipun hanya bisa dibuka bergantian.

Sebenarnya memang agak rumit dalam pembuatan Tab Menu ini dikarenakan banyaknya script yang harus kita copy dan paste ke template maupun gadget, tapi bagi anda yang suka ngutak-ngatik script, saya pikir bukan hal baru bagi anda. Andapun bisa meedit script tersebut untuk menyesuaikan dengan halaman blog anda. Untuk itu silahkan ikuti langkah-langkah berikut ini :

Langkah Pertama :

1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
6. Persis sebelum kode tersebut, pastekan script di bawah ini

<script src='http://h1.ripway.com/pinginbelajar/campuran/menu_tab.js' type='text/javascript'/>

7. Cari lagi di dalam template anda kode ]]></b:skin>
8. Persis sebelum kode tersebut, pastekan script di bawah ini

div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }

9. Klik Simpan Template

Langkah Kedua :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini

<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
<a>Judul 5</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 1"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 2"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 3"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 4"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 5"

</div>
</div>


</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>

7. Klik Simpan

Kode script di atas yang di awali dengan tanda # menyatakan warna, seperti #000000 #FFFFFF #999999 #2E2EFE #E6E6E6 #0B516E #DF0101, silahkan anda ganti dengan warna pilihan anda, untuk mendapatkan variasi kode warna silahkan anda surfing di sini [ html-color-codes ]

Selamat mencoba, semoga bermanfaat

Kali ini saya akan coba membahas tentang Recent Comment dan Recent Post. Sebagaimana kita ketahui bahwa recent comment ini adalah sebuah data yang menampilkan komentar-komentar terakhir yang telah masuk ke blog kita, sedangkan recent post adalah data tentang artikel-artikel terakhir yang telah kita terbitkan. Kedua data ini sangat penting rasanya kita pasang, karena akan sangat membantu sekali.

Kali ini saya akan coba membahas tentang Recent Comment dan Recent Post. Sebagaimana kita ketahui bahwa recent comment ini adalah sebuah data yang menampilkan komentar-komentar terakhir yang telah masuk ke blog kita, sedangkan recent post adalah data tentang artikel-artikel terakhir yang telah kita terbitkan. Kedua data ini sangat penting rasanya kita pasang, karena akan sangat membantu sekali.

Data yang ditampilkan oleh recent comment sangat membantu kita sebagai author, karena kita bisa langsung bisa merespon dari komentar tersebut. Dan kita juga tidak akan direpotkan lagi harus membuka satu persatu artikel kita untuk memeriksa komentar yang masuk. Sedangkan Recent Post sangat membantu sekali bagi visitor yang masuk ke blog kita, karena mereka akan tahu apa saja artikel terbaru yang ada di blog tersebut, tetapi apabila anda sudah mempunyai daftar postingan di blog anda, rasanya recent post ini tidak usah dipasang lagi.

Bagi para sobat yang belum mempunyai dan tertarik untuk memasang recent comment dan recent post ini, saya akan coba bantu menjelaskannya. Dan pemasangannyapun sangat mudah sekali karena tidak memerlukan javascript ataupun script HTML, tapi hanya dengan klik dan klik saja. Untuk itu silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan menu Feed
6. Pada kolom URL Feed silahkan anda pastekan URL di bawah ini

URL untuk data recent comment

http://pinginbelajar.blogspot.com/feeds/comments/default


URL untuk data recent post

http://pinginbelajar.blogspot.com/feeds/posts/default

7. Silahkan anda ganti tulisan yang berwarna merah dengan alamat blog anda
8. Klik Simpan
9. Selesai

Selamat mencoba, semoga bermanfaat

Jika anda sudah bosan melihat penampilan cursor anda yang hanya berupa garis panah, dan ingin menggantinya menjadi lebih menarik, saya akan berikan triknya. Silahkan anda ganti sesuka hati gambar apapun yang akan anda inginkan.

Jika anda sudah bosan melihat penampilan cursor anda yang hanya berupa garis panah, dan ingin menggantinya menjadi lebih menarik, saya akan berikan triknya. Silahkan anda ganti sesuka hati gambar apapun yang akan anda inginkan.

Mungkin trik ini sudah banyak para sobat yang tahu, tapi karena saya hanyalah pemain baru dalam design website, wajar rasanya saya meluangkan waktu untuk bisa berbagi untuk para sobat sekalian yang mungkin juga baru di dunia website ini. Dan untuk senior-senior design website yang membaca postingan ini, mohon beri masukkan kepada kami yang baru belajar dan pingin belajar.

Oke, kita kembali lagi ke cursor yang kita ganti, silahkan ikuti langkah-langkah berikut ini :

1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan anda cari di dalam template anda kode body {
6. Persis setelah kode tersebut, pastekan script di bawah ini

cursor: url("http://bohongan_doang.gif"), default;

7. Silahkan anda ganti tulisan yang berwarna merah dengan alamat URL gambar pilihan anda
8. Untuk mendapatkan alamat URL tersebut, silahkan surfing di sini [ cursors.funutilities ]
9. Cara mendapatkan URLnya, silahkan anda klik kanan pada cursor yang anda inginkan, kemudian klik Properties, kemudian copy alamat URL yang ditampilkan pada baris Location
10. Klik Pratinjau untuk melihat hasil kerja anda
11. Klik Simpan Template jika sudah sesuai dengan keinginan anda
12. Selesai

Selamat mencoba, semoga bermanfaat

Pasti pada bingung nih, apa maksudnya dan kenapa judulnya begitu, sebenarnya aku sendiri juga bingung mau ngasih judul apa untuk trik yang berikut ini. Setelah aku pikir-pikir eee.. nggak nemu-nemu juga judul yang cocok, ya udah deh aku asal aja kasih judul gitu. Trus apa maksudnya dari judul tersebut dan trik apa yang akan dibahas?

Gini, untunya itu gini trik nyoba ngebahas gimana cara membuat "ANU" itu selalu berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "ANU" itu apa? "ANU" itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Kalo untuk di blog ini aku pasang gambar sonic yg sedang lari-lari (pojok kiri bawah). Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik berikut ini:

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.


#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>


<div id="trik_pojok">
<a href="http://trik-tips.blogspot.com">
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>


"http://trik-tips.blogspot.com" adalah link. ganti dengan link kamu.
"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.

Coba lihat widget labels aku...? Keren kan? Kamu ingin tau cara membuat nya? Klik Baca Selengkapnya.. di bawah....

Bagi kamu yang ingin tutorial bahasa indonesia nya,kamu bisa ikuti cara-cara di bawah ini:

1.Masuk ke LAYOUT-->EDIT HTML (beri tanda centang kotak kecil expand text widget)

2.Kamu cari kode di bawah ini:

<b:section class='sidebar' id='sidebar' preferred='yes'>

(supaya gampang,kamu copy kode diatas,kamu klik CTRL+F,akan muncul kotak,paste kode di atas,langsung keluar kan?

3.Kamu copy paste kode di bawah ini setelah kode di atas:


<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



4.Save,dan lihat hasilnya.

-Jika kamu ingin merubah ukuran tinggi dan lebar nya,kamu tinggal rubah kode lebar yang '240' dan tinggi yang '300' sesuai dengan keinginan kamu.

-Jika kamu ingin merubah warna nya,kamu rubah kode warna nya yang di tulisan "#ffffff"

Bagaimana?sukses ga?

Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan.

Terkadang banyak para blogger yang ingin memberikan tips atau trik untuk netter ato blogger lain agar bias saling berbagi pengetahuan dan keahlian namun kesulitan yang sering terjadi adalah “bagaimana agar kode HTML bisa tampil di postingan?”

Pasti Anda bingung pada waktu posting kode HTML di blog Anda, yang muncul bukan kode yang diinginkan melainkan hasil dari kode HTML-nya, nah untuk yang ingin menulis tentang tutorial blog pasti kode HTML banyak diposting.

Untuk itu para penulis yang belum tahu cara posting kode HTML saya kasih cara yang termudah (walaupun caranya macem-macem tapi ini saya ambilkan yang mudah saja) bahkan paling mudah:

Caranya, Encode saja kode HTML yang ingin Anda posting di situs di bawah ini:

* http://centricle.com/
* http://www.opinionatedgeek.com/


Caranya cuman tinggal taruh itu kode HTML yang ingin di posting lalu klik tombol "Encode", dan hasil dari Encode itu yang Anda posting di blog Anda.
Cara postingnya….ya pakek copy paste lah… masa’ copy SUSU donk !

Guampang tho? Coba aja kalo nggak percaya…

Selamat mencoba dan semoga bisa menambah kreatifitas Anda

Menurut saya Windows 7 yang baru di luncurkan baru - baru ini, sangat memuaskan sekali. Kehebatannya bisa mengalahkan Windows Vista. Kecepatannya juga tidak terlalu lambat. Klik selengkapnya untuk melihat video kecanggihan Windows 7


Menurut saya Windows 7 yang baru di luncurkan baru - baru ini, sangat memuaskan sekali. Kehebatannya bisa mengalahkan Windows Vista. Kecepatannya juga tidak terlalu lambat. Klik selengkapnya untuk melihat video kecanggihan Windows 7

Pada tutorial kali ini saya akan membahasa bagaimana cara memasang tools SAVE PAGE AS PDF pada blog anda.Tools ini menurut saya sangat berguna sekali,apalagi untuk para pembaca setia blog anda.

Jika tulisan anda benar-benar bagus dan bermanfaat,maka tulisan anda bisa diabadikan dengan mudah dengan cara di konversi ke dalam bentuk PDF hanya dengan 1 kali klik!

Anda tertarik untuk mencoba nya?

Ok langsung aja ya...begini cara nya:

1. Kamu masuk dulu ke situs ini www.web2.pdfonline.com

2. Buat account baru kamu disana,setelah itu kamu log in

3. Setelah login kamu akan langsung ditunjukkan form seperti ini:












4. Klik button Generate to javascript

5. Lalu kamu akan mendapatkan kode javascript seperti ini:













6. Copy kode javascript tersebut

7. Sekarang kamu tinggal taruh di tempat yang kamu inginkan,misalkan kamu ingin taruh tepat di bawah postingan seperti punya saya,lihat gambar ini:












8.Masuk ke dashboard kamu,pilih:

TATA LETAK --> EDIT HTML --> beri tanda centang expand text widget

9.Letakkan kode javascript tadi tepat di bawah kode html seperti di bawah ini:

Untuk lebih jelasnya lihat gambar.Klik gambar untuk memperbesar.

10. Save

11. Selesai...

Jika anda adalah seorang pelaku bisnis online,terutama seorang product creation,yaitu orang yang membuat sebuah produk bisnis,biasa nya anda perlu membuat sebuah tutorial yang berbentuk video,dimana anda bisa mempraktekan tutorial anda secara video.

Nah yang jadi pertanyaan,bagaimana cara merekam tutorial anda tersebut?



Jawaban nya anda bisa menggunakan software screen recorder.Ada yang berbayar ada juga yang gratis.Sekarang kita bahas yang gratis saja dulu ya.Nama software tersebut adalah nbxsoft free screen recorder.

Fitur yang di berikan pun cukup lengkap,diantaranya :

1.Anda bisa mengatur ukuran screen sesuai dengan keinginan anda,bisa juga full screen.

2.Anda bisa merekam suara anda

3.File di save dalam format .AVI,sehingga bisa dilihat menggunakan winamp

4.Anda bisa menyembunyikan cursor anda

5.Shortcut key yang simple

6.dan beberapa fasilitas menarik lain nya...

Anda bisa mendownload software free screen recorder tersebut disini.Atau bisa mengunjungi situs nya langsung di www.nbxsoft.com