April 2011 ~ BlogBlogger Trick : Tips and trick about Blogger

Cara Membuat Gambar Slide Dengan Jquery ( coin slider)

Kadang kita ingin membuat gambar tampilan slide pada halaman depan blog kita, tapi mungkin sulit untuk membuatnya, dan udah coba banayk trick, tetapi tidak berhasil. Kamu bisa gunakan tutorial ini, yang sudah saya coba, di blog Desaign ku yang lain.Demo Membuat Slide Gambar di Blog Dengan JQuery dibawah header ada slide show gambar dengan animasi transisi yang berubah-ubah, dan hasilnya sangat baik.

Demo

Ikuti Langkah - langkah berikut:

1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home
2. Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
3. Beri centang pada expand Template widget
4. Letakkan kode berikut di atas kode ]]></b:skin>

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

5. Letakkan kode dibawah ini diatas kode </head>

Width: 563 : silahkan anda sesuaikan dengan lebar tampilan gambar yang anda inginkan, usahakan gambar sudah di atur ke ukuran yang sesuai, biar tampak manis dilihat.
6. Simpan, kemudian klik tata letak
7. Tambahkan gadget html/java script kemudian copas kode berikut:

<div id='coin-slider'>

<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>

<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>

<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>

</div>

Silahkan ganti Link letak gambar dengan lokasi penyimpanan gambar anda.
Jika semuanya benar, kamu akan mendapatkan Slide gambar yang cantik di blog anda.
Selamat mencoba.. Publisher: vitto - 06.45

Background, bloggertrick, template

Trick Tercepat Menaikan Google Page Rank (PR)

Bagi anda yang mempunya blog dan ingin cepat mendapatkan pagerank berikut tips Cara cepat update PageRank google
yaitu dengan cara penyebaran link menggunakan sistem Multi Level Marketing?

Untuk tips kali ini saya mau mencoba mengajak anda semua untuk memanfaatkan kedahsyatan faktor kali dan kecepatan penyebaran ini dalam bentuk backlink.

Caranya gampang kok, Yang perlu kamu lakukan adalah meletakkan link-link berikut ini di blog atau artikel kamu

Blogger Trick
Mapasanda
Traffic Search Engine
Artikel Komputer Bisnis Internet Design Grafis
SettingPercetakan
Download Logo Gratis
fansclubartis
SEO Tutorial
blog dofollow
ilmu belajar komputer

Cara Kerja
- sebelum kamu meletakkan link kamu diatas, Kamu harus menghapus peserta Nomor 10 dari daftar Sehingga semua peserta naik 1 level. Yang tadi nomor 1 jadi nomor 2, nomor 2 jadi 3, dst. Kemudian masukkan link kamu sendiri di bagian paling atas (nomor 1). Jika tiap peserta mampu mengajak 5 orang saja, maka jumlah backlink yang akan didapat adalah
Ketika posisi kamu 1, jumlah backlink = 1
Posisi 2, jml backlink = 5
Posisi 3, jml backlink = 25
Posisi 4, jml backlink = 125
Posisi 5, jml backlink = 625
Posisi 6, jml backlink = 3,125
Posisi 7, jml backlink = 15,625
Posisi 8, jml backlink = 78,125
Posisi 9, jml backlink = 390,625
Posisi 10, jml backlink = 1,953,125

Dan semuanya menggunakan kata kunci yang kamu inginkan. Dari sisi SEO kamu sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung web para downline kamu mengklik link itu, juga membuat blog kamu mendapatkan traffik tambahan.

Nah, silahkan copy paste artikel ini, dan hilangkan peserta Nomor 10 lalu tambahkan link blog/website kamu di Posisi 1. Ingat, kamu harus mulai dari posisi 1 agar hasilnya maksimal. Karena jika kamu tiba2 di posisi 2, maka link kamu akan hilang begitu ada yang masuk ke posisi 10.

Contoh :

Urutan Asli :

Urutan yang sudah dirubah dipostingan blog sobat

Nama Blog Sobat (URL)
Blogger Trick
Mapasanda
Traffic Search Engine
Artikel Komputer Bisnis Internet Design Grafis
SettingPercetakan
Download Logo Gratis
fansclubartis
SEO Tutorial
blog dofollow

Publisher: vitto - 02.34

bendera, bloggertrick, tipsblogger

Google Translate Ala Mbah Google.

Jika sebelumnya saya telah memposting cara membuat Google Translate dengan endera berkibar, nah kali ini saya akan memposting cara membuat google translate ala mbah Google.

Login ke akun blog kamu.

Klik Rancangan/Design => Tambah Gadget/Add Gadget => pilih HTML/Java Script lalu paste kode scrip di bawah ini.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Save.

Atau jika ingin Edit sendiri disini. Moga bermanfaat. Publisher: vitto - 13.51

bendera, bloggertrick, template, tipsblogger

Google Traslate Dengan Bendera

Buat kamu yang blognya belum terpasang translate, ada baiknya memasang translate pada blog. Di karenakan agar pengunjung blog dari luar negara bisa menterjemaahkan bahasa mereka dengan translate yang kita pasang di blog. Oleh karena itu, pemasangan translate pada blog sangatlah penting. Buat kamu yang tertarik ingin memasang translate di blog, kamu bisa ikuti langkahnya ;

1. Copy kode HTML di bawah ini.

