Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label

Daftar Isi atau yang sering kita sebut Sitemap pada umumnya kita gunakan sebagai petunjuk atau informasi sudah berapa banyak artikel yang selama ini sudah kita buat di dalam blog kita. Kadang kita merasa malas apabila kita harus membuat dan mengisi daftar isi tersebut secara manual setiap kali kita selesai meng update artikel. Maka dari itu kali ini saya akan berbagi informasi tentang bagaimana cara membuat daftar isi atau sitemap berdasarkan label secara otomatis mengisi sendiri setiap kita selesai membuat artikel. Berikut tutorialnya.

Pertama masuk dahulu ke dalam akun Blogger anda. Buka menu Posting atau Posts kemudian kita klik Entri Baru atau New Post. Setelah masuk ke dalam halaman editor posting pilih dalam mode HTML bukan Compose. Lalu copy paste kan kode di bawah ini ke dalam halaman editor posting :

<script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://www.kiosbisnis.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti text yang berwarna merah diatas dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label dari blog KiosBisnis.com.

Namun misal anda menginginkan menggunakan fungsi scroll karena daftar isi dirasa sudah terlalu banyak dan terlalu banyak memakan tempat (memanjang ke bawah) maka bisa menambahkan kode berwarna biru di bawah ini.

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://www.kiosbisnis.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Jangan lupa untuk mengganti teks berwarna merah dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label menggunakan fungsi scroll dari blog KiosBisnis.com.

Selamat mencoba dan Semoga Bermanfaat. 

 

Sumber : http://www.kiosbisnis.com/2012/06/cara-membuat-daftar-isi-blog-otomatis.html

Daftar Isi

Topologi Jaringan Kabel

Pengertian
Topologi jaringan adalah sebuah cara bagaimana kita mengoneksikan sebuah jaringan setandart yang telah ditetapkan.

Topologi jaringan kabel yang paling sering dipakai ada 3 antara lain:

     1. Bus : yaitu topologi jaringan yang hanya terdiri dari satu saluran kabel yang berakhir di node terakhir.

0.1 topologi BUS

Kelebihan :
Instalasi jaringan Bus sangat sederhana, murah dan maksimal terdiri atas 5-7 komputer.
Kelemahan :
Kesulitan yang sering dihadapi adalah kemungkinan terjadinya tabrakan data karena mekanisme jaringan relatif sederhana dan jika salah satu node putus maka akan mengganggu kinerja dan trafik seluruh jaringan.

      2.  Token Ring : yaitu topologi jaringan yang hanya terdiri dari satu saluran kabel namun untaian dikembalikan ke node pertama jadi masing-masing node memerlukan dua connector.

0.2 Topologi Token Ring

Kelemahan :
Pada topologi cincin, komunikasi data dapat terganggu jika satu titik mengalami gangguan.
Kelebihan :
Gangguan yang diakibatkan tidak sefatal topologi BUS.

     3.  Star : yaitu topologi yang merupakan konferhensi node tengah yang disalurkan ke node pengguna.

0.3 Topologi Star

Kelebihan :

• Kerusakan pada satu saluran hanya akan memengaruhi jaringan pada saluran tersebut dan station yang terpaut.
• Tingkat keamanan termasuk tinggi.
• Tahan terhadap lalu lintas jaringan yang sibuk.
• Penambahan dan pengurangan station dapat dilakukan dengan mudah.
• akses Kontrol terpusat.
• Kemudahan deteksi dan isolasi kesalahan/kerusakan pengelolaan jaringan.
• Paling fleksibel.

Kelemahan :

• Jika node tengah mengalami kerusakan, maka seluruh rangkaian akan berhenti.
• Boros dalam pemakaian kabel.
• HUB jadi elemen kritis karena kontrol terpusat.
• terlalu penting hub sehinga ketika terdapat masalah dengan hub maka jaringan tersebut akan down
• jaringan tergantung pada terminal pusat
• jika menggunakan switch dan lalu lintas data padat dapat menyebabkan jaringan lambat.
• biaya jaringan lebih mahal dari pada bus atau ring

Baca juga cara crimping kabel UTP

Cara membuat Related Post

