MIN SENGKATI GEDANG: 2013

Jumat, 14 Juni 2013

Cara Singkat,Cepat dan Efektif Mengatur Ukuran Lebar 'Konten Utama / Postingan' Blogger Template

Jika sobat menginginkan ukuran template dapat sobat utak-atik sendiri dengan cara singkat,tak ada salahnya sobat coba trik berikut ini.

Betul gan,sesuai dengan titlenya,mengubah / mengganti / mengarur ukuran lebar template blogger untuk 'widget'.
Main widget,ya ini akan merubah widget yang sobat miliki.Lihat screenshot template berikut ini:

mengatur mengubah mengganti ukuran lebar template blogger.

Lihat gambar dalam ukuran besar

Gambar diatas adalah salah satu contoh dari template yang menggunakan 'blogger template satu kolom'.
Lalu apa hubungannya,ya,jika sobat memiliki template satu kolom,nanti bisa langsung sobat lihat dengan jelas efek dari trik yang akan kita coba nanti.

Namun jika blogger template yang sobat gunakan bukan 'satu kolom' kemungkinan trik ini hanya akan mengatur ukuran lebar area widget.

Caranya sangat mudah,Pertama, masuk ke akun Blogger sobat, buka tab Edit HTML dan contreng tulisan "Expand Widget Templates"

Selanjutnya cari kode :

