Cara Membuat Screenshot Layar Komputer di Komputer

Tags : Cara Memasang Breadcrumb untuk Blogspot | Cara Memasukan Kode Html ke Postingan

Cara Membuat Screenshot Layar Komputer | di Komputer

Cara Mengambil Gambar Layar | Tampilan Monitor


Cara Membuat Screenshot Layar Komputer - Cara Membuat Screenshot di komputer. Jika saat ini anda sedang menjalani Skripsi atau Tugas Akhir, pada Bab IV anda diharuskan mencantumkan gambar tampilan demo aplikasi yang anda usulkan pada karya tulis anda. Atau mungkin jika anda seorang blogger yang ingin membuat tutorial tentang suatu cara, seperti cara membuat screenshot di PC monitor yang saya buat sekarang ini, tentu dibutuhkan ilustrasi agar pengunjung blog anda mudah mengerti dengan apa yang coba disampaikan.

Cara Paling Mudah Capture Tampilan Layar Komputer


Letak Tombol Print Screen Pada Keyboard Desktop Standar Qwerty


Letak Tombol Print Screen Pada Keyboard Netbook Acer ao532h


Sebetulnya tanpa aplikasi / Software-pun anda bisa mengcapture monitor dengan cara menekan tombol print screen pada keyboard karena saya menggunakan netbook acer tombol yang saya tekan adalah PrtSC SysRq (tombol print screen pada netbook acer ao532h). saat anda menekan tombol tersebut tampilan layar aktif akan di copy ke clipboard, untuk mendapatkan hasil capture tadi dengan cara membuka aplikasi MS.Word atau Paint. lalu paste / tempel dengan cara menekan CTRL+V (Shortcut untuk paste pada keyboard). pada halaman kosong MS.Word atau paint tadi dan selamat anda sudah berhasil mengcapture layar desktop.

Cara tersebut diatas adalah menangkap tampilan seluruh monitor (lihat contoh hasil capture gambar pertama di awal posting) lalu bagaimana cara mengcapture / menangkap dialog box yang aktif pada window ? yaitu dengan cara menekan tombol alt+PrtSC secara bersamaan.contoh hasil capture bisa dilihat dibawah ini

PrtSC

Alt + PrtSC

Mudah Bukan ?? tunggu dulu.. sebelum anda berpindah ke halaman lain beberapa waktu lalu saya sudah membuat video tutorial cara mudah mengambil screen shot pada PC dan Laptop yaitu dengan menggunakan aplikasi FSCapture, dengan menggunakan aplikasi ini anda tidak perlu repot menyimpan hasil capture di clipboard ke MS.Office atau Paint karena hasil capture bisa langsung disimpan ke dalam format jpeg, lihat posting yang ini cara export import bookmark browser selain itu terdapat banyak pilihan cara capture dan kerenya lagi anda bisa menambahkan komentar pada gambar hasil capture simak video tutorial berikut ini :


Demikian Posting Cara Membuat Screenshot Layar Komputer | di Komputer semoga bermanfaat

Cara Membuat Meletakan Footer di Sisi Kanan atau Kiri Blog

Cara Membuat / Meletakan Footer di Sisi Kanan / Kiri Blog - Beberapa hari ini serasa dilema bro!!!  Semangat memposting artikel yang sebelum membara di awal tahun 2012 kini mulai luntur, entah apa yang membuat saya sampai se jenuh ini. Namun hal tersebut coba saya siasati dengan sesuatu ( rahasia ).
setelah sebelumnya memposting artikel tentang Cara Mengetahui Blog Dofollow atau Nofollow, kali ini saya akan coba memposting artikel yang sedikit aneh, yaitu membuat atau meletakkan footer di sisi blog entah itu di sebelah kanan blog, sebelah kiri blog, ataupun tengah. namun khusus pada tutorial ini kita hanya akan membahas tentang cara membuat footer berada di sisi kiri blog atau bisa di bilang sidebar ke duanya. hehehe.



