MEMBUAT VARIASI HURUF DENGAN KODE MARQUEE

Tehnik pembuatan huruf berjalan seperti pada contoh dibawah, merupakan variasi dari Cara membuat kode marquee. Jadi intinya, anda harus menguasai dulu tentang efek marquee kemudian tambahkan beberapa kode untuk menampilkan huruf baik dalam pewarnaan maupun jenis huruf.

Perlu diketahui juga, jenis huruf yang dapat ditampilkan pada sebuah blog terdiri dari : Georgia, Verdana, Arial, Times, Courier dan Trebuchet ( ini hanya pendapat dari admin Simple Live berdasarkan dari tab Font dan Warna pada Tata Letak). Silahkan anda pilih huruf apa yang ingin anda gunakan.
Demo :

Selamat datang di "SIMPLE LIVE"

Tulisan Selamat datang di Simple Live terdiri dari kode-kode sebagai berikut. Silahkan anda perhatikan.

<div align="left"><marquee scrollamount="3" direction="left" width="100%" bgcolor="blue"><span style=";font-style:italic;">Selamat datang di</span><span style=";"> "Simple Live"</span></marquee></div>

Keterangan :

1. <div align="left">...</div> merupakan kode untuk penempatan perataan teks. Anda dapat mengganti dengan kata left, center atau justify.
2. <marquee scrollamount="3"...</marquee> merupakan kode awal dan akhir dari marquee serta kode pengatur kecepatan pergerakan huruf. Semakin besar angkanya, gerakan huruf akan semakin cepat.
3. direction="left" merupkan kode pengatur gerakan huruf. Anda dapat mengganti dengan : right, up atau down.
4. Kode direction="left" dapat anda ganti dengan Behavior="scroll/slide/alternate" untuk mengganti dengan gerakan dalam bentuk lain :
1. Scroll = teks bergerak sambil berputar.
2. Slide = teks bergerak sekali lalu berhenti.
3. Alternate = teks bergerak bolak-balik kekiri dan kekanan.
5. width="100%" merupakan kode untuk mengatur lebar dari penampilan blok text.
6. bgcolor="blue" merupakan kode untuk latar belakang.
7. <span style=";font-style:italic;">Selamat datang di</span> merupakan kode untuk tampilah huruf. Dapat anda lihat bahwa tulisan Selamat datang di diatur dengan jenis huruf Georgia, ukuran huruf 40px, huruf tampil miring, dan warna huruf kuning.
8. <span style=";"> "Simple Live</span>" merupakan kode untuk penampilan tulisan Simple Live yaitu diatur dengan jenis huruf Verdana, ukuran huruf 40px, warna huruf merah

Menulis Tulisan Basmalah Disetiap Postingan Blog Secara Otomatis

Cara Menulis Tulisan Basmalah Disetiap Postingan Blog Secara Otomatis - Bagaimana agar blog terlihat lebih islami?? Pertanyaan bagus.

Setiap pekerjaan tentunya harus diawali dengan ucapan Basmalah wajib bagi orang islam. Lalu bagaimana kalau ucapan basmalah tersebut kita letakkan di blog tepat diatas postingan blog?? Tentunya sangat pasti bisa. Bahkan tulisan basmalah akan muncul otomatis disetiap postingan blog anda tanpa ditulis terlebih dahulu.

Bagaimana caranya?? Anda cukup ikuti langkah langkah dibawah ini :

*. Pergi ketempat pengeditan template anda.

*. Cari kode

<data:post.body/>

.
 Biasanya kode diatas ada 4. Kita letakkan saja kode dibawah ini tepat diatas kode yang ke empat / paling bawah.

Kode :

<div style='text-align: center;'>
<span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم</span></span></span></div>
<br/>

*. Terakhir, klik simpan template anda lalu lihat hasilnya.

Bagaimana?? Bagus bukan??

Sekian Cara Menulis Tulisan Basmalah Disetiap Postingan Blog Secara Otomatis, semoga bermanfaat.

Menghapus tulisan Langganan Entri dan Diberdayakan oleh Blogger

