2008 | CAPTAIN

Mengganti Background Blog Dengan CSS

Posted by marommuhammad Posted on 4:29 AM

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.

Labels: Tutorial Blog

Cara memasang kode Html

Posted by marommuhammad Posted on 8:19 AM

Banyaknya pengunjung yang bertanya kodenya dipaste dimana mas?, wah saya menjadi sadar akan kekurangan saya, lupa jika kita adalah pemula...ok tanpa basa-basi lagi marikita bahas bagaimana cara memasang kode html ke dalam blog kita?Caranya adalah...Contoh kode adalah sebagai berikut Text berkedipDi atas adalah kode text yang berkedip, cara memasangnya adalah :1. jika kamu ingin

Labels: Tips Blogging

Cara Pasang Iklan Di Blog (KumpulBlogger)

Posted by marommuhammad Posted on 5:15 AM

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

Labels: Tutorial Blog

Menampilkan Next Page Hanya Judul Postingnya

Posted by marommuhammad Posted on 5:59 AM

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

Labels: Blogger Hack

Menonjolkan Teks Tertentu Pada Postingan

Posted by marommuhammad Posted on 2:45 AM

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/AVvXsEi6vd9-vaSEulLwAeCYG1QU_nZlLHH7mGj0cNg-7pzJgJLr48qbIkBkzOaN5yYL0iOni5DLuiu1fcy9GJ7IxQcbYByw523WL9j6gz1UQaoVe-_eWM2N8z2usZd7fMA-Ei0n-YBNGJ45tlk/); 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.

Labels: Blogger Hack

Tips Mengedit HTML Blogspot

Posted by marommuhammad Posted on 12:31 PM

Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to...??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah "lah-lah" yang kadang2 atau sering terjadi tersebut.

Berikut ini beberapa tips untuk edit HTML bogger:

1. Backup Template

Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.

2. Memberi Tanda Centang pada Kotak "Expand Widget Template"

Ini yang kadang2 dilupakan para "editor". Kalau kotak "Expand Widget Templates" tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.

3. Tips Mempermudah Pencarian

Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan "Ctrl+f" lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode <p><data:post.body/></p> jika tidak ketemu maka cb carilah sebagiannya atau seperti ini data:post.body kalau sudah ketemu maka klik tombol next untuk melihat apakah ada kode lain yang sama untuk memastikan kode yang dikehendaki. Tapi tips ini sepertinya sulit dilakakukan jika menggunakan browser "Chrome" paling mudah jika menggunakan "Mozilla Firefox".

4. Tips Menghadapi Error Yang Muncul

Jika saat menyimpan hasil editan kemudian muncul pesan error, misal seperti ini:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure.....
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan bener2 sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol "Clear Edit" terlebih dahulu.

Mungkin untuk masalah mengahadapi berbagai pesan error ini akan kita bahas lebih lanjut diepisode yang lainnya yang lebih spesifik.

Yak mungkin itu aja dulu tips-tips dalam pembahasan kali ini. Kita jumpa lagi di tips-tips berkutnya.

Labels: Blogger Hack

Bagian-bagian Pada Template Minima

Posted by marommuhammad Posted on 4:56 AM

Taukah Anda tentang bagian-bagian dasar pada layout atau template blogger? terutama pada template default blogger yaitu minima template. Terutama bagi Anda para blogger pemula pasti kebingungan untuk mengetahui nama bagian dan kegunaanya pada layout blogger (ya maklum dong mas namanya baru pemula), nah maka dari itu Saya kan membagi sedikit pengetahuan Saya kepada Anda bagi yang belum tau dasar-dasar layout.

Lihat gambar dibawah ini yang merupakan capture dari layout minima untuk memperjelasnya

Nah terlihat pada gambar diatas adalah capture dari template dasar blogger yang belum termodifikasi, terlihat pada gambar diatas terdapat bagian bagianya yaitu header, main wrapper sidebar dan footer.

