Tes HTML atau Javascrypt Sebelum Di Pasang Di Blog

Sebagai seorang blogger Anda akan sangat sering berurusan dengan HTML atau javaScript. Apalagi sekarang semua memanfaatkannya untuk pengembangan. Youtube misalnya. Anda dapat dengan mudah berbagi video hanya dengan embed code.

Sama halanya dengan pemasangan berbagai widget untuk blog Anda seperti recent comment misalnya. Namun sebelum Anda tambahkan ke blog Anda, mungkin Anda ingin check dulu atau melihat previewnya. Anda bisa melakukannya dengan trik yang sangat mudah. Anda cukup memasukkan HTML atau JavaScript tersebut di address bar Anda dengan diawali data:text/html,

Misal Anda ambil kode dari youtube seperti ini

<param name="movie"
value="http://www.youtube.com/v/GIn5qJKU8VM&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_GB&feature=player_embedded&fs=1">

<param
name="allowFullScreen" value="true">
<param
name="allowScriptAccess" value="always">

<embed
src="http://www.youtube.com/v/GIn5qJKU8VM&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_GB&feature=player_embedded&fs=1"
type="application/x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="425"
height="344">

Masukkan ke address bar dengan diawali data:text/html, sehingga menjadi

data:text/html, [youtube http://www.youtube.com/watch?v=GIn5qJKU8VM&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_GB&feature=player_embedded&fs=1]

Atau saya ambil contoh lain untuk widget reccent comments
Kodenya adalah seperti ini

var numcomments = 5;var showcommentdate = false;var showposttitle = true;var numchars = 100;var standardstyling = true;

Silahkan tulis di address bar dengan diawali data:text/html,
sehingga penulisannya seperti ini

data:text/html,
var numcomments = 5;var showcommentdate = false;var showposttitle = true;var numchars = 100;var standardstyling = true;

Sekarang jika Anda bimbang untuk menambahkan sautu widget ke blog Anda, dengan mudahnya Anda bisa cek terlebih dahulu. Semoga bermanfaat.

sumber : mas doyok

Ayo dukung terus kontes SEO Terbaru yang bertema "javahostindo web hosting indonesia" dengan mengikuti link berikut ini |javahostindo web hosting indonesia |

Membuat Sexy Social Bookmark Terbaru Maret 2011

Sebenarnya artikel tentang membuat sexy social bookmark pernah saya tulis sebelumnya, tapi beberapa hari ini banyak teman yang bertanya bagaimana cara membuat sexy social bookmark seperti yang ada di blog ini. untuk tutorial sexy social bookmark yang lama baca:new sexy social bookmark.

Di artikel ini saya akan memberikan tutorial tentang cara membuat sexy social bookmark yang berbeda dari yang dulu, untuk contohnya anda bisa lihat di bawah artikel ini atau gambar di bawah ini.

Cara pembuatannya adalah sebagai berikut ingat backup dulu template anda sebelum menjalankan tutorial ini :

1. Masuk ke dashboard blogger anda
2. Klik design > edit html > centang expand widget template
3. Masukkan scrypt di bawah ini di atas atau di bawah kode : ]]>

div.sociable { margin: 16px 0;}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

4. Kemudian letakkan scrypt di bawah ini di atas kode :

Merubah Font Judul Posting Dan Judul Sidebar

Font judul posting dan judul sidebar bisa diganti sesuka kita, mulai dari besar huruf serta warna dan pernak-pernik lain, memang agak rumit buat yang masih pemula karena cara ini kita harus bermain pada menu design - edit html .

Untuk yang mahir, bukalah menu Edit HTML dan silakan backp dulu templatenya. Kalau sudah, cari kode:

1. Untuk judul posting, cari kode yang mirip:

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

2. Untuk judul sidebar, cari kode yang mirip:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Lalu editlah sesuai keinginan. Misalnya anda ingin menambahkan background pada judul postingan, maka kodenya menjadi:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:#000000;
}

Ket: kode background:#000000; adalah kode yang ditambahkan. Ganti #000000 dengan warna yang diinginkan. O, ya. Atau anda juga bisa membuat garis batas dibawah judul sidebar, maka kodenya menjadi:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
border: 1px solid #00FF00;
}

Ket: Kode border: 1px solid #00FF00; adalah kode yang ditambahkan. Ganti #00FF00 dengan warna yang diinginkan. Anda juga bisa membuat variasi lain, seperti menambahkan background berupa gambar, membuat huruf judul postingan membesar ketika mouse melintasinya, atau berbagai variasi lain sesuai dengan keinginan dan kreatifitas anda.

Kalau sudah klik Simpan Template.

Cara Mengatasi Tombol Blogger Yang Macet

Tadi saya melakukan blogwalking dan menemukan artikel yang menyatakan bahwa tombol atau tab-tab dalam edit html blogger bermasalah atau macet, Saya coba langsung di blog punya saya tapi tidak ada hal hal tersebut terjadi pada punya saya. Tombol-tombol yang macet adalah BERSIHKAN EDIT, PRATINJAU, dan SIMPAN TEMPLATE. Atau jika sedang mengupload template, tombol-tombol seperti PERTAHANKAN WIDGET, HAPUS WIDGET.