Cara membuat Related Post
Related Post atau yang biasa disebut posting terkait atau artikel terkait sangat besar manfaatnya untuk blog kita,terlebih utama sangat besar manfaatnya untuk para pengunjung karena Artikel yang besangkutan dengan apa yang pengunjung baca ada pada menu Related post ini, dan biasanya Artikel terkait ini di letakan di bagian bawah artikel guna memberitahu pengunjung bahwa artikel yang sama yg sedang di baca ada di bawahnya.
Related Post ini seperti menu navigasi pada sidebar blog, hanya saja menu related post ini terisi secara otomatis berdasarkan Label pada masing-masing artikel.
Misalkan article yang sedang di baca pengunjung tentang ''Cara sukses berbisnis online dengan Blog'' yang di beri Label ''BISNIS ONLINE'', maka artikel terkait secara otomatis akan menampilkan Artikel-artikel yang lainnya tentang BISNIS ONLINE.
Contoh Related Post atau Posting Terkait bisa di lihat pada Blogtegal ini di bagian bawah artikel yang sedang kamu baca ini. BAGAIMANA CARA MEMBUAT RELATED POST INI? Mari kita lakukan penelitian membuat artikel terkait.

• Login ke dashboard blogspot kamu.
  
• pilih Rancangan »» Edit HTML
  
• download template lengkap dulu untuk jaga-jaga kalau ada kesalahan.
  
• Beri tanda centang pada Expand Widget Template.
  
• tempatkan script berikut di bawah kode <data:post.body/>
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='similiar'>
  <div class='widget-content'>
  <h3>Related Posts by Categories</h3> <div id='data2007'/>
  
  <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;data2007&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </b:if>

• yang terakhir klik SIMPAN

CATATAN!!:

• Jika kamu sudah memasang 'Readmore Otomatis' maka kamu harus menempatkan script related post di bawah kode
  <data:post.body/>
  </b:if>
  
• Jika kamu memasang iklan di bawah posting, maka tempatkan script related post di bawah kode iklan tersebut.

Sumber : http://www.blogtegal.com/2011/02/cara-membuat-related-post.html

Jaringan Kabel (Wired)

Pengertian
Jaringan kabel (Wired) adalah sebuak jaringan komputer yang meakai kabel sebagai media menyalurkan data atau informasi.

Kabel yang digunakan untuk jaringan komputer antara lain:
     1.  Kabel Coaxial : kabel yang biasa dipakai sebagai antena TV.

0.1 kabel coaxial

     2.  Kabel UTP (unselded twisted pair) dan STP (selded twisted pair) : kabel yang paling banyak dipakai untuk menghubungkan jaringan karena mudah dipakai, berkecepatan tinggi dan harganya terjangkau. dan connectornya bernama RG 45 untuk komputer dan RG12 untuk telephone rumahan.

0.2 kabel UTP

 
     3.  Kabel Fiber Optic : dianggap kabel yang dapat menghantarkan data dengan kecepatan cahaya, namun harganya sangat-sangat mahal.

0.3 kabel fiber optic

Keunggulan jaringan kabel dibandingkan nirkabel (wireles) adalah karena jaringan kabel lebih setabil kecepatan transfer datanya.

selanjutnya baca juga topologi jaringan kabe

Pengenalan Jaringan Komputer

Pengertian
Jaringan komputer adalah suatu cara dimana kita mengkoneksikan dua perangkat node (bisa komputer, laptop, hp, dls) atau lebih untuk bisa saling bertukar data dan atau informasi.







Jaringan komputer dibagi menjadi 3 bagian:

1. jaringan lokal : yaitu jaringan komputer yang hanya terdiri dari beberapa node saja. contoh : lab komputer, warnet, dll.
2. jaringan intranet /interlokal : yaitu jaringan komputer yang terdiri dari banyak node yang terintegrasi. seperti jaringan kampus, jaringan kantor, dll.
3. jaringan internet /public : yaitu jaringan komputer yang mengoneksikan data dari seluruh dunia. contoh : website, filehosting, dll. yang didukung dengan fasilitas domain.

Sedangnkan jenis jaringan komputer dikelompukkan menjadi 2 kategori:

1. Jaringan Kabel (wired)
2. Jaringan Nirkabel (Wireles)

Untuk selanjutnya akan dibahas ditutorial jaringan kabel.

Membuat Postingan Selalu Berada Paling Atas

