Kejutan Internet

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

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

Panduan Awal Membuat Blog

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

ASCII Generator Dan Pengertian ASCII

Trik-Tips

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.

Membuat Gambar Graffiti Online

Trik-Tips

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?

Cara Membuat Forum

Trik-Tips

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.

Perubahan Bentuk widget Follower

Blog Info

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

Trik-Tips

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

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

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.

CSS Background

CSS

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.

Mengganti Background Blog Dengan CSS

Tutorial Blog

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)

Tutorial Blog

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

Blogger Hack

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

Menonjolkan Teks Tertentu Pada Postingan

Blogger Hack

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/AVvXsEhzXuUjV2r5f3naBWRkJWZDfLE7MZDSZvlxavIREMeC6VU_8KfH6u1IU5LlEQl8WlhsqGznmsnHVrnbzZUVWv_fFFMhlrrs63Y3xU-uufzNH1Ggzo1tilRaxeocTVLlUt3bSVnRCI1xB68/); 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.

CSS3		Javascript
HTML5		Photoshop
PHP		CorelDraw