vivaxsnews

Widget Daftar Isi / Sitemap

Sitemap atau yang sering disebut oleh orang awam sebagai daftar isi ini sangat berguna untuk blog kita, ketika pengunjung ingin menjelajahi blog kita maka inilah peran yang harus hadir untuk mempermudah penjelajah blog kita. Kali ini saudara blogger kita Om Abu-farhan punya solusinya yaitu "The Best Table of Contents (TOC) or Sitemap for Blogger".

Seperti terlihat di blog ini yang menggunakan TOC dari Om Abu-Farhan yang Saya masukkan kedalam fitur baru blogger yaitu "Pages Blogger". Nah pada kesempatan kali ini Saya kan mengulas bagimana caranya memasang TOC kedalam halaman pages kita.

1. Langkah pertama masuk blogger.com

2. Masuk postingan Om Abu-Farhan untuk mengcopy source code seperti dibawah ini

Copy code diatas dan ingat ganti www.abufarhan.co.cc dengan alamat blog Anda

3. Pada Dashboard draft.blogger.com masuk pada bagian "Posting" lalu "Edit Pages"

4. Lalu klik tombol "New Pages" lalu paste code tadi kedalam post editornya

5. Setelah di SAVE akhirnya jadi juga dan sisipkan link pagesnya tadi kedalam daftar menu di blog Anda untuk navigasinya

Nah ulasan singkat mengenai Sitemap blogger yang canggih oleh Om Abu-Farhan semoga bermanfaat bagi Anda

Ucapan terima kasih sebesar-besarnya kepada Om Abu-Farhan

Cbox.ws Pengganti Shoutbox Shoutmix

Baru-baru ini muncul permasalahan dari pelayanan shoutbox shoutmix.com yang tidak memunculkan link untuk member basic shoutmix. Ternyata pihak shoutmix ingin meningkatkan kepopuleran website shoutmix, untuk memunculkan link di pesan, Anda harus log in ke website shoutmix terlebih dahulu.
Para blogger yang menggunakan fasilitas shoutmix pun merasa kurang nyaman karena susahnya jika ingin meningkatkan traffic blog melalui meninggalkan jejak di shoutbox (blogwalking).

Nah apakah ada pengganti Shoutmix untuk pelayanan free shoutbox yang masih bisa untuk nge-link?

Yaitu Cbox.ws, iya benar cbox.ws adalah layanan free shoutbox untuk blogger yang masih bisa untuk menampilkan link. Tak kalah dengan shoutmix, cbox.ws ini memiliki fitur yang sama seperti shoutmix.

Apakah Anda ingin mencoba cbox.ws?

caranya cukup mudah Anda tinggal masuk ke website www.cbox.ws lalu ikuti panduan untuk membuat shoutbox cbox.ws gratis.

Nah sedikit ulasan tentang shoutbox yang lebih nyaman dipakai jika Anda ingin bisa memunculkan link kedalam shoutbox Anda.

Sekian semoga bermanfaat

Wibiya : ToolBar Blogger Canggih

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibia ini sangat canggih.
Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? penasaran ingin lihat Demonya?? langsung aja kunjungi wibia dan lihat di browser kamu bagian bawah.

Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

1. Buka website wibiya.com dan klik tombol "Get It Now"

2. Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol "Next"

3. Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"

4. Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next"

5. Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on blogger

6. Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger

7. Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

Sekian semoga bermanfaat.

Launching Blog : Sang Merak

SangMerak - Adalah sebuah nama dari blog saya yang saya jadikan sebagai catatan pribadi, cerita tentang kehidupan Saya , pengalaman, kisah dan kejadian-kejadian dalam hidupku tertulis blog itu

SangMerak - Journal Blog dari "Anasku" yang akan saya jadikan media Saya sharing-sharing.. "Bukan tentang blogger" tetapi tentang pernak-pernik kehidupan Saya.. so.. buat Anda para blogger silahkan mengunjungi blog saya tersebut dan kita dapat saling berbagi disitu... bebas untuk tukar-tukar pengalaman dan hal lainya...

Kunjungi ya kawan-kawan > > http://sangmerak.blogspot.com

terima kasih
"Anas Luqman"

Floating Box Cocok Untuk Adsense

Oh betapa kangenya Saya untuk mengupdate blog Saya yang agak gak keurus ini, dikarenakan minimnya ide-ide untuk menulis sebuah artikel untuk memperbarui posting di blog ini. Eh kok malah curhat ya, he. . he . . *Back To Topic* Membuat Floating Box yang biasanya dipasang di blogger yang biasanya diisi content Ads ini. Coba lihat deh Shoot layar yang aku ambil dari blog Saya yang Saya buat dengan niat iseng-iseng ini.

Coba kita lihat box yang berwarna kuning diatas, itulah element box floating yang akan tetap di pojok kanan atas jika scroll di geser-geser kebawah atau keatas.

Saya menemukan script ini bermula dari browsing-browsing untuk tips yang cocok untuk memasang adsense di blog dan akhirnya Saya menemukan script ini di Dynamicdrive dan saya akan mengulas ulang di blog Saya ini agar Anda dapat menggunakanya dengan mudah. Monggo..

Pertama yang Anda lakukan adalah Log In ke blogger lalu masuk menu "Layout" Kemudian Masuk bagian "Edit HTML"

Pasang code ini dibawah code <head> atau sebelum code </head>

Dan pasang Code CSS dibawah ini diatas code ]]></b:skin>

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

(Edit code CSS diatas untuk menentukan style dari box)

Kemudian di Save dulu ukkay kawan.

Dan masuk pada bagian "Layout -> Page Elements"

Pilih tempat Gadget yang kamu ingini (terserah karena box ini akan melayang) dan klik "Add a gadget" Masukkan code dibawah ini

<div id="topbar">

MASUKKAN CODE SCRIPT ADS / LAINYA DISINI

<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>

</div>

Ingat ganti code yang berwarna merah diatas dengan code gadget yang kamu ingini.

Kalau sudah. . . SAVE deh...

Selesai..

Yapzz semoga bermanfaat nie tutorial dari pengalaman Saya.

Dan pasang Code CSS dibawah ini diatas code ]]></b:skin>

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

<div id="topbar">

MASUKKAN CODE SCRIPT ADS / LAINYA DISINI

<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>

