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

Macam Bentuk Numbered List dan Bullet List

Macam Bentuk Numbered List dan Bullet List yang bisa dipakai di blogger. Cara menggunakannya lihat dibawah ini.

1. Buatlah entri baru atau edit artikel lama
2. Dan Klik Numbered List 
3. Lalu klik bagian HTML di sebelah Compose.
4. Terus ganti kode <ol> dengan salah satu kode dibawah.
5. Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.
6. Untuk Bullet list, klik bullet list, lalu lihat pada bagian HTML 
7. Dan ganti kode <ul> dengan salah satu kode bentuk bullet list dibawah.

Macam Bentuk Numbered List

1. Bentuk Dasar, <ol> Tanpa Edit HTML

8. Mulai dari angka 8, Ganti kode <ol> dengan <ol start="8">
9. Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, seperti tulisan ini.

1. Dalam Bentuk Huruf Besar, <ol type="A">

1. Dalam Bentuk Huruf Kecil, <ol type="a">

1. Dalam Bentuk huruf atau angka romawi, <ol type="I">

1.  Angka romawi huruf kecil, <ol type="i">

5. Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5">
6. Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.

Macam Bentuk Bullet List

• Bentuk dasar bullet list, <ul> tanpa edit html

• Bentuk Bulat sederhana, <ul type="circle">

•  Bentuk Kotak, <ul type="square">

Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti contoh gambar dibawah ini.

Contoh gambar

Dari gambar diatas Tampilan numbered list, rata dengan kalimat yang ditulis seperti menulis biasa diblog, diatur menggunakan justify rata kiri kanan kalimat. Standar blogger, tampilannya akan ada spasi jarak sehingga tidak sejajar dengan kalimat yang ditulis biasa tanpa numbered list.

Berikut sedikit trik cara agar tampilan numbered list rata dengan tulisan biasa.

1. Login ke blogger, dari halaman dasbor, pilih pengaturan template.
2. Terus edit html, dan cari kode ]]></b:skin> lalu letakan kode berikut ini diatasnya.
.post ol {
padding:0px 24px 0px;
width:96%;max-width:100%;}
3. Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.
4. Jika belum rata, Ganti 24px dan 96% agar rata dengan tampilan posting kamu.
5. Save template, selesai.

Pada saat menulis, tampilan numbered list tetap seperti biasa, tetapi jika sudah dipublikasikan, maka tampilannya akan berubah, rata dengan tulisan biasa. Preview dulu tulisan untuk melihat hasilnya.

Itulah sedikit tips trik menulis artikel menggunakan numbered list dan bullet list di blog, silakan baca juga tips trik menulis artikel di blog menggunakan numbered list yang disisipkan gambar, atau kode script ditengah-tengahnya. Semoga Bermanfaat.

Read More

Cara Mengganti Judul Blog Dengan Gambar

Cara mengganti judul blog dengan gambar. Header blog standar blogger biasanya hanya berbentuk huruf tulisan, dan tulisan tersebut bisa kita ganti dengan gambar yang kita inginkan, tanpa menghilangkan H1 title blog yang bisa mengganggu Seo blog. 

Sebenarnya blogspot sudah menyediakan Tool untuk mengganti judul blog dengan gambar, yaitu dengan menambahkan langsung gambar di widget header blog pada bagian tata letak. Kekurangan dari tool tersebut, gambar akan menghilangkan H1 title dari judul blog, sehingga blog tidak mempunyai H1.

Berikut ini adalah cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman Dasbor pilih pengaturan TATA LETAK.
2. Selanjutnya Add Gadget atau Tambahkan Gadget dan pilih HTML/JavaScript.
3. Lalu Pastekan kode berikut ini ke dalamnya.
<h1>
<a href="http://fandrajuani.blogspot.com/"><img alt="Desain Blog Tutorial dan Tips Trik Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtTxEt1nMUjJHueeQMYVIshQI6KRsNT_q5gaot33MwYpKn0QM23oKIzE-Zcs8s2FRX8SW82X8wq-ny1rX7FAeFclVG-pqFKyYSjPGinSAWoQzdYbjIVrWF83wMSfWvdlnNj62nRLlo7JK/s1600/Fandra+Juani.jpg" title="fandrajuani.blogspot.com" /></a>
</h1>
4. Keterangan Kode diatas.
http://fandrajuani.blogspot.com/ Ganti dengan URL Awal Blog Kamu
Desain Blog Tutorial dan Tips Trik Blogspot Ganti dengan img Alt yang kamu inginkan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtTxEt1nMUjJHueeQMYVIshQI6KRsNT_q5gaot33MwYpKn0QM23oKIzE-Zcs8s2FRX8SW82X8wq-ny1rX7FAeFclVG-pqFKyYSjPGinSAWoQzdYbjIVrWF83wMSfWvdlnNj62nRLlo7JK/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
fandrajuani.blogspot.com Ganti Title gambar dengan yang kamu inginkan

5. Setelah itu Beri Judul Gadget HTML dan Save Gadget dan tempatkan dibawah Header Blog.
6. Tampilan template di Tata Letak menjadi seperti ini.

7. Sekarang blog mempunyai 2 Header yaitu Widget header dan gambar Header.
8. Hapus widget Header, contoh: Fandra Juani (Header). Sehingga blog hanya mempunyai 1 Header. Selesai.

Jika Widget Header tidak bisa dihapus, ikuti langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Selanjutnya Klik edit HTML dan cari kode ini.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
3. Setelah itu ganti kata true dengan false 
4. Terakhir save template, lalu kembali ke pengaturan tata letak, widget header sudah bisa dihapus. Selesai.

Untuk mengembalikan Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.

Menghapus Widget Header seperti contoh diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, karena judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama seperti judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.

Setelah melakukan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, seperti situs www.chkme.com, www.seositecheckup.com,  www.seoptimer.com dan lain-lain. Untuk melihat masih ada atau tidak Header H1 Title judul blog.

Untuk cara Upload Gambar dan Ambil URL gambar, bisa dibaca di artikel tentang cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog seperti cara membuat menu blog dengan gambar icon disamping kiri judul menu blog.

Jika tidak ingin menggunakan cara diatas, kamu bisa baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang dapat anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot menggunakan template asli blogger yaitu dengan mengganti tulisan judul blog dengan gambar. Semoga Bermanfaat.

Read More