Showing posts with label Tips Trik Blogger. Show all posts

Showing posts with label Tips Trik Blogger. Show all posts

Saturday, 8 January 2011

Membuat Title Berjalan

Masuk Ke Web:
http://www.bosiljak.hr/titlemaker/
Lalu masukan Add title bar message: (dengan tulisan anda)
Contoh di blog saya
pilih effect di Choose an effect:
lalu preview
Lalu klik OK Generate Code

Jika sudah selesai Login ke blogger
Rancangan>>Elemen Laman
Tambah Gadget>>>HTML/javascript

Copt paste Generate code Tersebut
Simpan

(Gadget dapat di taruh di mana saja)

Wednesday, 5 January 2011

Memasang Widget Tab View Pada Blog

Beberapa waktu yang lalu ada yang menanyakan kepada saya bagaimana cara untuk membuat menu tab view seperti pada blog ini. Tetapi karena penjelasannya lumayan rumit jadinya sampai sekarang baru sempat saya posting.

Nah bagi anda yang belum tahu apa itu tab view. Tab view adalah sebuah widget yang mempunyai fungi tab dimana setiap tab bisa mewakili satu widget atau konten sehingga bisa menghemat ruangan padablog anda. Contoh tampilannya seperti gambar dibawah ini.

Ok tanpa panjang lebar bagi anda yang tertarik untuk memasang widget tab view ini di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color: #ffffff">Tab 1</span></a>
<a><span style="color: #ffffff">Tab 2</span></a>
<a><span style="color: #ffffff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://hermanblog.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Keterangan:
Tulisan berwarna merah merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
Tulisan berwarna orange merupakan warna judul Tab
Tulisan berwarna hijau merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 180 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

4. Kalau sudah, klik Save. Selesai

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya.

Optimasi Tampilan Blog Dengan Template Baru

Setelah memiliki konten-konten yang bermanfaat. Hal berikutnya yang harus diperhatikan adalah layout blog. Layout blog cukup penting karena banyak pengunjung yang mengutamakan penampilan dari sebuah blog. Jika tampilan blog Anda menarik maka pengunjung akan tertarik untuk membaca isi blog Anda dan terpenting adalah mereka akan selalu mengingat blog Anda.

Salah satu cara untuk mengoptimalkan tampilan blog adalah dengan memakai tempate yang bagus. Sebenarnya blogger menyediakan cukup banyak template yang bisa kita pakai untuk mengoptimalkan tampilanblog hanya saja pada saat kita membuat blog baru, template tersebut tidak ditampilkan semuanya. Untuk melihat semua template yang disediakan blogger. Masuk ke menu Design -> Template Designer.

Jika Anda merasa templatenya kurang menarik. Anda bisa menggunakan template modern yang dikembangkan oleh pihak ketiga. Banyak layanan yang menyediakan template blogger secara gratis. Jika Anda mengetik kata kunci "free blogger template" di Google. Anda akan menemukan banyak website yang menyediakan template gratis bagi blogger. Salah satu layanan yang cukup bagus yang saya pakai adalah eblogtemplates.com. Website ini menyediakan ratusan template unik dan bagus. Ada yang 2 kolom, 3 kolom, dan 4 kolom. Semuanya disediakan secara gratis.

Setelah Anda menemukan template idaman Anda. Pasanglah templatenya pada blog Anda. Untuk cara pemasangannya silahkan ikuti langkah-langkah berikut:

1. Login ke Blogger. Klik menu Design -> Edit HTML

2. Backuplah terlebih dahulu template Anda sebelum memasang template baru supaya Anda bisa mengembalikan lagi jika terjadi error pada template baru. Caranyaklik Download Full Template pilih Save File lalu tekan OK.

3. Setelah selesai membackup. Klik Browse, cari template yang ingin dipasang lalu klik Upload. Jika ada muncul konfirmasi "Widgets are about to be deleted". Itu berarti widgets yang dipasang pada template lama akan dihapus. Nah untuk yang ini pastikan terlebih dahulu apakah widgets tersebut penting atau tidak jika penting backuplah terlebih dahulu widgetsnya sebelum Anda mengganti template baru
4. Jika sudah, klik Confirm & Save lalu klik View Blog untuk melihat hasilnya.

Mengenali Fungsi-Fungsi Dalam menu Setting Blog

Sebagai blogger pemula kadangkala kita akan kebingungan dengan fungsi-fungsi yang tersedia pada blogger. Padahal jika diatur dengan baik kita bisa mengoptimalkanblog kita dengan maksimal.

Pada postingan ini saya akan memberi sedikit penjelasan mengenai fungsi-fungsi dalam menu setting. Supaya teman-teman bisa lebih mudah untuk mengoptimalkan blognya.

1. Menu Settings -> Basic

Blog Tools: untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog)
Title: untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp)
Description: untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog
Add your blog to our listing: untuk mengatur apakah blog anda mau ditampilkan pada menu blogger seperti blogger play dan next blog atau tidak
Let search engines find your blog: Untuk mengatur apakah blog anda mau di index di halaman mesin pencari Google dan Weblogs.com atau tidak
Show quick editing on your blog: untuk menampilkan icon quick edit pada postingan yang berfungsi untuk mengedit postingan secara langsung dari halaman blog
Show email post links: untuk menampilkan icon berbentuk amplop pada postingan yang berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via email
Adult Content: untuk menentukan apakah blog kita mengandung konten porno atau tidak
Select Post Editor: untuk memilih jenis post editor yang ingin anda gunakan
Enable Transliteration: untuk mengaktifkan fungsi terjemahan pada post editor kedalam bahasa yang dipilih.