Untuk lebih jelasnya mengenai bagian-bagian layout template baca dibawah ini.

Nah dari gambar diatas keteranganya dibawah ini :

Susunan bagian template blogger seperti dibawah ini

BODY→ OUTER WRAPPER → (HEADER + MAIN WRAPPER + SIDEBAR + FOOTER)

BODY : Adalah bagian paling dasar dari bagian-bagian lainya, body pada blog biasanya memenuhi halaman dari browser Anda baru setelah itu tersusun bagian-bagian lainya.

OUTER WRAPPER : Bagian ini adalah tempat dimana bagian-bagian dasar seperti header,main wrapper, sidebar dan footer tersusun diatas bagian ini

HEADER : Header ini tempatnya pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog.

MAIN WRAPPER : Sering disebut juga Posting area karena pada main wrapper adalah area postingan pada suatu Blog.

SIDEBAR : Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget misalnya gadget yang telah disediakan oleh pihak blogger maupun luar blogger yang tempatnya disamping posting area/main wrapper.

FOOTER : Footer ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.

Nah sedikit pengetahuan Saya mengenai Layout semoga bermanfaat bagi Anda pembaca blog ini dan untuk blogger pemula yang belum tau bagian-bagian layout.

Sekian semoga artikel ini sedikit membantu Anda.

Labels: Customize Template

Akhirnya Ganti Template Juga

Posted by marommuhammad Posted on 12:50 PM

Setelah sekian lama, akhirnya blog ini ganti template juga. Dari awal blog ni memang tidak pernah ganti template, paling cuma modifikasi dikit sana sini. Tapi sekarang, setelah menimbang2 dan melalui pemikiran yang panjang x lebar x tinggi, akhirnya diputuskan untuk mengubah template blog ini. Dan bagi yang berminat dengan template blog ini yang lama sekarang sudah bisa didownload. Silahkan DOWNLOAD DISINI untuk mendapatkan template lama blog ini. Tapi tentunya ada beberapa hal yang harus dimodifikasi, diantaranya yaitu :

1. Icon Kalender
Supaya icon kalendernya berfungsi (tidak "undefine") maka haru dirubah dulu format tanggalnya. Yaitu melalui "Setting-->Formatting" kemudian di bagian "Date Header Format" ganti dengan yg berformat "mm.dd.yyyy" misal (11.22.2008).

2. Ganti Tabs menu Horizontal
caranya yaitu masuk di EDIT HTML kemudian cari kata "horizontal tab", nha silahkan otak-atik didaerah situ untk mengedit menu2 horiizontalnya.

3. Ganti Isi Tabview
Caranya yaitu masuk di EDIT HTML kemudian cari kata "tab view", nha silahkan otak-atik didaerah situ untk mengedit isi dari tabview tersebut

Untuk edit2 yang lainnya silahkan diotak-atik sendiri.

Yup, gitu aja. Selamat tinggal templateku yang lama.

Labels: Template

Cara Menghilangkan Tanda Tang dan Obeng

Posted by marommuhammad Posted on 1:53 PM

Sering aku ditanya tentang masalah ini. Yaitu tentang bagaimana cara menghilangakn tanda tang dan obeng yang muncul di blog kita. Bagi yang baru terjun didunia blog pasti ada yang bingung kenapa di blog mereka bisa muncul tanda tang dan obeng yang biasanya bisa digunakan untuk mengedit secara langsung untuk gadget2 atau element2 yang terpasang.

Sebenarnya itu bukan merupakan suatu masalah, karena tanda tersebut hanya muncul jika pemilik blog sedang login di account blognya dan hanya muncul di komputer orang tersebut. Jadi orang lain tidak bisa melihatnya. Dan kalau pemilik blog tersebut sudah "sign out" maka tanda tersebut tidak akan muncul lagi.

Jadi para blogger pemula gak usah khawatir ya ... :D

Dah, gitu ah aja tips dan trik kali ini. mo lanjutin tidur lagiiii......
:s :s :s :s

Labels: Dasar-Dasar