2. Login ke akun blog kamu.

3. Klik Rancangan/Design => Tambah Gadget/Add Gadget => pilih HTML/Java Script lalu paste kode HTML yang tadi kamu copy.

4. Klik simpan dan lihat hasilnya.

Gimana, sudah terpasang kan translatenya???
Selamat kalau begitu, semoga bermanfaat ya. Publisher: vitto - 13.38

Background, tipsblogger, widget

Membuat Kolom Admin Berbeda dengan Pengunjung

Kalau kita berkunjung ke beberapa blog terkadang kita melihat daftar komentator suatu postingan dan mendapatkan komentar admin atau pemilik blog tampak berbeda dengan komentar pengunjung. Sebagian template telah menyediakan fitur ini sedangkan lainnya harus dimodifikasi lagi.

Nah bagi anda yang templatenya belum memiliki fitur tersebut berikut trik membuat komentar pemilik blog berbeda dengan pengunjung:

Langkah 1
Login ke account blogger Anda!
Langkah 2
Jangan lupa beri tanda centang Expand Widget Templates
Langkah 3
Copy paste kode di bawah sebelum kode ]]></b:skin>

.author-comments {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

Untuk kode yang berwarna merah bisa anda ganti sesuai selera, bisa lihat kode warnanya di Bagian samping kanan Blog, lihat tulisan Pilih Kode warna.
Langkah 4
Cari kode seperti di bawah

Kode warna merah yang di tulis tebal (bold) adalah kode baru yang harus di sisipkan di antara kode di atas.

Langkah 5
Simpan template! Sekarang lihat artikel yang ada komentar anda, sudah berubah tampilannya apa belum? Oya saat menuliskan komentar anda harus dalam sign in diaccount anda.

Kalau ingin komentar Admin memiliki background image seperti gambar dibawah ini:

Ganti saja backgroundnya dengan URL gambar anda!

Selamat mencoba, semoga bermanfaat. Publisher: vitto - 13.09

Background, template, tipsblogger, tutorial blogger

Cara Membuat Background Pada Teks Area

Sebelumnya saya sudah posting cara membuat teks area, apa itu teks area? lihat aja lagi postingan itu disini.

Kali ini cara membuat agar teks areanya memiliki background dengan cara menambahkan kode berikut:

<div style="overflow: auto; width: 500px; height: 100px;
background-color: #FFCCFF; text-align: justify; padding: 5px;
border: 2px solid #FF3300;">Letakkan kalimat yang ingin ditampilkan pada teks area disini</div>

Note:

Kode diatas bisa diedit lagi
# width : lebar text area
# height : tinggi text area
# background-color : warna background text area
# text-align : perataan text
# padding : jarak antar tulisan
# border : tebal tipisnya garis tepi text area
# solid : warna garis tepi text area.

Nah berikut contohnya:

<div style="overflow: auto; width: 150px; height: 60px; background-color: rgb(255, 204, 255); text-align: justify; padding: 5px; border: 2px solid rgb(255, 51, 0);"> Jika anda ertarik pada postingan kami silakan anda beri komentar pada kolom komentar. Terimaksih.</div>

hasilnya:

Jika anda ertarik pada postingan kami silakan anda beri komentar pada kolom komentar. Terimaksih.

Semoga bermanfaat. Publisher: vitto - 12.57

tipsblogger

Membuat Teks area

Apa itu text area? Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

<a href="http://blogbloggertrick.blogspot.com/">Bloggertrick</a>

<p align="center"><textarea name="code" rows="6" cols="20"> Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disini</textarea></p>

Sedikit penjelasan tambahan: rows= menunjukkan tinggi text area, cols menunjukkan lebar dari text area. Silahkan sesuaikan sendiri angka-angka tersebut dengan keinginan anda!

Selain cara diatas ada cara lain lagi untuk membuat text area, yaitu text area dengan memakai hightlight Maksudnya text area yang kita buat dilengkapi tombol highlight, yang sekali klik semua text area terblok jadi memudahkan pengunjung untuk mengcopynya. Cara membuat text area dengan hightlight?

Copy code berikut:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Hightlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disin</textarea></p></div></form>

Keterangan:

<div align="center"> : kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> : kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

Value="Highlight All" : kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

<p align="center"> : ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.

<text style="WIDTH: 300px">: kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"

HEIGHT: 144px : angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Selesai! Publisher: vitto - 12.29

Background, tipsblogger, widget

Membuat Backgroun Pada Judul Postingan

Masih mengenai tentang Backgroud, jika seblumnya membuat baground Postingan, dan background yang lain, maka kali ini saya akan sharing Membuat Background Pada Judul Postingan. Mudah saja, berikut langkah langkah membuat background pada titel posts:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
text-align:center;
}

kalau sudah dapat sisipkan kode berikut

background: url(alamat image anda)repeat-x;

Sehingga keselurahannya menjadi seperti ini:

.post h3 {
background: url(alamat image anda)repeat-x;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
text-align:center;
}

Terakhir klik save/ simpan.

Publisher: vitto - 12.15

Background, tutorial blogger, widget

Membuat Background Pada Judul Footer

Jika Postitang sebelum ini Mengganti Background Pada Judul Sidebar,Berikut langkah langkah membuat background pada titel atau judul footer seperti pada contoh gambar berikut:

Membuat background pada titel atau judul footer

Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

