Selasa, 23 Agustus 2011

Tambah Video Blog

Menampilkan Video Dari YouTube

Seseorang bertanya, bagaimana caranya agar pada posting-an bisa menampilkan video dari YouTube ataupun dari website lainnya? Untuk menampilkan video dari youtube sangat mudah sekali, karena you tube memang menyediakan kode yang bisa copy dan di pasang pada website atau blog kita. Nah jika masih bingung, caranya seperti ini :

Langkah #1

Silahkan anda kunjungi situs http://www.youtube.com.

Cari video favorit anda yang sekiranya mau di pasang. Jika masih bingung, anda tinggal tuliskan kata kunci pada mesin pencari di bagian sebelah atas. misal : humor. Setelah muncul pilihan video, tinggal di klik aja link nya.

Alihkan perhatian anda ke bagian sebelah kanan layar. Temukan tulisan → Embed. Misalkan gambarnya seperti ini :

Copy kode yang ada di bawah tulisan → Embed tadi. Paste pada notepad atau text editor lainnya. Simpan kalau perlu.

Silahkan tutup jendela situs youtube jika anda mau.

Langkah #2

Silahkan sign in ke blogger dengan ID anda.

Klik Posting Baru.

Klik tab Edit Html, jangan pada posisi tab Compose.

Copy kode embed yang ada pada notepad tadi, lalu paste pada kolom untuk posting.

Klik tombol MEMPUBLIKASIKAN POSTING

Selesai. Silahkan lihat hasilnya.

Berikut ini adalah contoh video yang saya dapat dari you tube.

Sangat mudah bukan? selamat mencoba !

Baca selengkapnya.....

tambah foto di sidebar

Yang dimaksud sidebar ialah kolom di sisi (kanan atau kiri) yang berisi link artikel baru, link blog, profil penulis, banner iklan dan sebagainya tergantung pengaturan pemilik blog. Kali ini kita akan belajar menambahkan gambar (foto kita, mungkin) di sidebar yang semakin menegaskan bahwa blog tersebut milik kita (narsis, dikit...)

Mari kita mulai menambahkan foto atau gambar ke sidebar. Sebelum memulai, pastikan kita sudah upload gambar yang akan ditambahkan (bisa di image hosting, atau di blog kita sendiri). Sebagai contoh, aku upload gambar yang akan dipakai di artikel blog.

1. Masuk / login ke dashboard blog, klik Kustomisasi / Customize

2. Pada tab Tata Letak / Layout, masuk ke Elemen Halaman / Page Elemen. Klik Add Gadget / Tambah Gadget, di sidebar yang ingin kita tambahi gambar.

3. Pada jendela baru yang muncul, dari daftar gadget yang ada pilih HTML/Javascript.

4. Pada jendela yang muncul tuliskan kode berikut :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv8I4z-IgD-xtZe-9HMle17fi3mOrA7lU0dtcKd65UMaxKate3rLvBgG_v1bjx7gaOMF56jaVE3Tn-BgiPfNj_LSsB3dVTbP0Zmq5-m93iatGSJiUOGJ5V89l8CDrG2UpkeswyMLWvaQo/s400/bunda-alif.jpg" width="100px" style="margin: 0px 10px 10px 0px; float: left"> Buku Harian Bunda Alif berkisah tentang kegiatan sehari-hari bunda alif berkaitan dengan putri kesayangan, Alif, dan curhatan segala permasalahan rumah tangga beserta solusi terbaiknya.

Ganti tulisan warna biru dengan alamat gambar / foto yang akan kita gunakan. Ganti tulisan warna merah dengan ukuran gambar yang dikehendaki. Ganti tulisan warna hijau dengan deskripsi yang ingin anda tambahkan (bisa juga dihilangkan).

Dan inilah hasilnya :

NB : Jika anda mengambil gambar dari postingan / artikel, cara termudah untuk mengambil alamat gambar tersebut adalah dengan klik kanan pada gambar, pilih copy image address (copy image location), dan paste di tempat yang telah ditentukan. Baca selengkapnya.....