Tips Membuat Postingan Selalu Berada Paling Atas : Pernahkah kita berangan-berangan atau berpikiran ingin menjadikan postingan tertentu selalu berada di atas? Jika, ya, jangan kuatir, karena kita dapat “mengakalinya” dengan trik yang akan kita bahas berikut ini. Dengan trik tersebut, kita dapat menempatkan postingan tertentu (yang kita anggap sangat penting) akan selalu berada di atas dari postingan-postingan yang lain yang kita terbitkan sesudahnya. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Langkah-langkahnya, seperti di bawah ini.

Pertama, login ke account blogger >> Dasbor >> Entri Baru

Kedua, buatlah postingan yang ingin kita tempatkan di posisi paling atas.

Ketiga, kemudian terbitkan postingan tersebut seperti biasa.

Keempat, kemudian lakukan edit entri atas postingan yang baru saja kita terbitkan tersebut.

Kelima, setelah terbuka post editor kemudian menujulah ke bagian kiri bawah, klik “opsi entri” (post option) hingga akan muncul beberapa opsi, yaitu “komentar pembaca”, “Link balik”, dan “tanggal dan jam entri”, seperti screenshot di bawah ini.

Keenam, kemudian pada opsi “tanggal dan jam entri”, gantilah tahunnya menjadi tahun yang akan datang, misalkan saja menjadi tahun 2020.

Ketujuh, kemudian terbitkan lagi postingan tersebut.

Kedelapan, selesai

Sekarang, cobalah untuk membuat dua atau beberapa postingan lagi dan pastikan postingan yang telah kita ubah tahunnya menjadi 2020 tersebut selalu berada di posisi paling atas.

Catatan

Misalkan sudah sampai tahun yang kita isikan (yaitu tahun 2020), maka kita harus mengubah nya lagi menjadi tahun yang akan datang, misalnya 2030 atau 2040.

Selamat Mencoba!!

Sumber : http://tips-trik-blog.blogspot.com/2009/06/membuat-postingan-selalu-berada-paling.html

Komik Bromo Survival part 1

Berdasarkan kisah nyata saya dan teman-teman...
dikisahkan 7 orang penjelajah dari kediri yang kemping di pegunungan bromo, mereka berangkat ke probolinggo dengan menaiki kereta api, kemudian dari kota probolinggo ke gunung bromo menaikki angkot pedesaan...

baca juga komik kolorman vs igorzilla

Sejarah Singkat JAVA

Pada 1991, sekelompok insinyur Sun dipimpin oleh Patrick Naughton dan James Gosling ingin merancang bahasa komputer untuk perangkat konsumer seperti cable TV Box. Karena perangkat tersebut tidak memiliki banyak memori, bahasa harus berukuran kecil dan mengandung kode yang liat. Juga karena manufaktur – manufaktur berbeda memilih processor yang berbeda pula, maka bahasa harus bebas dari manufaktur manapun. Proyek diberi nama kode ”Green”.
Kebutuhan untuk fleksibilitas, kecil, liat dan kode yang netral terhadap platform mengantar tim mempelajari implementasi Pascal yang pernah dicoba. Niklaus Wirth, pencipta bahasa Pascal telah merancang bahasa portabel yang menghasilkan intermediate code untuk mesin hipotesis. Mesin ini sering disebut dengan mesin maya (virtual machine). Kode ini kemudian dapat digunakan di sembarang mesin yang memiliki interpreter. Proyek Green menggunakan mesin maya untuk mengatasi isu utama tentang netral terhadap arsitektur mesin.

Karena orang – orang di proyek Green berbasis C++ dan bukan Pascal maka kebanyakan sintaks diambil dari C++, serta mengadopsi orientasi objek dan bukan prosedural. Mulanya bahasa yang diciptakan diberi nama ”Oak” oleh James Gosling yang mendapat inspirasi dari sebuah pohon yang berada pada seberang kantornya, namun dikarenakan nama Oak sendiri merupakan nama bahasa pemrograman yang telah ada sebelumnya, kemudian SUN menggantinya dengan JAVA. Nama JAVA sendiri terinspirasi pada saat mereka sedang menikmati secangkir kopi di sebuah kedai kopi yang kemudian dengan tidak sengaja salah satu dari mereka menyebutkan kata JAVA yang mengandung arti asal bijih kopi. Akhirnya mereka sepakat untuk memberikan nama bahasa pemrograman tersebut dengan nama Java.