#bottom h2 {
padding:7px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:12px;
font-weight:bold;
color:#0000FF;
text-align:center;
line-height:1.4em;
text-transform:uppercase;
}

kalau sudah dapat sisipkan kode berikut

background: url(alamat image anda)repeat-x;

Sehingga keselurahannya menjadi seperti ini:

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul footer dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

background: #5FB404;

kode warna bisa lihat Disini. Publisher: vitto - 11.56

Background, bloggertrick, template

Mengganti Background Pada judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh disamping ini?
Berikut cara mengganti background pada judul sidebar

Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.

.sidebar h2 {

Tambah kode berikut dibawah kode tadi

background:url(alamat image anda disini)repeat-x;

Isi tulisan berwarna merah diatas dengan alamat gambar anda

Kalau ditemplate anda tidak menemukan kode .sidebar h2 {

Tambahkan saja kode berikut pada sidebar content

.sidebar h2 {
background:url(alamat image anda disini)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

* Note edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan!

Untuk mengedit warna font anda bisa lihat kode warna disini,atau di atas kanan Blog ini, lihat Tulisan Pilih Kode Warna.

* Simpan template! Publisher: vitto - 11.41

Background, tipsblogger, tutorial blogger, widget

Membuat Background Pada judul blog ketika Label di Klick

untuk trik kali ini cara memodifikasi tampilan judul posting tersebut dengan memberikan background pada judul postingnya seperti contoh pada gambar disamping. Tapi trik ini bisa dilakukan kalau sobat sudah melaksanakan trik sebelumnya.

Berikut langkah langkahnya:

Login ke Blogger kemudian Layout/Tata Letak terus Edit HTML

1. Centang pada kotak kecil disamping Expand Template Widget
2. Cari kode yang berwarna merah, ingat kode ini hanya terlihat jika trik sebelumnya sudah anda lakukan, jika belum lihat kembali disini .

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

3. Selanjutnya ganti kode yang berwarna merah tadi dengan kode berikut ini:

Note:
Ganti kode warna yang berwarna merah dengan warna yang Anda sukai.Tapi jika ingin juga menambahkan icon di depan title postingan, sobat tinggal menambahkan kode gambar ke dalamnya kode diatas, selengkapnya, sobat dapat mengganti kode tadi dengan kode berikut:

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
<img alt='>>>' border='0' src='alamat gambar icon anda letakkan disini'/>
<data:post.title/></div></a>

Save. Publisher: vitto - 11.34

tipsblogger, tutorial blogger

Menampilkan Judul blog Ketika Label di Klick

Kita sering menjumpai pada banyak blog ketika kita mengklik tabel atau category postingan yang tampil sangat banyak sesuai dengan banyaknya postingan yang diberi label yang kita klik dan parahnya jika blog tersebut tidak menggunakan readmore sehingga loading page akan sangat lama dan berat, nah untuk solusinya kita bisa terapkan trik berikut yang hanya menampilkan judul posting ketika diklik:

Login dulu pada Blogger

Pilih Layout/Tata Letak kemudian Edit HTML -----> centang Expand Template Widget

Cari kode berwarna merah yang penempatannya kayak gini niih:

Kalo kode warna merah gak ketemu bisa cari kode berikut:

<b:include data='post' name='post'>

Kalau sudah ketemu ubah kode tadi dengan kode berikut

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Lalu Save.. Publisher: vitto - 11.08

Background, template, tutorial blogger, widget

Cara membuat Tulisan Ber Effeck Stabilo

Kali ini saya ingin Sharing cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini:
Masukan Tulisan diberi efek stabilo Disini

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

<span style="background-"> Masukan Tulisan diberi efek stabilo Disini</span>

Untuk menambahkan code tersebut anda harus dalam edit HTML.
Kode warna bisa kamu lihat pada Sebelah kanan atas blog liat tulisan Pilih Kode Warna, atu juga kamu bisa lihat disini. Publisher: vitto - 10.50

Background, tipsblogger, widget

Tips Merubah Background Postingan

Suatu waktu mungkin kita bosan dengan background postingan kita yang warnanya putih atau hitam polos, atau mungkin sekedar ingin mencoba bereksperimen kecil maka kita boleh mencoba merubah backgroun postingan dengan cara-cara berikut ini, karena pengetahuaan yang baru pasti sangat menyenangkan.

* Yang Pertama untuk membuat background warna, caranya...

Letakkan kode berikut pada awal postingan

Dan diakhir postingan, harus di tutup dengan kode seperti ini :

Tulisan kode warnanya disini anda ganti dengan kode warna yang anda inginkan. Bisa lihat macam-macam kode warnanya disini atau kamu liat saja di bagian kanan atas blog ini,Tulisan Pilih Kode Warna. Yang perlu diperhatikan saat anda meletakkan kode tersebut, anda harus memilih tab edit HTML.

Sebagai contoh background dengan warna pink...

Tips Membeli Ponsel BlackBerry sangat diperlukan bagi konsumen, karena ponsel blackberry merupakan ponsel yang tidak sedikit nilainya bagi para pemakai ponsel. Berikut tips bagi anda yang ingin membeli BlackBerry:

cara memasangnya:

<div style="background: none repeat scroll 0% 0% rgb(255, 204, 255);">
Tips Membeli Ponsel BlackBerry sangat diperlukan bagi konsumen, karena ponsel blackberry merupakan ponsel yang tidak sedikit nilainya bagi para pemakai ponsel. Berikut tips bagi anda yang ingin membeli BlackBerry:
</div>

* Yang kedua Membuat background dengan Gambar

Jika anda memiliki gambar khusus untuk dijadikan backgroud uploud dulu ke website hosting seperti photobucket atau tempat hosting lainnya untuk memperoleh URL addresnya.

Yang harus diperhatikan anda harus berada pada posisi edit HTML, berikut kode diawal postingan:

<div style="background:url(alamat gambarnya disini) no-repeat;">

Diakhir postingan tutup dengan kode berikut:

</div>

Sebagai contoh background dengan gambar...

Caranya begini:
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWHsUVc2kbqe39HFPngwIBGJcPcY83e5O1P_zNdV8cQpAu6XlW8PNEADOtk9BCl_OZm2ljAv36VxSMOTHSc93ki-R0jWT8Mpq7-5RPiMkA6VPzMpAZRDWfLkyWTdLgm88quV2X4aURltA/s1600/b-20106-disko__techno__tekno__laser__lazer__korqmaz1.jpg) no-repeat;">

Tips Membeli Ponsel BlackBerry sangat diperlukan bagi konsumen, karena ponsel blackberry merupakan ponsel yang tidak sedikit nilainya bagi para pemakai ponsel. Berikut tips bagi anda yang ingin membeli BlackBerry:

</div>

Nah jika kita ingin mempatenkan background tersebut sebagai backgroud pada setiap postingan kita agar tak capek mengeditnya, caranya masuk menu pengaturan/ setting =>klik tab format=>pada bagian akhir kolom format letakkan kode diatas.

Selamat mencoba , Semoga bermanfaat. Publisher: vitto - 10.08

bloggertrick, tipsblogger

Menghilangkan Navbar

Navbar atau navigation bar adalah suatu fasilitas yang disediakan olehblogspot.Navbar ini sendiri letaknya ada dibagian paling atas blog anda.

coba anda lihat blog anda bagian atas...lihat gambar dibawah ini

ada beberapa orang yang merasa terganggu dengan keberadaan navbar ini sehingga mereka mencoba menghilangkan navbar tersebut.apakah melanggar TOS?sejauh ini belum ada blogger yang di banned karena menghilangkan navbar.berarti anda boleh melakukannya donk?

sebenarnya Banyak sekali template yang sudah menghilangkan navbar tersebut secara otomatis.tapi bagi anda yang memiliki template dengan navbar diatasnya.berikut cara untuk menghilangkannya:

1. Seperti biasa anda harus login dulu ke blogger.com

2. Masuk ke bagian layout dan kemudian edit html

3. Copy script berikut kedalam tag <head>

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

Untuk lebih jelasnya:

-----------------------------------------------
Blogger Template Style
Name: 3ttb03
Designer: aaaaa
URL: http://free-templatesblogger.blogspot.com
Date: Februari 2008
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================

4.setelah itu simpan...sekarang anda bisa lihat hasilnya

Atau Kamu juga bisa Gunakan seperti yang sering saya Gunakan.

1.Log in Ke Blog.
2. Masuk ke bagian Rancangan dan kemudian edit HTML,

Copas saja Kode berikut:

Paste atau letakan kode tadi di bawah kode ]]>