</div>

Ingat ganti code yang berwarna merah diatas dengan code gadget yang kamu ingini.

Kalau sudah. . . SAVE deh...

Selesai..

Yapzz semoga bermanfaat nie tutorial dari pengalaman Saya.

Baru Di Blogger : Template Designer

Kabar gembira buat para blogger yang suka mengotak-atik template, kini blogger meluncurkan sebuah fitur baru di draft blogger yang kayaknya sudah ditunggu lama oleh para pengguna blogger yaitu "Template Designer". Apa itu "Template Designer"?. Ya "Template Designer" adalah sebuah fitur baru blogger yang memudahkan kita untuk mengotak-atik template kita tanpa melalui "Edit HTML", misalnya mengganti background, warna font/link, tata letak dan masih banyak lainya.

Bagaimana menurut Anda tentang fitur baru blogger in draft ini??

Mungkin jika Saya menjelaskan dengan detail percuma.. mendingan Anda langsung praktek aja biar lebih jelas . Hehe

Begini caranya jika mau coba untuk Anda yang belum tau caranya.

Buka Alamat http://draft.blogger.com dan Log In kemudian masuk ke menu "Layout/Tata Letak"

Nah setelah itu masuk pada bagian "Template Design"

Nah setekah Anda masuk pada "Template Design" Silahkan coba aja, dijamin menyenangkan.

Kelemahanya adalah tidak bisa bekerja pada template yang sudah di otak-atik, akan muncul pesan seperti "Not applicable for this template" atau "

This template does not allow for layout customizations" untuk bagian-bagian tertentu buat template yang sudah di otak-atik sendiri.

Nah gimana? Semakin Asyik kan nge-Blog? semakin canggih aja fitur Blogger.com.

Sekedar informasi buat Anda semoga bermanfaat.

Nah setelah itu masuk pada bagian "Template Design"

Menambah Status Yahoo Messenger Di Gagdet Profil

Gadget profil adalah gadget dimana Anda bisa manampilkan foto, deskripsi tentang Anda dan link profil blogger Anda kedalam blog Anda. Untuk menambahkan widget ini cukup mudah yaitu dari menu "Layout/tata letak" kemudian klik "Add a gagdet" lalu pilih "Profile". Dan untuk mengedit profil dan foto Anda bisa melalui Dashboard blogger Anda dengan mengklik "Edit Profile" yang ada di sebelah kanan dashboard Anda.

Nah kali ini Saya akan membahas tentang bagaimana caranya menambah Status Yahoo Messenger kedalam gadget Anda, yang berhubungan dengan postingan Saya yang dulu tentang menambah Status Yahoo Messenger ke dalam blog.

Coba lihat contoh dari modifikasi sederhana ini :

Terlihat diatas ada tambahan status Yahoo messenger ke dalam gadget profil Saya.

Nah dibawah ini adalah caranya :

1. Langkah pertama yang Anda harus lakukan Adalah Log In ke Blogger lalu menuju bagian "Layout" kemudian masuk "Edit HTML"

2. Setelah itu centang "Expand Widget Templates"

3. Kemudian cari code dibawah ini :

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya

Code yang berwarna merah diatas ganti dengan ID YM kamu, dan angka yang berwarna hijau adalah bentuk dari lambang status YM, keterangan lebih jelasnya bisa dibaca disini.

5. Kalau sudah kemudia SAVE

Nah diatas adalah cara menambah Status Yahoo Messenger kedalam gadget profil, Anda juga bisa Status YM dengan status Camfrog, G-Talk dan lainya.

Cukup disini dulu postingan Saya. . . Semoga bermanfaat dan silahkan menuliskan komentar dibawah ini untuk tanggapan dan pertanyaan.

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya

Widget Sederhana Twitter

Tentunya Anda sudah tau apa itu twitter dan Anda jugalah pengguna twitter untuk saat ini. Ya, Twitter adalah salah satu Social Networking yang terkenal selain Facebook yang banyak digunakan orang di seluruh penjuru dunia.

Namun kali ini Saya akan membahas tentang bagaimana caranya membuat widget Twitter yang sederhana ke dalam blog kita, dalam artian widget ini lebih simple dari pada widget yang diberikan oleh pihak twitter.

Isi dari widget ini adalah hanya tweets dan link twitter Anda, pas buat Anda yang suka hal ringkas namun bertujuan jelas. Coba lihat contoh widgetnya dibawah ini

Gambar diatas screen capture dari widget twitter sederhana di blog Saya ini. Yuk mari Saya pandu cara buat widget ini

Pertama yang Anda lakukan adalah Log In ke blogger Anda, setelah masuk Dashboard Lalu klik Link Layout / Tata Letak

Setelah masuk pada menu Layout lalu pilih tempat yang mau Anda pasangi Widget ini kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript"

Kemudian Paste code dibawah ini

<div id="twitter_div" style="background: url(http://i725.photobucket.com/albums/ww258/anasceria/new-tuts/single-bird-icon-1.png) top left no-repeat; color:#000000; font-size:14px; padding-left: 50px;"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/anasceria">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/anasceria.json?callback=twitterCallback2&count=3" type="text/javascript"></script>

Perhatikan !! :

Ganti code yang berwarna merah diatas dengan ID Twitter Anda
Ganti Angka 3 yang berwarna biru diatas dengan jumlah angka tweet Anda yang ingin Anda Tampilkan
Code yang berwarna hijau adalah style dari widget tersebut, diantaranya ada URL gambar dari widget tersebut, sesuaikan dengan selera Anda, klik disini untuk panduan CSSnya
Text "follow me on twitter" adalah text link perintah untuk Follow Twitter Anda yang bisa Anda ganti sesuai Selera Anda

Nak demikianlah tutorial Saya hari ini untuk membuat widget sederhana twitter. Semoga bermanfaat bagi Anda dan jangan lupa Follow Twitter Saya disini untuk mengetahui update dari Saya, Terima Kasih.

Perhatikan !! :

Ganti code yang berwarna merah diatas dengan ID Twitter Anda
Ganti Angka 3 yang berwarna biru diatas dengan jumlah angka tweet Anda yang ingin Anda Tampilkan
Code yang berwarna hijau adalah style dari widget tersebut, diantaranya ada URL gambar dari widget tersebut, sesuaikan dengan selera Anda, klik disini untuk panduan CSSnya
Text "follow me on twitter" adalah text link perintah untuk Follow Twitter Anda yang bisa Anda ganti sesuai Selera Anda

