Cara Membuat Kontak Form Responsive

Form Kontak

Apa kabar sahabat blogger bertemu kembali dengan coretan murid.

Pada kesempatan kali ini saya akan membagi tutorial cara membuat kontak form di blog yang sudah responsive.

Langsung saja langkah-langkahnya kunjungi situs ini untuk membuatnya http://foxyform.com.

Langkah selanjutnya : 

1. Setting opsinya nama dan email
2. Setting opsi warna latar, warna huruf, jenis hruf, dan ukuran hruf, seperti contoh gambar di bawah :

3. Isikan alamat email yang akan dituju/dihubungi.

4. Centang CAPTCHA saya bukan robot.

5. Dan terakhir klik Create Formular, contoh seperti gambar di bawah :

Selanjutnya sahabat akan mendapatkan kode script untuk di salin di halaman statis khusus untuk kontak form. Dalam memasukan script nya dengan menggunakan mode html bukan compose.

Selanjutnya simpan/publikasikan dan lihat hasilnya seperti ini.

Demikian semoga bermanfaat.

Read more

Cara pasang video Youtube di blog SEO Friendly

Animasi YouTube

Jumpa lagi sahabat blogger semua, kali ini saya menulis bagaimana memasang video youtube di blog tetap seo friendly.

langsung saja caranya :

Buka situs Youtube dan Pilih video yang akan di pasang.

gambar 1

Klik tab bagikan kemudian klik tab sematkan.

gambar 2

Setelah Klik tab sematkan kemudian ambil kodenya.

gambar 3

Nah untuk blog sahabat tetap SEO Friendly ganti kode sahabat yang didapatkan tadi menjadi begini :

Kode Asal :

<iframe width="300" height="300" src="https://www.youtube.com/embed/3tMVt3_uBSc" frameborder="0" allowfullscreen></iframe>

Ganti menjadi :

<object data="https://www.youtube.com/embed/3tMVt3_uBSc" height="300" width="300"></object>

Keterangan : Sesuaikan width=panjang dan height=lebar dari video tersebut sesuai keinginan sahabat.

Demikian semoga bermanfaat dan di bawah ini contoh videonya.

Read more

Tutorial Membuat Tanggal Permanen dan Top Navigasi

Tanggal dan top navigasi

Kembali berjumpa para blogger, hari ini saya akan membagi cara-cara membuat tanggal permanen dan menu navigasi di atas header.

Dalam pembuatan tutorial ini terutama menu navigasi saya sedikit menggabungkan dengan tutorial dari blognya kang Adhy Suryadi yaitu Translate yang bisa membuat blog anda semua di terjemahkan dalam bahasa inggris.

Baik langsung saja ini langkah-langkahnya :

1. Login ke akun blogger sahabat.

2. Pilih opsi lainnya dan klik template

3. Klik edit template.

4. Cari kode ini (Ctrl+f) ]]></b:skin>

5. Copy dan letakan kode ini di atasnya :

