Pecinta Rasulullah SAW: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Senin, 11 Februari 2013

Kode warna HTML Lengkap untuk blog, wordpres & website

KODE WARNA HTML Contoh:Putih =>#ffffff;

#FOF8FF
Aliceblue
#FAEBD7
Antiquewhite
#00FFFF
Aqua
#7FFFD4
Aquamarine
#F0FFFF
Azure
#F5F5DC
Beige
#FFE4C4
Bisque
#000000
Black
#FFEBCD
Blanchedalmond
#0000FF
Blue
#8A2BE2
Blueviolet
#A52A2A
Brown
#DEB887
Burlywood
#5F9EAD
Cadetblue
#7FFF00
Chartreuse
#D2691E
Chocolate
#FF7F50
Coral
#64950
Cornflowerblue
#FFF8DC
Cornsilk
#DC143C
Crimson
#00FFFF
Cyan
#00008B
Darkblue
#008B8B
Darkcyan
#B8860B
Darkgoldenrod
#A9A9A9
Darkgray
#006400
Darkgreen
#8B008B
Darkmagenta
#BDB76B
Darkkhaki
#556B2F
Darkolivegreen
#FF8C00
Darkorange
#9932CC
Darkorchid
#8B0000
Darkred
#E9967A
Darksalmon
#8FBC8B
Darkseagreen
#483D8B
Darkslateblue
#2F4F4F
Darkslategray
#00CED1
Darkturquoise
#9400D3
Darkviolet
#FF1493
Deeppink
#00BFFF
Deepskyblue
#696969
Dimgray
#1E90FF
Dodgerblue
#B22222
Firebrick
#FFFAF0
Floralwhite
#228B22
Forestgreen
#FF00FF
Fuchsia
#DCDCDC
Gainsboro
#F8F8FF
Ghostwhite
#FFD700
Gold
#DAA520
Goldenrod
#808080
Gray
#008000
Green
#ADFF2F
Greenyellow
#F0FFF0
Honeydew
#FF69B4
Hotpink
#CD5C5C
Indianred
#4B0082
Indigo
#FFFFF0
Ivory
#F0E68C
Khaki
#E6E6FA
Lavender
#FFF0F5
Lavenderblush
#7CFC00
Lawngreen
#FFFACD
Lemonchiffon
#ADE8E6
Lightblue
#F08080
Lightcoral
#E0FFFF
Lightcyan
#FAFAD2
Lightgoldenrodyellow
#90EE90
Lightgreen
#D3D3D3
Lightgray
#FFB6C1
Lightpink
#FFA072
Lightsalmon
#20B2AA
Lightseagreen
#87CEFA
Lightskyblue
#778899
Lightslategray
#B0C4DE
Lightsteelblue
#FFFFE0
Lightyellow
#00FF00
Lime
#32CD32
Limegreen
#FAF0E6
Linen
#FF00FF
Magenta
#800000
Maroon
#66CDAA
Mediumaquamarine
#0000CD
Mediumblue
#BA55D3
Mediumorchid
#9370DB
Mediumpurple
#3CB371
Mediumseagreen
#7B68EE
Mediumslateblue
#00FA9A
Mediumspringgreen
#48D1CC
Mediumturquoise
#C71585
Mediumvioletred
#191970
Midnightblue
#F5FFFA
Mintcream
#FFE4E1
Mistyrose
#FFE4E1
Moccasin
#FFDEAD
Navajowhite
#000080
Navy
#FDF5E6
Oldlace
#808000
Olive
#6B8E23
Olivedrab
#FFA500
Orange
#FF100%0
Orangered
#DA70D6
Orchid
#EEE8AA
Palegoldenrod
#98FB98
Palgreen
#AFEEEE
Paleturquoise
#DB7093
Palevioletred
#FFEFD5
Papayawhip
#FFDAB9
Peachpuff
#CD853F
Peru
#FFC0CB
Pink
#DDA0DD
Plum
#B0E0E6
Powderblue
#800080
Purple
#FF0000
Red
#BC8F8F
Rosybrown
#4169E1
Royalblue
#8B4513
Saddlebrown
#FA8072
Salmon
#F4A460
Sandybrown
#2E8B57
Seagreen
#FFF5EE
Seashell
#A0522D
Sienna
#C0C0C0
Silver
#87CEEB
Skyblue
#708090
Slategray
#FFFAFA
Snow
#00FF7F
Springgreen
#4682B4
Steelblue
#D2B48C
Tan
#008080
Teal
#D8BFD8
Thistle
#FF6347
Tomato
#40E0D0
Turquoise
#EE82EE
Violet
#F5DEB3
Wheat
#FFFFFF
White
#F5F5F5
Whitesmoke
#FFFF00
Yellow
#9ACD32
Yellowgreen