Nak demikianlah tutorial Saya hari ini untuk membuat widget sederhana twitter. Semoga bermanfaat bagi Anda dan jangan lupa Follow Twitter Saya disini untuk mengetahui update dari Saya, Terima Kasih.

Static Page - Halaman Di Blogger

Static Page - Fitur baru dari blogger yang memungkinkan para blogger bisa menambahkan halaman diluar posting, sebagai contoh adalah halaman daftar isi saya tersebut yang Saya taruh di halaman static page.

Static Page ini diresmikan oleh blogger setelah uji coba dulu di draft blogger, jadi kita bisa menggunakan Static Page ini sebagai halaman About Me, Contact me dan lain-lain seperti halnya wordpress yang sudah lebih duluan menggunakan fitur ini. Jadi intinya static page ini adalah halaman tersendiri seperti halaman posting namun dipisahkan dari halaman posting.

Coba di pahami. .

1. Langkah Anda jika ingin menggunakan Static Page adalah dari Dashboard Anda masuk ke menu "Edit Posts"

2. Setelah Anda masuk pada halaman "Edit Posts" Kemudian pilih halaman "Edit Pages"

3. Setelah Anda masuk kedalam halaman "Edit Pages" lalu klik tombol "New Page" untuk menambah halaman baru dan masukkan isi dari halaman tersebut dengan text editor seperti halnya dalam postingan.

Dan perintah "Add Page List Gadget" adalah gadget untuk menu navigasi Static Page Anda.

Diatas adalah gambaran pengaturan setelah mengklik perintah "Add Page List Gadget", Anda bisa mengatur sesuai keinginan Anda..

Sekedar informasi Aja buat Anda tentang Static Page, dan kita untuk saat ini hanya bisa menambahkan 10 pages aja, entah kapan ada pembaharuan dari pihak blogger tentang fitur ini, tunggu aja deh.

Dapet Juara II

Syukur Alhamdulillah Saya haturkan kepada Allah SWT yang telah memberikan rahmatnya kepada Saya sehingga Saya bisa mendapatkan juara 2 dalam lomba blog tingkat SLTA se-Kab Jepara yang diadakan pada tanggal 22 sampai 30 Desember 2009 Lalu.

Ucapan terima kasih Saya yang pertama kepada Orang tua Saya yang telah memberikan doanya kepada Saya, teman-teman yang mensupport Saya, Guru-guru yang telah memberikan dana komunikasi dan transportasi juga dukunganya kami ucapkan terima kasih.

Teman-teman yang udah memberikan Voting kami ucapkan terima kasih sebesar-besarnya, karena tanpa dukungan kalian Saya tidak akan mendapatkan juara 2 ini, terutama teman-teman dari Blogger, Facebook, YM, Camfrog dan social network lainya Saya ucapkan terima kasih sebesar-besarnya.

Okkelah kalo begitu :D buat yang lainya tetap berkreatifitas ya...

Salam Terima Kasih

Luqman Khoirul Anas

Minta Voting Untuk Mendukung Saya

Dalam rangka lomba Blog Se-SMA Kab. Jepara, Saya mewakili SMA Saya yaitu SMAN 1 Mayong dalam lomba blog tersebut. Blog yang Saya buat adalah http://smanmayong.blogspot.com.

Penentuan pemenang lomba blog ini salah satunya melalui Voting di blog komep. Nah maka dari itu Saya sebagai Author blog SMAN Mayong meminta dukungan dari Anda melalui voting.

Caranya

Kunjungi http://komep.blogspot.com dan di sidebar kanan ada Voting Area, Lalu pilih SMAN 1 MAYONG dan klik tombol Vote.

Saya ucapkan terima kasih sebesar-besarnya untuk yang udah Voting. Semoga perjuangan Saya akhir-akhir ini tidak sia-sia..

Ayo Voting sebelum tanggal 30 Desember 2009

Salam Blogger

Dasar CSS

Taukah Anda apa itu CSS (Cascading Style Sheet) ?, CSS adalah bahasa scripting untuk memformat tampilan website secara keseluruhan. Misalnya Anda ingin mengatur jenis dan ukuran huruf, background, posisi element dan sebagainya. Sebagai contoh kita akan memformat tag p (parapraph) keseluruhan pada satu element dengan menggunakan cara HTML seperti ini <p font="tahoma">text</p>. Akan lebih efisien lagi jika kita memformat tag p dengan menggunakan CSS agar tidak terlalu rumit. Dan Anda juga bisa menyusun element layout dengan CSS tanpa harus menggunakan table yang menurut saya terlalu rumit dalam codingnya.
CSS juga bisa di akses oleh bahasa pemrograman, misalkan javascript, PHP dll.

Pengguna'an CSS ada 3 cara yaitu

Langsung disisipkan didalam tag <head></head>. Untuk menyisipkan di dalam tag head harus diawali dengan tag <style type="text/css"></style>
Menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag <head> dengan cara seperti ini <head><link rel="stylesheet" href="css/style.css" type="text/css" /></head>
Langsung pada tag yang bersangkutan, misalkan <div style="style_nya"></div>

Ada aturan dalam penulisan CSS ini, CSS ditulis dalam bentuk block-block script yang disebut style. Dan Saya akan mencoba menerangkan lebih detail lagi dalam cara menuliskan CSS.

Menggunakan tanda # sebagai awalan style, contohnya

#gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal <div id="gaya">ini teks</div>. Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali.
Menggunakan tanda dot (.) sebagai awalan style, contohnya

.gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan <div class="gaya">ini teks</div>. Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag
Tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan

div{
background-color:blue;
}

artinya semua tag div akan dikenai style tersebut
Turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
Contohnya

#induk .anak{
background-color:red;
}
cara menggunakannya
<div id="induk">
<div class="anak">bla_bla</div>
</div>

artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.

Penggunaan tanda # atau dot(.) tergatung pada kasus yang dihadapi, dan sangat bervariasi. Awalnya binggung cara menggunakanya, kayaknya sama saja sih, tetapi jika anda sering menggunakannya, ada saat yang tepat apakah anda akan menggunakan tanda # atau dot(.) atau malah turunan.

