Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts
Markup Validation Service


Cara Membuat Emoticon Keren Di Kotak Komentar Blog | Assalamualaikum Wr. Wb . Pada Kesempatan ini saya akan meshare-kan tutorial atau Cara Menambah / Memasukan Emoticons Smile Ke Blog . Ok Langsung Saja kita mulai. Berikut ini adalah cara-cara nya : 

1. Login ke Account Blogger sobat
2. Pilih Rancangan, Edit HTML, lalu ceklis "Expand Template Widget"
3. Cari kode </body> lalu copy kode dibawah ini tepat di atas kode tadi

<style type='text/css'>
.emoWrap { 
  background-color:transparent;
  border:none;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
img.emo, input.emoKey { 
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
input.emoKey { 
  border:1px solid #ccc;
  background-color:transparent;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<script src='https://republicofnote.googlecode.com/svn/trunk/emoticon%20di%20kotak%20komentar' type='text/javascript'/> 
<script type='text/javascript'> 
//<![CDATA[ 
var emoRange    = "#comments p, div.emoWrap", 
    putEmoAbove = "iframe#comment-editor",
    emoMessage  = "Untuk menyisipkan emoticon setidaknya anda harus menambahkan satu spasi di awal simbol.";
//]]> 
</script>

4). Yang terakhir Klik Simpan & Lihat hasilnya

Sekian dulu dari saya semoga info ini dapat bermanfaat untuk kalian, Terima Kasih atas kunjungannya .

Wassalamualaikum Wr.Wb



Cara Membuat Spoiler Pada Blog - Sebelumnya, apa itu spoiler ? Menurut pengertian saya, spoiler adalah tombol yang dapat digunakan untuk mempersingkat postingan blog, karena spoiler akan menyembunyikan sebagian dari postingan dan bagian itu hanya dapat ditampilkan jika tombol spoiler diklik, dan dapat disembunyikan kembali jika tombol spoiler diklik lagi. Dengan begini, postingan kita tidak terlalu memakan tempat pada blog. Dalam spoiler ini, dapat digunakan untuk menyembunyikan teks, gambar, maupun video (untuk gambar dan video diubah ke bentuk script text terlebih dahulu).
Kali ini saya akan berbagi cara membuat spoiler pada postingan blog. Untuk lebih jelasnya tentang spoiler bisa dilihat pada contoh berikut :
Contoh Spoiler:
Letakkan teks atau script anda disini atau bisa juga untuk meletakkan video musik dll dsini



Berikut ini cara membuatnya :

1. Login ke akun Blogger anda

2. Pilih New Post atau Entri Baru seperti membuat postingan biasa

3. Pilihlah pada mode HTML saat membuat postingan

4. Gunakan script berikut ini untuk membuat spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Contoh Spoiler</b>: <input value="View" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau script anda disini
 <br>
</div>
</div>
</div>
Catatan :
  1. Kata Contoh Spoiler adalah judul dari spoiler itu (yang terletak di sebelah kiri tombol View / Hidden). Anda dapat menggantinya sesuai keinginan anda.
  2. Kata View dan Hidden adalah kata yang terdapat pada tombol. Anda dapat menggantinya sesuai keinginan

5. Klik Publish jika sudah selesai

Sekian artikel saya tentang cara membuat spoiler pada blog. Semoga artikel ini bermanfaat dan terima kasih telah berkunjung dan membaca di blog ini... ;)


Cara Mendisable Klik Kanan & CTRL+U pada Keyboard
Cara/setting untuk mematikan/menon-aktifkan klik kanan dan block/select isi blog dan penekanan select Ctrl-A bisa pake script yang belibet, maupun memanfaatkan fungsi-fungsi html itu sendiri yang sangat simpel.

Fungsi-fungsi ini berguna jika si empunya blog tidak menginginkan blognya dikopi paste secara gampangan tanpa minta ijin, alias tulisan postingan kita tidak mudah dikopi paste. Walaupun dengan usaha/cara trik-trik lain bisa membuka/memblok/mengkopi-paste isi blog juga. Tapi cara dibawah, lumayanlah bisa mengurangi tindakan korupsi eeeh... kopi-paste. Penjelasan Fungsi html yang dipakai :

oncontextmenu='return false;'

    adalah untuk mematikan menu klik kanan

onkeydown='return false;'

    adalah untuk mematikan tombol/keyboard Ctrl-A, Ctrl-U (page source) dan tombol keyboard lainnya eeeh... kalo ngelihat page source dari menu masih kok. Cara melihat page source pada web/blog yang mematikan fungsi klik kanan mouse, klik kiri mouse dan penekanan keyboard (Ctrl+A, Ctrl+U) adalah : jika pakai firefox, buka menu View, lalu pilih Page Source (Ctrl+U). Hasilnya adalah tulisan postingan dalam 1 baris panjaaaaang. Cari aja postingannya ndiri...

onmousedown='return false;'

    adalah untuk mematikan klik select mouse

'return false'

    adalah untuk mematikan fungsi yang diinginkan


Cara men-disable klik kanan dan CTRL+U pada keyboard

Masuk ke edit html
Cari <body>
Gantikan kode tersebut dengan kode dibawah ini

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
Anda bisa memilih 1 fungsi aja atau 2 fungsi atau ketiga-tiganya, terserah deh... anda yang punya blog kok.
Halo, selalu dalam semangat kan? yups pasti donk. kali ini kita belajar tentang template biasa yang nantinya kita ubah sendiri menjadi luar biasa. bagaimana caranya? sebenarnya jika agan memahami postingan yang judulnya cara ganti background blog dengan gambar pasti frogerizta juga bisa membuat cara seperti yang sekarang yakni membuat blog jadi transparan.
kita simak....!!
Di masing2 blog terdapat warna yang berbeda, untuk setiap warna isi HEADER, NAVBAR, SIDEBAR, BODY, FOOTER biasanya semua menggunakan format warna (css color) seperti : Background:#000000;


Mari kita mulai
Kita menggunakan sample dari SIDEBAR
DAN BERIKUT CONTOH UNTUK SIDEBAR YANG AKAN KITA UBAH :



.sidebar .widget-content {
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
background: #00000;

maka setelah dirubah menjadi transparan hasilnya akan seperti ini :


.sidebar .widget-content {
-moz-border-radius: 20px 20px 20px 500px;
-webkit-border-radius: 20px 20px 20px 500px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEgRQiEeJxezgyO9pydjpQUCA3wdjkHaTiNpNYgRhg2UoaH9AyvUluV99EkCVte3UFcPlFbomokWLez0Dw1BGAVMwRpHd8Bk2lQvEs-nBOz2rYLGlL2vDFWnh0wsiFXted_OYnKjaeI4/s104/hitam.png) repeat center fixed;


Jadi semua kode warna CSS bisa dirubah menjadi format gambar / gif / gambar gerak dan sebagainya....!!
background: #00000;
bisa dirubah menjadi transparent
Posted Image

Ada banyak jenis border untuk memperindah postingan kita, antara lain jenis dotted, dashed, solid, ridge, groove, inset, outset, double, dan scrool.

Pemberian border itu sendiri biasanya digunakan untuk membatasi jarak antara postingan dan penulisan kode html. Untuk lebih jelasnya saya akan memberikan kode sekaligus kodenya, dalam hal ini akan saya berikan contoh border dengan warna merah dan background biru muda

Border jenis Ridge :

<div style="border: 4px #cc0000 ridge; padding: 10px; background-color: #99ffff; text-align: left;"> MASUKAN TEKS DISINI </div>


Border jenis Dashed :

<div style="border: 4px #cc0000 dashed; padding: 10px; background-color: #99ffff; text-align: left;"> MASUKAN TEKS DISINI </div>



Border Jenis Solid:

<div style="border: 4px #cc0000 solid; padding: 10px; background-color: #99ffff; text-align: left"> MASUKAN TEKS DISINI </div>



Border jenis Dotted:

<div style="border: 4px #cc0000 dotted; padding: 10px; background-color: #99ffff; text-align: left;"> MASUKAN TEKS DISINI </div>



Border jenis groove:

<div style="border: 4px #cc0000 groove; padding: 10px; background-color: #99ffff; text-align: left;"> MASUKAN TEKS DISINI </div>



Border jenis inset:

<div style="border: 4px #cc0000 inset; padding: 10px; background-color: #99ffff; text-align: left;"> MASUKAN TEKS DISINI </div>



Border jenis outset:

<div style="border: 4px #cc0000 outset; padding: 10px; background-color: #99ffff; text-align: left;"> MASUKAN TEKS DISINI </div>



Border jenis double:

<div style="border: 4px #cc0000 double; padding: 10px; background-color: #99ffff; text-align: left;"> MASUKAN TEKS DISINI </div>



Border jenis Scroll:



Di negara jepang ada yang namanya musim salju, tapi bagaimana kalau salju tersebut ada di blog anda.
Nah berikut ini saya akan memberikan tutorial tentang cara membuat efek salju turun di blog anda.

Bagaimana caranya? Lihat tutorial di bawah ini

Cara membuat efek salju di blog:

1. Login ke akun blogspot anda

2. Rancangan >> Add Gadget >> pilih yang java script / Html

3. Copy code script dibawah ini dan paste di kotak tadi , untuk judulnya kosongkan saja


<script src="http://masterendi.googlecode.com/files/salju.js"></script>

4. Kemudian klik simpan

Jadi deh blog anda sekarang akan turun salju walaupun di indonesia sekarang sedang musim hujan dan walaupun tidak ada musim salju.


1. Login Terlebih dahulu di blog kamu
Lalu masuk area

--> Rancangan
--> Edit Laman

è -> TambahGadget
è Pilih->HTML/JavaScript

2. Copy Paste kode dibawah ini di kotak HTML/Java Script yang disediakan

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://p4r46h-blog.googlecode.com/files/twitterfloat.js"></script>
<script type="text/javascript">
var birdSprite="http://4.bp.blogspot...s1600/original.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button",
"select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "https://twitter.com/#!/deden274";var tweetThisText = "http://ardifirdaus.blogspot.com/";tripleflapInit();
</script>

4. Simpan - Selesai - Lihat Hasilnya

Keterangan:

Ganti http://ardifirdaus.blogspot.com/dengan URL Blog Kamu

Tambahan:

Warna Burung bisa diganti dengan warna lainnya. Caranya: ganti kode http://4.bp.blogspot...00/original.png dengan kode image burung lain


Selesai ???Wahh...sekarang punya burung baru di blog nehh...asiiikkk...semaangaaattt... :)

Followers