2. Menu Setting -> Publishing

Custom domain: Untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll
Blogspot Address: Kalau custom domain untuk mengganti alamat blogspot ke domain sendiri maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain. (yang belum terdaftar)
Word Verification: kode verifikasi

3. Menu Setting -> Formatting

Show at most: untuk menentukan jumlah postingan yang mau ditampil pada halaman blog
Date Header Format: Untuk menentukan format tanggal yang mau ditampilkan diatas judul posting
Archive Index Date Format: untuk menentukan format tanggal yang mau ditampilkan pada menu arsip yang terletak di kolom sidebar
Timestamp Format: untuk menentukan format waktu yang mau ditampilkan pada postingan
Time Zone: untuk menentukan zona waktu tempat tinggal kita. Misalnya (GMT+07.00) Jakarta untuk wilayah Indonesia
Language: untuk memilih bahasa yang mau digunakan
Convert link breaks: untuk mengatur apakah mau dikonversi kode tag pada post editor secara otomatis. Biarkan Yes saja.
Show Title Field: untuk menampilkan judul postingan. Jika pilih No maka blogger akan mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih Yes saja
Show Link Field: untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika tidak ada, pilih No saja
Enable Float Alignment: untuk mengaktifkan fungsi penjajaran pada text dan gambar
Post Template: untuk mengisi teks yang mau ditampilkan pada kotak posting

4. Menu Setting -> Comments

Comments: untuk menampilkan kotak komentar
Who Can Comment: untuk menentukan siapa yang boleh memberi komentar
Comment Form Placement: untuk menentukan dimana letak kotak komentar
Comments default for posts: untuk mengatur apakah mau diberi komentar pada postingan baru atau tidak
Backlinks: untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada artikel kita atau tidak
Backlinks default for posts: untuk mengatur apakah mau mengaktifkan fungsi backlinks atau tidak
Comments Timestamp Format: untuk memilih format waktu yang mau ditampilkan pada kotak komentar
Comment Form Message: untuk menampilkan pesan singkat diatas kotak komentar
Comment Moderation: untuk menyaring komentar yang masuk sebelum diposting
Show word verification for comments: untuk menampilkan kode verifikasi jika ada yang ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam
Show profile images on comment: untuk menampilkan gambar profil dari komentator yang memiliki blog di blogger
Comment Notification Email: untuk mendapatkan pemberitahuan dari blogger melalui email jika ada yang meninggalkan komentar

5. Menu Settings -> Archiving

Archive Frequently: untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan
Enable Post Pages: mengaktifkan halaman posting untuk setiap artikel

6. Menu Settings -> Site Feed

Allow Blog Feed: untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email
Post Feed Redirect URL: untuk mengisi alamat URL Feed Anda. Jika belum punya dikosongin aja
Post Feed Footer: untuk mengisi teks tambahan pada feed

7. Menu Settings -> Email & Mobile

Blogsend Address: untuk mendapat kiriman postingan ke alamat email Anda setiap kali Anda memposting pada blog Anda.
Email posting address: untuk menentukan alamat email blogger yang Anda inginkan. Supaya Anda bisa memposting artikel langsung ke blog Anda via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog Anda.
Mobile Devices: Untuk memposting artikel ke blog anda via MMS atau SMS dari hp anda. Cara register dan penggunaanya baca disini

8. Menu Settings -> OpenID

OpenId: Secara ringkas, openId semacam identitas anda di internet. Dengan openid anda bisa masuk ke dalam website yang berbeda-beda yang mendukung openid tanpa memasukkan username dan password anda seperti lazimnya. Keterangan lanjut tentang OpenID baca disini aja ya

9. Menu Setting -> Permissions

Blog Authors: memperbolehkan orang lain untuk ikut menulis di blog Anda. Caranya klik Add Authors lalu masukkan alamat email orang yang mau diundang kemudian klik Invite
Blog Readers: untuk mengatur siapa yang bisa membaca artikel blog Anda

Demikianlah penjelasan dari masing-masing fungsi yang bisa diatur pada blog Anda. Semoga gak tambah bingung :p

Memasang Efek Salju di Blog

Pingin turun salju pada blog anda agar terlihat lebih hidup dan cool (baca: keren)? Baik, maka anda perlu memasang efek salju di blog anda.

Untuk memasang efek salju, caranya sangat mudah:

1. Buka blogger. Masuk ke menu Design -> Page Elements

2. Klik Add a Gadgets -> HTML/Javascript

3. Masukkan script berikut kedalam kotak

<script src='http://hermanblog.googlecode.com/files/snow.js' type='text/javascript'> </script>

4. Tekan Save. Selesai

Tidak sulit bukan? Kalau tidak mau repot ya gunakan saja cara dibawah ini

1. klik tombol Tambahkan Efek Salju Pada Blog dibawah ini

2. Pilih blog yang ingin anda pasang efek salju lalu klik Add Widget
3. Selesai.

Selamat mencoba...

Cara Membuat Banner Berjalan

Sebelumnya saya sudah pernah mengulas tentang cara membuat efek marque untuk teks dan link. Dan sepertinya cara ini cukup menarik karena selain dapat menghemat ruangan blog cara ini juga dapat membuat blog lebih interaktif.