Sedikit tentang dasar CSS dan semoga dapat membantu Anda yang pastinya CSS tidak bisa ditinggalkan dalam pengolahan halaman web dan browser juga sudah ada yang membuat script CSS yang hanya support dengan browser tersebut misalnya Mozilla Firefox, dll.

dirangkum dari berbagai sumber dan disederhanakan. salah satunya adalah http://bimoweb.com/dasar-css-scripting.html

Langsung disisipkan didalam tag <head></head>. Untuk menyisipkan di dalam tag head harus diawali dengan tag <style type="text/css"></style>
Menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag <head> dengan cara seperti ini <head><link rel="stylesheet" href="css/style.css" type="text/css" /></head>
Langsung pada tag yang bersangkutan, misalkan <div style="style_nya"></div>

Ada aturan dalam penulisan CSS ini, CSS ditulis dalam bentuk block-block script yang disebut style. Dan Saya akan mencoba menerangkan lebih detail lagi dalam cara menuliskan CSS.

Menggunakan tanda # sebagai awalan style, contohnya

#gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal <div id="gaya">ini teks</div>. Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali.
Menggunakan tanda dot (.) sebagai awalan style, contohnya

.gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan <div class="gaya">ini teks</div>. Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag
Tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan

div{
background-color:blue;
}

artinya semua tag div akan dikenai style tersebut
Turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
Contohnya

#induk .anak{
background-color:red;
}
cara menggunakannya
<div id="induk">
<div class="anak">bla_bla</div>
</div>

artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.

Panduan Awal Membuat Blog

Blog sebuah gaya hidup baru era digital yang sudah meluas di berbagai kalangan, dengan tujuan masing-masing orang membuat blog untuk kepentingan personal, komersial maupun organisasi. Untuk saling bertukar pikiran, opini maupun saran itulah salah satu tujuan orang membuat blog. Tapi sebagian orang masih belum bisa tentang cara membuat blog. bagaimanakah membuat blog secara gratis itu?

langkah pertama yang harus Anda punya adalah alamat email. Jika belum mempunyai alamat email silahkan ikuti panduan dibawah ini.

Penulis meyarankan membuat email di gmail (google mail) karena satu layanan dengan blogger yang menyediakan layanan blog secara gratis.

Panduan Membuat Email Gmail

Masuk alamat www.gmail.com
Lalu klik tombol "Buat akun"
Lalu setelah itu akan muncul form-form yang harus Anda isi dengan benar dan sesuai data diri Anda.
Setelah semuanya terisi dan vertifikasi kata sudah diisi dengan benar klik tombol "Saya Menerima. Buat Akunku."
kalau semua form diisi dengan benar alamat dan mengklik tombol "Saya menerima. Buat.." alamat emailpun sudah jadi.

Nah setelah kita punya alamat email kita bisa membuat blog dengan cara sebagai berikut :

Selain email dari Gmail kita pun bisa mendaftar blog dengan alamat email yang lainya misalnya Yahoo Mail, Plasa dan yang lainya

Oke kita bahas cara membuat blog dari awal.

Cara Membuat Blog di Blogger

Masuk alamat www.blogger.com
Lalu klik tombol navigasi "Ciptakan Blog Anda"
Lalu isi form yang mucul dengan benar sesuai data diri Anda

Setelah diisi dengan benar contreng kotak "Saya Menerima..." Lalu klik tombol "Lanjutkan"
Lalu akan muncul konfigurasi nama blog Anda seperti dibawah ini, isi judul blog dan alamat blog Anda

Setelah diisi klik tombol "Lanjutkan"
Setelah langkah ke empat selesai sekarang pilih sebuah template Anda. Pilih template yang Anda sukai kemudian klik tombol "Lanjutkan"
Dan blog Anda sudah jadi apabila ingin memposting silahkan klik tombol "Mulai Blogging"

Mudah kan membuat blog itu? dengan blog Anda bisa lebih keren lho . Happy blogging!!

Masuk alamat www.gmail.com
Lalu klik tombol "Buat akun"
Lalu setelah itu akan muncul form-form yang harus Anda isi dengan benar dan sesuai data diri Anda.
Setelah semuanya terisi dan vertifikasi kata sudah diisi dengan benar klik tombol "Saya Menerima. Buat Akunku."
kalau semua form diisi dengan benar alamat dan mengklik tombol "Saya menerima. Buat.." alamat emailpun sudah jadi.

Nah setelah kita punya alamat email kita bisa membuat blog dengan cara sebagai berikut :

Selain email dari Gmail kita pun bisa mendaftar blog dengan alamat email yang lainya misalnya Yahoo Mail, Plasa dan yang lainya

Oke kita bahas cara membuat blog dari awal.

Cara Membuat Blog di Blogger

Masuk alamat www.blogger.com
Lalu klik tombol navigasi "Ciptakan Blog Anda"
Lalu isi form yang mucul dengan benar sesuai data diri Anda

Setelah diisi dengan benar contreng kotak "Saya Menerima..." Lalu klik tombol "Lanjutkan"
Lalu akan muncul konfigurasi nama blog Anda seperti dibawah ini, isi judul blog dan alamat blog Anda

Setelah diisi klik tombol "Lanjutkan"
Setelah langkah ke empat selesai sekarang pilih sebuah template Anda. Pilih template yang Anda sukai kemudian klik tombol "Lanjutkan"
Dan blog Anda sudah jadi apabila ingin memposting silahkan klik tombol "Mulai Blogging"

Mudah kan membuat blog itu? dengan blog Anda bisa lebih keren lho . Happy blogging!!

ASCII Generator Dan Pengertian ASCII

Halo sobat blogger dimanapun Anda berada kali ini Saya akan membahas tentang ASCII (American Standard Code for Information Interchange), asing bukan yah kata-kata itu? tapi secara tidak menyadarinya kita sering menjumpainya nah sebenarnya apa itu ASCII?

