Home Posts filed under Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Selasa, 28 Juli 2015

Cara Membuat Kontak Form Responsive

bisnis 11.44

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 :

Setting opsinya nama dan email
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.

Selasa, 05 Mei 2015

Blogger Tutorial

Cara pasang video Youtube di blog SEO Friendly

bisnis 10.01

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 :

Ganti menjadi :

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

Demikian semoga bermanfaat dan di bawah ini contoh videonya.

Jumat, 13 Maret 2015

Blogger Tutorial

Tutorial Membuat Tanggal Permanen dan Top Navigasi

bisnis 08.55

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='"loading" + data:blog.mobileClass'>.

7. Copy dan letakan kode ini di bawahnya :

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
("Minggu"
,"Senin"
,"Selasa"
,"Rabu"
,"Kamis"
,"Jum'
at"
,"Sabtu")

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

</script> </div>

<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'an Online'>Al Qur'an Online</a> |

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

</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.

Minggu, 08 Maret 2015

Blogger Tutorial

Tutorial Membuat gambar di postingan memutar dan membesar ketika disorot mouse

bisnis 18.11

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 :

#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 :

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

Jumat, 06 Maret 2015

Blogger Tutorial

Tutorial Membuat slide show foto atau gambar di blog

bisnis 17.35

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 :

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.

Blogger Tutorial

Menghilangkan tulisan Home atau Beranda yang berada di bawah postingan

bisnis 07.30

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 :

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.

Rabu, 04 Maret 2015

Blogger Tutorial

Menghilangkan tulisan diberdayakan oleh blogger

bisnis 22.40

Setelah postingan sebelumnya saya membagi menghilangkan gambar obeng dan kunci baud sewaktu mengedit blog, kali ini saya akan membagi tutorial cara menghilangkan tulisan diberdayakan oleh blogger.

Namun sebelum saya mulai ada baiknya sahabat mengingat kembali tentang TOS yang dikeluarkan oleh google melalui blogger untuk tidak menghilangkan hak cipta yang dikeluarkan oleh blogger, walaupun sebenarnya saya kurang begitu tahu apakah dengan menghilangkan tulisan diberdayakan oleh blogger melanggar TOS dari blogger.

Oleh sebab itu setelah tulisan diberdayakan oleh blogger dihilangkan ada baiknya sahabat mengganti dengan semisal Powered by Blogger seperti yang ada di blog saya ini (padahal artinya sama saja he..he…) tapi itu lebih keren kan….dan tidak menghilangkan hak cipta google melalui blogger.

Baik kita mulai saja langkah-langkahnya :

Cara pertama :

1. Login ke akun blogger sahabat.

2. Klik pilih template.

3. Klik edti template.

4. Cari kode seperti ini ]]></b:skin>.

5. Copy dan paste kan kode berikut di atas kode tadi

#Attribution1{ height:0px; visibility:hidden; display:none; }

6. Klik simpan template.

Cara kedua :

1. Lakukan langkah 1 sampai 3.

2. Cari kode seperti ini : (lakukan pencarian menggunakan Ctrl+f lalu tekan enter)

3. Jika template sahabat adalah template yang disediakan oleh blogger maka kodenya akan terlihat seperti ini :

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != ""'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

4. Jika sudah ketemu hapus/delete semua kode tadi (sebelumnya biasanya akan muncul
peringatan apakah sahabat akan membuang widget tulian Powered by blogger tersebut ?
pilih delete dan klik simpan template.

Demikian tutorial ini semoga bermanfaat.

Selasa, 03 Maret 2015

Blogger Tutorial

Menghilangkan gambar obeng dan kunci baud sewaktu mengedit blog

bisnis 16.38

Sahabat blogger pernahkah teralami oleh sahabat saat mengedit blog, ketika sedang di lihat tampilan blognya atau ada orang lain yang mampir ke blog sahabat ada gambar obeng dan kunci baud nongkrong terlihat di blognya sahabat ?.

Apabila itu terjadi orang lain memastikan bahwa blog sahabat sedang diperbaiki atau di edit dan biasanya kita yang punya blog sedikit nggak enak melihatnya (maaf itu sih.pendapat saya).

Dalam bahasa asingnya itu biasanya di sebut Qiuck Edit atau tombol pengeditan cepat langsung ke tujuan yang diperbaiki, namun bagi sahabat yang tidak enak melihat pemandangan itu atau orang lain tidak ingin tahu bahwa blognya sahabat sedang di edit di sini saya akan membagi 2 tips untuk mengakalinya supaya gambar-gambar tersebut hilang dari pandangan mata.

Cara pertama :

1. Masuk ke akun blogger sahabat.

2. Klik tab template.

3. Klii edit html.

4. Cari kode seperti ini ]]></b:skin> (untuk memudahkan gunakan ctrl+f lalu tekan enter).