kemudian save. Setelah itu akan muncul tautan, utuk mempertahankan atau menghapus Navbar. pilih Saja hapus Navbar.
Selesai.
Liat Navbar anda Sudah terhapus.
Effec lain adalah, gambar tang atau obeng yang ada serta quick edit tidak berfungsi.

Selamat mencoba , Semoga bermanfaat. Publisher: vitto - 09.10

bloggertrick, tipsblogger

Membuat label Blog

Blogspot sendiri sudah memberi layanan tentang Label ini.Jadi anda bisa memanfaatkannya dengan mudah.Dengan memasang label,maka akan mempermudah pengjung blog membaca artikel artikel yang telah anda tulis.dalam tips dan trik blog kali ini akan diajarkan cara membuat label

Cara memasang label pada blog:

ada 2 cara :

A.Melalui menu posting

1. Login ke blogger.com
2. klik new post
2. Sekarang anda ada didalam menu posting.lihat dibagian paling bawah kiri.disana ada tulisan label
3. Anda bisa menuliskan label di kolom tersebut.nanti label yang telah anda tulis disana otomatis akan langsung tersimpan dengan sendirinya.

B.Melalui menu dasboard

1. Login ke blogger.com
2. Anda akan langsung masuk ke menu dasborad.klick edit post di bagian blog yang akan anda tambahkan label
3. Di menu edit post akan muncul daftar tampilan semua tulisan/postingan anda
4. Centang setiap postingan yang ingin anda tambahkan label
5. Setelah itu klik bagian atas yang bertuliskan label.pilih new label..tuliskan nama label yang ingin anda gunakan.maka otomatis postingan yang tadi anda pilih telah tertempel label.

setelah pembuatan label selesai,sekarang kita akan memunculkan label label yang telah kita buat ke dalam blog.caranya:
1. Masuk ke bagian layout-page element-gadgets
2. Nanti akan muncul banyak sekali gadgets..
3. Pilih "label"
4. Atur letak label sesuai dengan yang anda inginkan.
5. Kemudian save perubahan yang telah anda buat