ASCII (American Standard Code for Information Interchange) adalah suatu standar internasional dalam kode huruf dan simbol seperti Hex dan Unicode tetapi ASCII lebih bersifat universal, contohnya 124 adalah untuk karakter "|". Ia selalu digunakan oleh komputer dan alat komunikasi lain untuk menunjukkan teks. Kode ASCII sebenarnya memiliki komposisi bilangan biner sebanyak 8 bit. Dimulai dari 00000000 hingga 11111111. Total kombinasi yang dihasilkan sebanyak 256, dimulai dari kode 0 hingga 255 dalam sistem bilangan Desimal. (http://id.wikipedia.org/wiki/ASCII).

Nah sekarang bahasan utamanya adalah membuat karya seni dengan ASCII art, sering kita mendapat sebuah seni text yang berbentuk gambar misalnya :

Gambar Mobil.

   ___________________
|,-----.,-----.,---.\
||     ||     ||    \\
|`-----'|-----||-----\`----.
[       |    -||-   _|    (|
[  ,--. |_____||___/.--.   |
=-(( `))-----------(( `))-==
  `--'             `--'

Dan masih banyak contoh yang lainya kunjungui situs ini. Dan pada zaman dahulu printer tidak bisa membuat grafis dan ASCII art inilah alternatifnya.

ASCII generator memudahkan Anda yang ingin membuat ASCII art dengan text atau gambar, mau tau caranya kunjungi saja http://ascii.mastervb.net/
Silahkan ikuti petunjuk dari situs itu dan buat kreasimu sendiri.

Untuk tips biasanya untuk membuat ASCII art pada HTML menggnuakan tag <pre> dan ditutup </pre> agar code-code ASCII tersusun rapi dan tidak terpecah-pecah.

Nah sedikit tentang ASCII silahkan mencoba mengembangkan kreatifitas.
untuk lebih banyak situs yang menyediakan ASCII generator silahkan brwosing.

   ___________________
|,-----.,-----.,---.\
||     ||     ||    \\
|`-----'|-----||-----\`----.
[       |    -||-   _|    (|
[  ,--. |_____||___/.--.   |
=-(( `))-----------(( `))-==
  `--'             `--'

Dan masih banyak contoh yang lainya kunjungui situs ini. Dan pada zaman dahulu printer tidak bisa membuat grafis dan ASCII art inilah alternatifnya.

Membuat Gambar Graffiti Online

Tau gak graffiti itu apa?, yang menurut saya graffiti itu yang biasanya tulisan-tulisan keren yang digambar oleh seniman graffiti di tembok-tembok kota itu lho? untuk mengexpresikan kebebasanya. Biasanya berupa tulisan-tulisan yang dibuat sedemikian unik dan artistik dan bahkan berupa gambar-gambar. Nah bisa gak Anda membuat tulisan bergaya graffiti dengan mudah?

Graffiti creator jawabnya karena disitu Anda bisa membuat tulisan-tulisan bergaya graffiti dengan mudah. Selain itu?
Anda juga bisa melihat gallery para seniman graffity manca negara yang memamerkan karyanya di situs itu. Pokoknya asyik dan keren deh. Kunjungi aja nih www.graffiticreator.net

Gambar diatas keren gak?

Gambar diatas keren gak?

Cara Membuat Forum

Forum atau media diskusi yang memungkinkan member dapat saling bertukar pikiran dan saling tanya dan menjawab antara anggota, atau dalam artian pendek adalah bertemunya sang newbie (pemula) dengan master (jagoan) dalam sebuah topik pembicaraan,

wah saya sedikit ngawur untuk lebih jelasnya tanyakan saja pada mbah google

.

Kita dapat membuat forum sendiri secara gratis. Mau tau caranya?

berikut langkah-langkahnya :

Buka situs www.forumotion.com
Lalu klik tombol "Creat a free forum"
Lalu pilih sebuah sistem forum : phpbb3, phpbb2, invison atau punBB.
Kemudian pilih sebuah templatenya dan klik tombol "continue"
Lalu isi form forum information dan form admin information sesuai dengan data Anda
Kalau langkah ke 5 sudah diisi dengan benar kemudian centang "I Agree...." dan klik tombol continue.
Kemudian ada test admin password diisi samakan dengan password Anda tadi dan klik continue.
Jadi deh. dan silahkan ikuti keterangan berikutnya untuk memanagement forum Anda.

Nah diatas sedikit tutorial cara membuat forum dan untuk versi indonesiannya masuk saja situs www.indonesianforum.net, semoga bermanfaat.

wah saya sedikit ngawur untuk lebih jelasnya tanyakan saja pada mbah google

.

Kita dapat membuat forum sendiri secara gratis. Mau tau caranya?

berikut langkah-langkahnya :

Buka situs www.forumotion.com
Lalu klik tombol "Creat a free forum"
Lalu pilih sebuah sistem forum : phpbb3, phpbb2, invison atau punBB.
Kemudian pilih sebuah templatenya dan klik tombol "continue"
Lalu isi form forum information dan form admin information sesuai dengan data Anda
Kalau langkah ke 5 sudah diisi dengan benar kemudian centang "I Agree...." dan klik tombol continue.
Kemudian ada test admin password diisi samakan dengan password Anda tadi dan klik continue.
Jadi deh. dan silahkan ikuti keterangan berikutnya untuk memanagement forum Anda.

Nah diatas sedikit tutorial cara membuat forum dan untuk versi indonesiannya masuk saja situs www.indonesianforum.net, semoga bermanfaat.

Perubahan Bentuk widget Follower

Dapet kabar dari blogger buzz serta mas ade sanusi katanya widget follower berubah tampilan menjadi sekaligus widget google friend connect, ternyata setelah saya buktikan benar apa katanya. widget follower yang memberikan fasilitas subscribe pada dashboard blogger yang mengikuti dan sekarang ada tambahan "google friend connect" pada widget tersebut.

Dengan perubahan tampilan dan tambahan fitur ini semoga para blogger lebih suka dan menikmati fasilitas yang baru dan keunggulannya. Untuk blogger maju terus memberikan tren gaya hidup digital.

PDF E-book Search Engine

Untuk para penggemar "Electronic Book" atau yang sering disingkat E-book berbentuk PDF (Portable document format) yang bisa dibaca dengan PDF reader misalnya Adobe Reader atau software sejenis, untuk mencari E-book sudah tersedia search engine yang melayani kita untuk mencari E-book dengan format PDF.
pdf-search-engine memberikan fasilitas PDF search engine dari berbagai situs yang menyediakan PDF dengan gratis.

Jadi tak usah pusing jika kita mau mencari e-book secara online tinggal cari di pdf-search-engine dengan cara masukkan kata kunci buku yang dicari kemudian klik tombol "search books" nah maka akan muncul e-book berformat PDF sesuai dengan kata kunci Anda.
Jika mau mencoba mencari PDF silahkan kunjungi disini.

Widget Penerjemah Dari Google

Widget penerjemah bahasa dari google ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini.

dibawah ini adalah bentuk widget tool dari google translate :

Udah dicoba belum? kalau sudah jika mau pasang widget ini silahkan baca dibawah ini.

Copy paste code dibawah ini kedalam blog Anda dengan cara :

1. Masuk menu Layout kemudian masuk menu Page Elements
2. Pilih box layout yang diinginkan kemudian klik Add a gadgets
3. Pilih Gadget HTML/JavaScript dan taruh code dibawah ini :

Code yang berwarna merah diatas adalah ukuran dari widget yang bisa kamu ubah-ubah. Kalau sudah kemudian SAVE.

Nah sedikit info dari saya dan jika Anda mau menggunakan layanan dari google translate yang lain kunjungi : http://translate.google.com

Membuat Menu Tab View

Menu tabview adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak diapakai untuk menghemat tempat pada blog dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu diatasnya. Jadi jika kita mengklik menu diatasnya maka halaman tabel yang muncul adalah halaman tabel yang dibuat sesuai dengan menu tabel diatasnya, dan jika kita mengklik menu tabel lain maka yang muncul adalah halaman tabel yang bersesuain namun tetap pada satu tempat itu.

Coba perhatikan dibawah ini :

Gimana sudah paham belum? mau cara buatnya?

Oke kita pakai teori dari Mas Kendhin saja karena mudah dipahami.

Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layout kemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Perhatikan text yang berwarna merah itu keterangan dari menu tab view yang bisa kamu edit sesuai keinginan kamu, untuk code warna bisa dilihat disini.

kalau sudah pasang script dibawah ini diatas code </head>

kalu sudah silahkan "Save Template" Anda.

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilih HTML/JavaScript dan taruh Code dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :

Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.

Kalau sudah tinggal SAVE.

Keterangan :

Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.

Kalau sudah tinggal SAVE.

CSS Background

Masih membahas tentang CSS (Cascading Style Sheets) background yang memungkinkan Anda dapat mengatur posisi background, warna elemen background, pengulangan background dan yang lainya. Saya akan membahas CSS yang digunakan dalam pengaturan background secara singkat dan jelas, semoga bisa sedikit membantu Anda dalam mengontrol background dari elemen.

Ada beberapa macam property background yang memungkinkan Anda dapat mengontrol background dari elemen.

1. background-color

Memungkinkan Anda memberikan warna pada background

Property	Keterangan
transparent	Mengosongkan warna background atau membuat elemen menjadi transparan dengan elemen dibawahnya.
#FF3366	Memberi warna pada background, code #FF3366 adalah code warna hex dari warna merah, Anda bisa mengubah dengan code warna rgb atau nama warna misalnya: red (merah), black (hitam), dan sebagainya.

Contoh :
#kotak
{
background-color:#FF3366;
}

Menjadi

ELEMEN KOTAK

2. background-image

Memungkinkan Anda menambahkan gambar pada background

Property	Keterangan
url(URL_GAMBAR)	memberi gambar pada background elemen, code URL_GAMBAR bisa Anda ganti dengan url server gambar Anda.
none	Mengosongkan background gambar pada elemen.

Contoh:

#elemen-gambar
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg)
}