body { (gunakan CTRL+F untuk mempermudah pencarian)

Biasanya akan tampak seperti ini:

Lihat gambar dalam ukuran besar

Nah,jika sobat sudah ketemukan tepat diATASnya letakkan kode berikut ini:

.widget { padding-bottom:30px; margin-left:70px; margin-right:70px; padding-top:0px; }

Sehingga akan tampak seperti gambar ini:

Lihat gambar dalam ukuran besar

Nah,angka dalam kode yang berwarna merah diatas,gantilah sesuai dengan keinginan,semakin besar nilainya,maka widget akan semakin menyusut kedalam alias menyempit.

Simpan template dan lihat hasilnya.Selamat berkreasi ya gan!

Cara Cepat Upload Foto ke Picasa

Salam hangat sahabat blogger, pada postingan kali ini Bloggerafif akan berbagi cara cepat upload foto ke Picasa. Picasa adalah hosting image milik google, biasanya image atau gambar atau foto yang blogger sertakan di dalam postingan blog akan otomatis tersimpan dalam server picasa ini, jika anda uploadnya melalui dasboard postingan di Blogger. Terkadang bloggerafif sering mengalami proses upload yang terlalu lama, karena musti harus login dulu ke blogger atau login ke picasa. Padahal upload ke picasa juga tergantung tujuannya masing-masing, hanya sekedar disimpan atau disimpan kemudian di publish di forum atau blog sendiri.
Tips Trick blogger kali ini kita akan bahas cara cepat upload foto ke picasa. Silahkan anda ikuti dengan perlahan.
1. Pastikan browser yang anda gunakan adalah Mozilla Firefox. Bloggerafif sendiri untuk tutorial tips trick ini menggunakan firefox v.6.0

2. Install addons yang dibutuhkan. Addons inilah yang menjadi kunci anda bisa uplaod secara cepat ke hosting picasa. Kita gunakan addons Universal Uploader (fireuploader). Silahkan anda download dan install.

3. Setelah terinstall, pastikan anda sudah memilih Picasa.
Lalu klik tombol Manage Account. Tambahkan account google anda disini, seperti ini.
cara cepat upload foto ke picasa

4. Untuk upload image / foto, anda tinggal browse tempat image / foto tersebut tersimpan di dalam komputer anda, lalu tinggal pindahkan ke kotak sebelah kanan.
cara cepat upload foto ke picasa

5. Sedangkan untuk keperluan share foto ke blog anda tinggal pilih foto disebalah kotak yang kanan. Lalu akan muncul preview foto tersebut dibagian bawah. Silahkan klik kanan foto tersebut, dan klik Copy Image Location.

6. Buka halaman posting blogger, dan insert picture, pilih from url. Lalu pastekan url foto tadi pada kotak tersebut.
cara cepat upload foto ke picasa

Pastikan yang anda paste adalah link foto tersebut, dengan menghapus tulisan terakhir ?imgmax=160 pada link yang sudah anda copy
Semoga berhasil. Bloggerafif sering menggunakan tools ini, dan sangat membantu sekali. Baca tulisan bloggerafif yang lainnya seperti Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda dan mohon dukungannya untuk share ke facebook dan twitter pada artikel tersebut.

Menggunakan Blogger Sebagai Hosting ScriptTips Trick Menggunakan Blogger Sebagai Hosting ScriptBanyak blogger saat i ... [more]
Cara Memasukkan File Swf Kedalam Postingan BlogSeperti pada posting Terkadang anda mempunyai sebuah file berupa swf yang ... [more]
Membuat 2 Kolom Sidebar BlogspotTemplate bawaan blogspot biasanya secara default hanya memliki sidebar den ... [more]
Melakukan Optimasi Permalink Title di BlogspotSetiap anda membuat sebuah judul atau title untuk posting blogspot anda, m ... [more]
Memasang Icon YM di BlospotApakah anda ingin menghubungkan Yahoo dengan blogspot anda? Kita bisa meng ... [more]

Cara Membuat Gallery Foto Bergerak di Blogspot

Cara Manual Membuat Gallery Foto Bergerak Di Blogspot - Salam manis buat teman-teman bertuah sekalian. Dulu saya pernah ditanyain teman saya bagaiman caranya membuat koleksi foto atau Gallery di blog. Belakangan ini juga banyak yang nanyain kesaya bagaimana cara membuat koleksi foto tersebut agar bergerak dan kelihatan dinamis. Gallery foto tersebut dibuat secara manual. Jawaban saya singkat saja, tambahin aja script Marquee diantara script image tersebut. Tapi teman saya malah kebingungan dengan jawaban yang saya kasi. Mau tau caranya ? Wah bagi yang udah bisa jangan bosan ya ! saya cuma berbagi sama teman-teman pemula yang ingin memperdalam script dasar HTML por eksempel "script marquee". Mudah kok ! Berikut langkah-langkahnya :

Setelah itu pilih menu “Tata Letak”.

Trus, tambahin Gadget dengan cara memilih menu “Tambah Gadget”.

Pilih menu “HTML/JavaScript”.

Isi kotak judul dengan judul galery anda, misalkan "My Sweet Gallery".

Pada kotak “Konten”, ketik/copas Script yang bertulis tebal dibawah ini :
<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><img src=”alamat_gambar_anda.jpg” width=”120” height=”70”></marquee>

Gantikan alamat gambar “src” yang berwarna merah pada script <img src=”alamat_gambar_anda.jpg” width=”120” height=”70”> dengan alamat gambar anda, kalo belum ada upload dulu ke Picasa, FhotoBucket, dll, trus ambil URL-nya dan pastekan pada tulisan yang berwarna merah. Sedangkan "width" dan "height" untuk mengatur ukuran lebar dan tinggi gambar sesuai dengan selera anda. Conoth diatas, hanya untuk satu gambar/image/foto. Kalau pengennya lebih dari satu, silahkan CoPas aja script image tersebut sebanyak gambar/image/foto yang anda inginkan. Lihat contoh dibawah ini :
<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()">
<img src=”alamat_gambar_1_anda.jpg” width=”120” height=”70”>
<img src=”alamat_gambar_2_anda.jpg” width=”120” height=”70”>
<img src=”alamat_gambar_3_anda.jpg” width=”120” height=”70”>

</marquee>

Setelah itu klik tombol “Simpan” untuk menyimpan gadget yang barusan anda buat.

Jangan lupa untuk mengatur tata letak Gadget anda disebelah mananya biar rapi.

Terakhir, klik "simpan" lagi pada tampilan rancangan anda dan coba lihat blog anda dengan membuka baru atau tekan tombol “Refresh” pada web browser jika blog anda sudah terbuka.

Selamat Mencoba !!! Dan maaf kalau terjadi error, silahkan tanya lagi kesaya kalau ada yang error !!! Link Artikel Original Penulis: Script Marquee Bikin Image Lebih Dinamis

Rabu, 12 Juni 2013

Cara Membuat Menu Bar dan Sub Menu Bar di Blog

Halo sahabat semua, kali ini Info Bagus Fakta Bagus akan berbagi cara membuat sub menu bar di blog. Sub menu bar sangat diperlukan bagi setiap blogger sejati. Bagi para pengunjung hal ini juga sangat dibutuhkan guna mencari informasi berdasarkan pada kategori di sub menu bar. Memberi sub menu bar juga membuat blog kita tampak lebih tampan, teratur, dan praktis (tidak acak-acakan). Langkah-langkahnya berhubungan dengan edit HTML. Bagi para blogger pemula mungkin akan merasa sulit, tetapi sebenarnya hal ini sangat mudah. Ikuti saja langkah-langkah yang kami jelaskan di bawah ini.

Ok, setelah berbasa-basi. Let's check it out...

Berikut ini langkah-langkah yang harus dilakukan :

Klik Menu Desain

Pilih Menu Template lalu pilih menu Edit HTML

Pilih/klik menu Lanjutkan

Pilih/klik menu Expand Template Widget

<div class='main-outer'> atau
<div id='main-wrapper'> atau <div id='main'>

Cari scrift berikut :

Agar lebih mudah, klik saja ctrl+F pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>.

Bisa jadi beda dengan template yang lain…

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi :

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li { height:30px; border-top:1px solid #fff; }

#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<li><a href='#'>Beranda</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

PENJELASAN :

Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan.

7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.

Saran : back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.

8. Untuk menghilangkan tampilan tampilan dabel dengan Laman Utama,
Maka ikutilah saran berikut :

Masuk ke Menu Laman
Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"
Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.

Blog sudah bisa dipublikasikan...

Apabila melalui cara yang kami bagikan ini belum berhasil, coba sahabat ulangi lagi dengan sabar. jika berkali-kali memang tidak bisa, sahabat bisa berkonsultasi dengan Info Bagus Fakta Bagus melalui komentar di bagian bawah ini.

Semoga bermanfaat kebaikan.

Cara Menghapus Widget Blog Yang Terkunci

Widget terkunci atau dengan kata lain widget blog anda tidak dapat di edit,hapus atau di pindahkan,ini di sebabkan oleh perubahan HTML
Pengalaman pribadi saya,widget terkunci di karenakan saya menggunakan template blog yang saya unduh dari berbagai situs,
nah untuk merubah widget yang terkunci,inilah caranya :
1. Login ke akun Blogger
2. Masuk ke template - edit HTML trus cari kode berikut <b:widget id=
3. Ganti tipe 'true' menjade 'false' atau begini
<b:widget id='HTML4' locked='true' title='' type='HTML'/>
menjadi

<b:widget id='HTML4' locked='false' title='' type='HTML'/>

4.setelah save/simpan template

Untuk mengetahui apakah widget masih terkunci atau tidak,

silahkan masuk ke menu tata letak dan edit widget yg terkunci tadi,Jika widget sudah terbuka perbedaannya adalah,bisa di edit isinya,bisa di hapus dan bisa di pindah

sekian tips bloger kali ini

Mengatasi tidak bisa add a gadget pada tata letak blogger

Mengatasi tidak bisa Add a Gadget atau tambah gadget pada blog bisa kita jumpai di tata letak.Atau menemukan masalah seperti widget yang terkunci,silahkan baca Cara Menghapus Widget Blog Yang Terkunci.

Biasanya bagi para blogger yang menggunakan template bawaan,jarang menemukan masalah ini.
Karena pengalaman saya,masalah ini saya temukan ketika saya menggunakan template yang di sediakan oleh berbagai situs di internet.Memang pada tujuanya si pembuat template menginginkan hal seperti itu untuk kepentingan "no edit",

Setelah saya googling sana sini akhirnya saya menemukan solusinya,yang ternyata sangat mudah.
Pertama Login ke blogger. Klik Layout/Template -> Edit HTML -> Expand Template Widget
Cari kode berikut:

<div id='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

atau jika bukan Di bagian header masalahnya,anda tingal cari saja code maxwidgets='1' showaddelement='no'> Karena inilah sumber bencananya.

Yang harus kita lakukan,adalah menganti angka '1' menjadi berapapun yang anda inginkan,terus ganti 'no' menjadi yes.
Tambahan ,jika anda menemukan yang seperti ini

maxwidgets='1' preferred='yes' showaddelement='no'>

Tinggal di buang saja code preferred='yes'.
Sekian dulu tentang Mengatasi tidak bisa add a Gadget Pada Tata letak blogger semoga bermanfaat

Tips Penting Cara Simpan Kode CSS di Template

Menyimpan kode CSS sepertinya hanya persoalan sepele. Sesuatu yang terkadang membuat kita tidak cermat dan berhati-hati. Masalah penempatan terutama. Masih banyak blogger yang belum mengetahui secara tepat bagaimana tempat dan cara yang paling tepat untuk menyimpan kode CSS di template, baik melalui halaman "Edit HTML" atau menggunakan Add a Gadget yang terletak di "Page Elements/Elemen Laman". Ketidak tahuan ini sebenarnya tidaklah berbahaya bagi desain blog, akan tetapi sering terjadi sebuah desain HTML baru yang sebenarnya hendak dipakai atau diterapkan di blog ternyata tidak berfungsi sebagaimana yang diharapkan. Persoalan ini sepanjang seluruh kode CSS sudah ditulis dengan benar, sebenarnya terjadi pada penggunaan tag style yang terdiri dari tag pembuka (<style type="text/css">) dan tag penutupnya (</style>).

Rahasia kecil penggunaan tag style

Gunakan tag style saat menyimpan kode CSS di bawah kode ]]></b:skin>.
Gunakan juga tag style saat penyimpanan kode CSS dilakukan melalui Add a Gadget/Tambah Gadget (Widget HTML/Javascript).
Jangan gunakan tag style saat kode CSS disimpan di atas kode ]]></b:skin>.
Untuk kode CSS yang telah di upload di file hosting, gunakan kode seperti berikut untuk menyimpan di template. <link href="URL CSS" rel="stylesheet" type="text/css" />. Penyimpanan bisa dilakukan di atas kode <head> atau melalui Add a Gadget/Tambah Gadget.