Membuat marquee bergaya ketikan

Posted by marommuhammad Posted on 9:01 AM

Mungkin kalian sudah mengetahui cara membuat marquee, yaitu text yang berjalan, tapi bagaimana bila text yang bergerak bukan seperti biasanya, tapi bergaya ketikan seperi iniYuk kita lihat cara membuatnya Copy kode di bawah ini :

Semenjak Blogger membuat sistem kotak komentarnya "Embedded Comments form" Atau kotak komentar langsung dibawah komentar populasi para komentator semakin meningkat, tidak seperti dulu jika ingin menulis komentar harus mengklik link post comments yang akan membuka jendela baru atau jendela pop-up. Dulu jika ingin membuat kotak komentar dibawah postingan harus pakai jasa pihak ke-3 misalnya haloscan, tetapi yang menggunakan jasa haloscan berbondong-bondong memindah kotak komentarnya menjadi default blogger lagi karena blogger sudah membuka sistem "embedded comments form".

Nah semakin meningkatknya para komentator di blogger maka semakin meningkat pula keinginan para blogger untuk mengubah tampilan area komentar dan menambah pernak-pernik lainya, maka dari itu saya juga ingin membuat pernak-pernik komentar blogger dengan smiley yang memungkinkan sang komentator bisa mengexpresikan ucapanya dengan sebuah gambar emoticon atau smiley.

"Ilmu tak akan bermanfaat jika tidak dibagi-bagikan", Nah ucap-ucapan itulah yang membuat saya selalu ingin berbagi, sebelum saya membuat tutorialnya terlebih dahulu saya akan memberikan informasinya, ehh sampai lupa menawarkan tutorial yang satu lagi yaitu tampilan komentar pemilik blog berbeda (baca disini). Gambar emticonya cukup sederhana bisa dilihat dibawah ini

:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))
Gambarnya seperti diatas, teks atau tulisan yang disamping kanan gambar adalah symbol yang jika ditulis di kotak komentar akan berubah menjadi gambar yang ada disamping kirinya.

Nah jika Anda berminat membuatnya ikuti langkah-langkah dibawah ini

Pertama-tama masuk blogger dan masuk menu Layout kemudian masuk menu Edit HTML

Jangan lupa centang "Expand Widget Templates"

Taruh Script dibawah ini diatas code </body>

Kalau sudah cari code HTML seperti dibawah ini

Kemudian sisipkan code HTML dibawah ini diantara code yang berwarna biru dan hijau diatas tadi atau lebih tepatnya dibawah code <p class='comment-footer'>

Nah kalau sudah SAVE pengaturanya.

Coba kamu cek di kotak komentar kamu! kalau tidak bisa (baca disini) untuk panduan tampilan kotak komentar owner blog berbeda dengan pengunjung blog.

Sekian semoga bermanfaat!
tunggu trik-tips selanjutnya key..! happy blogging with me

Labels: Blogger Hack

Membuat tag cloud

Posted by marommuhammad Posted on 12:17 AM

Apa itu tag cloud?. Tag cloud adalah tampilan label dengan flash, cukup cantik...contohnya kamu bisa lihat di tampilan label saya, bagaimana cara membuatnya?...yuk kita lihat 1. Langkah pertama, login ke blogger lalu edit html dan klik centang expand widget.2. Cari kode dibawah ini

Labels: beautifull widget

Pasang Widget Translator

Posted by marommuhammad Posted on 1:07 PM

Memasang widget translator atau "Penerjemah" pada blog banyak sekali gunanya. Translator ini berguna apabila ada pengunjung dari negara lain yang secara sengaja maupun tidak yang melihat blog kita dan tidak tahu bahasa kita maka mereka bisa menggunakan widget ini untuk menterjemahkannya kedalam bahasa yang mereka inginkan (tentunya yang sudah ada di widget ini). Widget ini sudah support untuk bahasa Indonesia. Dan kalo kamu mau, translator ini bisa juga untuk menterjemahkan tugas dari sekolah/kampus secara mudah. Dan hasilnya bisa lebih bagus daripada software transtool lho. Gimana? mau membuatnya? caranya mudah lho. Gini nih...