Menjadi :

ELEMEN GAMBAR

3. background-attachment

Memungkinkan Anda mengatur background gambar dengan pergeseran scroll bar

Property	Keterangan
scroll	Memungkinkan elemen background mengikuti penggeseran scroll bar.
fixed	Memungkinkan elemen background tidak mengikuti pergeseran dari scroll bar.

Contoh

#elemen-attachment
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-attachment:fixed
}

Menjadi

BACKGROUND FIXED

GESER SCROLL

BACKGROUND FIXES

GESER SCROLL

4. background-repeat

Memungkinkan Anda mengatur pengulangan background gambar

Property	Keterangan
repeat	Membuat elemen gambar background menjadi berulang-ulang
no-repeat	tidak ada pengulangan
repeat-y	pengulangan vertikal
repeat-x	pengulangan horizontal

Contoh :

#elemen-ulang
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-repeat:repeat-y;
}

Menjadi :

PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

5. background-position

Memungkinkan Anda mengatur posisi background gambar Anda.

Property	Keterangan
top left	Penempatan posisi background gambar, top left adalah posisi background berada kiri atas, Anda bisa mengganti posisi menjadi : top center top right center left center center center right bottom left bottom center bottom right
x% y%	mengatur posisi background secara sumbu horizontal dan vertikal, misalnya 5% 30% adalah penempatan gambar horisontal 5% dan vertikal 30%. Atau bisa menggunakan pixel, 20px 30px artinya posisi horizontal berada pada 2o pixel dan vertikal 30 pixel.

Contoh:

#elemen-posisi
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-position:top left;
background-repeat:no-repeat;
height:200px
}

Menjadi :

ELEMEN BACKGROUND

PENGULANGAN

ATAS KIRI

Dari semua perincian diatas Anda dapat menggunakan satu perincian property background saja. misalnya :

#kotak
{
background:#FFFFFF url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg) no-repeat top left fixed
}

Nah sedikit tutorial dari Saya semoga dapat membantu Anda. Sekian semoga bermanfaat.

Property	Keterangan
transparent	Mengosongkan warna background atau membuat elemen menjadi transparan dengan elemen dibawahnya.
#FF3366	Memberi warna pada background, code #FF3366 adalah code warna hex dari warna merah, Anda bisa mengubah dengan code warna rgb atau nama warna misalnya: red (merah), black (hitam), dan sebagainya.

Contoh :
#kotak
{
background-color:#FF3366;
}

Menjadi

ELEMEN KOTAK

2. background-image

Memungkinkan Anda menambahkan gambar pada background

Property	Keterangan
url(URL_GAMBAR)	memberi gambar pada background elemen, code URL_GAMBAR bisa Anda ganti dengan url server gambar Anda.
none	Mengosongkan background gambar pada elemen.

Contoh:

#elemen-gambar
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg)
}

Menjadi :

ELEMEN GAMBAR

3. background-attachment

Memungkinkan Anda mengatur background gambar dengan pergeseran scroll bar

Property	Keterangan
scroll	Memungkinkan elemen background mengikuti penggeseran scroll bar.
fixed	Memungkinkan elemen background tidak mengikuti pergeseran dari scroll bar.

Contoh

#elemen-attachment
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-attachment:fixed
}

Menjadi

BACKGROUND FIXED

GESER SCROLL

BACKGROUND FIXES

GESER SCROLL

4. background-repeat

Memungkinkan Anda mengatur pengulangan background gambar

Property	Keterangan
repeat	Membuat elemen gambar background menjadi berulang-ulang
no-repeat	tidak ada pengulangan
repeat-y	pengulangan vertikal
repeat-x	pengulangan horizontal

Contoh :

#elemen-ulang
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-repeat:repeat-y;
}

Menjadi :

PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

5. background-position

Memungkinkan Anda mengatur posisi background gambar Anda.

Property	Keterangan
top left	Penempatan posisi background gambar, top left adalah posisi background berada kiri atas, Anda bisa mengganti posisi menjadi : top center top right center left center center center right bottom left bottom center bottom right
x% y%	mengatur posisi background secara sumbu horizontal dan vertikal, misalnya 5% 30% adalah penempatan gambar horisontal 5% dan vertikal 30%. Atau bisa menggunakan pixel, 20px 30px artinya posisi horizontal berada pada 2o pixel dan vertikal 30 pixel.

Contoh:

#elemen-posisi
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-position:top left;
background-repeat:no-repeat;
height:200px
}

Menjadi :

ELEMEN BACKGROUND

PENGULANGAN

ATAS KIRI

Mengganti Background Blog Dengan CSS

Background atau latar belakang pada blog adalah bagian yang paling dasar pada blog, banyak template blog yang sama yang banyak dipakai, maka untuk memberi ciri khas pada blog Anda hal yang paling dasar dan yang paling mudah adalah mengganti warna background pada blog Anda atau dengan tambahan gambar pada background blog Anda.
Kali ini Saya akan menulis tutorial singkat blogspot tentang mengganti background dengan CSS, Mau tau caranya?
perhatikan dibawah ini.

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Lalu cari CSS dari body seperti dibawah ini

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.

Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :

back

URLnya : http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengantur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

sedikit tambahan jika Anda mau mencari koleksi background

http://www.patterncooler.com/
http://www.bgpatterns.com/
http://patterns.ava7.com/

Nah sekian tutorial mengganti background blog, sedikit semoga membantu Anda.

Cara Pasang Iklan Di Blog (KumpulBlogger)

Anda sudah merasa lama didunia perbloggeran?, Anda merasa tidak mendapatkan apa-apa dari blog selain kepuasan hati?. Jangan salah blogger juga bisa dijadikan sumber penghasilan lho, Antara lain dengan cara memasang iklan di blog Anda dengan jasa periklanan Indonesia kumpulblogger.com, Anda tidak perlu bersusah-susah mencari iklan sendiri tinggal daftar terus pasang scriptnya di blog Anda karena kumpulblogger.com sudah mencarikan iklan untuk Anda jadi Anda tinggal terima beresnya saja.
Apalagi kalau blog Anda pengunjungnya sudah banyak pasti uang akan mengalir dengan sendirinya. Kumpulblogger.com menghitung setiap text link atau banner yang disediakan dengan cara PPC (pay per clik) atau setiap ada pengunjung yang mengklik zona iklan Anda.

Gimana enak gak? mau? ikuti caranya dibawah ini

Langkah pertama yang harus Anda lakukan adalah mendaftar kumpulblogger.com disini dengan cara mengklik link "register now" pada pojok kanan atas di situs kumpulblogger.com

Lalu masukkan alamat email Anda lalu klik tombol "Register" otomatis password untuk Log In sudah ada di email Anda. Anda bisa mengubah passwordnya setelah Anda Log In

Lalu setelah Anda Log In sebelum pasang scriptnya klik link "Tambah Blog" Pada menu Blogger

Isi form sesuai perintahnya lalu klik tombol "Submit"

Kalau sudah klik link "Script Text Advertising untuk Blog anda" dan pilih style iklan yang Anda sukai lalu copy scriptnya dan tempatkan di blog Anda dengan cara masuk menu Layout (tata letak) pada dashboard blogger lalu pada menu Page element (elemen halaman) pilih tempat yang Anda sukai dan klik "add a gadget" lalu pilih "HTML/JavaScript" dan Paste Script tadi yang Anda copy di kumpulblogger.com

Nah selesai

Selamat datang didunia Blogger dan selamat datang didunia periklanan.

Ehhh sampai lupa mengucapkan terima kasih pada yang sudah daftar kumpulblogger.com melalui Refferal saya. makasih ya

Menampilkan Next Page Hanya Judul Postingnya

Bukan apa-apa tapi hanya iseng-iseng ingin menulis di blog ini saja (ehh tapi sebenernya emang Saya bercita-cita sebagai penulis lho

). Dengan maksud ingin membagi-bagikan sedikit pengetahuan Saya mengenai mengotak-atik blog di blogspot Saya akhirnya menulis artikel ini dengan diawalai doa Saya mantap menulis artikel ini untuk Sobat-sobat sekalian semoga bermanfaat.

Oke langsung aja ke topik pembicaraan yaitu menampilkan next page dengan judul postinganya saja di main blog. Gimana maksudnya next page sih?
Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Anda mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.

Seperti Anda jika mengklik link "older post" di blog kang rohman

Hanya akan tampak judul postingnya saja seperti dibawah ini

Iya tha..

Kalau g percaya buktikan saja

Mau tau caranya?

Nah caranya cukup mudah kok gini lo

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

Lalu Masukkan CSS dibawah ini diatas code ]]></b:skin>

#titleonly {
padding:6px 0 6px 5px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom:2px;
background:#EAE9E9;
color:#B8002E;
}

Kalau Sudah cari code dibawah ini

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

Ganti Code diatas dengan code dibawah ini.

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

Kalau Sudah tinggal SAVE dehh!!

Gimana gampang kan?