Cara Menyimpan Kode CSS di atas ]]></b:skin>

Login : Login ke Blogger/Login to Blogger.
- Tulliskan User Name/Nama Pengguna pada box yang telah disediakan. Selain User Name anda dapat juga menggunakan Alamat Email/Email Address.
- Lanjutkan dengan menuliskan Password/Kode Rahasia/Sandi.
- Setelah semua di isi dengan benar, KLIK Login
Dasboard/Dasbor : Halaman dasbor ini akan terlihat sesaat setelah klik login. Temukan link Design/Rancangan. KLIK lin tersebut, kemudian tunggu beberapa saat hingga terlihat halaman baru "Page Elements/Elemen Laman yang merupakan bagian dari Design/Rancangan.
KLIK link Edit HTML.
Di depan anda akan terlihat deretan kode HTML. Disinilah kode ]]></b:skin> tersimpan. Cari kode tersebut dengan menggunakan Ctrl+F. Jika mengalami kesulitan tentang penggunaan Ctrl+F, silahkan buka tutorial tentang masalah ini dengan membuka link berikut: Panduan cara Mencari Kode HTML di Template
Letakkan kode CSS tepat di atas kode ]]></b:skin>.
KLIK SAVE Templates/Simpan Template..

Contoh penempatan kode CSS di atas ]]></b:skin>

.post-body {
        height: 400px;
        overflow: auto;
        overflow-x: hidden;
        margin: 0;
        padding: 0 10px 0 0;
}

]]></b:skin>

Cara Menyimpan Kode CSS di bawah ]]></b:skin>

Penyimpanan kode CSS di bawah kode tersebut harus menggunakan tag style, sedang langkah untuk melakukan proses penyimpanan kode seperti langkah di atas.

Contoh posisi kode CSS saat di simpan di bawah kode ]]></b:skin>:

]]></b:skin>

<style type="text/css">
.post-body {
        height: 400px;
        overflow: auto;
        overflow-x: hidden;
        margin: 0;
        padding: 0 10px 0 0;
}
</style

Cara Menyimpan Kode CSS melalui Add a Gadget (Tambah Gadget)

Untuk menyimpan kode kode CSS melalui Add a Gadget, langkah yang harus ditempuh sama dengan di atas.

Setelah login hingga terlihat "Page Elements/Elemen Laman". Di halaman ini terdapat beberapa box yang sebagian bergaris putus-putus dengan tulisan Add a Gadget/Tambah Gadget. KLIK pada bagian tersebut dan tunggu hingga terbuka window baru.
Add a Gadget : Ada beberapa widget yang disediakan Blogger. Cari dan klik widget HTML/Javascript.
Setelah box penyimpanan kode terlihat, pastekan kode CSS di sini. Apabila kode CSS yang akan disimpan belum menggunakan tag style, anda harus menambahkannya sehingga bentuknya akan seperti di bawah ini.
KLIK SAVE/Simpan setelah kode ditulis dengan benar

Contoh penyimpanan kode melalui Add a Gadget:

<style type="text/css">
.post-body {
        height: 400px;
        overflow: auto;
        overflow-x: hidden;
        margin: 0;
        padding: 0 10px 0 0;
}
</style>

Kode CSS dalam bentuk link (telah di upload di file hosting)

Anda dapat menyimpan file kode CSS ini melalui Add a Gadget atau di atas kode <head> yang terletak di bagian teratas template. Untuk mencari kode tersebut anda juga bisa memanfaatkan "Ctrl+F". Pproses penyimpanan seperti cara yang sudah dilakukan di atas.

Di atas <head>

Contoh penempatan link kode CSS:

<link href="http://stashbox.org/958324/file.css" rel="stylesheet" type="text/css" />

<head>

Untuk penyimpanan melalui Add a Gadget, anda langsung masukkan link ke dalam box dan lanjutkan KLIK SAVE/Simpan.
Contoh bentuk file kode CSS:

<link href="http://stashbox.org/958324/file.css" rel="stylesheet" type="text/css" />

Semoga bermanfaat!

Happy Blogging ....!

Cara Membuat Menu Horizontal Tabs di Blogspot

obat Darmanto semua,pada Tutorial Blog kali ini saya akan berbagi Cara Membuat Menu Horizontal untuk Blogger/Blogspot.Cara Membuat menu horizontal ini sangat mudah dan berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Catatan ini untuk memberikan jawaban salah seorang sobat pada catatan saya yang berjudul Cara membuat halaman blog.

Langsung saja inilah Tutorial blog bagi para sobat untuk Cara Membuat menu horizontal pada blogger/blogspot:

1.Login ke dasbor blog milik sobat
2.Klik Template-Edit HTML dan centang Expand Template Widget
3.Copy kode CSS dibawah ini dan letakkan kode tersebut tepat diatas kode ]]></b:skin>

/* Navigasi tabs Sederhana darmanto.com Starts */
a.darmantotabs, a.darmantotabs:link, a.darmantotabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.darmantotabs:hover {color:#FFFFFF; background:#666666;}
#darmantobar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

4.Klik Simpan.

Setelah memasukkan kode CSS pada template blog milik sobat,buka Tata Letak,Tambah Gadget dan pilih HTML/JavaScript.
Copy dan paste kan kode dibawah ini pada kolom HTML/Javascript:

<div id='darmantobar'>
<a href="#" class="darmantotabs">Home</a>
<a href="#" class="darmantotabs">About</a>
<a href="#" class="darmantotabs">Blog Tips</a>
<a href="#" class="darmantotabs">SEO Tips</a>
<a href="#" class="darmantotabs">Contact</a>
<a href="#" class="darmantotabs">Sitemap</a>
<a href="#" class="darmantotabs">Advertise</a>
</div>

Setelah itu Simpan.

Keterangan Cara mengisi Menu Horizontal

-Ganti # dengan URL yang dikehendaki. Ganti juga Home,About, Blog Tips, SEO Tips, dan seterusnya dengan anchor text/judul menu tabs yang diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="darmantotabs">Anchor Text</a> di atas </div>.

- Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan simpan lagi.

-Demo hasil Tutorial Blog Membuat menu horizontal bisa sobat liat seperti pada gambar diatas.

OK sobat Darmanto semua,semoga Tutorial Blog pada catatan kali ini mengenai Cara Membuat Menu Horizontal di Blogspot/blogger berhasil sobat praktekkan.Bila ada yang masih bingung silahkan sampaikan pada kolom komentar.