Pengenalan Pemrograman 1 2
Produk pertama proyek Green adalah Star 7 (*7), sebuah kendali jarak jauh yang sangat cerdas. Dikarenakan pasar masih belum tertarik dengan produk konsumer cerdas maka proyek Green harus menemukan pasar lain dari teknologi yang diciptakan. Pada saat yang sama, implementasi WWW dan Internet sedang mengalami perkembangan pesat. Di lain pihak, anggota dari proyek Green juga menyadari bahwa Java dapat digunakan pada pemrograman internet, sehingga penerapan selanjutnya mengarah menjadi teknologi yang berperan di web.

Java telah mengakomodasi hampir seluruh fitur penting bahasa – bahasa pemrograman yang ada semenjak perkembangan komputasi modern manusia :

1. Dari SIMULA, bahasa pada tahun 65-an, bahasa yang paling mempengaruhi Java sekaligus C++. Dari bahasa ini diadopsi bentukan – bentukan dasar dari pemrograman berorientasi objek.
2. Dari LISP – bahasa tahun 55-an. Diadopsi fasilitas garbage collection, serta kemampuan untuk meniru generic list processing, meski fasilitas ini jarang yang memanfaatkannya.
3. Dari Algol – bahasa pada tahun 60-an, diambil struktur kendali yang dimilikinya.
4. Dari C++, diadopsi sintaks, sebagian semantiks dan exception handling
5. Dari bahasa Ada, diambil strongly type, dan exception handling.
6. Dari Objective C, diambil fasilitas interface.
7. Dari bahasa SmallTalk, diambil pendekatan single-root class hiérarchie, dimana objek adalah satu kesatuan hirarki pewarisan
8. Dari bahasa Eiffel, fasilitas assertion yang mulai diterapkan di sebagian JDK 1.4

HTML Dasar

sebelum anda belajar pemrograman web PHP, anda diharuskan untuk mempelajari html terlebih dahulu.
ada beberapa istilah yang harus anda ketahui sebelum anda belaja HTML :

1. http
2. url
3. domain
4. hosting
5. browser
6. server
7. internet