5. Copy kode berikut dan paste kan tepat di atas kode tadi :

.quickedit{ display:none;}

6. Klik simpan template.

Cara kedua :

1. Lakukan langkah 1 sampai 3.

2. Cari kode seperti ini <b:include name='quickedit'/> (untuk memudahkan gunakan ctrl+f lalu tekan enter).

3. Hapus/delete semua kode tersebut.

4. Klik simpan template.

Kemudian lihat hasilnya, gimana mudah bukan…semoga bermanfaat dan selamat mencoba.

Minggu, 01 Maret 2015

Blogger Tutorial

Membuat tombol kembali ke atas

bisnis 22.24

Pada kesempatan kali ini saya akan memberikan tips untuk membuat tombol kembali ke atas yang biasanya di simbolkan dengan tulisan ataupun gambar berupa tanda panah menghadap ke atas seperti dicontohkan pada gambar.

Pada blog sahabat ketika para pengunjung setelah melihat-lihat blog sahabat sampai ke bawah unutk kembali ke atas blog sahabat lagi, kita biasanya ingin mudah dan praktis oleh karenanya kita memasang tombol untuk kembali ke atas yang pada kali ini saya memasang gambar berupa tanda panah menghadap ke atas.

Sepertinya muter-muter terus…ayo kita langsung saja praktek, ini langkah-langkahnya :

1. Masuk dengan akun blogger sahabat.

2. Pilih halaman dan langsung ke tata letak.

3. Klik tambah gadget (bisa sembarang yang mana saja).

4. Pilih html / javaSricpt.

5. Copy dan paste kan kode di bawah ini :

6. Terakhir klik simpan dan lihat hasilnya.

Semoga bermanfaat.

Sabtu, 28 Februari 2015

Blogger Tutorial

bisnis 23.07

Kali ini saya akan membahas tentang cara menghilangkan tulisan Langganan: Entri (Atom) yang biasanya ada di sebelah kiri bawah blog anda.

Langsung saja ada sepengetahuan saya ada 2 cara untuk melakukan hal tersebut :

Cara pertama :

masuk ke akun blogger anda lalu pilih template dan edit html.
Cari kode ]]></b:skin> (akan lebih mudah gunakan Ctrl+f kemudian tekan enter)
Setelah ketemu copy dan paste kan kode berikut di atas kode tadi :

.feed-links{

display:none;

}

Kemudian klik simpan template.

Cara kedua :

Ikuti langkah 1 sampai 3 di atas cari kode :

<b:include data='feedLinks' name='feedLinksBody'/>

Hapus/delete semua kode di atas lalu simpan template dan selesai dan lihat hasilnya.

Semoga bermanfaat.

Sabtu, 05 Oktober 2013

Blogger Tutorial

Tutorial Blogger

bisnis 11.50

Logo Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Hari ini adalah hari Tentara Nasional Indonesia (TNI) yang ke-68, “DIRGAHAYU TNI”, tetapi saat ini saya tidak akan membahas tentang TNI (nggak nyambung…), saya hanya akan memberikan beberapa LINK untuk tutorial BLOGGER, yang sebagian sudah dipraktekan dalam BLOG saya ini.

Oke langsung saja ke TKP ini dia beberapa link tutorial blogger :