1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget=".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

5. Kemudian simpan.

Coba sekarang lihat blogmu maka ada tampilan seperti ini :

Coba dites apakah translator tersebut bekerja dengan baik atau tidak.
Gimana? gampang kan...

Labels: Pernak-Pernik, Widgets

Recommended Software Downloads

Posted by marommuhammad Posted on 3:00 PM

It's important to us to know what is the nice computer software that can be downloaded. Gadget Advisor is one of many site that provide info about it. We can find for some high quality best Windows software downloads. A list of applications that have been tested extensively such as best Firefox extensions also served as a comprehensive listing of the high quality software. When evaluating for recommendation, they are not only do consider the functionality and features of the application, but also test to ensure it works well. We can also get reviews info from some software such as review for Blaze Media Pro and other gadgets. Therefore, be sure to check back for updates periodically.

Cara Mudah Posting Code HTML

Posted by marommuhammad Posted on 2:52 AM

Pasti Anda bingung pada waktu posting Code HTML di blog Anda, pasti yang muncul bukan codenya melainkan hasil dari code HTML-nya, nah untuk yang ingin menulis tentang tutorial blog pasti code HTML banyak diposting, Nah untuk para penulis yang belum tau caranya posting code HTML nih saya kasih caranya.

Caranya cukup mudah, Encode saja code HTML di situs dibawah ini

Nah caranya cukup mudah tinggal taruh code HTML yang ingin di posting lalu klik tombol "Encode", Nah hasil dari Encode itu yang Anda posting di Blog Anda.

Sekian Artikel yang cukup pendek ini semoga dapat membantu Anda!

Labels: Tutorial Blog

Membuat link berkedip warna otomatis

Posted by marommuhammad Posted on 4:05 PM

Pada postingan terdahulu saya pernah membahas tentang text yang berkedip, pada kali ini saya akan menjelaskan cara membuat text yang berkedip otomatis tapi berwarna dengan link di dalamnya, contohnya silahkan klik disini atau lihat pada sidebar saya. Jangan takut, gampang kok, yuk coba...pertama : tambahkan sebuah elemen halaman dan pilih add java script pada blog kamu. Tentu harus login terlebih

Labels: beautifull widget

Memodifikasi Selection Teks

Posted by marommuhammad Posted on 7:01 AM

Mungkin Blog Anda mengandung sumber informasi bagi orang dan memungkinkan orang itu harus mencetaknya (print) misalnya Anda menulis artikel tentang Sumber bahan pembelajaran yang dibutuhkan oleh para pelajar dan pelajar itu membutuhkan untuk dicetak. Kadang orang lain menseleksi text yang dibutuhkan saja, nah maka dari itu supaya lebih menarik kita memodifikasi selektion text supaya terkesan lebih indah jika Ada orang lain yang menseleksi atau memblock text yang dibutuhkan pada blog Anda.

Mau ?
Baca dibawah ini...

Pertama yang harus kita lakukan adalah baca doa supaya berjalan dengan lancar, setelah itu minum obat anti mabok biar gak mabok ntar diperjalanan (kaya mau naik pesawat aja)

Kalau langkah diatas sudah Anda lakukan, pastikan sudah Log In ke blogger dan masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Taruh code dibawah ini diatas code ]]></b:skin>

::-moz-selection {
background: none;
color: #90EE90;
}

Perhatikan

background:none; itu adalah backround text yang di block dan none adalah kosong apabila ingin membuat warna background ganti saja dengan code warna misalnya #FFFFCC adalah warna kuning, cari code warna Disini

Color:#90EE90; adalah warna text yang di block atau seleksi Anda bisa menggantinya dengan code warna, lihat code warna disini

kalau sudah silahkan SAVE dan lihat hasilnya