Sekarang coba anda kembali ke blog anda tadi.Lihat sekarang label sudah muncul di blog anda. Publisher: vitto - 09.02

tipsblogger, widget

Cara Menghilangkan Tang atau Obeng di Blog

Tahu gak logo tank dan obeng pada posting artikel ya kayak gambar diatas. Mengapa kita harus menghilangi,,,? Itu bertujuan agar kita apabila lupa keluar dari posting agar gak diubah - ubah orang OK.

Gini Cara menghilangkannya:

1. Login ke blogger
2. Tata LEtak lalu EDIT HTML
3. Centang "Expand Widgets Templates"
4. Cari kode seperti di bawah ini

5. ]]></b:skin>

6. Copy paste kode berikut persis di atas kode yang tadi :

.quickedit { display:none;}

Klik tombol Simpan template.
* Selesai.

Tip: Gunakan Ctrl+F, isikan dan tinggal klik Next dan next untuk mencari kode kode tersebut. Publisher: vitto - 08.04

Background, bloggertrick, widget

Cara Mengganti Background Blog

* Mengganti Warna Background
Untuk template minima klasik :

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

Cari kode berikut:

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

Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :

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

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

Mengganti Background Dengan Image
Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, gambarnya seperti ini :

gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan dalam jumlah yang sangat banyak.
Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !
Untuk template minima klasik :

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