.toppic{width:100%;margin:0 auto;border-bottom:0px solid #666;}

.topnav{background:#ffffff;width: 960px;height:32px;overflow: hidden;margin:0 auto; padding:10px 10px 0px 10px; }

.toppic{background:#ffffff;width:980px;margin:0 auto;border-bottom:1px solid #999;}

.topnav{width: 960px;height:20px;overflow: hidden;margin:0 auto; padding:0px 0px 10px 10px; }

.menupic{background:#fff;width:960px;margin:0 auto;}

6. Kemudian cari kode <body> atau <body atau biasanya ada yang lebih panjangnya lagi seperti ini <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>.

7. Copy dan letakan kode ini di bawahnya :

<div class='toppic'>

<div class='topnav'>

<div style='font: 15px Arial;float:left;padding-top:3px;letter-spacing:.01em;color:#000000;'>

<script type='text/javascript'> 

 now = new Date(); 

 if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000)) 

 else (a=now.getTime()); 

 now.setTime(a); 

 var tahun=now.getFullYear() 

 var hari=now.getDay() 

 var bulan=now.getMonth()

 var tanggal=now.getDate()

 var hariarray=new Array
(&quot;Minggu&quot;
,&quot;Senin&quot;
,&quot;Selasa&quot;
,&quot;Rabu&quot;
,&quot;Kamis&quot;
,&quot;Jum&#39;
at&quot;
,&quot;Sabtu&quot;)

 var bulanarray=new Array
(&quot;Januari&quot;
,&quot;Februari&quot;
,&quot;Maret&quot;
,&quot;April&quot;
,&quot;Mei&quot;
,&quot;Juni&quot;
,&quot;Juli&quot;
,&quot;Agustus&quot;
,&quot;September&quot;
,&quot;Oktober&quot;
,&quot;November&quot;
,&quot;Desember&quot;)
document.write(hariarray[hari]+&quot;
&quot;+tanggal+&quot;
&quot;+bulanarray[bulan]+&quot; &quot;+tahun)

</script> </div> 

<div style='font: 15px Arial;
float:right;padding-top:3px;
letter-spacing:.01em;
color:#000000;'>

<a href='http://mohammad.rachmat-sopiandi.com' target='_blank' title='Beranda'>Beranda</a> | 

<a href='http://mohammad.rachmat-sopiandi.com/p/kontak-saya.html' target='_blank' title='Kontak'>Kontak</a> |

 <a href='http://mohammad.rachmat-sopiandi.com/p/daftar-isi.html' title='Daftar Isi'>Daftar Isi</a> | 

<a href='http://alquran.rachmat-sopiandi.com/' target='_blank' title='Al Qur&apos;an Online'>Al Qur&#39;an Online</a> |

<a class='trigger2' href='#' onclick='window.open
(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;
&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;);
return false;
' rel='nofollow' target='_blank' title='English'>Translate</a>

</div>

</div>

</div>

Catatan :

• Yang di kasih warna merah adalah url link sahabat yang mau dituju.
• Yang di kasih warna kuning adalah nama url yang bisa dinamai sesukanya.

8. Kemudian Klik simpan template dan selesai

Demikian tutorial kali ini semoga bermanfaat.

Read more

Microsoft Word Tutorial Cara Hilangkan Garis Merah dan Biru

Garis Merah

Apa kabar sahabat blogger ? semuanya sehat-sehat saja ? semoga semuanya dalam keadaan seperti itu.

Seperti judulnya di atas pada kesempatan kali ini saya akan berbagi tutorial untuk menghilangkan garis merah dan biru di microsoft word.

Bagi sahabat blogger yang kebetulan punya pekerjaan sebagai juru tulis baik di perusahaan, organisasi ataupun di ke-RT an masing-masing tentu salah satu tugasnya adalah membuat surat.

Namun tidak sedikit pekerjaan jadi agak terganggu dengan melihat naskah surat yang kita buat di bawahnya terdapat garis-garis merah dan biru, tentu yang tidak terbiasa akan sangat menggangu sekali kepada pekerjaannya.

Bagaimana cara untuk menghilangkannya garis-garis tersebut ? begini :

1. Klik file di sudut kiri atas.

2. Kemudian klik Options.

gambar 1

3. Klik Proofing.

gambar 2

4. Lalu hilangkan centang yang ada di kotak 1 dan 2, lalu klik OK (kotak 3).

gambar 3

5. Dan sekarang lihat hasilnya.

gambar 4

Garis-garis merah dan biru sudah hilang.

Itulah cara-caranya semoga bermanfaat.

Read more

Tutorial Membuat gambar di postingan memutar dan membesar ketika disorot mouse

Baiklah sahabat blogger pada kesempatan kali ini saya akan membagi tips cara gambar ketika di sorot mouse memutar dan membesar tentunya di dalam postingan.

Sebetulnya tips ini tidak hanya bisa digunakan di dalam postingan saja tetapi di beberapa letak blog juga bisa, namun kali ini saya akan membahas yang di dalam postingan dahulu.

Baiklah kita mulai langkahnya :

1. Masuk ke akun blogger sahabat.

2. Setelah di dashboard pilih opsi selanjutnya dan pilih template.

3. Klik edit html.

4. Selanjutnya cari kode seperti ini </head>.

5. Copy dan pastekan kode berikut di atas kode tadi :

<style type="text/css"> 

 #Gambar_memutar div

 {  height:100px; 

 width:100px;

 border: 3px solid #D8D8D8;

 border-style:double; 

 margin:10px auto; t

ext-align:center;

 -webkit-transition: all 2s ease-in-out; 

 -moz-transition: all 2s ease-in-out; 

 -o-transition: all 2s ease-in-out; 

 -ms-transition: all 2s ease-in-out; 

 transition: all 2s ease-in-out; 

 padding-top:5; 

 padding-left:5; 

 padding-bottom:5; 

 padding-right:5; 

 } 

 #Gambar_memutar div:hover, #Gambar_memutar div.hover_effect 

 { -webkit-transform:rotate(720deg) scale(2,2); 

 -moz-transform:rotate(720deg) scale(2,2);

 -o-transform:rotate(720deg) scale(2,2); 

 -ms-transform:rotate(720deg) scale(2,2); 

 transform:rotate(720deg) scale(2,2); 

 }

 </style>

6. Klik simpan template

Selanjutnya seperti yang telah saya bahas bahwa gambar ini didalam postingan, sahabat ketika masuk di postingan tinggal memasangkan kode <divid="Gambar_memutar"> dan </div>, dan apabila tidak ingin dipakai tidak usah memasangkannya.

Contoh lengkapnya seperti menjadi begini :

<div id="Gambar_memutar"><div class="hover"><a href="http://mohammad.rachmat-sopiandi.com/2013/08/dirgahayu-indonesia-ku.html" target="_blank"><img src="https://i1320.photobucket.com/albums/u531/mohrsop/Pask1c_zps6236c681.jpg" width="100" height="100"/></a> </div> </div>

Catatan : yang disorot warna biru adalah url blog, dan yang disorot warna hijau url gambar sahabat.

Apabila ingin memakai title tinggal menerapkannya dan bisa mengatur panjang dan lebarnya dari width dan height.

Untuk melihat demonya klik tombol DEMO di bawah.

Demikian semoga bermanfaat.

DEMO

Read more

Tutorial Membuat slide show foto atau gambar di blog

Pada kesempatan kali ini saya akan membahas tips cara membuat slide show foto atau gambar yang muncul secara bergantian di dalam blog sahabat masing-masing.

Persiapan awalnya silahkan upload dulu foto atau gambar sahabat di tempat upload gambar (saya sarankan yang gratis aja…he…he…), ada beberapa situs tempat upload saya sarankan tempatnya di sini karena situs ini ga ribet ini itu harus pendaftaran dulu.

Langkah-langkahnya sebagai berikut :

1. Login ke akun blogger sahabat.

2. Di dashboard plih opsi selanjutnya.

3. Klik atau pilih tata letak.

4. Pilih tambah gadget di posisi yang di inginkan sahabat.

5. Copy dan pastekan kode ini :

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script> 
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#content-slider').cycle({ 
fx: 'fade' 
}); 
}); 
</script> 
<style type="text/css"> 
#content-slider { 
position: relative; 
width: 100%; 
height: 250px; 
overflow: hidden; 
margin:0 auto; 
} 
#content-slider img { 
display: block; 
width: 100%; 
height: 250px; 
} 
</style> 
<div id="content-slider"> 
<img src="http://s5.postimg.org/55smbojo7/merah_putih.jpg" />
 <img src="http://s5.postimg.org/tr9y232c7/3_Agustusan.jpg" />
 <img src="http://s5.postimg.org/rbcq1z9nb/badge1.jpg" />
 <img src="http://s5.postimg.org/g0a2dm2s7/badge2.jpg" />
 <img src="http://s5.postimg.org/y4d2y90gn/badge3.jpg" />
 <img src="http://s5.postimg.org/7kkhw3zx3/badge.jpg" />
 <img src="http://s5.postimg.org/90w0e92tz/IMG_20140815_141346.jpg" />