Oleh sebab itu, pada kesempatan ini saya akan membahas kembali cara membuat efek marquee namun kali ini yang akan saya bahas adalah efek marquee untuk banner atau banner berjalan. Contohnya seperti ini:

Cara ini sering dipakai oleh pemilik blog atau website yang ingin memasang banyak banner namun terbatas ruangannya. Nah bagi anda yang ingin menggunakan cara ini, gunakan kode dibawah ini pada blog anda:

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" bg height="60"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIsQ50_j8yexKlsz7CW4i8k7MHD2YnGH_ySsqkWaBBEbRD_j4JFnmt7q7tWfaWok2LCOI_hHCstl9QS00PNHeI4_mzcU0ewbXhmz7hI4JyqfYMnoz0nLtFn3Rb56NZjzX6TRjdD2-PyZJf/" /></a>
</marquee>

Ganti tulisan yang berwarna hijau dengan url website yang ingin dituju dan tulisan berwarna merah dengan url banner anda.

Jika anda ingin memasang lebih dari 1 banner. Sebagai contoh anda ingin menambah 1 banner lagi. Tambahkan kode dibawah ini diatas kode </marquee>

<span style="padding-left: 10px;"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcOSutVPEm7XAxQyk0ZMcZB9whXtf4EW4XBFRdeFtligxW94C5AxqCA1_tvkoMmSqg5NJTQKxBs96HN8JmeHWctFQS-4d0vcD4WaCeBYlqvEKJn4VMEoVxrnZ6qkABNGMjKtitJyZ7ifU/" /></a></span>

Ingat:
Ganti tulisan berwarna hijau dengan url website anda dan tulisan berwarna merah dengan url banner kedua anda.

Jadi susunan kodenya menjadi seperti ini:

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" height="60"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIsQ50_j8yexKlsz7CW4i8k7MHD2YnGH_ySsqkWaBBEbRD_j4JFnmt7q7tWfaWok2LCOI_hHCstl9QS00PNHeI4_mzcU0ewbXhmz7hI4JyqfYMnoz0nLtFn3Rb56NZjzX6TRjdD2-PyZJf/" /></a>
<span style="padding-left: 10px;"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcOSutVPEm7XAxQyk0ZMcZB9whXtf4EW4XBFRdeFtligxW94C5AxqCA1_tvkoMmSqg5NJTQKxBs96HN8JmeHWctFQS-4d0vcD4WaCeBYlqvEKJn4VMEoVxrnZ6qkABNGMjKtitJyZ7ifU/" /></a></span>
</marquee>

Hasilnya:

Begitulah seterusnya jika anda ingin menambah banner lagi. Jika anda ingin mengganti arah gerak banner atau mempercepat gerakan banner silahkan baca artikel cara membuat efek teks marquee karena sudah pernah saya bahas disana.

Selamat mencoba.

membuat logo pada address bar

Favicon adalah icon kecil yang ada di url address bar, bisa juga masuk dalam daftar bookmark jika kita mem bookmark suatu situs yang mempunyai Favicon, untuk ukurannya favicon sendiri adalah 16 x 16 pixel.

Berikut tutorial nya bagaimana cara membuat Logo pada URL Address Browser:
caranya siapkan icon favorite anda, download icon-icon dibawah ini:

http://www.webdeveloper.com/favicon.ico
http://www.oscmax.com/favicon.ico
http://www.coffeecup.com/favicon.ico
http://unblock-url.qarchive.org/favicon.ico
http://www.pizzahut.com/favicon.ico
http://www.starbucks.com/favicon.ico

Setelah itu silahkan klik kanan salah satu icon, lalu pilih Save Image As.. -> lalu save
Cara pemasangannya bisa anda Upload dan letakkan di direcrtory root dengan nama: favicon.ico

atau bisa juga letakkan tag di bawah ini dalam header anda

Friday, 31 December 2010

Membuat Link berupa Form Button

Membuat Link berupa tombol atau form button sebenarnya,disamping menambah kecantikan namun sekaligus merangsang pengunjung untuk mengklik form tersebut.
Contoh Link yang berupa form button/tombol,seperti di bawah ini:

Dari contoh di atas,anda bisa lihat,saat anda klik form tersebut akan menimbulkan popup sesuai alamat yang anda tentukan.
Sedangkan kodenya,anda bisa copy di bawah ini:

<form method="get" action="http://pelajaran-blog.blogspot.com/"
target="_blank">
<input type="submit" value="Contoh saja!" name="q">
</form>

Untuk tulisan http://pelajaran-blog.blogspot.com/ anda rubah sesuai nama blog anda.
Untuk tulisan Contoh saja!,rubah sesuai keinginan anda.

Sedangkan untuk tulisan _blank gantilah dengan _self jika anda menginginkan halaman,akan terbuka pada halaman itu sendiri,bukan pada jendela baru.

Gimana siap mencoba?

Monday, 27 December 2010

cara membuat domain gratis selamanya di .co.nr

cara membuat domain gratis selamanya di .co.nr

Supaya halaman depan (Home page) nggak terlalu panjang ke bawah,maka satu halaman posting dapat di ganti domainnya menjadi co.nr
Contoh :
Aslinya : http://bersamabisa.blogspot.com/
Setelah di ganti : http://wylendra.co.nr/
Cara menggantinya adalah sebagai berikut :
1. Buka alamat : http://www.freedomain.co.nr/
2. Maka akan tampil gambar sebagai berikut :