Postingan aneh dengan judul yang aneh pula ini saya posting dengan harapan bisa mengobati rasa bosen ngeblog. sobat yang tertarik untuk ber eksperimen dengan trik ku ini, silahkan ikuti tutorial berikut.

DEMO

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML
3. Cari kode yang mirip dengan kode berikut.

#outer-wrapper {
  width: 950px;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

4. ganti kode tersebut dengan kode berikut.

#outer-wrapper {
  width: 950px;
margin-left:350px;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

( kode di atas hanya ada tambahan pada margin, karena kita membutuhkan space untuk meletakkan footernya.)

5. Ganti  kode footer-wrapper template sobat dengan kode berikut.
/* footer */
#footer {
clear:both;
width:950px;
position:relative;
text-align:left;
color:#000000;
font-family:julee;
background:#252525;
border:1px solid #000000;
margin:0 auto;
padding:0;
}

#footer {
width:300px;
clear:both;
float:center;
line-height:1.6em;
margin:0 auto;
padding:0;
}

.footer-bot {
padding:0px;
}

.footer-bot ul {
color:#222;
margin:0;
padding:0;
}

.footer-bot ul li {
list-style-type:none;
background:;
padding-left:15px;
margin-bottom:8px;
}

.footer-bot a {
color:#222;
text-decoration:none;
}

.footer-bot a:hover {
border-bottom:1px solid #222;
color:#000;
}

#footer-right {
width:250px;
float:left;
padding:5px;
margin-left:15px;
margin-bottom:10px;
background:#ffffff;
border:1px solid #222;
}
#footer-center {
width:250px;
margin-bottom:10px;
float:left;
margin-left:15px;
padding:5px;
background:#ffffff;
border:1px solid #222;
}
#footer-left {
width:250px;
background:#ffffff;
margin-bottom:10px;
padding:5px;
margin-left:15px;
margin-top:10px;
float:left;
border:1px solid #222;
}

6. Kemudian letakkan kode berikut di atas kode ]]></b:skin>.

#trik_tatelu {
position:fixed;_position:absolute;top:0px; background:#000000; left:px;  width:320px;
border:1px solid #000000; height:585px;;overflow:auto;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


7. Letakkan kode berikut di atas kode </body>
<div id=trik_tatelu>
<div style=font-size:30px;font-family:Felipa;color:#ffffff;>
<h3><blink>Hai!!!!</blink></h3>
</div>
<div id=footer>
<div id=foot>
<b:section class=footer-bot id=footer-left>
</b:section>
<b:section class=footer-bot id=footer-center>
</b:section>
<b:section class=footer-bot id=footer-right>
</b:section>

</div><div style=clear:both/>
</div>
</div>

8. Klik save.

Perhatian!
  1. Sebelum sobat menggunakan trik ini, ada baiknya download terlebih dahulu template blog sobat.
  2. Cara ini di anjurkan pada template dengan lebar yang sesuai dengan outer wrapper 950px, untuk lebar kurang dari atau lebih dari 950px, sobat perlu ketelitian dan pengetahuan tentang html. ( bukan newbie ).
  3. Trik ini akan menggeser posisi outer wrapper blog sobat.
  4. Trik ini saya coba pada template minima yang telah di hilangkan sidebarnya.
  5. Mohon sobat atur sebaik mungkin jika setelah jadi hasilnya kurang bagus atau kurang cocok.
  6. Semoga cara membuat footer berada di sisi kanan atau kiri blog bisa membantu sobat blogger.

Cara Membuat 2 Kolom Header

Cara Membuat 2 Kolom Header - Apa kabar sobat blogger?? pagi yang cerah ini saya harapkan dapat membawah suasana nyaman untuk sobat blogger terutama nyaman berada di blog ini. hehehe.. sebagai postingan ke 2 setelah berganti nama menjadi tatelu saya harapkan dapat memberi faedah untuk sobat blogger.