Pengertian HTML
HTML (Hyper Text Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halan situs.

untuk belajar HTML dasar sebaiknya anda ketikkan di Notepad agar anda lebih bisa menguasai.

Bentuk umum :
<html>
<head>
   <title> judul situs di sini </title>
</head>
<body>
halaman situs disini. letakkan pula perintah-perintah HTML disini.
halaman situs disini. letakkan pula perintah-perintah HTML disini.
halaman situs disini. letakkan pula perintah-perintah HTML disini.
halaman situs disini. letakkan pula perintah-perintah HTML disini.
</body>
</html>

Contoh di notepad

Simpan script diatas dengan nama : latihan.html, pilih save as type : "All Files (yang berwarna biru)"

klik dua kali atau klik kanan >> open with >> mozilla firefox dan hasilnya :

Cara Membuat Smooth Back To Top dengan jQuery

Oleh N Muhammad Hafiz jam Jumat, Mei 04, 2012.

Scroll to top, Istilah lain dalam blogger yang artinya sama dengan Back to Top yaitu, Sebuah Link yang menuju ke bagian atas halaman atau blog atau website. dan di kesempatan kali ini saya akan memberikan sebuah tutorial tentang membuat Smooth Back to top atau Scroll to top dengan menggunakan jQuery. seperti yang kita ketahui, jika kita membuat back to top dengan kode HTML biasa, seperti contoh, Klik disini jika ingin melihat hasil back top top biasa. dan bedakan dengan back to top yang akan kita buat nanti.

Langkahnya sangat mudah,
1. Masuk ke blogger, Rancangan, Edit HTML Template.
2. Cari kode </head>
3. Paste Kode berikut tepat diatasnya

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

<script src='//myhavies.jw.lt/js/ke_atas.js' type='text/javascript'/>

4. Cek, apakah kode yang berwarna merah ada dalam template sobat, jika ada tidak perlu ditambahkan lagi kode berwarna merah tersebut.
5. Simpan Template, dan lihat hasilnya
Bedakan hasilnya?....

Hasil : Lihat di pojok kanan bawah blog ini untuk hasilnya...
 Back to top biasa

Cara Membuat Smooth Back To Top dengan jQuery
Oleh haviedzs pada Mei 2012.
Cara Mudah Membuat Smooth Back to Top dengan jQuery di Blogger
Rating: 4

 

Sumber : http://myhavies.blogspot.com/2012/05/smooth-back-to-top-jquery.html

komik colorman vs igorzilla

Komik ini merupakan komik yang lineartnya saya buat secara manual dan kemudian setelah discan saya warnain pake potoshop.
komik ini menceritakan dua cerita:

1. nunggu lilin : dimana karakter utamanya menunggu lilin yang kemudian igor pun datang karena ketahuan teman-teman yang lainya igorpun mengamuk dan berubah menjadi raksasa....
2. colorman vs igorzilla : menceritakan igor yang telah berubah menjadi raksasa ditantang duel oleh colorman.

 ini merupakan komik delapan panel yang dibaca kebawah....
dan inilah hasilnya.

Gambarku dengan aplikasi mangastudio

ini adalah gambar yang line art dan coloringnya pake aplikasi mangastudio, walaupun sebenarnya mangastudio itu paling cocok kalo dipake buat komik, lengkap banget pokoe aplikasinya...

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

 

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.

Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 

Untuk demonya silakan sobat blogger klik link berikut ini DEMO . Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

Klik show untuk melihat 

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Selanjutnya sobat blogger cari kode berikut:

• <header>  : untuk menempatkan menu di atas nama blog
• </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat 

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.

Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

Selamat mencoba sobat... 

 sumber : http://zuazz.blogspot.com/2012/04/cara-membuat-menu-drop-down-di-atas.html

Cara Membuat Drop Cap pada Postingan Blog

Ada beberapa cara untuk membuat tampilan sebuah postingan terlihat cantik, selain dengan menggunakan optimasi gambar, widget table/ border atau dengan related post bergambar. Salah satu tips yang akan TBP share kali ini adalah CaraMembuat Teks Drop Caps dalam Postingan Blog.

DropCaps adalah sebuah format teks dimana salah satu huruf dibuat lebih besar dan menonjol daripada teks lain dalam sebuah kalimat/ paragraph postingan. Berikut ini adalah salah satu tampilan postingan dengan teks drop caps.


Donkeymails adalah sebuah situs berbasis GPT yang telah berdiri sejak 3 Februari 2005. Selama ini situs ini sudah sangat terkenal sebagai situs yang membayar ( bukan scam ) dan memberikan penghasilan tambahan yang lumayan.



Bagaimana cara membuat format teks Drop Caps dalam sebuah postingan blog. Secara sederhana kodenya untuk teks di atas adalah sebagai berikut :

<span style="float: left; color: black; font-size: 50px; line-height: 30px; padding-top: 5px; padding-right: 5px; font-family: century gothic;">D</span>onkeymails adalah sebuah situs berbasis GPT yang telah berdiri sejak 3 Februari 2005. Selama ini situs ini sudah sangat terkenal sebagai situs yang membayar ( bukan scam ) dan memberikan penghasilan tambahan yang lumayan.

*yang berwarna biru monggo sobat sesuaikan dengan selera sobat :D

Wah cukup sederhana ya sobat?? Bisa langsung praktek dong?? Monggo, sekali- kali kita terapkan caramembuat drop caps dalam postingan lumayan juga buat membuat postingan kita menjadi lebih yahuuddd sobat :D.

Happy Blogging!!

tambahan: yang merah-merah itu ditulisnya di mode html bukan compose.

Sumber : http://blogpemula-tutorial.blogspot.com/2012/07/membuat-drop-cap-postingan-blog.html

Cara Membuat Slideshow Album Picasa di Blog

M

 

Gb.1 Tampilan Slideshow di Blog

empercantik tampilan Blog adalah wajib yang harus dilakukan oleh blogger supaya terkesan menarik oleh pengunjung. Salah satunya adalah membuat Slideshow atau gambar berjalan. Jika anda sudah mempunyai album gambar/foto di Picasa maka bisa langsung dipraktekin di blog anda. Tapi jika belum maka anda buat dulu album di Picasa, biasanya kalau anda sudah punya akun Google maka bisa langsung terintegrasi ke Gmail, Blogger (blogspot), dan juga Picasa. Saya akan uraikan caranya yang mudah dan simpel.




1.  logg in ke http://picasa.google.com/  dengan meng-klick Picasa Web Albums

 

Gb.2 Loggin Picasa

2.  Masukkan akun google dan passwor,tekan enter [sign in]3.  Upload/unggah foto atau klik langsung album di Picasa kalau sudah tersedia
4.  Setelah membuka album, klik Tautkan dengan album ini (link to this album). Liiat gambar,

 

Gb3. Tautan link album

5.  Kemudian klik Sematkan Rangkai (Embed Slideshow), Sebuah konfigurasi slideshow  ditampilkan dan preview akan muncul.

 

Gb.4 Penyematan link

6.  Ubah ukuran slideshow agar sesuai dengan lebar posting blog Anda. Ada juga pilihan untukAutoplay dan  Tampilkan keterangan.

 

Gb.5 Konfigurasi Slideshow

7.  Langkah selanjutnya adalah penyematan Slideshow di Blog, caranya:
     Buka Dasbor > Rancangan/tata letak/layout> tambah gadget> pilih mode HTML/JavaScript

 

 

8.  Copy seluruh kode  di jendela kuning (lihat gambar 5) dan Paste-kan ke dalam konten konfigurasi HTML/Javascrift dan simpan. Judul boleh diisi apa saja, misal: Slideshow album.
9.  Sekarang bisa dilihat hasilnya, Slideshow berjalan otomatis di page blog.
10. Sekian, semoga bermanfaat :)