Gambar 1a

Gambar 1b
Gambar 1 a dan 1b sebenarnya 1 halaman,karena nggak cukup saya bagi 2 .
Dan selanjutnya isi pada kolum www. ................ co.nr check sesuai dengan rencana alamat yang di rencanakan. Misalnya saya pakai nama : medialabkom dan klik menu check
Kalau ada peringatan domain name is still available,berarti nama yang direncanakan disetujui (belum ada yang menggunakan).
3. Selanjutnya akan tampil gambar sebagai berikut ( gambar 2a dan 2b)

Gambar 2a

Gambar 2b

4. Berikutnya klik menu di bagaian bawah yang bertulisan : I want to Sigup for this Domain dan akan tampil seperti gambar 3

Gambar 3
Pada gambar 3 ada 3 pertanyaan jawab seperti gambar diatas. dan selanjutnya klik Next Step
5. Perhatikan hasil anda setelah meng klik Next step,maka akan tampil gambar 4:

Gambar 4

6. Selanjutnya klik saja I have read and agree pada contoh
gambar 4 dan akan tampil halaman berikutnya seperti pada gambar 5a dan 5b.

Gambar 5a

Gambar 5b

7. Isi form yang ada dan lihat contoh form yang saya isikan pada gambar 5a dan 5b.

Yang perlu diperhatikan disini : pada isian alamat Target Url : Pilih salah satu hasil postingan yang kamu rencanakan sebagai home page, copy dan paste linknya disini.

Dan selajutnya kalau sudah terisi semua formnya klik bagaian menu di bawah next step

Gambar 6a

Gambar 6b

8. Isi semua form yang ada pada gambar 6a dan dan 6b seperti contoh gambar diatas dan selajutnya klik Next step

Gambar 7
9. Nah sekarang anda sudah punya alamat baru dengan nama : http://.................co.nr/
Contoh yang saya buat : http://medialabkom.co.nr/ seperti pada gambar 7 diatas.
Alamat ini belum bisa digunakan karena anda disuruh membuka alamat email yang di gunakan mendaftarkan diatas tadi.

Gambar 8
10. Pada gambar 8 diatas anda di suruh membuka alamat email, untuk melihat password yang telah dikirim ke alamat email anda. Selanjunya klik tulisan alamat email yang anda gunakan perdaftaran yang bertulisan biru

Gambar 9
11. Gambar 9 adalah setelah saya buka alamat email dan disitu ada tulisan :
user name, password dan kode activasi.

Gambar 10
12. Isi password yang diberikan dan kode activasi di kolum yang sesuai seperti pada gambar 10.
Kalau semua langkah demi langkah semua yang dikerjakan benar,maka alamat domain anda sekarang sudah aktif mulai sekarang,dan bisa langsung dicoba,seperti yang baru saya buat ini.

Friday, 17 December 2010

Cara membuat menu navigasi pada blogspot menggunakan mycssmenu.com

Menu Navigasi adalah sebuah aksesoris/widget yang mutlak harus ada dalam sebuah website/blog entah apapun bentuknya, karena menu navigasi selain mempercantik tampilan website/blog juga merupakan alat bagi pemilik maupun pengunjung untuk menjelejahi isi website/blog dengan mudah.

Beberapa waktu lalu Saya ingin membuat menu navigasi horizontal yang berada di bawah header. Berbagai sumber dan tutorial tentang cara membuat menu horizontal telah saya pelajari, tetapi ternyata ketika diterapkan hasilnya tidak ada yang bagus bahkan bikin tampilan template blog saya menjadi acak-acakan. Namun demikian saya tidak pernah menyerah dan dengan modaldari bermacam-macam tutorial yang telah saya pelajari, akhirnya saya bisa membuat menu navigasi seperti yang terlihat pada blog ini.

Membuat menu navigasi seperti pada blog ini tidak sesulit apa yang saya bayangkan sebelumnya, ternyata cukup memanfaatkan fasilitas yang ada pada http://www.mycssmenu.com/ dan dengan memanfaatkan fasilitas dari website tersebut, selain gratis juga telah tersedia code HTML dan CSS yang sudah siap pakai, namun jika tampilannya ingin sesuai dengan selera kita tinggal mengeditnya saja dan disitu pun telah disediakan fasilitas untuk mengedit tampilan menu yang akan kita gunakan.

Baiklah sekarang saya akan langsung memberikan Cara Mudah Membuat Menu Navigasi Pada Blogspot sesuai dengan pengalaman saya, berikut ini caranya:

Kunjungi dulu http://www.mycssmenu.com/ dan Anda akan dihadapkan pada halaman seperti di bawah ini:
Pada halaman itu seperti pada gambar di atas, Anda bisa memilih bentuk menu navigasi horizontal atau menu navigasi vertical dan jika ingin melihat dahulu tampilannya Anda bisa klik tulisan Demo, namun jika sudah menemukan menu yang sesuai selera, Anda bisa langsung klik Customize yang berada dibawah gambar seperti yang saya tunjukan dengan tanda anak panah, selanjutnya akan terbuka windows baru atau halaman baru seperti pada gambar di bawah ini :
Silahkan copy paste code HTML dan CSS-nya pada notepad atau MS Word Anda dengan cara klik tulisan HTML dan CSS seperti yang saya tunjukkan dengan tanda lingkaran pada gambar di atas. Kira-kira kodenya seperti pada kotak di bawah ini:

Contoh Code CSS

<style type="text/css">

/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/

/* MyCSSMenu 0 */

/*"""""""" (MAIN) Container""""""""*/
#qm0
{
background-color:transparent;
}

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:5px 15px 5px 20px;
color:#6585B9;
font-family:Arial;
font-size:12px;
text-decoration:none;
font-weight:bold;
}

/*"""""""" (MAIN) Parent Items""""""""*/
#qm0 .qmparent
{
background-image:url("images/plus_main.gif");
background-repeat:no-repeat;
background-position:9px 10px;
}

/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
color:#C7C7C7;
text-decoration:underline;
}

/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:5px;
margin:-2px 0px 0px -6px;
background-color:transparent;
border-width:1px;
border-style:none;
border-color:#A6A6A6;
}

/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:5px 50px 5px 20px;
background-color:transparent;
color:#F5F5F5;
font-size:11px;
font-weight:bold;
border-width:0px;
border-style:none;
border-color:#000000;
}

/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
color:#3F3F3F;
text-decoration:none;
}

/*"""""""" (SUB) Parent Items""""""""*/
#qm0 div .qmparent
{
background-image:url("images/plus_sub.gif");
}

/*"""""""" (SUB) Parent Hover State""""""""*/
#qm0 div .qmparent:hover
{
background-image:url("images/plus_sub_hover.gif");
}

/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#747A86;
background-image:url("images/minus_sub.gif");
color:#EEEEEE;
}

/*"""""""" (main) Rounded Items""""""""*/
#qm0 .qmritem span
{
border-color:#A6A6A6;
background-color:#3F3F3F;
background-image:url("images/minus_main.gif");
background-repeat:no-repeat;
background-position:9px 5px;
}

/*"""""""" (main) Rounded Items Content""""""""*/
#qm0 .qmritemcontent
{
padding:0px 0px 0px 20px;
}

/*"""""""" (sub) Rounded Items""""""""*/
#qm0 div .qmritem span
{
border-color:#666666;
background-color:#EEEEEE;
}

/*"""""""" (sub) Rounded Items Content""""""""*/
#qm0 div .qmritemcontent
{
padding:0px 0px 0px 4px;
}

/*"""""""" Sub Hover Fill Items [Static]""""""""*/
#qm0 div .qmhoverfill
{
background-color:#C0CAE3;
}

/*"""""""" Custom Rule""""""""*/
div#qm0 div div
{
margin:0px 0px 0px -6px;
}

</style>

Contoh Code HTML
<ul id="qm0" class="qmmc">

<li><a class="qmparent" href="javascript:void(0)">Tech Divisions</a>

<ul>
<li><a href="javascript:void(0)">Management</a></li>
<li><a class="qmparent" href="javascript:void(0)">Global Sites</a>

<ul>
<li><a href="javascript:void(0)">Asia</a></li>
<li><a href="javascript:void(0)">South America</a></li>
<li><a href="javascript:void(0)">Australia</a></li>
<li><a href="javascript:void(0)">North America</a></li>
<li><a href="javascript:void(0)">Europe654</a></li>
<li><a href="javascript:void(0)">Africa</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Investors</a>

<ul>
<li><a href="javascript:void(0)">Sony</a></li>
<li><a href="javascript:void(0)">Fed-Ex</a></li>
<li><a href="javascript:void(0)">Corp. A and B</a></li>
<li><a href="javascript:void(0)">Smuckers</a></li>
<li><a href="javascript:void(0)">Phillips</a></li>
<li><a href="javascript:void(0)">Slats Brewery</a></li>
</ul></li>

<li><a href="javascript:void(0)">Worldwide</a></li>
<li><a href="javascript:void(0)">Product Overview</a></li>
<li><a href="javascript:void(0)">Publicity</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Advancement</a>

<ul>
<li><a href="javascript:void(0)">Satisfaction</a></li>
<li><a class="qmparent" href="javascript:void(0)">Our Goals</a>

<ul>
<li><a href="javascript:void(0);">Customer Satisfaction</a></li>
<li><a href="javascript:void(0);">Sales Forcast</a></li>
<li><a href="javascript:void(0);">Projections</a></li>
<li><a href="javascript:void(0);">Advanced Products</a></li>
<li><a href="javascript:void(0);">Employee Commitment</a></li>
<li><a href="javascript:void(0);">Environmental</a></li>
<li><a href="javascript:void(0);">Law Suit Avoidence</a></li>
<li><a href="javascript:void(0);">Free Ice Cream</a></li>
</ul></li>

<li><a href="javascript:void(0)">Product Warranty</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
<li><a href="javascript:void(0)">Product Quality</a></li>
<li><a href="javascript:void(0)">Continued Support</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Our Investors</a>

<ul>
<li><a href="javascript:void(0)">Annual Meetings</a></li>
<li><a href="javascript:void(0)">Financial Reports</a></li>
<li><a href="javascript:void(0)">Nasdaq Quoting</a></li>
<li><a href="javascript:void(0)">Dividend Information</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
<li><a href="javascript:void(0)">CEO Announcements</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Relations</a>

<ul>
<li><a href="javascript:void(0)">Satisfaction</a></li>
<li><a href="javascript:void(0)">Our Goals</a></li>
<li><a href="javascript:void(0)">Product Warranty</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
<li><a href="javascript:void(0)">Product Quality</a></li>
<li><a href="javascript:void(0)">Continued Support</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0);">Propulsion</a>