Kali ini saya akan kasih tahu bagaimana cara membuat 2 kolom header di blog. Dulunya saya pernah memposting topik yang sama yaitu cara membagi header menjadi 2 kolom elemen, tapi rasanya kurang cocok tuch kata elemennya... nah jadi dech christian tatelu posting ini.

Bagi sobat yang tertarik, silahkan ikuti cara membuat 2 kolom header berikut ini.

1. Pertama sobat login ke akun blog sobat
2. Klik rancangan--> edit HTML
3. Jangan centang kotak expand template widget
4. Cari kode css yang mirip di bawah ini:

    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor;
    height:190px;
    }
    #header-inner {
    width:900px;
    background-position: center;
    margin-$startSide: auto;
    margin-$endSide: auto;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }

5. Ganti kode di atas dengan kode berikut.

    #header-wrapper{
    width:980px;
    padding:20px 0 0 0;
    background:#000000;
    margin:0 auto;
    border:;}

    #header-inner{
    background-position:center;
    margin-left:auto;
    margin-right:auto}

    #header{
    float:$startSide;
    width:400px;
    margin:0 auto;
    border:0px solid $bordercolor;
    text-align:left;
    color:$pagetitlecolor
    }

    #header2{
    float:$endSide;
    width:400px;
    margin:0 auto;
    text-align:left;
    }

Tambahan :
  • Edit kode di atas sesuai keinginan sobat terutama kode width yang harus di sesuaikan dengan ukuran header blog sobat.

6. Scroll ke bagian bawah, dan temukan kode yang mirip seperti ini

<div id=header-wrapper>
      <b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=judul blog (Header) type=Header/>
</b:section>

Fokuskan pencarian pada kode
<div id=header-wrapper>

7. Ganti kode di atas dengan kode berikut:

<div id=header-wrapper>
      <b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=judul blog(Header) type=Header/>
</b:section>
      <b:section class=header id=header2 maxwidgets=1 showaddelement=yes/>
<div style=clear:both;/>
      </div><!-- end header-wrapper -->

8. Klik simpan perubahan

9. Langkah terakhir, klik ELEMEN LAMAN dan lihat bila sudah menjadi 2 kolom.

Selesai
Semoga membantu!!

Cara Membuat Nastar Keju


Cara Membuat Nastar Keju - Nastar keju merupakan jajanan yang banyak dipakai untuk menjamu tamu. Apalagi pada saat lebaran, natal dan tahun baru. Sebagian besar para penjamu menyediakan kue nastar keju untuk menjamu para tamunya. Kue dengan bahan dasar keju ini rasanya sangat gurih dan enak. Berikut cara membuat kue nastar keju:
Cara Membuat Nastar Keju
Resep Bahan Nastar Keju :
·                     175 gram margarin
·                     3 kuning telur
·                     150 gram keju edam parut
·                     1/4 sendok teh garam
·                     175 gram tepung terigu, ayak
·                     30 gram tepung maizena
·                     1 kuning telur untuk olesan (boleh ya boleh tidak, tergantung selera)
·                     25 gram keju cheddar, parut untuk taburan (boleh ya boleh tidak, tergantung selera)

Selai nanas nastar keju:
·                     1 buah nanas, parut
·                     125 gram gula pasir
·                     5 butir cengkih
·                     3 cm kayu manis

Cara membuat Nastar Keju :
1.            Selai nanas : parut nanas, masak bersama gula pasir, cengkih, dan kayu manis hingga mengering, angkat.
2.            Siapkan loyang pipih, olesi dengan margarin, sisihkan.
3.            Kocok margarin hingga mengembang, masukkan dan terus kocok hingga mengembang.
4.            Masukkan tepung terigu dan tepung maizena, aduk rata. Tambahkan keju edam dan garam, aduk rata hingga menjadi adonan yang dapat dibentuk.
5.            Ambil 1 sendok teh adonan. isi dengan selai nanas, bentuk bulat, taruh di atas loyang, beri jarak, olesi dengan kuning telur dan taburi keju cheddar parut.
6.            Panggang dalam oven dengan temperatur 160° selama 15 menit hingga matang.
7.            Dinginkan, setelah dingin simpan dalam stoples kedap udara.
Untuk 400 gram.

Nah, cukup mudah bukan cara membuat nastar keju tersebut.

Tips Sukses Membuat Kue Sus Yang Renyah

Tips Membuat Kue Sus - kita kali ini akan berbagi tips membuat kue sus yang renyah. Kue sus merupakan salah satu jajanan pasar yang telah lama ada. Rasanya sangat enak dan renyah, cocok untuk dijadikan sebagai cemilan di pagi hari ataupun untuk suguhan tamu.


Bagaimana caranya mendapatkan Sus yang lembut, kuat dibagian luar tapi kopong didalam? Coba terapkan tips ini :
  • Selalu gunakan tepung terigu protein tinggi
  • Selalu gunakan bahan berkwalitas prima.
  • Masak air dan mentega hingga mendidih benar, lalu masukkan tepung sekaligus, aduk rata dan cepat.
  • Dinginkan, baru kemudian masukkan bahan telur. Ini dimaksudkan supaya telur tidak langsung matang terkena adonan panas. Lalu kocok.
  • Cetak kue sus meggunakan spuit besar misalnya no. 1M, atau 1B, atau cetak menggunakan sendok atau menggunakan cetakan muffin
  • Panggang dengan oven suhu tinggi 200 s/d 225’C, sampai coklat kekuningan dan tidak terlihat busa keluar. Kering. Ingat pada saat memanggang, oven tidak boleh dibuka.
  • Lakukan semua step dengan seksama dan gembira, pasti kue sus akan mengembang cantik.
Lalu bagaimana membuat kue sus kering yang renyah kriuk-kriuk???........sama persis dengan membuat kue sus biasa, hanya bentuknya kecil-kecil. Ilmu saktinya ada di cara memanggangnya yaitu sbb :
  • panggang sus kecil pada suhu 225’C, hingga mengembang, kering dan kuning. Angkat, dinginkan.
  • Panggang kembali dengan suhu 140’C, hingga kering dan kecoklatan. Angkat, dinginkan dan segera kemas dalam toples rapat. Anda akan mendapatkan kue sus yang tahan kering dan renyah.
  • Untuk sus kering, beri rasa sesuai selera pada saat membuat adonan dimasak. Misalnya dengan keju, dan bahan lain.
Sumber : http://resepmasakanku.com/resep-kue/resep-kue-sukses-membuat-kue-sus.html

Membuat maksimal unjuk kerja Blog di Blogger

Pada tulisan-tulisan lalu, sudah dijelaskan sejumlah tips untuk membuat blog kita menjadi google friendly, mudah ditangkap mesin pencari (search engine) google dan saudara-saudaranya. Tips berikut ini sebagian akan mengulang tulisan lalu secara lebih detail plus sejumlah tambahan bagaimana untuk memaksimalkan cara kerja blog kita. Saya urut dari awal.

Setting-an Blog

Setelah log-in dg id Anda, klik link blog. Setelah itu:

(a) Klik SETTING dan klik BASIC.


Title --> Isi judul blog Anda. Sebaiknya nama Anda sendiri. Contoh: Tasar-Zulfikar Blog
Description --> Deskripsi singkat isi blog Anda. Sebaiknya tidak terlalu panjang dan berisi kata-kata yg paling mewakili isi blog Anda. Contoh: Blog Tasar-Zulfikar GAM, Aceh. Dua saudara yg selalu rukun dan sepakat untuk berbagi dan bersaing dalam segala hal.
Add your blog to our listing? --> klik YES. Supaya setiap posting kita selalu masuk di daftar blogger.com.
Show quick editing on your Blog? --> klik YES
Show Email Post Links? --> klik YES
Show Compose Mode for all your blogs? --> klik YES
Klik SAVE SETTINGS dan REPUBLISH. Selesai.
(b) Klik SETTINGS dan klik PUBLISHING.


Notify Weblogs.com --> klik YES. Tujuan: setiap kita mengupdate blog kita, search engine khusus blog yaitu weblogs.com akan mengupdate otomatis databasenya.
Klik SAVE SETTING dan REPUBLISH. Selesai.
(c) Klik SETTINGS dan klik FORMATTING

Show --> pilih posts (jangan days). Kemudian pilih angka posting yg Anda inginkan untuk tampilan di blog Anda. Contoh: Show: 4 posts, berarti posting yg tampil di halaman blog Anda sebanyak empat posting.
Date Header Format --> pilih model tanggal/bulan yg sesuai dg selera. Format tanggal/bulan ini akan selalu tampil di bagian atas posting kita.
Archive Index Date Format --> pilih model peng-arsip-an. Blog kita akan dibuatin arsip setiap bulan. Contoh: February 2006.
Timestamp Format--> pilih bentuk waktu yg Anda suka. Sebaiknya yg pendek. Contoh: 7.50 PM.
Timezone --> pilih zona waktu yg sesuai. Contoh untuk WIB: [UTC-+7.00]Asia/Jakarta.
Encoding --> pilih Universal (Unicode UTF-8). Ini adalah kode format yg dipakai kebanyakan search engine besar termasuk google, yahoo dan MSN. Dg kode ini, Google, dll akan lebih mudah mendata setiap update di blog kita.
Converts Linebreaks --> pilih YES.
Show Title field --> pilih YES.
Show Link Field --> pilih NO. Tapi andai dipilih YES juga tak ada pengaruhnya.
Enable float alignment --> pilih YES. Pilih NO juga tidak apa-apa.
Klik SAVE SETTINGS. Klik REPUBLISH. Selesai.

(d) Klik SETTINGS dan klik COMMENTS.

COMMENTS --> pilih SHOW.
Who Can Comment? --> pilih ANYONE. Supaya semua pengunjung baik yg anggota blogspot maupun yg tidak dapat ikut berkomentar.
Comments Default for Posts --> pilih New Posts Have Comments.
Backlinks --> pilih SHOW. Supaya tahu kalau ada yg ngelink ke artikel di blog kita.
Backlinks Default for Posts --> pilih New Posts have Backlinks.
Comments Timestamp Format --> pilih format jam yg singkat. Contoh: 8.00 PM.
Show comments in a popup window? --> pilih YES. Supaya ketika di klik, blog kita pengunjung, blog kita tidak hilang.
Show word verification for comments? --> pilih YES. Untuk menghindari komentar otomatis oleh robot spam.
Enable comment moderation? --> pilih NO (sebaiknya). Kalau Anda termasuk orang yg "jaga wibawa", pilih YES (kalau YES, setiap komentar akan disensor dulu oleh Anda, baru bisa muncul di kotak komentar).
Show profile images on comments? --> pilih YES. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.
Comment Notification Address --> isi dg alamat email Anda, kalau Anda ingin dapat notifikasi dari blogger.com setiap ada komentar baru di blog Anda.
Klik SAVE SETTINGS. Klik REPUBLISH. Selesai.

(e) Klik SETTINGS dan Klik ARCHIVING

Archive Frequency --> pilih Monthly.
Enable Post Pages? --> pilih YES.
Klik SAVE SETTINGS. Klik REPUBLISH. Selesai.

(f) Klik SETTINGS dan Klik SITEFEED.

Publish Site Feed --> pilih YES. Supaya setiap memposting, blog kita memiliki dua database: versi website dan versi feed. (Untuk soal feed akan diterangkan di kesempatan lain).
Descriptions --> pilih FULL.
Site Feed URL --> ini adalah alamat feed Anda yg bisa disindikasikan di tempat lain seperti di http://my.yahoo.com, http://reader.google.com atau di http://360.yahoo.com. Lihat contohnya di sini atau di sini . Jadi, sekali kita update blog, postingan kita akan tampil di dua tempat dalam waktu bersamaan dan ini akan menambah "daya tangkap" google pada blog kita.
Article Footer --> kosongin saja.
Klik SAVE SETTINGS. Klik REPUBLISH. Selesai.

Apabila selama ini blog di blogger atau blogspot Anda kurang di "lirik" sama google atau yahoo search, maka dg mengimplementasikan tips di atas, blog Anda akan lebih dikenal dalam waktu tidak lama lagi.(Mario Gagho http://kolom-mario.blogspot.com)



Cara Membuat Readmore atau Baca Selengkapnya Versi 1

Pada Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya. Oleh karena itu ayo belajar membuat read more :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini :

<b:if cond=data:blog.pageType == "item">
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


<p><data:post.body/></p>


<a expr:href=data:post.url>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya" atau apa saja

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut :

<span class="fullpost">


</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>

11. Nah semoga berhasil yach dan Selamat Mencoba

Cara Membuat Anti Klik Kanan Pada Blog

Cara Membuat Anti Klik Kanan Pada Blog - Sekarang saya akan share Cara Membuat Anti Klik Kanan Pada Blog. Pasti kalau artikel anda di copy paste (copas) oleh orang lain anda akan merasa kesal, betul kan? saya juga merasa begitu..  kita sudah capek - capek nulis, ehh mereka malah sembarangan copas aja, yaahhh mau di apain lagi.. biarkan saja lah. Nah, maka dari itu sekarang saya akan berbagi ke teman - teman Cara Membuat Anti Klik Kanan Pada Blog. 



DEMO
Berikut Cara Membuat Anti Klik Kanan Pada Blog :

1. Login ke Akun Blogger
2. Pilih Layout => Add a Gadget => HTML/JavaScript
3. Copy kode dibawah ini tepat didalamnya.
<script>

var message="Hayooo!! mau ngapain?? mau COPAS ya??? eitth.. ora isoooo!!!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")

    </script>

4. Save.

Selesai!!

Semoga bermanfaat!!

Cara Membuat Menu Horizontal Dropdown Black Orange dengan CSS

Cara Membuat Menu Horizontal Dropdown Black Orange - Kali ini saya akan membahas Cara Membuat Menu Horizontal Dropdown Black Orange. Black Orange itu maksudnya adalah warna dasar dari menu ini yaitu berwarna hitam dan jingga, apalagi dengan bantuan CSS menu ini akan terlihat lebih keren dan lebih profesional. Nah, berikut contohnya :

 

Berikut, langkah-langkahnya :

1. Login ke Account Blogger sobat
2. Pilih Rancangan, Edit HTML, lalu Centang Expand Template Widget
3. Cari kode ]]></b:skin>  
4. Bila sudah, Copy kode dibawah ini tepat diatas kode ]]></b:skin> 
#topbar{;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));width:100%;border-top:1px solid #000;margin:0 auto;padding:0 auto;border-top:5px solid #ff6600;}
#top-wrapper{width:100%;height:30px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;color:#fff;padding:6px 10px 8px;border-left:1px solid #ccc}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLvRtFvmGJfG4c5JcLIPFXMUXFaEMUmvXJ_DVTfnUXHc-nK3f97SbTLpYKMezF5CFm7YkzjaAXjqukVQuVAURdFVuuKSPpA3UWiB3G2CXZ7c4BD8hBwPXBGjUGd-Ib3o6E_Zr8QWaIyP8/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:160px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#4c4c4c;padding-bottom:0;}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background:#ff6600;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#ff6600!important;color:#fff!important;text-decoration:none}
5. Untuk meletakkan kode horizontal dropdownnya, sobat cari terlebih dahulu kode header blog sobat, kodenya berbeda-beda tergantung blognya. Kalau kode header saya, seperti dibawah ini :
<div id=header-wrapper>
<b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=Tutorial Blogger (Header) type=Header/>
</b:section>
</div><!-- end header-wrapper -->
Kode yang warna merah itu adalah kode judul blog yang ada pada header, supaya lebih mudah sobat tekan Ctrl+f lalu cari kode judul blog yang ada pada header blog sobat.