6. Klik simpan dan selesai.

Catatan kode yang diberi warna merah adalah tempat pengaturan gambar, width adalah panjang gambar dan height adalah lebar gambar.

Sedangkan yang dikasih warna pink adalah url gambar sahabat yang sudah di upload tadi.

Untuk contoh gambar slide show silahkan klik tombol DEMO di bawah ini :

DEMO

Demikian semoga bermanfaat.

Read more

Menghilangkan tulisan Home atau Beranda yang berada di bawah postingan

Sahabat blogger biasanya terbagi 2 dalam menghilangkan tulisan beranda ini yaitu yang menghilangkan sama sekali atau ada yang mengganti saja dengan logo/gambar biasanya seperti gambar rumah.

Untuk kali ini saya akan membahas yang menghilangkan sama sekali sehingga tidak terlihat di bawah postingan blog tulisan home atau beranda ini lagi.

Sementara untuk yang hanya mengganti dengan gambar akan saya bahas di postingan selanjutnya.

Langsung saja kita mulai :

1. Masuk ke akun blogger sahabat.

2. Klik opsi lainnya.

3. Pilih template.

4. Klik edit html.

5. Cari kode seperti ini <data:homeMsg/> (lakukan pencarian dengan Ctrl+f lalu tekan
     enter).

6. Hapus/delete kode tersebut.

7. Lakukan klik pratinjau untuk melihat hasilnya sementara.

8. Apabila sudah tidak ada tulisan home/beranda tersebut klik simpan template.

Catatan biasanya tulisan kode tersebut di atas ada yang lebih panjang seperti begini :

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Itu tidak tidak apa-apa silahkan saja mau yang kodenya panjang atau hanya yang pendeknya saja yang dihapus yang terpenting lihat dulu di pratinjau apakah ada perubahan atau tidak.

Sekian itu saja semoga bermanfaat.

Read more