<ul>
<li><a href="javascript:void(0);">Advanced Science</a></li>
<li><a href="javascript:void(0);">Biological Impact</a></li>
<li><a href="javascript:void(0);">Trajectories</a></li>
<li><a href="javascript:void(0);">Gravity Boosting</a></li>
<li><a href="javascript:void(0);">Clean Fuels</a></li>
</ul></li>

<li class="qmclear"> </li></ul>


<script type="text/javascript">qm_create(0,false,0,500,'lev2',false,false,false,true);</script>
Selanjutnya cara pasang code menu navigasi tersebut pada blog, seperti biasa Anda harus masuk dulu ke dashbord blogspot Anda, lalu klik layout dan klik Edit HTML jangan lupa centang kotak expand template dan sebaiknya terlebih dahulu download template anda.
Sekarang cara memasukan kode dari http://www.mycssmenu.com/ ke dalam tempat Anda, caranya cari kode </b:skin> lalu masukan kode CSS Anda di atas kode </b:skin>, tetapi sebelumnya harus dihapus dulu tulisan <style type="text/css"> yang ada diawal kode CSS dan tulisan </style> yang ada diakhir kode CSS Anda.
Sebelum memasukan kode HTML Anda ke dalam template, sebaiknya ganti dulu alamat/link serta judul pada kode HTML tersebut dengan link dan judul link Anda, jika sudah sekarang masukan kode HTML Anda di bawah code berikut ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>
Simpan/Save Template dan lihat hasilnya.

Thursday, 16 December 2010

membuat banner

Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :

"Bagaimana caranya menyimpan banner pada header blog"

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

Sign in di blogger
Klik menu Template
Klim menu Edit HTML
Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;

Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :

border:1px solid #eee;

border-width:1px 1px 0;

border:1px solid #eee;

border-width:0 1px 1px;

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

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

Sign in di blogger
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 hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;

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

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

Sign in di blogger
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
cari kode berikut pada template sobat :
Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

Klik menu Elemen Halaman
KLik tulisan Edit yang ada pada elemen Header
Tunggu beberapa saat
Pilih radio button yang ada di samping tulisan dari komputer Anda
Klik tombol Browse...
Pilih banner yang telah di buat yang ada pada komputer sobat
Tunggu beberapa saat sampai proses selesai.
Gambar banner sobat akan di tampilkan
Klik tombol SIMPAN PERUBAHAN
Selesai.

Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja langkah-langkah di atas.

sumber:http://kolom-tutorial.blogspot.com/2007/06/pasang-banner-di-header-blog.html

Wednesday, 15 December 2010

Buku Tips Trik Toturial Blogging

Kami telah membuat buku tips trik toturial blogging download free dan tidak bervirus

Download Link

cara register domain(co.cc)

Domain gratis! Siapa sih yang tidak mau? Kalau ada yang gratis buat apa bayar? Mungkin itu kalimat yang ada dibenak para gratisan mania, hehehe…
Bicara soal domain gratis, ada sebuah perusahaan ang memberikan kita domain gratis yang dapat kita gunakan selama satu tahun, bahkan bisa diperpanjang secara gratis, nama perusahaan tersebut adalah CO yang beralamatkan di www.co.cc, mereka memberikan hak akses penuh terhadap DNS domain tersebut.

CO.CC adalah perusahaan asal korea dengan produk andalannya adalah free domain + free DNS.
Sebenarnya CO.CC hanya memberikan Sub Domain gratis, tapi karena pendeknya domain utama dari website penyedia free sub domain ini, yakni CO dan .CC adalah Exstensionnya (seperti .com, .net, .org), yang berarti domain kita nanti akan berada dibawah co.cc, contoh: www.lucksoft.co.cc.
Fitur yang ditawarkan oleh co.cc adalah seperti terlihat digambar dibawah ini:

kelebihan cocc Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Baiklah langsung saja kita mulai tutorial pendaftaran domain gratis di co.cc.
Pertama, anda harus membuka website resmi mereka disini.
Kemudian periksa ketersediaan domain yang anda inginkan dengan mengetikkan nama domain keinginan anda di kolom yang sudah disediakan.

periksa ketersediaan Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Kemudian klik Periksa Ketersediaan.

Jika domain yang anda inginkan tidak tersedia, maka akan tampil pemberitahuan bahwa domain tersebut sudah terdaftar atau tidak tersedia.

periksa dengan domain yang lain Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Sayang banget ya… Kalau begitu cobalah dengan nama domain yang lain.

Tapi jika domain tersebut belum terdaftar, maka akan ada pemberitahuan bahwa domain tesebut Tersedia untuk anda.

domain tersedia Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Duh senangnya ya kalau domain keinginan kita tesedia, kalau begitu langsung saja klik Lanjutkan ke pendaftaran. Jangan ditunda lagi, nanti domain tesebut akan tinggal angan-angan.

Dengan mengklik Lanjutkan ke pendaftaran, anda akan di arahkan ke halaman Login, maksudnya adalah, jika anda sudah memiliki akun di co.cc, maka anda hanya tinggal login saja dengan akun yang sudah ada, tapi jika anda belum memiliki akun di sana, maka klik Buat akun baru sekarang.

buat akun sekarang Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Bagi pengguna baru, silahkan klik Buat akun baru sekarang.