efek stabilo

Langsung aja dech kita masuk kepersoalan inti dari postingan ini, " Cara Memberi Efek Stabilo Pada Postingan ". Hmm...sepertinya memang pihak blogspot sendiri tidak menyediakan secara langsung shortcut untuk efek stabilo ini, maka dari itu diperlukan cara manual.

Berikut tutorialnya :

Misalnya saja kita akan membuat seperti dibawah ini:

"membuat efek stabilo di postingan"

Maka kode html yang diperlukan yaitu:

kata yang akan di tulis

nah jika sudah , maka jadilah seoerti ini

"membuat efek stabilo di postingan"

NB: Untuk kode #FF00FF ,merupakan kode warna html, yaitu kode warna pink

Untuk warna yang lain, silakan anda gantikan kode tersebut dengan kode warna HTML yang lain, untuk melihat kode warna html silakan klik DISINI

Baca juga : Membuat tulisan berwarna Baca selengkapnya.....

efek stabilo

Mengganti warna link

Seperti biasa, silahkan masuk ke pengaturan HTML, jangan lupa expand widgetnya jangan dicentang.

Cari kode seperti dibawah ini, lalu ganti kode yang berwarna merah tersebut dengan kode warna yang anda inginkan.

a:link {

color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:#ffcc66;
text-decoration:underline;
}
a img {
border-width:0;

}

Klik simpan, lalu lihat hasilnya..mudah bukan??

Baca selengkapnya.....

menghilangkan Navigasi bar blog

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?
Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}

contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Selamat Mencoba.....!! Baca selengkapnya.....

Mengganti warna latar belakang posting

# Mengganti Warna Background

Untuk template minima klasik :

Sign in
Klik menu Template
Klik menu Edit HTML
Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :

body {
background:#ffffff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Untuk template minima baru :

sign in
Klik menu Layout
Klik menu Fon dan Warna
Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
Selesai.

Mudah bukan?
# Mengganti Background Dengan Image

Untuk template minimal klasik :

Sign in
Klik menu Template
Klik menu Edit HTML
Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :

body {
background:#fff url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

Untuk template minima baru :

Sign in
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
Klik kotak kecil di samping tulisan Expand Template Widget
Tunggu beberapa saat sampai proses selesai
Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :

body {
background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Klik tombol Pratinjau untuk melihat perubahan
Bila sudah OK, klik tombol SIMPAN TEMPLATE
Selesai.

Baca selengkapnya.....

Mengganti font blog

Mengganti font blogger dengan tips terbaru, Selama bertahun-tahun, Blogger dan-web desainer menggunakan font yang sederhana untuk gaya blog mereka dan template mereka. Mereka tidak punya Pilihan untuk mengubah font tersebut. hanya ada beberapa font yang berlaku di seluruh dunia sebagai web font. Mustahil untuk menggunakan font lain pada halaman web !. Jadi web desainer terjebak di bawah mereka font dpt dihitung ...

Tapi sekarang Google telah meluncurkan layanan baru mereka font web Google dengan slogan - 'Membuat Web Indah!'. Layanan ini akan memungkinkan Anda untuk menggunakan font kustom pada direktori font google di blog kita / website tanpa sign-up atau apa pun. Karena dari 'Google', tidak memiliki komplikasi dan benar-benar gratis untuk penggunaan komersial dan umum., Tidak ada pembatasan hukum yang keras. Hal ini bisa membuat blog Anda terlihat lebih bergaya dan berlaku untuk blogger juga. Jangan heran, It's True! Saya akan menunjukkan cara untuk melakukannya dengan blogger.

Langkah 1: Back-up template blogger Anda

Ini selalu untuk langkah pertama untuk blogger tutorial. Aku akan menggunakan langkah ini sebagai langkah pertama untuk semua tutorial saya. Anda harus selalu back-up blogger template Anda sebelum pengujian
hack apapun di blogger.

Untuk ini, pergi ke Desain atau tata letak -> Edit HTML -> download full template

langkah 2: pergi ke Google Font directory
pilih gaya font yang anda inginkan. kemudian klik font tersebut. kemudian pilih get code

Langkah 4: Tambahkan Kode untuk template Blogger Anda
Sekarang Anda harus menyalin kode yang google berikan dan Anda harus menambahkan kode ke blogger template, setelah kode

Penting!! code yang diberikan google adalah seperti ini

dan anda harus menambahkan slash sebelum akhir kode atau mengubahnya seperti ini

Sekarang Salin dan sisipkan kode hanya setelah kode

Harap ingat untuk menambahkan garis miring sebelum tag akhir. dan sekarang, silakan klik Simpan Templatesekarang kode yang diperlukan untuk font web Google telah ditambahkan ke blog Anda. Sekarang Anda harus dapat menggunakan font google di blog Anda dengan menerapkan itu pada setiap tag widget. caranya:

Langkah 5: Tambahkan kode CSS untuk Font untuk Blog Anda.
Sekarang langkah terakhir dan akhir. Dalam langkah ini, Anda harus menentukan di mana Anda ingin menambahkan font dan harus menambahkan kode css untuk itu.
Jika Anda ingin membuat font muncul untuk suatu kalimat tertentu saja dalam posting blog Anda, kemudian gunakan kode HTML; -

FontName', serif;">Your text

FontName: nama font yang dipilih dari google. :

Your text : Tulisan yang ingin iubah fontnya

Anda juga dapat mengatur font itu muncul pada:
* Blog Title
* Post Title
* Posting Artikel
* Font sidebar
Anda harus menambahkan kode CSS untuk itu. Jangan khawatir, itu sangat sangat mudah.Di sini saya akan memberitahu Anda Bagaimana Anda dapat mengubah judul posting Anda. Untuk ini, Anda harus mencari kode css judul

.post h3 atau .post-title h3

Ini adalah kode css umum untuk judul posting di blogger. sekarang kita harus menambahkan kode css untuk font baru tersebut,. Untuk ini, tambahkan / memodifikasi baris-baris di bawah kode di atas. contoh:

.post h3 { font-family: 'Your Font Name'; }

menjadi

.post h3 {
font-family: 'google Font Name ';
}

selamat mencoba !!! Baca selengkapnya.....

membuat link

Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link. Apabila anda seorang blogger (tukang ngeblog kata orang jakarta mah), tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain, jadi kalau anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini, saya akan mengulasnya dalam beberapa sub bagian yakni :

Link pada posting-an

Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet, lalu anda ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :

Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.

Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :

Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan : http://www.resepbisnis.com/?id=rohman

Klik OK. Selesai

Link dengan window baru

Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog anda tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :

Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu yang ada pada toolbar.

Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke http://www.resepbisnis.com/?id=rohman :

klik disini

maka disini anda harus menambahkan embel-embel kode HTML target="new' ataupun target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah :

klik di sini

atau :

klik di sini

atau bisa juga seperti ini :

klik di sini

Buat Links di sidebar

Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik)

Klik menu TEMPLATE

Klik Edit HTML

Klik Edit

Klik Find (on this page)… --> untuk mempercepat pencarian

Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik Find

Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode yang di tulis adalah :

Blog Tutorial

Klik Save Template Changes. Selesai

Sedikit clue untuk anda. Jika anda sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya anda copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila anda melakukan kesalahan, anda bisa mengembalikan kesemula karena sudah mempunyai backup data template tersebut. Atau bisa juga sebelum anda klik Save Template Changes sebaiknya anda klik terlebih dahulu tombol preview untuk melihat perubahan yang anda lakukan, apabila sudah cocok dengan perubahan tersebut baru di save Template Changes. Baca selengkapnya.....

Menghilangkan obeng

Menanggapi pertanyaan dari beberapa blogger… hehehe… kang Rohman serasa jadi konsultan blogger saja ya kalau posting biasanya pake kata-kata tersebut soalnya “ Your Questions is my inspiration” pertanyaan anda adalah inspirasiku. Jadi rahasia kenapa blog ini masih bisa bertahan sampai sekarang adalah karena masih ada yang bertanya ke kang Rohman. So, tentu saja ide untuk posting selalu ada. Eh..eh.. ko…gitu sich.. la ko jadi ngelantur nih, kembali ke judul posting ini ah.

Apa sih maksud dari judul posting ini, sepertinya agak aneh? begini nih teman-teman, jika kita sedang mengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.

Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

Login ke blogger dengan ID anda tentunya.
Klik Tata Letak.
Klik tab Edit HTML.
Cari kode seperti ini :

]]>
Copy paste kode berikut persis di atas kode yang tadi :

.quickedit{
display:none;
}
Klik tombol Simpan template.
Selesai.

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

Baca selengkapnya.....

Senin, 22 Agustus 2011

MEMBUAT READ MORE

Cara Membuat Read More merupakan artikel tutorial yg paling diminati oleh blogger pemula yang baru membuat blog di blogspot, karena Sebuah artikel yang panjang akan banyak memakan tempat di halaman utama sebuah blog, sehingga artikel lain yg ditulis sebelumnya akan jarang dibaca pengunjung karena mereka harus menscroll halaman kebawah terlebih dahulu. Nah, pada belajar ngeblog kali ini saya akan ikut2an membuat tutorial bagaimana cara memotong artikel panjang tersebut dengan membuat read more .. atau baca selanjutnya ..
Membuat Read More di Blogspot
Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin>seperti dibawah ini :

<style>

<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template anda dan tambahkan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

Nah supaya terpotong, setiap kali anda menulis artikel posting, klik pada bagian artikel dimana anda pengen tulisan Read More.. muncul, lalu ketik <span class="fullpost"> kemudian lanjutkan sisa artikel sampai selesai, akhiri dengan mengetik </span>. Untuk menmbahkan kode ini, ketika menulis artikel, anda harus dalam mode Edit HTML bukan Compose
Tulisan Read More.. seperti yang berwarna merah pada kode diatas, bisa anda ganti dengan tulisan lain seperti Baca Selengkapnya.. atau Lanjut Baca..

Contoh Penulisan Posting

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik

Hasil akhir posting akan tampak seperti ini :

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. Read more.. Baca selengkapnya.....

MENGGANTI HEADER BLOG

Header merupakan unsur yang paling penting dalam sebuah blog, karena setiap pengunjung yang datang ke blog anda, pertama kali yang dilihat adalah headernya.
Supaya blog anda terlihat unik atau beda dari yang lain, maka anda harus mengganti tampilan header blog anda.
Bagi yang pengin mengganti tampilan header blog dengan disain yang personal, silahkan ikuti langkah-langkah berikut :

*) Cara Pertama :
Buatlah desain Headernya dengan Program pengolah gambar (Corel atau Photosop) dengan ukuran 847px X 240px. Simpan dalam format JPG atau GIF.
1. Sign in di Blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, Save template Anda untuk backup
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. cari kode berikut pada template Anda :

pada kode maxwidgets='1'. Rubah angka 1 menjadi angka 2, sehingga kodenya menjadi

seperti ini :

8. Klik tombol SIMPAN TEMPLATE

Kemudian ................????????????????

9. Klik menu Elemen Halaman

10. KLik tulisan Edit yang ada pada elemen Header

11. Tunggu beberapa saat

12. Pilih radio button yang ada di samping tulisan dari komputer Anda

13. Klik tombol Browse...

14. Pilih Header yang telah di buat yang ada pada komputer Anda

15. Tunggu beberapa saat sampai proses selesai.

16. Gambar Header Anda akan di tampilkan

17. Klik tombol SIMPAN PERUBAHAN

18. Selesai.

Baca selengkapnya.....