body {
background:#fff url('alamat gambar anda');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

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

Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna background.
Untuk template minima baru :

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

body {
background:$bgcolor url('alamat gambar anda disini');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

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

Selamat mencoba ! Publisher: vitto - 06.29

bloggertrick, widget

Cara Membuat Blogroll

Blogroll adalah tempat menyimpan link address milik orang lain pada blog atau website kita.

BlogRool ini gunanya untuk menghemat tempat pada blog pada saat daftar link kita sudah banyak dan menyesakkan body template blog. Ada beberapa cara yang saya tahu untuk membuat blogrool.
Lihat demo di bawah ini.

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://blogbloggertrick.blogspot.com/">Home</option>

<option value="http://www.friendz-star.tk/">Blog Healty</option>

<option value="http://www.friendz-radio.tk/">Radio Web</option>

<option value="http://www.vittofriend.tk/">Vitto Blog</option>

</select>
</form>

Ganti alamat blog dan Judul yang bertanda merah, sesuai keinginan anda.
Kamu bisa letakan di mana saja kamu inginkan.
semoga Bermanfaat. Publisher: vitto - 06.02

bloggertrick, widget

Cara Membuat Scroll Pada Kolom Komentar

Cari kode berikut:

Sisipkan kode berikut di atas kode tadi:

Scroll kebawah sampai anda temukan kode </dl> atau gunakan lagi tombol ctrl+f untuk mencari

Setelah dapat letakkan kode berikut setelahnya

</div>

Simpan template.

Kalau masih bingung, lihat kode berikut, yang warna merah adalah kode yang harus anda sisipkan. Untuk ukuran height bisa anda ganti sesuai selera

Jangan lupa simpan template! Lihat hasilnya.

Publisher: vitto - 05.44

bloggertrick, widget

Cara Membuat Menu Scrolling

Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh dibawah ini!

Cara membuat random Post dengan Mudah

Membuat Effec Tulisan Berjalan

Membuat Effec Hover pada Gambar

Cara membuat Link Berwarna Pelanagi

Cara buat menu scroll seperti diatas:

Copi code berikut:

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">
<ul>
<p><a href="http://blogbloggertrick.blogspot.com/2011/04/cara-membuat-random-post-dengan-mudah.html">Cara membuat random Post dengan Mudah</a> </p>

<p><a href="http://blogbloggertrick.blogspot.com/2011/04/membuat-efek-tulisan-berjalan-marquee.html">Membuat Effec Tulisan Berjalan</a> </p>

<p><a href="http://blogbloggertrick.blogspot.com/2011/04/membuat-effec-hover-pada-gambar.html">Membuat Effec Hover pada Gambar</a> </p>

<p><a href="http://blogbloggertrick.blogspot.com/2011/04/cara-membuat-link-berwarna-pelangi.html">Cara membuat Link Berwarna Pelanagi</a> </p>

</ul>
</div>

Setelah itu paste pada tempat yang sobat inginkan di blog sobat , apakah pada postingan, sidebar dll. Untuk alamat URLnya sobat ganti dan sesuaikan sendiri!

Untuk memasangnya pada postingan sobat harus berada dalam tab edit HTML, sedangkan untuk memasangnya pada sidebar saran saya untuk sobat agar tak bingung menyesuaikan dengan lebar sidebar ganti lebarnya menjadi 100% kodenya widht: 100% cara memasangnya (untuk yang belum tahu ni):

Login ke blogger
Pada bagian dasbor pilih menu layout/ tata letak
Klik elemen halaman
Tambah gadget pada sidebar yang anda ingin tampilkan menu scroolnya!
Pilih tambah HTML/JavaScript
Beri titel, simpan codenya dalam konten
Save, lihat hasilnya diblog sobat !

Semoga bermanfaat!

Publisher: vitto - 05.12

bloggertrick, widget

Cara Membuat Cursor Bertaburan Bintang

Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik dan unik. Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget dan ragam aksesoris blog termasuk mengganti tampilan cursor. pernah lihat suatu blog dengan cursor bertabur bintang? Pingin mencobanya? Mudah kok, ikuti langkah-langkah berikut:
Membuat cursor bertabur bintang

1. Login ke blogger.
2.Masuk ke Layout-->Page Element
3.Tambahkan gadget HTML/JavaScript
4.Pilih kode taburan bintang dibawah ini.
Bintang Hijau

Bintang Ungu

Bintang Merah

Bintang Biru

Bintang Putih

5.Kopi salah satu kode diatas .
6. dan save.
7.Sekarang kamu sudah punya banyak bintang, tinggal nunggu Bulannya muncul aja...hohoho... Publisher: vitto - 04.39

bloggertrick, widget

Cara Membuat Link Berwarna Pelangi

Ingin membuat link pada blog anda berkedip dan berwarna pelangi ketika tersentuh pointer? Caranya sangat mudah

* Dalam keadaan loggin,
* Masuk pada menu template,
* Klik Edit HTML,
* Cari kode <head>,

Kemudian copy code berikut dan paste tepat dibawah code tadi

* Terakhir simpan template,gampang sekali bukan, Link anda berkedip - kedip ketika Pointer diarahkan ke link anda.
Silakan di Coba. Publisher: vitto - 04.26

bloggertrick, widget

Membuat Effec Hover pada Gambar

Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan sorotkan pointer pada sample image dibawah ini:

Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

3. Simpan Template

Sedikit penjelasan dari kode CSS diatas, untuk membuat effect buram atau hover pada image kode yang kita tambahkan adalah "hovereffect" sedangkan "opacity", "filter:" alpha, "-moz-opacity" dan "-khtml-opacity" adalah digunakan untuk membuat effect hover terbaca pada beberapa browser.

Properti "opacity" digunakan untuk browser yang mendukung standar CSS3 (sebagian besar browser modern mendukung CSS3).
Sementara "filter: alpha" adalah untuk Internet Explorer,
"-Moz-opacity" adalah untuk untuk Firefox, walaupun versi baru mendukung "opasitas",
"-Khtml-opacity" adalah untuk Safari dan Chrome untuk kompatibilitas ke belakang.
"0.5" dan "1.0" digunakan untuk memberitahu browser kuantitas kegelapan.

Sekarang untuk menambahkan effect ini, sobat harus menambahkan class = "hovereffect" untuk image sobat.

Sebagai contoh biasanya ketika kita menambahkan image kodenya sebagai berikut:

Untuk menambahkan effect hover pada image kodenya jadi seperti dibawah ini:

Effect hover ini tidak saja berfungsi untuk blogger tapi juga dapat digunakan dalam platform blog yang menggunakan CSS, seperti Wordpress. Publisher: vitto - 03.35

bloggertrick, template

Membuat Efek Tulisan Berjalan (Marquee)

Berikut Beberapa macam efek marque atau teks berjalan:

Contoh marque dasar

Kalimat Anda

caranya dengan menambah code berikut:

<marquee>Kalimat Anda</marquee>

Kalimat Anda

Contoh marquee yang berjalan dari kiri ke kananKalimat Anda

Kalimat Anda

<marquee direction="right">Kalimat Anda</marquee>

Berjalan Kekanan dan kekiri tanpa pembatas

Kalimat Anda

<marquee behavior="alternate">Kalimat Anda</marquee>

Berjalan dari kanan ke kiri, tapi akan berhenti saat mouse berada diatas tulisan tersebut

Kalimat Anda

<marquee onmouseover="this.stop()" onmouseout="this.start()">Kalimat Anda</marquee>

Ini contoh marquee kanan kiri dengan kecepatan yang bisa di atur dengan menambahkan perintah "Scrollamount"

Kalimat Anda

<marquee behavior="alternate" scrollamount="18">Kalimat Anda</marquee>

Anda bisa mengatur kecepatan sesuai selera anda dengan mengganti value atau angka pada kata scrollamout

Ini contoh marquee ke atas

Kalimat Anda

<marquee direction="up">Kalimat Anda</marquee>

Kalau sekarang marquee dengan pembatas biasanya untuk kata/kalimat yang berurutan, agar tidak terlalu memakan tempat, bergerak keatas dan akan berhenti saat mouse anda berada diatasnya

Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda

<marquee direction="up" onmouseover="this.stop()" width="200" scrollamount="3" onmouseout="this.start()" height="100">Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>
</marquee>

Ini kalau ke bawah tanpa kode mouseover

Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda

<marquee direction="down" width="200" scrollamount="4" height="100">Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>
</marquee>

Ini dengan perintah "center" agar tulisan berada di posisi tengah form/bingkai :

Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda
Kalimat Anda

<center>
<marquee direction="up" onmouseover="this.stop()" width="200" scrollamount="1" onmouseout="this.start()" height="100">Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>Kalimat Anda<br>
</marquee>
</center>

Contoh Marquee dengan gambar:

Caranya Dengan Mengganti Tulisan "Kalimat Anda" di atas dengan alamat gambar kamu,kode warna hijau adalah kode alamat Gambar yang akan di tampilkan.

Selamat Bereksperimen.. Publisher: vitto - 02.19

bloggertrick, template, widget

Cara Membuat Random Post Dengan Mudah

Kali ini saya akan memposting bagaimana cara membuat Random Post dengan hanya mengikuti petunjuk yang saya berikan di bawah ini.

1. Dalam keadaan loggin, klik Layout (Tata Letak)

2. Klik Page Elemens (Elemen Halaman)=> Add a gadget (Tambah Gadget)=> HTML/Javascript. Copi dan paste pada content code berikut:

Jangan lupa Save, lihat hasilnya. Seperti punya Saya di samping Publisher: vitto - 13.37

bloggertrick, template, tipsblogger, widget

Cara Memasang Back To Top

Mungkin kalian sudah banyak yang tahu cara memasang back to top, tapi bagi yang masih awam, dan baru belajar, ini saya kasih cara membuatnya.

1. kamu Log in ke blogger
2. Tata Letak
3. Kamu cari kode </body>
4. kamu taru kode ini di atasnya

Silakan di Save.
Untuk gambar kamu bisa modifikasi sendiri sesuai selera.
kalau mau seperti punya saya silakan aja.

selamat mencoba. Publisher: vitto - 13.01

bloggertrick, template, tipsblogger, widget

Cara membuat Readmore atau Baca Selanjutnya

Postingan kali ini tutorial membuat read more atau baca selengkapnya,
*** Membuat Read More atau Baca Selengkapnya Pada Template Blogger baru...

1. Sig in dulu ke blogger

2. Masuk pada menu setting atau pengaturan

3. Klik formatting/ format

4. Pada bagian post Template, isi kotak kosong tersebut dengan kode seperti ini:

<span class="fullpost">

</span>

5. Save setting

Guna setting kode ini agar pada saat postingan kode tersebut muncul secara otomatis pada bagian edit HTML untuk membantu kita agar tidak lupa dengan kode tersebut.

langkah selanjutnya...

6. Kembali ke dasboard

7. Masuk pada menu Layout atau Tata Letak

8. Klik menu Edit HTML

9. Untuk mengantisipsi hal yang tidak kita inginkan terjadi pada template kita baiknya klik tombol Download Full Template dulu, kemudian save di folder, jadi bisa back up data kembali kalau tak berhasil.

10. Jangan lupa centang kotak kecil disamping tulisan Expand Widget Template Tunggu beberapa saat sampai proses selesai.

11. Cari kode berikut } ]]></b:skin> kemudian letakkan tepat dibawahnya kode berikut:

12. Selanjutnya cari kode <p><data:post.body/></p> letakkan kode berikut tepat dibawahnya.

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

Read more...bisa anda ganti dengan baca selengkapnya atau kalimat lain yang anda sukai

13. Jangan lupa save/ simpan template.

14. Terakhir, setiap kali membuat postingan, pada tempat yang anda inginkan diletakkan Read More letakkan kode ini<span class="fullpost"> dan diakhir postingan letakkan kode </span> yang perlu diingat anda meletakkan kode tersebut pada bagian edit HTML bukan bagian compose/ Tulis.

*** Memasang read more pada template yang disediakan blogger sama dengan langkah-langkah diatas dari point 1 sampai 10. Untuk selanjutnya cari kode:

<p><data:post.body/></p> atau <data:post.body/> karena kode itu sama saja, p hanya kode spasi

Kalau sudah dapat ganti kode tersebut dengan kode berikut:

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

Langkah selanjutnya sama dengan point 13 dan 14 diatas

Selamat mencoba! Publisher: vitto - 12.28

bloggertrick, template, tipsblogger, widget

Membuat Readmore dengan Icon

Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini:

Kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket, atau postingan blog anda. Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini :

Selanjutnya ikuti tutorial berikut:

* Seperti biasa anda harus dalam keadaan sig ini pada blogger
* Masuk menu Tata Letak/ Layout=>klik Edit HTML=>Centang kotak kecil disamping Expand Template Widget
* Untuk menjaga yang tidak anda inginkan bisa Back up terlebih dahulu template anda!
* Kemudian cari kode seperti ini:

Gantilah kalimat Read More dengan URL image yang telah disiapkan diatas, sehingga menjadi seperti ini :

* Terakhir, save template anda! Lihat hasilnya!

Semoga bermanfaat! Publisher: vitto - 12.12

bloggertrick, template, tipsblogger, widget

Cara Ngeblog Via HandPhone

Membuat blog itu ternyata sangat mudah karena tidak memerlukan keahlian khusus dan pengetahuan kode HTML. Apalagi ditunjang dengan banyaknya website yang menyediakan blog gratis dan menawarkan beragam kemudahan bagi penggunanya. Blog dapat diatur hanya dalam hitungan menit, sangat sederhana dan mudah.
Pada kesempatan kali ini saya mencoba menuliskan bagaimana mendaftar atau log in ke blogger.

Nah berikut tutorialnya:
1. Download aplikasi OperaMini melalui web browser di hp anda. Anda bisa mendapatkannya dari situs resminya http://www.oporamini.com atau dari http://wap.getjar.com. Jika di hp anda telah ada browsing opera mini, langsung melangkah pada tahap ke 2.

2. Buka aplikasi OperaMini anda, ketikkan dikolom paling atas alamat url http://www.blogger. com

3. Cari dan klik "ciptakan blog anda/create your blog now" atau "masuk/ log in' jika anda telah memiliki account google. Jika anda belum memiliki account google. Anda akan segera diarahkan kehalaman pendaftaran.