Pada Tempelate blogger yang letaknya paling bawah sering kita jumpai link dengan tulisan “Langganan Entri : Atom” dan “Diberdayakan oleh : Blogger” Tulisan tersebut sebenarnya bisa dihilangkan/disembunyikan kalau tidak berkenan untuk menampilkannya. Apabila kita memakai blogger template, footer ini secara default akan memuat atribut Blogger sehingga tampil tulisan tersebut akan ditampilkan diblog kita. Itu semua karena template memang sudah di desain seperti itu. untuk menghilangkan ataupun menyembunyikan tulisan 'Diberdayakan oleh blogger' dibagian footer tempelate dapat dilakukan langkah-langkah sebagai berikut :

1. Klik Tempelate
2. Klik Edit HTML.
3. Cari Kode ]]></b:skin>   (biar lebih gampang gunakan tombol CTRL+F.)
4. Kemudian copy dan paste kode dibawah ini dan letakkan diatasnya.
5. Klik Simpan.

Kode HTML untuk menghilangkan tulisan Langganan Entri : Atom .feed-links{ display:none; } Kode HTML untuk menghilangkan tulisan Diberdayakan oleh : Blogger #Attribution1 { height:0px visibility:hidden; display:none }

Demikian Simple Live membuat artikel postingan kali ini dan kalau berkenan silahkan dicoba, mungkin dengan menyembunyikan atribut blogger sehingga bisa meminimalisir pengunjung yang iseng terhadap blognya kawan.

Selamat mencoba

HTML Membuat Tombol Klik Show Untuk Melihat di Postingan Blog

Bagi sobat yang ingin memasang tombol show hide di blog / postingan. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:

Simple Live

<div><div style="margin-bottom: 2px;"><b><small>Simple Live</small></b> <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('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: 6px;"><div style="display: none;"> h0kcun.blogspot.com </div></div></div>

Entri melalui HTML Jangan melalui Compose, lalu paste code di atas dan jangan lupa mengganti kata Simple Live dan h0kcun.blogspot.com dengan kata yang sobat inginkan. 

Membuat Gambar Membesar Dan Berputar Saat Disentuh Oleh Mouse

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#h0kcun img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #h0kcun img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="h0kcun"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="h0kcun">
<a href="http://h0kcun.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJkxhn3moZeTr1ruGl1Ook90Lu10ZC7kBKT7LwF4NCCFa-sjVM71z3EqVYTjyvz14P_IypxjI3Fa9Dj5QAgtLYpj1NiAWSoVvi-ramTMLLpSublcDLcBc0BWB59ZWvKRNKhfOBzqj2kY/s320/simple+live.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Semoga bermanfaat Sobat.. 

Memasang Tool Parse HTML di Blog

Cara Mudah Memasang Tool Parse HTML di Blog - Pada kesempatan ini Simple Live share bagaimana kita bisa memasang tool pada postingan blog kita, Salah satunya adalah Blog Tools Parse HTML. Apa itu? Dan apa manfaatnya? Dan bagaimana cara memasangnya di blog? Itulah pertanyaan yang akan dijawab pada postingan kali ini. 

Manfaat dan Tujuan Parse HTML

Blog Tools adalah suatu alat yang dapat mempermudah pengunjung dalam meningkatkan atau memberikan informasi yang dibutuhkannya. Salah satunya adalah Blog Tools Parse HTML. Blog Tools Parse HTML adalah sebuah Tools yang dapat membantu sobat dalam melakukan parse kode script/Javascript secara otomatis sehingga mempermudah penggunaannya.

Contoh Parse HTML adalah

•   <'                        ==>  '&lt;'
•   >                         ==>  '&gt;'
•   "  (double quote)  ==>  '&quot;'
•   '   (single quote)   ==>  '&#039;'
•   &                        ==>  '&amp;'

Jika sobat Tertarik untuk memasangnya, Ikuti langkah-langkah berikut :

1. Masuk ke akun blogger sobat.
2. Bukalah halaman baru atau postingan baru.
3. Setelah itu copy kode berikut di bagian EDIT HTML bukan Compose :

<script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script>
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 400px;"><tbody>
<tr> <td valign="top" width="400"><textarea cols="50" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><input onclick="convert();" type="button" value="Parse Script" /></td> </tr>
</tbody></table>
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small;"><span style="line-height: 20px;">&nbsp;© www.h0kcun.blogspot.com |<a href="http://h0kcun.blogspot.com/2015/03/cara-memasang-tool-parse-html-di-blog.html" target="_blank">Get This Widget</a> |</span></span><br />
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small;"><span style="line-height: 20px;"><br /></span></span>

 4. Selesai dan Lihat hasilnya.

Hasil Dari Kode diatas seperti ini: (Letakkan kode / script sobat pada kolom di atas lalu klik Parse Script untuk memparsenya.)

 © www.h0kcun.blogspot.com |Get This Widget |

Solusi Ketika Postingan tiba-tiba Hilang

Solusi Ketika Postingan Hilang - Mungkin diantara sahabat pernah ada yang mengalami postingan yang tiba-tiba menghilang. Bagi sahabat yang mengalami hal seperti ini, saya menemukan solusi yang mudah di Forum Google.

Mecegah Copy Paste Pada Blog

• Login terlebih dahulu ke Blogger.com
• Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
• Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
• Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian

ganti code:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>



dengan code:

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)