Dengan begitu anda akan diarahkan ke halaman pendaftaran untuk mengisi formulir yang tersedia.

isian formulir pertama Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

isian formulir kedua Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Isi formulir tersebut dengan data-data yang benar, terutama yang diberi tanda centang (√).
Jika sudah, baca atau langsung centang Saya menerima Persyaratan dan Layanan.
Dan klik Buat account baru sekaang.
Jika tidak ada yang salah dalam pengisian formulir, anda akan terdaftar dan bisa login.

login untuk mengatur domain Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Login dulu dengan email dan password yang anda daftarkan tadi.
Caanya, ketikkan email dan password anda di form yang disediakan, lalu ketikkan kode re-captcha (ada spasinya)
Setelah berhasil login, akan ada ucapan selamat bahwa domain tersebut sudah berhasil terdaftar.

registrasi domain berhasil Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Kemudian klik Setup untuk menkonfigurasi domain anda supaya terhubung dengan hosting.
Perlu diketahui bahwa co.cc hanya memberikan anda waktu 2 hari atau 48 jam untuk mengkonfigurasi settingan domain tersebut, jika tidak anda set up dalam 2 hari, maka domain tersebut akan hilang dari akun anda.

setup domain segera Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

pilih name server Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Fungsi dari masing-masing pilihan:

Name Server : Untuk menghubungkan domain dan hosting dengan menentukan Name Servernya .
Zone Records : Memiliki banyak kegunaan, diantaranya adalah, Verifikasi Google Webmaster, Google Apps, Dll.
URL Forwarding : Untuk membelokkan domain ke domain lain.

masukkan server danklik setup Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Untuk menghubungkan domain anda ke hosting, anda harus mengatur Name Server yang ada di akun anda, lihat contoh diatas.
Untuk Name Server, silahkan lihat di cPanel hosting anda, atau hubungi pihak hosting untuk menanyakan Name Server anda.
Biasanya Name Server seperti ini:
ns1.contoh.com
ns2.contoh.com
Atau
dns1.contoh.com
dns2.contoh.com

Anda dapat memasukkan Name Server lebih dari dua dengan mengklik [+Add More Name Servers].
Dan jika sudah anda masukkan Name Servernya, silahkan klik Setup.

Setelah itu anda akan diberitahukan bahwa perubahan telah diproses dan klik OK.

setup berhasil dan klik ok Panduan Cara Registrasi Domain Gratis Di CO.CC Dan Menghubungkannya Ke Hosting

Dengan mengklik OK, berarti anda sudah berhasil menghubungkan domain anda ke server hosting anda.

Cara pasang Auto Read More

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with o-om.com :)

Tuesday, 14 December 2010

Sobat-sobat semuanya, tau kan navbar,. . ? Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Untuk lebih jelasnya kita bisa lihat gambar navbar dibawah ini, . .

Mau liat blog saya yang tida pakai navbar, . ? silahkan kunjungi, http://dk2skpb.blogspot.com/

Nah, Apakah kita bisa menghilangkan Navbar Blogger Tersebut,.? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.
Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.
Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>
Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

Sign in di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
Copy kode berikut lalu paste di atas kode </style>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
Copy kode berikut lalu paste di atas kode ]]></b:skin>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Template

Monday, 13 December 2010

Promosikan Blog mu diseo

ingin mempromosikan situs kamu secara free/tidak membayar pada siapapun tidak perlu repot repot lagi karena ada SEO.SEO adalah situs yang mempromosikan situs secara free ke mesin pencari seperti:

contoh daftar yang akan dikirimkan ke email

Contacting 'Acoon'...Connected...Success
Contacting 'ActiveSearchResults'...Connected...Success
Contacting 'Alexa'...Connected...Success
Contacting 'Amfibi'...Connected...Success
Contacting 'Amidalla'...Connected...Success
Contacting 'Bimeon'...Connected...Success
Contacting 'Burf'...Connected...Success
Contacting 'Entireweb.com'...Connected...Success
Contacting 'ExactSeek'...Connected...Success
Contacting 'Google'...Connected...Success
Contacting 'Info Tiger'...Connected...Success
Contacting 'Myahint'...Connected...Success
Contacting 'Scrub The Web'...Connected...Success
Contacting 'SearchSight'...Connected...Success
Contacting 'SecretSELabs'...Connected...Success
Contacting 'SonicRun'...Connected...Success
Contacting 'SpiffySearch'...Connected...Success
Contacting 'TowerSearch'...Connected...Success
Contacting 'Wal Hello'...Connected...Success
Contacting 'WhatUSeek'...Connected...Success

register langsung di bawah ini:

kalo nggak percaya bisa diliat hasil nya
http://www.google.co.id/url?sa=t&source=web&cd=1&ved=0CBUQFjAA&url=http%3A%2F%2Fpublicindonesia.blogspot.com%2F&rct=j&q=http%3A%2F%2Fpublicindonesia.blogspot.com&ei=yhMHTbjJDJCrrAfPpKjtDQ&usg=AFQjCNH7aFiwj-HDnQrE5vfDr5NQBHhm1A&sig2=JRntgQW7yWwTMM7ApV6TUw&cad=rja

Friday, 10 December 2010

Cara Buat kolom Scroll Widget di Sidebar Blog

Cara Buat kolom Scroll Widget di Sidebar Blog