Kamis, 07 Februari 2013

Cara membuat bintang jatuh & Tulisan berkedip / berubah warna pada blog

“langsung ya, nah untuk membuat efek salju di blog para pembaca, ikuti langkah berikut ini !

· Login terlebih dahulu ke Blog Anda

· Kemudian masuk ke

· Pengaturan > Template > Edit HTML

· Jangan lupa backup terlebih dahulu template anda, yang belum tahu klik di sini

· Setelah itu di halaman HTML, cari kode <head> di bagian atas

· nah setelah itu copy kode berikut tepat di bawah tags <head>

Untuk Bintang Jatuh :

<script src='http://arti.master.irhamna.googlepages.com/bintang.js' type='text/javascript'>

</script>

Untuk Efek Tulisan Berkedip/Berubah Warna :

<script src='http://arti.master.irhamna.googlepages.com/rainbow.js' type='text/javascript'></script>

Anda bisa memasukkan keduanya atau pilih sesuka hati, boleh satu saja misalnya salju atau tulisan berkedip.

Sudah, lalu jangan lupa di save dan lihat hasilnya

Bagus bukan, sekarang di blog anda sudah ada saljunya, serasa gimana gitu, sejuk kan!!!

Juga tulisan anda, seperti link atau judul postingan saat cursor ke arah tersebut, berkedip-kedipkan.

Selamat mencoba!!!!

Tips Agar Postingan Anda Mudah Dibaca Pengunjung

Postingan (tulisan) merupakan salah satu faktor penting kesuksesan suatu blog. Postingan yang mudah dibaca akan membantu pengunjung memahami apa isi tulisan.

Sebagus apa pun tulisan Anda, bila tidak dibuat dalam struktur yang baik, tentunya akan susah dibaca pengunjung.

Bagaimana membuat struktur postingan mudah dibaca pengunjung? Berikut adalah 11 tipsnya yang merupakan pengalaman pribadi saya.

1. Ungkapkan Sumber Postingan. Apakah postingan tersebut dari pengalaman pribadi Anda, hasil penelusuran online Anda, terjemahan dari postingan berbahasa Inggris, kutipan dari tulisan orang lain, dan sebagainya. Dengan mengungkapkannya, pengunjung blog Anda akan merasa respek terhadap Anda.

2. Buat Paragraf yang Pendek. Umumnya terdiri dari 3-5 kalimat. Jika paragraf Anda panjang-panjang, pengunjung akan cepat bosan dan lelah.

3. Buat sub-judul postingan (jika diperlukan). Biasanya ini berupa poin-poin penting yang hendak Anda uraikan. Bila Anda menggunakan wordpress, sub judul baik digunakan dengan menggunakan format Heading 3.

4. Gunkan nomor atau bullet point. Ini cocok jika Anda menguraikan contoh yang tidak lebih dari 5 buah. Lihat contoh penggunaan bullet point di bawah ini:

Cara membuat Avatar di wordpress
Cara menginstal plugin di wordpress
Teknik meningkatkan alexa blog

5. Buat tabel. Ini cocok untuk menyenaraikan contoh atau daftar yang lebih dari 5 buah. Contohnya bisa Anda lihat di postingan saya mengenai

6. Sisipkan gambar yang cocok atau menarik. Hindari penggunaan gambar yang berlebihan (biasanya tidak lebih dari 3 buah). Ini bisa berupa foto hasil jepretan Anda, gambar dari internet, kartun, atau animasi.

7. Gunakan tata bahasa yang populer. Hindari menggunakan kata yang tidak dimengerti oleh orang umum, misalnya bahasa daerah, bahasa gaul, dan bahasa asing selain Bahasa Inggris.

8. Upayakan postingan tidak terlalu panjang. Biasanya ini tidak lebih dari 1000 kata. Bila Anda menggunakan WordPress, Anda bisa mengeceknya di wourd count (di bawah bodi postingan).

9. Tebalkan, miringkan, atau beri warna yang sesuai untuk beberapa kata yang Anda anggap penting. Ini akan memudahkan pembaca mengidentifikasi kata-kata tersebut.

10. Buat link ke tulisan terkait. Tulisan terkait ini bisa ke tulisan yang Anda miliki atau tulisan orang lain. Ini akan membantu pembaca untuk mengetahui lebih jauh topik yang sedang Anda ulas.

11. Baca kembali postingan Anda sebelum dipublikasikan (publish). Ini untuk mengidentifikasi kesalahan pengetikan atau alur penulisan yang tidak nyambung antar paragraf. Saya merkomendasikan Anda untuk membaca tulisan tersebut 2 atau tiga kali.

Update:

Tambahan dari Sahabat Blogodolar:

Gunakan jenis huruf yang friendly dan enak dipandang, misalnya verdana dan arial.
Minimalkan iklan di postingan.
Warna tulisan dan latar belakang blog harus matching.

Jumat, 21 Desember 2012

Membuat Daftar Isi di Blog

Saat kita mulai menyukai suatu blog maka kita ingin mengetahui semua artikelnya dan ingin membaca mana saja artikel yang menarik dengan membaca judulnya
Untuk itulah dibutuhkan "daftar isi", blogger memang menyediakan fitur seperti ini yaitu "labels" dan "Blog Archive" tapi fitur ini cukup ribet menurut saya.
di labels kita hanya mengetahui artikel yang ada di label bersangkutan, kalau blog archive ribet lagi, pertama tahun, terus bulan, tanggal baru deh ketemu isi artikelnya.
kali ini saya akan berbagi tips bagaimana cara menjadikan daftar semua postingan kalin dalam satu halaman. Langsung saja ini dia caranya :

langkah 1 : Login ke dashboard bloger kalian. login disini
langkah 2 : Buat Laman baru,

lankag 3 : Kemudan copy script di bawah ini, pilih mode "HTML"

<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js">

</script>

<script src="http://fuadhidayt36.blogspot.com/feeds/posts/def
ault?max-results=9999&alt=json-in-script&callback=loadtoc">

</script>

langkah 4 : ganti teks warna merah dengan URL/alamat blog yang diinginkan

langkah 5 : save, dan lihat hasilnya

contoh bisa liat blog saya disini

langkah 6 : ucapkan terimakasih pada blog ini :)

Cara memasang efek power saver pada blog

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Cari kode </head>
5. Copy kode di bawah ini dan pastekan di atas kode pada no 4
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=20' type='text/javascript'/>
Keterangan: Tulisan yang berwarna merah adalah waktu untuk mengaktifkan mode power saver. Jadi bisa sobat ganti dengan waktu yang sobat inginkan
6. Simpan Template
7. Lihat Hasilnya

Membuat Spoiler di Blog

fungsi dari Spoiler adalah untuk menyembunyikan konten. Jadi konten itu hanya dilihat oleh orang yang ingin melihatnya saja.
Lalau bagaimana cara memasang spoiler di blog?ini dia caranya :

langkah 1 : login ke blog anda, login disini
langkah 2 : masuk ke halaman/postingan/add gadget teks yang anda inginkan
langkah 3 : copi script berikut

<div style="margin-top: 5px; text-align: center;">
<input value="Show" style="margin: 0px; padding: 0px; width: 60px;
font-size: 10px;" onclick="if
(this.parentNode.parentNode.ge
tElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Hide'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Show'; }"
type="button"/></div>
<div style="border: 1px inset; margin: 0px; padding: 5px;">
<div style="display: none;">Masukkan isi SPOILER Di sini</div>
</div>

Membuat Flag Counter di Blog

untuk mengetahui berapa orang yang sudah berkunjung ke blog anda, dari negara mana saja yang sudah berkunjung maka Flag Counter adalah solusinya
dan Flag Counter juga bisa menjadi penyemangat atau alat motivasi anda dalam nngebloging.. setidaknya itu yang dirasakan penulis, karena kita bisa tau sepopuler apa blog yang sudah kita buat

langsung saja ke tutorialnya

langkah 1 : masuk ke blog anda, login disini
langkah 2 : anda harus masuk ke Flag Counter, masuk disini
langkah 3 : setting flag counternya sesuai keinginan kalian

langkah 4 : Setelah selesai setiting klik "GET YOUR FLAG COUNTER"

langkah 5 : Copy script yang muncul

langakh 6 : pilh tata letak di blog anda (udah tau kan.. hehe)
langkah 7 : add gadget .. pilh script/html
langkah 8 : pastekan code tadi.. kemudian simpan
maka hasilnya akan seperi ini

langkah 9 : ucapkan terimaksih pada blog ini

Membuat Kotak Scroll di Blog

jika anda ingin menulis teks tau foto yang terlalu banyak atau panjang, maka scroll adalah sulusi yang tepat agar posting anda menjadi lebih menarik
berikut ini akan saya berikan tutorial tentang pembuatan koatak scrool pada blog

Kode yang digunakan untuk membuat sebuah kotak dengan fungsi scroll adalah :

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;">Teks Yang anda inginkan</div>

contoh

Idolaku Rasulullah idolaku rasulullah idoalku rasulullah idolaku rasulullah idolaku rasulullah idoalku rasulullah idolaku rasulullah idolaku rasulullah idoalku rasulullah idolaku rasulullah idolaku rasulullah idoalku rasulullah idolaku rasulullah

fungsi scrool ini bisa digunakan di post atau di add gadget teks

Sebelum menambahkan sedikit gaya pada kotaknya, saya akan jelaskan kode untuk membuat kotak scrollnya terlebih dahulu.
width:100px adalah lebar kotak yang diukur dalam pixel. (100px/100pixel)
height:400px adalah tinggi kotak yang diukur dalam pixel. (400px/400pixel)
padding:10px; adalah jarak isi kotak dengan garis pinggir kotak.
border:1px solid #000000 adalah kode untuk ketebalan garis pinggir kotak ( border ) dengan garis biasa ( solid ) yang berwarna hitam ( #000000 ).
Kata Teks yang anda inginkan adalah isi kotak yang berupa tulisan yang bisa juga di ganti dengan kode widget jika kotaknya di isi dengan widget

Kamis, 20 Desember 2012

Memasang Tag Cumulus di Blog

siapkan diri anda.. :)
langsung sja ya ke tutorialnya

langkah 1 : login ke blog sobat, login disini
langkah 2 : masuk ke tata letak

langkah 3 : add gadget

langkah 4 : tambahkan milik anda

lankah 5 : copi paste link dibawah ini di "masukan URL untuk gadget yang ingin ditambahkan kedalam blog anda" kemudian klik Tambah URL

http://henscripts.googlecode.com/svn/trunk/tag/cumulus.xml

langkah 6 : konfigurasi

Dibawah ini pengaturan untuk Cumulus Label Cloud. Ubahlah sesuai dengan keinginan anda.

Judul Label - Ubah sesuai dengan Judul Gadget.
Tinggi - Ubahlah sesuai tinggi gadget.
Tinggi Cloud - Ubah tinggi dalam satuan pixel, harus diperhatikan pula tinggi widget yang anda gunakan.
Lebar Cloud - Ubah lebar dalam satuan pixel, harus diperhatikan pula lebar widget yang anda gunakan.
Ukuran Huruf Min - Atur ukuran minimum font dari label, ini akan tampil sebagai label cloud terkecil pada widget.
Ukuran Huruf Maks - Atur ukuran maksimum font dari label, ini akan tampil sebagai label cloud terbesar pada widget.
Warna Label Min - Aturlah warna label ukuran terkecil. Warna ini akan mempengaruhi warna huruf terkecil saat rotasi pada widget.
Warna Label Maks - Aturlah warna label ukuran terbesar. Warna ini akan mempengaruhi warna huruf terbesar saat rotasi pada widget.
Warna Hover - Aturlah warna yang akan muncul saat mouse hover, warna ini mempengaruhi kotak, huruf dan angka label.
Kecepatan Rotasi - Mengatur kecepatan perputaran awan.
Warna Latar - Untuk mengatur warna latar belakang (background) label cloud.
Mode Transparan - Menetapkan warna latara belakang label cloud yang transparan.
Tampilkan Penanda - Menunjukkan jumlah label ketika Anda menggeser kursor mouse di atas label.

langkah 7 : simpan
langkah 7,5 : jangan lupa ucapkan terimakasih pada blog ini :)

Senin, 17 Desember 2012

Memasukkan Video Youtube ke Blog

kali ini saya memberitahukan cara yang mudah yakni memasukkan video yang sudah ada ke blog/website kita. Caranya:

1. Buka youtube pilih / cari video yang ingin kita masukkan ke blog

2. Klik embed

3. Copy embed code dengan menekan [ctrl]+[C] atau klik kanan pilih copy

4. Buka Blogger, masuk ke blog kita, klik new post

5. Lalu beralihlah ke mode Edit HTML dan tempel code yang anda copy tadi

hasilnya akan seperti ini

6. ucapkan terimakasih pada blog ini :)

Jumat, 30 November 2012

Cara agar blog tidak bisa di klik kanan

setelah saya melakukan penelusuran.. saya mendapatkan informasi tentang Cara agar blog tidak bisa di klik kanan sudah biasa dilakaukan oleh para blogger.

Tapi untuk alasannya saya sendiri juga tidak tau. Mungkin supaya blog tidak bisa di copy kali yaa.. tapi masih bisa kok dengan cara di tekan Ctrl C. Mungkin juga cuma buat keren-kerenan ajaa. hehee :)
Okee langsung saja ke cara membuat agar blog kita tidak di bisa di klik kanan :

Baca selengkapnya dan pahami »

Rabu, 28 November 2012

Mengganti Warna Burung Twiter di Blog

dibawah ini adalah kode warna burung twiter yang bisa anda gunakan di blog anda, dengan mengganti(edit) HTML

Baca selengkapnya dan pahami »

Cara mengganti desain header blogger

untuk mengganti gambar (desain) pada header blog caranya cukup mudah dan sederhana anda tinggal masuk (sign in) ke account blogger anda.kemudian anda pilih menu tata letak kemudian klik saja lihat gambar seperti di bawah ini.

Baca selengkapnya dan pahami »

Jumat, 23 November 2012

Cara Membuat Blog Menarik

Disini saya mempunyai 8 tips buat anda Cara Membuat Blog Menarik:

1.kalian harus menggunakan widget recent post yang berfungsi sebagai jika kita membuat postingan terbaru maka akan diupdate oleh si recent post tersebut.

Baca selengkapnya dan pahami »

Rabu, 14 November 2012

Widget lucu Untuk Blogger

Tidak bisa dipungkiri peran widget sangat penting bagi dunia blogging.
Interaktivitas website merupakan aspek penting untuk SEO karena menyediakan berbagai informasi karena secara otomatis pengunjung akan lebih suka dengan adanya informasi ataupun entertaiment yang dihadirkan.
Bagi rekan-rekan yang menyukai widget sebagai accesories website/blog saya referensikan untuk mengunjungi Koleksi Widget menarik yang akan di bahas di bawah ini.
Salah satu situs yang saya referensikan adalah dari widgetbox, bagi rekan yang tertarik mengunjunginya silahkan ikuti tutorial singkat di bawah ini :
1. masuk ke http://www.widgetbox.com
2. Bagi rekan yang ingin langsung search, ketik di find widget
Contoh : Memasang Widget Jam
1. Cari/ketik Clock widget di bagian box pencarian
2. Muncul beberapa variasi jam yang menggunakan flash di widgetbox
3. Di halaman berikutnya, klik blogger di bawah tutorial Get Widget
4. Ada 2 cara memasukan ikon ini ke blog, yaitu dengan cara otomatis menggunakan Add Widget atau menggunakan Embed Code (copy manual code script yang muncul).
Bila rekan menggunakan cara otomatis maka widget secara langsung terpasang di blog anda. tapi bila ingin memasangnya di tempat yang sobat inginkan lakukan prosedur manual copy embed code dan simpan di sidebar/lokasi yang sobat inginkan.
Dalam widgetbox sobat biasa menemukan berbagai macam widget menarik. mulai dari games, horoscope, youtube, mp3 player dll. Cobalah browsing menu most popular, Hottest atau New.
Selain dari itu sobat juga bisa mencoba membuat widget sendiri dengan menu Make Widgets.
Semoga tulisan singkat ini bisa bermanfaat bagi rekan-rekan yang menyukai widget sebagai tambahan accesories website/blog-nya.
Dan ini ada sebagian widget nganggur dari tetangga sebelah hehehe Cara Pasang :
1. log in ke akun blogger
2. pilih rancangan > add gadget/Tambah gadget > pilih HTML/javascript
3. copastsalah satu kode dibawah > klik oke/ simpan Oke sobat, Semoga bermanfaat :)
Ikan

<div style="bottom: 0px; height: 130px; left: 10px; position: fixed; width: 100px;">
<a href="http://danangabimanyunew.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small></small>
<center>
<small><a href="http://danangabimanyunew/" target="_blank">Widget Animasi</a></small></center>
</div>

;/div>
Kucing

<div style="bottom: 0px; height: 140px; left: 10px; position: fixed; width: 110px;">
<a href="http://danangabimanyunew.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small></small>
<center>
<small><a href="http://xpresi4share.blogspot.comwww.danangabimanyunew.blogspot.com/" target="_blank">Widget Animasi</a></small></center>
</div>

Lumba-Lumba

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 110px;">
<a href="http://xpresi4sharedanangabimanyunew.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small></small>
<center>
<small><a href="http://danangabimanyunew.blogspot.com/" target="_blank">Widget Animasi</a></small></center>
</div>

Langganan: Postingan (Atom)