Disini penulis sengaja tidak blok copy paste, seperti niat awal penulis.. hanya ingin berbagi.. 

MUSIK LATAR BLOG

Banyak peblogger yang merasa kecewa karena situs/web penyedia musik latar untuk blog telah tutup/tidak aktif, sehingga merasa kesulitan untuk memasang musik pada blog masing-masing.
Sebenarnya tidak sulit untuk memasang musik pada blog yang penting memahami cara/tehnik untuk memasang musik blog.

Membuat Slide Show Foto di Blog

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan.

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script> <script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#content-slider').cycle({ fx: 'fade' }); }); </script> <style type="text/css"> #content-slider { position: relative; width: 100%; height: 250px; overflow: hidden; margin:0 auto; } #content-slider img { display: block; width: 100%; height: 250px; } </style> <div id="content-slider"> <img src="URL Foto 1" /> <img src="URL Foto 2" /> <img src="URL Foto 3" /> <img src="URL Foto 4" /> </div>

Download code nya disini

5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
8. Simpan jika sudah selesai.

Widget Keren Untuk Blogger

1. MyBlogLog’s Recent Readers – Widget satu ini sejak kehadirannya didunia lain blog langsung mendapat sambutan meriah layaknya seleb baru yg lagi naik daun. Widget ini memperlihatkan avatar dari para pengunjung blog Anda. Dan dengan kepopuleran widget satu ini sampai-sampai manajemen MyBloglog mampu meyakinkan Yahoo untuk membeli sahamnya. Yang perlu diperhatikan adalah memiliki account Yahoo lebih dulu.

Membuat Kotak Script

Membuat kotak script

Tanpa basa-basi ya sobat, langsung saja kita praktek

langkah-langkah:
1. Masuk dulu ke akun Blogger sobat.
2. Tulis entri baru.
3. Ketik saja seperti ini di dalam

Cara membuat chat box di blog

Cara membuat chat box di blog
Chat box merupakan salah satu fasilitas media komunikasi antara pengunjung dengan yang punya blog atau dengan sesame pengunjung blog sehingga kita bisa ber interaksi satu sama lain menjalin persahabatan dan berbagi informasi seputar blogging atau informasi yang lainnya, sangat dimungkinkan sekali saling bertukar link blog Anda atau undang mengundang antar teman.

Atau chat box ini juga bisa bermanfaat sebagai tempat komentar cepat atau instant sehingga komentar dan pertanyaan Anda akan cepat tampil tanpa harus menunggu loading blog.

Di bawah ini ada beberapa aplikasi chat box yang bisa di tampilkan di blog atau website kita. Cara membuat chat box ini sangat mudah Anda hanya copypaste widget chat box dib log anda. apalagi bagi yang sudah sering membuat akun hanya membutuhkan beberapa menit saja: