Cara Membuat Gambar Tutorial

Tips dan Trik kali ini tentang cara membuat gambar tutorial. Biasanya digunakan sebagai penambah penjelasan dari artikel yang kita buat. Gambar bisa kita ambil dari halaman web atau dari layar komputer kita sendiri. Untuk lebih jelasnya tentang cara mudah mengambil serta memotong gambar yang akan digunakan sebagai gambar tutorial. Ikuti langkah² dibawah ini.

1. Bukalah layar yang akan dijadikan gambar.
2. Selanjutnya tekan Ctrl lalu tekan Printscreen/PrtscrSysrq yang ada dikeyboard.
3. Lalu buka program Paint yang ada dikomputer kita.
4. Di program Paint kita klik edit di menu atas, dan pilih Paste.
5. Setelah itu beri tanda kotak menggunakan Select pada gambar yang akan diambil, lalu Cut gambar tersebut.
6. Langkah selanjutnya, buka New di paint, lalu Pastekan gambar yang di Cut tadi. 
7. Lalu Save gambar dengan Save As Type JPG. Seperti gambar dibawah ini.

8. Selesai.

---

Contoh : Gambar Tutorial.

Jika gambar yang ingin kita gunakan lebih kecil lagi dari gambar diatas. Kita bisa memotong/mengambil gambar menggunakan program Microsoft Office Windows Manager. Jika dikomputer yang kamu gunakan telah terinstal microsoft office, maka program diatas juga pasti ada. Berikut cara menggunakannya:

---

1. Klik Kanan pada gambar yang akan dipotong.
2. Lalu pilih Open With > Microsoft Office Windows Manager.

3. Selanjutnya klik Picture pada menu atas. Dan klik Crop.
4. Setelah itu Crop gambar dengan ukuran yang kita inginkan.
5. Terakhir save. Selesai.

---

Contoh: Gambar Tutorial yang sudah dipotong.

Itulah sedikit tips dan trik tentang cara membuat gambar tutorial. Silakan baca juga artikel lainnya yang berhubungan dengan gambar, seperti cara membuat icon untuk blog. Semoga Bermanfaat.

Read More

Cara Membuat Menu yang Menempel Di Dinding Blog

Cara membuat menu yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, menu masih pada posisi yang sama. Silakan lihat contoh menu hijau dibagian bawah.

Untuk lebih jelasnya tentang cara membuat menu menempel diatas atau dibawah dinding blog. Ikuti langkah² dibawah ini.

1. Buatlah menu terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, lalu tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
2. Selanjutnya copy kode dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.
<style>

#cssmenu {
  background: transparent;
}
#cssmenu ul {
float: left;
}
#cssmenu ul li {
  float: left;  padding:10px;
  background: transparent;  list-style: none;
}
#cssmenu ul li a {
  float: left;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 12px;
  color: #FFFFFF;
font-weight:bold;
}
</style>
<div id='cssmenu'>
<ul>
   <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li>
   <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li>
   <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li>
</ul>
</div>
3. Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
4. Setelah itu pengaturan template, klik edit HTML dan cari kode Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. seperti dibawah ini.

5. Sekarang Copy id dari menu tempel yang bergaris bawah HTML2, seperti gambar diatas.
6. Lalu Pastekan di Notepad. Selanjutnya tambahkan kode css dibawah ini.
#HTML2 {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 30px;
  font-size: 12px;
z-index: 99;
  white-space: nowrap;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
7. Copy kode diatas, dan pastekan diatas ]]></b:skin> .
8. Dan Save Template.
9. Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi,  lalu hapus judulnya, biarkan gadget tidak berjudul. 
10. Terakhir Save Gadget, Selesai.

Keterangan Kode Langkah 6:

• top:0px ini fungsinya menempatkan menu dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
• height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
• background-color: #336699; dan #336699 100%); untuk warna background

Keterangan Kode Langkah 2:

• http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
• Dan juga https://twitter.com/fandrajuani adalah url yang jika diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.

Itulah sedikit cara membuat menu yang menempel di dinding atas atau bawah blog yang bisa saya bagikan. Semoga Bermanfaat.

• Beranda
• Desain Blog
• Tips Dan Trik

Read More

Fungsi Margin Dan Padding di Blog

Margin dan Padding merupakan kode CSS yang digunakan untuk membuat jarak atau spasi. Perbedaanya adalah margin digunakan pada bagian luar, dan padding pada bagian dalam. Dengan kode margin kita dapat merubah posisi dari widget yang kita inginkan, sedangkan padding, kita dapat menggunakannya untuk bagian dalam, seperti spasi antar text tulisan, jarak antara text dengan batas garis widget atas-bawah. Untuk lebih jelasnya lihat gambar dibawah ini.

Adapun kode-kode Css Dari Margin dan Padding yang dapat kita gunakan diblog adalah sebagai berikut:

 Margin

1. margin: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. margin: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. margin: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. margin: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)
5. Khusus untuk margin dengan kode 4, bisa kita tambahkan kode - untuk merubah posisi dengan arah berlawanan, contoh: margin: margin:-55px -50px 0 0

Padding

1. padding: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. padding: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. padding: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. padding: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)

Dari kode-kode diatas sudah terlihat, yang membedakan Margin dan Padding hanyalah nama awalnya saja sedangkan yang lainnya sama.

Langsung saja, dibawah ini adalah contoh penggunaan margin pada bagian Header blog. Tampilan awal Header blog pertama.

1. Susunan elemen dari gambar diatas adalah seperti dibawah ini.

2. Sekarang ke pengaturan template. Dan klik edit HTML.
3. Lalu cari satu persatu kode dari susunan elemen dari langkah 1.

4. Pertama cari kode Header, disini yang berjudul Fandra Juani. Gunakan Ctrl F untuk mempermudah pencarian. seperti dibawah ini.
5. Setelah ketemu, copy kode bertanda merah diatas, lalu pastekan di notepad, dan lanjutkan mencari kode Laman Dan HTML/javascipt.
6. Setelah semuanya ketemu, tambahkan kode margin untuk merubah posisi yang kita inginkan. seperti dibawah ini.
#Header{float:left}
#HTML1{float:right; margin:-115px -195px 0 0}
#PageList1{float:right; margin:-55px -50px 0 0}
7. Letakan kode diatas ]]></b:skin>
8. Save template, selesai.
9. Tampillan Blog setelah diberi kode margin.

Sudah terlihat jelas perbedaan tampilan blog, dari yg awalnya datar kebawah, sekarang datar kesamping. Karena ditambahkan kode margin. kenapa saya beri judul fungsi margin dan padding di blog, karena padding dan margin bisa digunakan pada semua bagian-bagian blog, jadi tidak hanya seperti yang saya contohkan. Yang terpenting adalah kita cari dulu kode dari bagian yang akan kita edit atau kita ubah posisinya.

Keterangan kode float

float digunakan agar posisi widget menjadi teratur, seperti contoh diatas, header float:left berarti header pada posisi kiri, dan laman(Pagelist1) dan HTML1 pada bagian kanan. 

Silahkan berkreasi, maaf jika tutorial dari saya ini kurang jelas. Jika ada pertanyaan silakan masukan komentar dibawah, semoga bermanfaat.

Read More

Cara Membuat Entri Populer Bergerak

Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.

Ikuti langkah-langkah dibawah ini.

1. Login ke blog, dari halaman dasbor pilih pengaturan Template.
2. Klik Edit HTML, lalu cari kode  <div class='widget-content popular-posts'>
3. Selanjutnya Copy kode berikut dan tempatkan di Sebelahnya.
<marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
4. Langkah selanjutnya, masukan kode </marquee> di akhir rangkaian kode. Jadinya seperti ini.
</ul>
    <b:include name='quickedit'/></marquee>
  </div>
</b:includable>
  </b:widget>
5. Susunan Kode lengkapnya.
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <!--b:include name='quickedit'/--></marquee>
  </div>
</b:includable>
  </b:widget>
6. Save Template Selesai.

Keterangan kode:

• marquee direction='down' arah gerakan, bisa diganti dengan up, left, atau right.
• height='200' tinggi dan width='auto' untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.
• scrollamount='2' scrolldelay='100' Waktu gerakan.
• Silakan ganti sesuai dengan yang kalian ingnkan.

Silakan baca juga artikel tentang cara membuat artikel berjalan di blog. Lanjutan kombinasi dari entri populer bergerak ini. Contohnya bisa dilihat DISINI, diblog saya satunya.

Semoga Bermanfaat.

Read More

Cara Membuat Gambar Berputar di Blog

Artikel kali ini masih seputar gambar yaitu tentang cara membuat gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas cara membuat gambar posting berputar dan juga membesar ketika di sentuh oleh kursor. Bedanya, kalau yang sebelumnya memutar gambar di setiap artikel yang telah kita buat, kali ini kita akan memutar gambar yang ada di sidebar, footer ataupun pada header blog.

Dengan cara memasukan gambar kita sendiri, ke tata letak pada bagian Add HTML, Untuk lebih jelasnya Silakan arahkan mouse anda ke gambar diatas. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Pada halaman Dasbor, pilih pengaturan Tata Letak.
2. Selanjutnya klik Tambahkan Gadget. Dan pilih HTML/Javascript.
3. Setelah itu copi kode dibawah ini.
<style>
#img{
width: 250px;
  height: 200px;

  position: relative;
-moz-transition:all .8s ease-in-out;;
-ms-transition:all .8s ease-in-out;;
-o-transition:all .8s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .8s ease-in-out;}
#img:hover{
-o-transform: scale(1) rotate(360deg);
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
}
</style>
<div id="img">
  <img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGT56iJGtVUcjZz3ER0-eLPMPfcZlhaFg_6RpkRGZ8hc6ne7ksQAEc_sKA7y5wALtvQw5uRMu3HKwonmA20I15ZB8TODcRVqvyVORHYpjciSj4G8UyfVEU4MEAelwME3dkKqIPwabzL8T/s1600/A.jpg" />
</div>
4. Dan Pastekan di HTML/Javascript Tadi.
5. Setelah itu save, lalu pindahkan gadget gambar ini ketempat yang kalian inginkan. Selesai.

Keterangan Kode:

width: 250px; height: 200px; Untuk mengatur lebar dan tinggi gambar.
8s adalah lama putaran gambar.
scale(1) ini fungsinya agar gambar tetap pada ukuran semula ketika disentuh mouse, jadi gambar tidak membesar atau mengecil ketika disentuh kursor.

Dan  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGT56iJGtVUcjZz3ER0-eLPMPfcZlhaFg_6RpkRGZ8hc6ne7ksQAEc_sKA7y5wALtvQw5uRMu3HKwonmA20I15ZB8TODcRVqvyVORHYpjciSj4G8UyfVEU4MEAelwME3dkKqIPwabzL8T/s1600/A.jpg adalah URL dari gambar yang ingin kalian masukan.

Itulah sedikit pembahasan atau tutorial desain blog yang dapat saya bagikan, yaitu tentang cara membuat gambar berputar di blog, ketika disentuh kursor mouse. Semoga Bermanfaat.

Read More

Cara Membuat Gambar Posting Berputar

Berikut ini adalah cara membuat gambar yang ada dipostingan setiap artikel berputar dan membesar ketika di sentuh kursor mouse. Salah satu cara agar gambar dapat diperbesar dan lebih mudah untuk dilihat ketika disentuh kursor mouse. Contoh: arahkan mouse anda ke gambar dibawah ini.

Untuk membuat gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. 
2. Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari kode ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode). 
3. Setelah ketemu ]]></b:skin>, Copy kode dibawah ini. Lalu Pastekan di Atas ]]></b:skin>
.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
4. Dan save template. Selesai.
5. Atau bisa juga ditempatkan di Tambahkan CSS pada bagian perancang template blogger(desainer template).
6. Lalu save, selesai.

Keterangan kode diatas: 0.5s untuk mengatur lama putaran. scale 1.9 untuk mengatur besarnya gambar setelah di sentuh oleh kursor mouse, silakan diganti sesuai dengan keinginan. Untuk kode lainnya sebaiknya jangan diganti, agar kode tetap berjalan dengan benar, yaitu untuk memutar gambar yang disentuh kursor mouse. 

Itulah sedikit tutorial desain blog dan tips trik yang dapat digunakan di blog,  yang saya dapat bagikan yaitu tentang cara membuat gambar posting berputar dan membesar ketika di sentuh kursor mouse.

Jika ada yang kurang dimengerti dari langkah-langkah diatas atau ada kendala dalam pembuatannya. Silakan masukan komentar anda dibawah. Silakan dibaca juga artikel lainnya yang berkaitan dengan gambar, seperti cara mengganti judul blog dengan gambar atau cara membuat menu blog dengan gambar. Semoga bermanfaat.

Read More

Cara Membuat Video Point Blank

Cara membuat video point blank. Point Blank merupakan game online, yang menyajikan permainan perang. Terdiri dari 2 team yaitu Ct-Force dan Free Rebels. Macam permainannya pun cukup beragam, ada bom mission, deatmatch, elimination, destroy mission, dino mode, dan lain-lainnya.

Game ini juga menyediakan banyak tempat pilihan bermain, serta senjata lengkap yang harus dibeli dengan vocher dari Gemscool, pengembang point blank. Berikut ini adalah Fitur terbaru yang disediakan oleh point blank ke pada para pemain, yaitu Video Record, atau merekam video. Dengan fitur video record, kita dapat merekam aktifitas kita pada saat bermain game point blank.

Cara menggunakan Video Record di point blank, silakan ikuti langkah-langkah dibawah ini.

1. Login atau Masuklah ke game Point Blank
2. Selanjutnya, buka Option, lalu pilih bagian Control, dan lihat pada bagian Mode Video Capture. Seperti gambar dibawah ini.

3. Dari gambar diatas untuk merekam video point blank kita harus menekan Tombol Scroll Lock di Keyboard. Maka pada saat merekam video, akan ada tulisan Rec berwarna merah di atas kanan layar pb. seperti dibawah ini.

4. Untuk menghentikan rekaman, maka tekan kembali Scroll Lock di Keyboard. 
5. Sekarang, video point blank yang sudah direkam sudah jadi. 
6. Untuk melihat hasilnya, silakan Exit / keluar terlebih dahulu dari game point blank, Lalu buka My Document, dan buka Folder Point Blank, lalu buka lagi Folder Movie.

7. Hasil video rekaman berformat AVI, dengan ukuran yang lumayan kecil. Silakan putar hasil rekamanmu di pemutar video. Selesai.

Video dibawah ini adalah contoh hasil rekaman dengan durasi 1 menit. Silakan dilihat untuk lebih jelasnya cara membuat video point blank.

Itulah sedikit penjelasan sederhana tentang cara membuat atau merekam video point blank sendiri, tanpa menggunakan software. Silakan dicoba dan buatlah rekaman video point blank punya kalian sendiri. Semoga Bermanfaat.

Read More