4. Pada halaman pertam 'ciptakan sebuah account google/ create account', isikan username, nama awal, nama akhir, alamat email dan password. Anda juga akan diminta membaca vertivikasi kata dan penerimaan persyaratan, klik box dibagian bawah sebagai persetujuan. Setelah itu klik tombol lanjutkan.

5. Setelah itu anda akan mendapatkan halaman kedua 'beri nama blog anda/ name blog. Masukkan judul blog yang ingin anda buat, alamat blog, klik cari ketersedian, isikan verifikasi kata yang terlihat dikotak dibawahnya, klik lanjutkan/ continue jika nama yang anda pilih masih tersedia atau pilih nama lain blog yang ditawarkan oleh blogspot.

4. Pada halaman ketiga pilih template blog yang anda inginkan atau biarkan saja karena dapat anda atur nanti. Klik lanjutkan/ continue.

5. Tunggu proses yang berlangsung sampai tampil informasi 'Blog anda sudah jadi/ your blog has been created'. Dan anda dapat memulai posting pertama anda.

Semoga bermanfaat!!! Publisher: vitto - 12.02

bloggertrick, template, tipsblogger, widget

Cara Ngeblog Ofline Tanpa harus Online Ke Internet

Mungkin teman-teman sudah pernah mendengar atau bahkan sudah tak asing lagi dengan Windows Live Writter, tapi saya yakin tidak menutup kemungkinan ada diantara pengunjung yang belum mengetahuinya, maka saya memandang perlu untuk mempublikasikan hal ini dalam postingan saya kali ini, postingan yang saya ketik menggunakan aplikasi yang akan kita bahas saat ini.
Bagi kita yang koneksi internetnya lambat atau sering putus-putus, atau ingin ngirit besar biaya penggunaan internet untuk blogging maka ini adalah merupakan sebuah kabar gembira. Saat ini kita bisa ngeblog tanpa terhubung dengan internet atau ngeblog offline, tanpa harus sign in ke blogger dan masuk pada dasbor. Lho kok bisa? Jawabnya pasti bisa dengan Windows Live Writter (WLW).
Apakah Windows Live Writter (WLW) itu? WLW adalah salah satu sofware atau produk yang baru saja dirilis oleh Microsoft, sebuah aplikasi editor untuk mempublikasikan postingan kita ke layanan blog paling populer, termasuk Windows Live Spaces, SharePoint, Wordpress, Blogger, LiveJournal, TypePad, Community Server dan banyak lagi.

Jika kita sudah biasa dan akrab menggunakan Microsoft Word, maka kita tidak akan kesulitan lagi menggunakan WLW, bahkan tanpa belajar.

Asyiknya ngeblog offline dengan WLW:
1. Yang pertama karena ini gratis (sukanya yang gratis mulu), tidak perlu sign in lagi ke blogger.

2. Area untuk mengetik ditampilkan secara penuh, sehingga jika kita sudah memiliki artikel diword tinggal copy paste saja (senangnya). Kalau punya banyak artikel tinggal kita atur kapan akan dipublikasikan dengan menset publish date disebelah kanan bgian kategori. Dan menerbitkannya saat kita online.

3. Kita bisa mengupload foto (bahkan lengkap dengan fasilitas edditing dan effecnya, keren khan?), video link, peta, tag, hiperlink, table dan lain lain.

4. Memungkinkan pula untuk mencari tulisan-tulisan yang ada di Local Drafts, Recently Published, atau tulisan terbaru yang sudah diambil langsung dari blog secara online. Untuk yang terakhir ini, terbatas pada jumlah tulisan yang diambil, bukan untuk keseluruhan tulisan pada blog.

5. Dan fitur kerennya lagi preview post kita karena diawal konfigurasi tool aplikasi ini juga mendownload template kita. Jadi hasilnya nanti InsyaAllah sama persis dengan postingan kita diWLW ini. Dengan fitur ini kita juga bisa melihat kode HTMLnya jadi jangan khawatir tidak bisa buat read morenya. He3.
Nah ingin mencoba aplikasi ini, silahkan download langsung disini.

Sumber: www.home.live.com dengan bantuan google translate, jadi maaf kalau ada bahasa yang kurang pas! Dan berbagai sumber lainnya Publisher: vitto - 11.48

bloggertrick, template, widget

Cara Menambah Elemen Halaman dibawah Dua Kolom atau Sidebar

Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:

Menambah elemen di bawah dua sidebar

1. Login ke blogger dengan id anda
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Silahkan diganti dulu nilai width 220px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 350px dan properti menjadi float: right; Jadinya seperti ini :

#sidebar-wrapper { width: 350px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna merah saja.

#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#bottom-col { width:350px; float:right; word-wrap:break-word; overflow:hidden; }

Sehingga kodenya akan menjadi seperti ini :

#sidebar-wrapper {
width: 350px;
float: right;
$startSide
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#bottom-col { width:170px; float:right; word-wrap:break-word; overflow:hidden; }

Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode ini :

# Sisipkan kode berikut di bawah kode tadi :
<b:section class='sidebar' id='bottom-col' preferred='yes'/>
# Sehingga secara keseluruhan menjadi seperti ini :

# Sekarang klik tombol SIMPAN TEMPLATE
# Selesai Publisher: vitto - 11.30

New Update

Labels

Popular Posts

Follow us on FaceBook

Random Post

Be our Fan

Popular Topics

Blogroll