6. Bila sudah mencari kodenya, Copy kode dibawah ini tepat dibawah kode seperti diatas
<div id=topbar>
<div id=top-wrapper>
<ul id=top>
<li><a href=http://.blogspot.com style=background:#ff6600;>Home</a></li>
<li><a href=#>About Us</a></li>
<li><a class=arrow href=#>Contact Us</a>
<ul>
<li><a href=#>Goggle +</a></li>
<li class=hr/>
<li><a href=#>Contact on Facebook</a></li>
<li class=hr/>
<li><a href=#>Contact on Twitter</a></li>
</ul>
</li>
<li><a href=#>Sport</a></li>
<li><a href=#>Culture</a></li>
<li><a class=arrow href=#>Entertainment</a>
<ul>
<li><a href=#>Music</a></li>
<li class=hr/>
<li><a href=#>Movie</a></li>
<li class=hr/>
<li><a href=#>Television</a></li>
</ul>
</li>
<li><a href=#>Health</a></li>
<li><a class=arrow href=#>Design</a>
<ul>
<li><a href=#>Art</a></li>
<li class=hr/>
<li><a href=#>Blog</a></li>
<li class=hr/>
<li><a href=#>Website</a></li>
</ul>
</li>
<li><a class=arrow href=# style=background:#ff6600;>More</a>
<ul>
<li><a href=#>Themes</a></li>
<li class=hr/>
<li><a href=#>Tutorial</a></li>
<li class=hr/>
<li><a href=#>Resource</a></li>
<li class=hr/>
<li><a href=#>Advertise</a></li>
<li class=hr/>
<li><a href=#>Javascript</a></li>
</ul>
</li>
</ul>
<br class=clearit/>
</div>
<div style=clear:both;/>
</div>
Keterangan: Yang bercetak tebal adalah Judul menu dropdownnya
Dan yang berwarna merah adalah URL yang akan dituju 

7. Klik Simpan Template. dan lihat hasilnya :)

Cara membuat Twitter follower Box di Blog




Update - Dulu saya pernah share tentang cara memasang like box Facebook di blog. Nah sekarang saya akan share tentang cara membuat dan memasang Twitter Follower Box di blog.Mungkin menampilkan akun twitter anda di blog maka  orang akan merasa lebih mudah mendapatkan akun twiter anda jika akun ada terpampang di blog anda . Terkadang orang mungkin hanya menampilkan tulisan Follow me , tapi berbeda dengan yang satu ini dia menampilkan gambar profile-nya , dan disertakan dengan Followers nya .Tampilannya nanti seperti like box Facebook, bisa Anda lihat gambar disamping itulah contoh Twitter box untuk blog anda . udah deh .. saya cape ga usah basa-basi lagi langsung aja kita lihat tutorial nya di bawah ini!

Ok, langsung aja Berikut cara membuat Twitter follower Box di Blog :

1. Login ke Blogger

2. Klik Dasbor  >  Rancangan  > Tambah Gadget

3. Pilih wiadget HTML/JavaScript

4. Masukan kode ini

<!-- Twitter Follower Box -->
<script type=text/javascript>
function fanbox_init(screen_name){document.getElementById(twitterfanbox).innerHTML=<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=+screen_name+" class="FB_SERVER_IFRAME" scrolling="no" style="width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>;}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("Tutorialblogz");
<!-- End Twitter Follower Box --></script
type="text>
 
5. Ganti Tutorialblogz dengan Username anda di Twitter.

6. Untuk merubah ukuran, sesuaikan width dan height-nya

7. Save dan Selesai . 
 
Semoga Berhasil ya Sob :)