Tampilanya bisa kamu ubah sesuai dengan selera kamu tinggal mengedit CSSnya.

Nah jika ingin menampilkan semua judul post pasang URL link dibawah ini

http://AlamatBlogAnda.blogspot.com/search?max-results=200

Ganti tulisan yang tercetak merah diatas dengan alamat blog Anda

Gimana gampang kan?

Silahkan dicoba semoga berhasil jika Ada pertanyaan lontarkan saja di koementar

Bukan apa-apa tapi hanya iseng-iseng ingin menulis di blog ini saja (ehh tapi sebenernya emang Saya bercita-cita sebagai penulis lho

Hanya akan tampak judul postingnya saja seperti dibawah ini

Iya tha..

Kalau g percaya buktikan saja

#titleonly {
padding:6px 0 6px 5px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom:2px;
background:#EAE9E9;
color:#B8002E;
}

Kalau Sudah cari code dibawah ini

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

Ganti Code diatas dengan code dibawah ini.

http://AlamatBlogAnda.blogspot.com/search?max-results=200

Ganti tulisan yang tercetak merah diatas dengan alamat blog Anda

Gimana gampang kan?

Silahkan dicoba semoga berhasil jika Ada pertanyaan lontarkan saja di koementar

Menonjolkan Teks Tertentu Pada Postingan

Seringkali jika kita baca buku tutorial seperti misalnya tutorial HTML, tutorial Bahasa Pemrograman dan buku-buku tutorial yang lainya kita menjumpai seperti kode-kode atau script yang ditonjolkan dengan memberi background dan pembatas yang beda dengan teks-teks yang lainya yang ada di buku yang berguna untuk mempermudah para pembaca buku membedakan script-script dengan tulisan yang lainya. Begitu juga di blog jika Anda menulis tentang tutorial yang memungkinkan untuk menulis kode-kode HTML dan script-script yang lainya agar pembaca lebih mudah untuk membedakan.

Contoh seperti dibawah ini

HANYA CONTOH

POSTINGAN YANG DITONJOLKAN DISINI

HANYA CONTOH

Dan seperti ini

Kesepian hati…

Adakah benar adalah lorong waktu kebahagiaan ?

Kesunyian hati…

Adakah sungguh adalah suara merdu saat usia senja ?

Aku takut, aku salah kira

Meski kusadari kini ku di tengah itu semua

Aku hanya dapat bertanya

Tanpa sedikitpun kepastian akan jawabnya

(http://www.anggrekbiru.com/)

Terlihat perbedaan dengan contoh pertama dan kedua : contoh pertama dengan background warna dan contoh kedua dengan background gambar.

Untuk membuatnya silahkan perhatikan cara berikut

cara pertama yaitu cukup mudah kita tinggal masuk ke posting editor dan tulis code seperti dibawah ini di posting editor bagian "Edit Html"

untuk background warna kita gunakan code seperti dibawah ini

<div style="background:#FFFFCC; border:1px dotted #F5003D; padding:5px;">
DISINI POSTINGAN YANG MAU DITONJOLKAN
</div>

background:#FFFFCC;
adalah warna background, codenya bisa Anda ganti menurut warna yang Anda sukai. (lihat code warna disini)

border:1px dotted #F5003D;
adalah garis tepinya 1px adalah ketebalan dari garis tepinya, bisa kamu ganti ketebalanya sesuai selera Anda, dotted adalah jenis bordernya bisa kamu ganti sesuai selera kamu (baca disini jenis border). #F5003D adalah kode warna dari border silahkan Anda ganti dengan selera Anda.

padding:5px;
Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi. (baca disini untuk lebih jelasnya)

tambahkan overflow:auto; jika ingin menambahkan fungsi scroll

untuk background gambar seperti dibawah ini

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9H2aDiAC3SB0uZE_3LHpgjl93bzMSFW5pU01r9Fn0-iUGXEJV1mmntMO_9cw62kKa3R6v1dBOYVBKLaL2QSnSJXJAL47Ts2PSA1JN9iOc0gCOD5hej6b-TcAFERM6TEjh27anLMvAX8Y/); width:508px; height:362px; padding:5px;">

DISINI TEXT

DISINI TEXT

</div>

Text yang tercetak merah diatas adalah url gambarnya. width:508px; adalah lebar area dan height:362px; adalah tinggi area.

Gimana gampang kan?

ini adalah sebagian cara untuk menonjolkan text tertentu, trik-trik berikutnya akan menyusul.
Sekian semoga sedikit membantu Anda dan bermanfaat bagi Anda.

HANYA CONTOH

POSTINGAN YANG DITONJOLKAN DISINI

HANYA CONTOH

Dan seperti ini

Kesepian hati…

Adakah benar adalah lorong waktu kebahagiaan ?

Kesunyian hati…

Adakah sungguh adalah suara merdu saat usia senja ?

Aku takut, aku salah kira

Meski kusadari kini ku di tengah itu semua

Aku hanya dapat bertanya

Tanpa sedikitpun kepastian akan jawabnya

(http://www.anggrekbiru.com/)

<div style="background:#FFFFCC; border:1px dotted #F5003D; padding:5px;">
DISINI POSTINGAN YANG MAU DITONJOLKAN
</div>

vivaxsnews

Pages

Widget Daftar Isi / Sitemap

Cbox.ws Pengganti Shoutbox Shoutmix

Wibiya : ToolBar Blogger Canggih

Launching Blog : Sang Merak

Floating Box Cocok Untuk Adsense

Baru Di Blogger : Template Designer

Menambah Status Yahoo Messenger Di Gagdet Profil

Widget Sederhana Twitter

Static Page - Halaman Di Blogger

Dapet Juara II

Minta Voting Untuk Mendukung Saya

Dasar CSS

Panduan Awal Membuat Blog

ASCII Generator Dan Pengertian ASCII

Membuat Gambar Graffiti Online

Cara Membuat Forum

Perubahan Bentuk widget Follower

PDF E-book Search Engine

Widget Penerjemah Dari Google

Membuat Menu Tab View

CSS Background

Mengganti Background Blog Dengan CSS

Cara Pasang Iklan Di Blog (KumpulBlogger)

Menampilkan Next Page Hanya Judul Postingnya

Menonjolkan Teks Tertentu Pada Postingan

Entri Populer

Blog Archive

Labels