Nah cara ini hanya bisa digunakan di browser mozilla firefox, jangan berkecil hati karena browser mozilla lebih banyak digunakan

Nah sekian dulu artikel kali ini, Saya harap dapat membantu Anda.

Labels: Blogger Hack

Tutorial lengkap text pada postingan

Posted by marommuhammad Posted on 8:00 AM

Mungkin para blogger pemula belum mengerti cara membuat tulisan seperti ini tips tutorial atau ini, itu, dia banyak lagi. Disini saya akan membahas secara lengkap mengedit text pada postingan. Backgound pada text, mengatur besar huruf, pearataan text, dll. Yuk baca... Text dengan coretankodenya : ~~Text dengan coretan~~Text dengan garis bawahkodenya : Text dengan garis bawahText

Labels: Tips Blogging

Tambahan Icon Pada Label Atau Category

Posted by marommuhammad Posted on 4:30 AM

Berkaitan dengan artikel yang kemaren yaitu tambahan Icon pada post footer dan artikel kali ini hampir serupa mengenai tambahan icon, seperti yang kita tau Label/category adalah pengelompokan beberapa artikel yang terkait, dan sebagai icon yang cocok adalah Folder karena folder adalah tempat untuk mengelompokkan file-file terkait atau kelompok file tertentu. Sekarang saya akan membuat artikel yang cukup ringan tapi semoga bermanfaat bagi para blogger untuk membuat blognya lebih hidup dan menarik! Istilah dalam iklan di TV adalah lebih punya taste gitu loh!. Maka dari itu ijinkanlah saya membuat artikel untuk menambah Icon pada Label/category.

Sebenarnya dalam label/category icon standarnya yaitu list style yang berbentuk bulat tapi kali ini Saya mencoba untuk menggantinya jika ada list stylenya dan menambah jika belum ada list stylenya, moga-moga nggak bingung dengan penjelasanku...

Nah sekarang langsung ke TKP (tempat kejadian project) yaitu ke blogspot!
silahkan Baca, Pahami dan Praktikan!

pertama harus log in ke blogger, kedua masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Taruh Code dibawah ini diatas Code ]]></b:skin>

/*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

Nah tulisan yang tercetak merah diatas adalah URL gambar icon bisa kamu ganti punya kamu sendiri atau bisa menggunakan icon folder yang saya sediakan dibawah ini

http://i296.photobucket.com/albums/mm169/anasku/folder-16x16.png

http://i296.photobucket.com/albums/mm169/anasku/folder-open-16x16.png

http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png

http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png

Nah kalau sudah silahkan SAVE untuk melihat hasilnya silahkan buka blog Anda.

Nah setelah Anda menggunakan trik kali ini pasti blog Anda akan kelihatan Cool kaya yang punya mungkin :D

nah sekian dulu! artikel yang ringan ini semoga sedikit membantu Anda untuk mempercantik Blog Anda,

Semoga bermanfaat

Labels: Blogger Hack

Membuat kata selamat datang pada blog

Posted by marommuhammad Posted on 8:48 PM

Ingin membuat kata sambutan seperti di atas? caranya mudah kok, yuk langsung aja Klik disini...lalu atur format kata-kata yang diinginkan pada kolom sebelah kanan, tepatnya di bawah "Get Widget". [ Message ] adalah kata-kata yang akan tampil, ganti dengan yang anda inginkan. Bila sudah klik get widget bawah formulir pengaturan tadi. Kemudian akan muncul form baru dengan judul "embed code". Klik

Labels: beautifull widget

Membuat tabview ala o-om

Posted by marommuhammad Posted on 6:31 PM

Makasih pada o-om yang udah mengizinkan para blogger untuk menggunakan tabview miliknya, tabview yang telah dirancang oleh o-om sangat mudah untuk digunakan tampa harus melakukan tambahan kode sebelum , yuk kita lihat caramembuatnya ini adalah contoh dari tabviewcara membuatnya Copy seluruh kode di bawah ini pada note pad :