Saya yakin anda setiap yang mempunyai blog pasti ingin blognya kelihatan rapi dan cantik. Nah di tutorial kali ini saya ingin memberikan triknya agar kolom sidebar kita terlihat lebih menarik dengan memasang widget scroll, nah supaya widget tersebut bisa di sesuaikan dgn halaman blog maka kita perlu kolom scroll widget ini.

Cara Membuatnya Adalah :
1-Log in ke account blogger anda.
2-Click tata letak---tambah halaman ----pilih HTML/JAVA SCRIPT.
3-Copy pastekan kode di bawah ini ;

<h2 class="title">isi judul di sini</h2>
<div class="widget-content">
<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 310px; height: 150px; text-align: left;">

<li> <a href="link anda" target="new'">Teks yang tampil</a></li>

<li> <a href="link anda" target="new'">Teks yang tampil</a></li>

</div>

Catatan :
A-Code Pertama ini kotak scroll widgetnya memiliki border.
-Angka 150 adalah ukuran tinggi kotak scroll widget, bisa anda ganti dengan ukuran yang anda inginkan.
-Ganti URL/Link yg ditulis dengan warna merah dengan link yang ingin anda pasang.
-Ganti tulisan yg berwarna hijau dengan judul link yg anda pasang.
-Jika ingin pasang banner atau widget di dalam scroll bos ini, anda tinggal hapus script link dan ganti dengan script banner yang akan anda pasang.
B-Code yang kedua seperti yang di bawah ini, kotak scroll widgetnya tidak memiliki border.Codenya adalah :

<h2 class="title">TULIS JUDUL KOTAK SCROLL DISINI</h2>
<div class="widget-content">
<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 310px; height: 200px; text-align: left;">

<li> <a href="link anda" target="new'">Cara Buat Scroll Widget Di Blog</a></li>

<li> <a href="link anda" target="new'">Cara Buat Scroll Widget Di Blog</a></li>

</div>

-Angka 310 adalah lebar kolom widget scroll, bisa anda ganti dengan ukuran yang sesuai dengan kolom template anda.
-Angka 200 adalah tinggi kolom widget scroll, bisa anda ganti juga.
-Ganti URL/Link yang berwarna merah dengan link yang ingin anda pasang.
-Ganti judul link yg berwarna hijau dengan judul link yang anda pasang.
-Jika ingin meletakkan widget atau banner ke dalam kotak scroll ini, ganti saja script link dengan script widget atau banner anda.
Nah !!! gampang kan cara buatnya, silahkan di coba semoga bermanfaat !.

Membuat menu menggunakan CSS

Membuat menu blog menggunakan CSS

Dulu sebelum ada yang namanya kode CSS, menu navigasi dibuat dengan menggunakan table dengan kode HTML. Baik itu secara horizontal menu atau vertikal menu. Bahkan, untuk membuat sebuah layout website pun masih pake table. Nah...kalo sekarang udah ga zaman bikin menu navigasi dengan table udah ada cara lain yaitu dengan menggunakan kode CSS. Berikut cara-caranya dan mudah2an dapat dipahami.........

Membuat menu blog menggunakan CSS

Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode CSS di blog yaitu harus diantara tag <head> dan </head>. Atau untuk lebih gampangnya, simpan aja diatas kode

]]></b:skin>
</head>

Ok....langsung aja ke cara membuat kode CSS untuk menu navigasi.
Pertama anda harus buat dulu kode css untuk tag pengaturan menu navigasi. Lihat kode dibawah ini :

#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}

Setelah itu, buat kode CSS untuk merubah format default untuk tag ul dan li

#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
#menu ul li
{
list-style: none;
display: inline;
}

Maksud dari kode CSS diatas adalah untuk merubah format tag ul dari vertikal ke horizontal serta mengatur margin dan padding tiap menu navigasi. Selanjutnya, buatlah kode CSS untuk membuat variasi link dari menu navigasi. kodenya :

#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: white;
margin-bottom:4px;
padding: 13px 7px 13px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background: url(http://i283.photobucket.com/albums/kk315/
meezanx_2008/menu.gif) repeat-x;
background-position:center;
}

#menu ul li a:hover
{
color: white;
}

Nah.....kode2 diatas itu semua adalah Tutorial mebuat kode CSS menu navigasi. Untuk lebih jelasnya dan cara menyimpan kode tersbut di template blog anda ikuti langkah2 berikut :

* Login ke Blogger lalu pilih layout kemudian edit HTML
* Sebagai kemanan silahkan download dulu template anda
* Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.
* Cari kode berikut :

]]></b:skin>
</head>

* Kalo sudah ketemu. silahkan copy paste kode berikut di atas kode HTML tadi

#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}
#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
#menu ul li
{
list-style: none;
display: inline;
}
#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: white;
margin-bottom:4px;
padding: 13px 7px 13px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background:
url(http://i283.photobucket.com/albums/kk315/meezanx_2008/menu.gif)
repeat-x;
background-position:center;
}

#menu ul li a:hover
{
color: white;
}

* Setelah selesai copy paste nya, cari kode berikut :

<div id='content-wrapper''>

* Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi

<div id='menu'>
<div style='display:none;'>
<img alt='preload' src='menuon.png'/>
</div>
<ul>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
</ul>
</div>

Catatan Penting :

1. Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.
2. Jika anda mengerti kode CSS, anda bisa ganti kode CSS-nya, sesuai dengan kebutuhan anda.

Kalo sudah selesai, save template.

Subscribe to: Posts (Atom)