Memang saya sering mengalami ini tidak hanya sekali tapi ada beberapa hal yang mungkin perlu anda cari tahu atau anda cari masalah yang menyebabkan hal itu terjadi. Di dalam artikel ini saya akan memberikan tips atau cara yang mungkin bisa anda coba saat anda menemui kejadian di atas. Cara ini yang saya pakai apabila saya mengalami masalah di atas.

1. Coba anda matikan koneksi anda, jangan tutup browser yang sedang anda buka misalnya anda menggunakan firefox serta tab-tab yang sedang terbuka, setelah itu refresh desktop anda beberapa kali kemudian aktifkan atau konek-kan lagi. nah coba lagi tekan tombol-tombol yang tadi macet.

2. Cara kedua karena kemungkinan blogger sedang melakukan maintenance jadi coba anda tunggu beberapa menit sampai setengah jam dan coba lagi tombol-tombol yang tadi macet. Kalau sudah tidak macet lagi berarti emang benar blogger sedang melakukan maintenance

Itu adalah tips atau cara yang bisa anda coba saat mengalami masalah seperti diatas, cara ini sudah terbukti untuk saya sendiri, semoga dengan ini anda juga tidak mengalami masalah lagi saat melakukan edit html.
Semoga bermanfaat....

Cara Memberi Keterangan Di Bawah Artikel, Apabila Artikel Di Copas

Pernah menemui apabila anda meng-copy paste artikel dari blog lain, terus anda paste di notepad atau Microsoft office word keluar notifikasi dari sumber blog yang anda copy?? Kalau belum anda bisa coba copy artikel yang ada di blog ini dan anda paste di notepad, maka pada bagian paling bawah akan ada keterangan bahwa artikel itu dari blog ini.

Dalam artikel kali ini saya akan memberikan tutorial cara memasang keterangan di bawah artikel yang di copy orang lain, memang keterangan tersebut masih bisa di hapus oleh anda tapi ini lebih kepada kustomisasi blog saja. Di bawah ini cara pemasangannya:

Pemasangan
1. Pertama silahkan Anda melompat ke tynt.com
2. Klik tombol oranye besar, Free! Get Started

 
3. Anda akan dibawa ke form pendaftaran.
Pada Domain isi dengan alamat blog Anda
Pada Email isi dengan alamat email Anda

Tuliskan password pada password dan confirm password untuk meyakinkan.
4. Anda langsung di bawa ke halaman setting. Pada attribution:

 
Link prefix, adalah kalimat yang muncul sebelum link,
Link Suffix, adalah kalimat setelah link
Link, adalah pilihan penampilan anchor pada saat artikel Anda di copas. Sebaiknya Anda pilih PageTitle untuk menampilkan judul saja, agar tidak terlalu panjang.

5. Anda bisa juga menambahkan mode license, apakah artikel Anda untuk commercial atau gratis dan sebagainya.
6. Perhatikan sebelah kanan dan Anda akan melihat preview hasil set Anda, dilengkapi script dibawahnya yang bisa Anda letakkan di blog Anda.

7. Login blogger -> Rancangan -> Edit HTML. Silahkan letakkan script tersebut di atas
8. Simpan Template Anda

Membuat Halaman Blog Penuh Tanpa Sidebar Di Postingan Tertentu

Membuat halaman blog penuh tanpa sidebar pada postingan tertentu, apa maksudnya?? Maksudnya adalah membuat halaman artikel tertentu akan tampil penuh satu halaman tanpa adanya sidebar di samping kiri kanan blog kita. Sebagai contohnya coba anda ketikkan pencarian di kotak pencarian blog ini anda akan menemukan halaman posting untuk hasil pencariannya penuh satu halaman.

Sebelumnya saya sudah membuat artikel tentang bagaimana caranya membuat hasil pencarian ada di blog sendiri (baca:Membuat hasil pencarian di blog sendiri) dan hasilnya seperti yang anda lihat tadi kalau anda sudah melakukan pencarian pada kotak pencarian di blog ini. Mungkin tutorial ini sudah banyak yang posting, tapi sebagai pengingat jikalau saat saya butuhkan saya lupa scryptnya saya tinggal mencari di blog ini.

Ok dari pada panjang lebar langsung saja ikuti langkah-langkahnya di bawah ini:
1. Login ke blogger
2. Tata Letak
3. Edit HTML
4. Cari kode
5. Letakkan kode berikut ini di atas

<b:if cond='data:blog.url == "http://www.satriacell.com/hasil-pencarian-satriacell.html"'>

#sidebar-wrapper , #footer{
display: none !important;
}
#main-wrapper, .post {
width: 640px;
}

Ganti yang berwarna merah dengan alamat postingan yang ingin Anda buat penuh area postingannya dan hilangkan sidebarnya. Ganti warna biru dengan lebar yang telah Anda perhitungkan.

KETERANGAN: 
#sidebar-wrapper : kode menghilangkan sidebar
#footer                 : Kode menghilangkan footer blog supaya dalam postingan halaman penuh tidak ada footernya

anda bisa merubah kedua kode di atas dengan apapun yang ingin anda hilangkan nantinya, (ingat hilang disini bukan berarti hilang selamanya tapi hanya hilang pada artikel tertentu yang anda kehendaki) misalnya anda mau menghilangkan header kedenya jadi  #header-wrapper  


Apabila ada pertanyaan seputar postingan ini silahkan tinggalkan di kotak komentar, saya akan menjelaskan semampu saya. semoga artikel ini bermanfaat