Sumber : http://arif-muhajirin.blogspot.com/2011/03/cara-membuat-slideshow-album-picasa-di.html

Membuat favicon pada Blog spot

Membuat favicon untuk Blog 

Pertama kita harus mempunyai icon boleh gambar ico, png, atau gif untuk icon bergerak. Kemudian upload gambar kalian ke imagekiss.com karena disana gratis tanpa registrasi loh....

Cara upload gambar ke Imagekiss.com

Ketik imagekiss.com di browser maka akan tampil ssb:

Tekan tombol select picture, maka kalian akan disuruh mencari gambar untuk favicon di komputer. Bila tidak punya googleng aja banyak gmbar gratis disana....hahaha

Setelah memiih gambar tekan tombol upload

 

Setelah proses upload gambar selesai akan tampil gambar kalian, disini contohnya gambar syaringgan... kalo gak tau yang bunder merah ada bintik-bintik hitam tiga itu loh...

Setelah itu perhatika dibawah, itu adalah link gambar kalian...

Selesai sudah uploadnya sekarang tinggal memasukkan favicon kedalam blog.

Cara memasukkan favicon kedalam blog adalah sebagai berikut

1. Masuklah ke dashbord blog anda
2. Pilih template
3. Klik edit HTML
4. Masukkan kode berikut : <link href=’gambarmu’ rel='icon' type='image/gif'/> dibawah kode <b:include data='blog' name='all-head-content'/>
5. Jangan lupa ganti gambarmu dengan url dari DIRECT LINK gambar yang kamu upload tadi.

Cara Membuat Efek Daun Berjatuhan Di Blog

Cara Membuat Efek Daun Berjatuhan Di Blog – Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1.       Seperti biasa login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Cari kode </head>  pada template dengan menggunakan Ctrl+F.

4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5.       Save / simpan template anda dan lihat hasilnya muantaaap bro !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he…

Sumber : http://www.rayhanzhampiet.com/2011/08/cara-membuat-efek-daun-berjatuhan-di.html

Cara Memasang /Membuat Efek Hujan Salju di Blog Anda

Cara Membuat Efek Hujan Salju di Blog Anda  - Efek hujan salju yang saya posting ini sangat bagus ditampilkan jika blog sobat mempunyai background/latar belakang berwarna gelap atau hitam. Karena kalo efek hujan salju ini dipasang di blog yang background pada bagian posting warna terang atau putih seperti blog saya ini, maka pemasangan efek hujan saljunya jadi sia-sia karena tidak akan terlihat. Apalagi kalo hujan saljunya kecil-kecil kayak hujan gerimis gitu wah tambah ngga keliatan jadinya. Kalau efek hujan daun  berjatuhan yang saya posting sebelum ini karena daunnya berwarna hijau malah lebih terlihat jika backgroundnya putih. Langsung aja nih sobat ikuti langkah pembuatannya disini ya.

Cara membuat/memasang efek hujan salju di blog :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript).

3.    Letakkan script efek hujan salju dibawah ini pada gadget.

<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

4.    Simpan dan lihat hasilnya.

Nah hujan saljunya sudah terlihat turun kan he he.., kapan ya kita bisa merasakan musim dingin beneran kayak di Amrik sono ? OK sobat sekian dulu aja tips/trik cara membuat/pasang efek hujan salju pada blog ini. Semoga bermanfaat dan salam blogger.

 

Sumber : www.rayhanzhampiet.com/2011/08/cara-membuatpasang-efek-hujan-salju-di.html

Membuat share artikel melayang (floating button)

Cara Membuat Floating Share Button  - Membuat share artikel melayang (floating button) ini merupakan kelanjutan dari posting saya sebelumnya Cara Memasang Button Share Artikel di Blog. Bedanya kalau tombol share melayang ini hanya untuk berbagi artikel ke 4 layanan social bookmark saja yaitu share artikel ke Facebook, Twitter, Google Buzz dan Google Plus One ( +1 ). Yang penting bisa berbagi artikel postingan lah.

Baik sobat langsung saja nih cara memasang share button melayang di blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste kedalam gadget baru tadi.

 

<style>

#pageshare {display:scroll;position:fixed;top:165px;left:30px; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id="pageshare" title="Get this code from rayhanzhampiet.blogspot.com">

<div class="sbutton" id="fb">

<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script></div>

<div class="sbutton" id="rt">

<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">

</script></div>

<div class="sbutton" id="gb">

<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">

<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">

</script>

</a></div>

<div class="sbutton" id="gplusone">

<script src="http://apis.google.com/js/plusone.js" type="text/javascript">

</script>

<g:plusone size="tall"></g:plusone></div>

</div>

Cukup singkat bukan ternyata cara pasang share artikel melayang di blogspot ini ? Selamat mencoba cara membuat share artikel blog ini dan semoga sobat puas dengan hasilnya.

Sumber : http://www.rayhanzhampiet.com/2011/09/cara-membuat-floating-share-button.html

Membaca sambil tidur tidak merusak mata

suatu hari disekolah, fahmi tidur seperti biasa waktu pelajaran biologi...
waktu itu bu Tasya sedang menerangkan hal-hal yang dapat merusak mata

Bu Tasya : "hal hal yang dapat merusak mata itu ada banyak anak-anak diantaranya terlalu dekat nonton TV, membaca sambil tidur.."

tiba- fahmi bangun dan menyahut

Fahmi : "tidak mungkin bu!!!"

Bu Tasya : (kaget)"kamu ya dari tadi tidur melulu sekarang bangun-bangun bikin heboh saja!... apanya yang tidak mungkin?"

Fahmi : "masak BACA SAMBIL TIDUR mana mungkiiiin..........."

Bu Tasya : "maksudnya baca sambil tiduran TOLOLLLL"

Fahmi : "ngomong dong yang jelas! gangguin tidurku aja HUAAAH"(melanjutkan tidurnya setelah menguap)

Bu Tasya : (geleng-geleng kepala) "kok enek menungso koyo ngene daaapurane!!!"

cara membuat blog spot

www.namadomain.blogspot.com adalah sebuah web blog yang disediakan oleh google secara gratis, seperti halnya buku harian blog dapat kita manfatkan untuk mencurahkan semua isi hati kita *seperti diary  aja hahaha... :D
namun walaupun gratis tak semua orang tau bagaimana cara membuatnya, jadi disini saya mau share bagaimana cara membuat blok mulai dari awal dulu...

Persyaratan utama membuat blog

• memiliki niat, jangan lupa baca bismillah
• mau berpikir sedikit *gak susah kok hahaha....
• suka menulis eh' mengetik artikel buat isi blog, kan aneh kalau blog gak ada isinya....
• memiliki e-mail, entah gmail, yahoo, telkom.net yang penting emailnya aktif.
• dll

sementara persiapkan itu dulu
baca juga cara buat email di google alias gmail