Tampilkan postingan dengan label TUTORIAL BLOG. Tampilkan semua postingan
Tampilkan postingan dengan label TUTORIAL BLOG. Tampilkan semua postingan

Kamis, 22 Desember 2016

Cara membuat tulisan berjalan menggunakan kode HTML

Sekarang saya akan membagikan cara membuat tulisan berjalan menggunakan kode HTML dengan kode Marquee. Sebetulnya membuat tulisan berjalan ini sangat mudah tapi bagi pemula tidaklah mudah maka dari itu saya akan membagikan tentang cara membuat tulisan berjalan menggunakan kode HTML dengan tag <marquee> sehingga tulisan berjalan juga dikenal dengan marquee.
Secara garis besar marquee atau tulisan berjalan kode nya sebagai berikut :
<marquee>tulisan berjalan</marquee>
Dengan menggunakan syntax tulisan berjalan diatas maka ada beberapa variasi yang bisa digabung menjadi tulisan berjalan. Berikut contoh-contoh nya :

1. Marquee untuk mengatur lebar tulisan
Kode width="angka lebar" fungsinya untuk mengatur lebar tulisan yang akan berjalan, umumnya diatur 50% untuk stengah bidang tulisan berjalan saja atau bisa diatur sampai 25% untuk seperempat bidang tulisan berjalan saja. Contoh kode nya :
<marquee width="50%">Lebar tulisan berjalan 50% atau setengah bidang</marquee>

2. Marquee untuk mengatur arah tulisan yang berjalan
Kode direction="left/right/up/down" fungsinya untuk mengatur arah berjalan nya tulisan. Berikut contoh kode nya :
Tulisan berjalan ke kiri
<marquee direction="left">Tulisan berjalan ke Kiri</marquee>

Tulisan berjalan ke kanan
<marquee direction="right">Tulisan berjalan ke Kanan</marquee>

Tulisan berjalan ke atas
<marquee direction="up">Tulisan berjalan ke atas</marquee>

Tulisan berjalan ke bawah
<marquee direction="down">Tulisan berjalan ke bawah</marquee>

3. Marquee untuk mengatur kecepatan tulisan berjalan
Kode scrollamount="angka" fungsinya untuk mengatur kecepatan laju tulisan berjalan. Contoh nya sebagai berikut :
<marquee scrollamount="30">Kecepatan tulisan berjalan dengan angka 30</marquee>
Jadi kesimpulan nya semakin besar angka scrollamount nya semakin cepat pula laju jalan nya.

4. Marque untuk mengantur kecepatan jeda
Kode scrolldelay="angka jeda" fungsinya untuk mengatur kecepatan jeda dalam milidetik. Contoh nya sebagai berikut :
<marquee scrolldelay="3000">Tulisan berjalan dengan Jeda 3 detik</marquee>
Keterangan : 1000 untuk 1 detik, 2000 untuk 2 detik dan seterusnya.

5. Marquee untuk memberi Alt Title pada bidang tulisan berjalan
Kode title="pesan" fungsinya untuk memberi pesan pada saat kursor diarahkan ke bidang tulisan berjalan atau disebut juga Alt Title. Berikut adalah contoh kode nya :
<marquee title="Tulisan yang muncul jika pointer mouse di arahkan ke bidang tulisan berjalan">Tulisan berjalan dengan pesan</marquee>

6. Marquee untuk mengatur pengulangan atau rotasi pada tulisan berjalan
Kode loop="value/nilai" kode ini untuk pengulangan atau rotasi pada tulisan berjalan. Setelah berotasi sesuai angka yang ditentukan, maka tulisan tersebut akan hilang. Contoh kode nya sebagai berikut :
<marquee loop="100">Tulisan berulang atau berotasi 100 Kali</marquee>

7. Marquee untuk memberikan link atau tautan pada tulisan berjalan
Kode dasar nya adalah sebagai berikut :
onmouseover="this.stop()" onmouseout="this.start()"
Dan ini sebagai contoh kode nya :
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://www.ziblester.com/2016/12/cara-membuat-tulisan-berjalan.html">Cara membuat tulisan berjalan menggunakan kode HTML</a></marquee>

8. Marquee untuk mengatur tulisan berhenti jika dilintasi pointer mouse
Kode dasar nya untuk mengatur tulisan agar setiap kali dilintasi pointer mouse tulisan bisa berhenti adalah sebagai berikut :
onmouseover="this.stop()" onmouseout="this.start()"
Dan kode sebagai contoh nya adalah :
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">Tulisan berjalan ke Kiri dan akan Berhenti apabila dilintasi pointer mouse</marquee>

Demikian Cara membuat tulisan berjalan menggunakan kode HTML, selamat mencoba semoga bermanfaat bagi sobat semua.

Senin, 19 Desember 2016

Cara membuat favicon dan pemasangannya pada blog

Favicon singkatan dari "Favourite icon" yang artinya sebuah icon yang diasosiasikan dengan logo sebuah situs atau blog yang berada disudut atau disamping kiri alamat situs atau blog sobat. Fungsinya untuk memudahkan atau mengidentifikasi sebuah situs atau blog sobat dan itu merupakan ciri khas untuk situs atau blog sobat.
Favicon bisa berupa apa saja, bisa logo, huruf, foto maupun gambar lain nya. Favicon tersebut memiliki dimensi panjang x lebar yang sama atau square.

Cara membuat favicon
1. Pilih gambar atau tulisan ataupun foto yang ingin dijadikan favicon.
2. Masuk ke www.favicon-generator.org nanti akan muncul tampilan seperti dibawah :



3. Pilih File. Pilih gambar atau tulisan ataupun foto yang ingin dijadikan favicon, kalau sudah ketemu klik Open tunggu hingga unggahan selesai kemudian klik Buat Favicon.
4. Klik link Download favicon yang dihasilkan yang berwarna biru
5. Extract icon yang sudah didownload, selesai deh sekarang sobat bisa lihat hasilnya.

Sebelum memasang icon diblog, pilih salah satu icon yang cocok ukurannya. Saran saya ubah terlebih dahulu nama file icon tadi untuk mempermudah pencarian file icon yang akan di pasang di blog.

Cara memasang favicon pada blog, ada dua cara untuk memasang icon pada blog.
Cara yang pertama :
2. Pilih Tata Letak
3. Kemudian klik Edit Favicon, untuk mengunggah icon.
4. Klik Browser dan pilih file icon yang sudah disiapkan dan diubah nama filenya tadi.
5. Kemudian klik Simpan dan jangan lupa Simpan setelan.

Sekarang sobat klik Lihat blog kemudian lihat disebelah kiri alamat situs atau blog sobat favicon sudah berhasil dipasang.

Cara yang ke dua :
2. Klik Template dan kemudian pilih Edit HTML kemudian copy kode </head> dan cari pada kotak Expand Widget Template. Untuk mempercepat pencarian tekan CTRL + F dan pastekan dikotak pencarian lalu tekan enter.
3. Copy kode berikut : <link href='URL ICON' rel='icon' type='image/gif'/> dan pastekan tepat diatas kode </head>
keterangan : tulisan URL ICON diganti dengan link atau url icon sobat yang telah diunggah tadi.
4. Yang terakhir Simpan Template.

Klik Lihat blog dan lihat hasilnya favicon sobat sudah terpasang. demikian uraian Cara membuat facivon dan pemasangannya pada blog. Selamat mencoba, semoga bermanfaat bagi sobat semua.

Minggu, 18 Desember 2016

Cara membuat kreasi tulisan yang bergerak mengikuti kursor

Sobat blogger yang baik hati yang suka mampir ke blog saya, kali ini saya akan membahas tentang cara membuat kreasi tulisan yang bergerak mengikuti kursor. Mungkin sobat blogger sudah tahu tentang kreasi ini tapi mungkin masih bermanfaat buat sobat blogger yang masih pemula.
Setiap orang pasti mempunya kreatifitas sendiri namun bagi sobat yang masih belum bisa dan mempunyai keinginan untuk belajar kreatif bisa simak cara membuat kreasi tulisan yang bergerak mengikuti kursor :
1. Login ke http://www.blogger.com
2. Klik Tata Letak
3. Tambah Widget, Kemudian pilih HTML/Java Script
4. Copy kode dibawah ini :

<style type='text/css'>
#outerCircleText {font-style: italic;font-weight: bold;font-family: &#39;comic sans ms&#39;, verdana, arial;color: #ff840a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}#outerCircleText div {position: relative;}#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style><script type='text/javascript'>//<![CDATA[
;(function(){
// Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)var msg = "TULISAN YANG INGIN DITAMPILKAN";

// Set font's style size for calculating dimensions// Set to number of desired pixels font size (decimal and negative numbers not allowed)var size = 25;
// Set both to 1 for plain circle, set one of them to 2 for oval// Other numbers & decimals can have interesting effects, keep these low (0 to 3)var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters// (decimals allowed, not negative numbers)var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval// (decimals allowed, not negative numbers, some rounding is applied)var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)var rotation = 0.2;
// This is not the rotation speed, its the reaction speed, keep low!// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)var speed = 0.3;
// BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],o = document.createElement('div'), oi = document.createElement('div'),b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :
document.body,
mouse = function(e){e = e || window.event;ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},
makecircle = function(){ // rotation/positioningif(init.nopy){o.style.top = (b || document.body).scrollTop + 'px';o.style.left = (b || document.body).scrollLeft + 'px';};currStep -= rotation;for (var d, i = n; i > -1; --i){ // makes the circled = document.getElementById('iemsg' + i).style;d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';};},
drag = function(){ // makes the resistancey[0] = Y[0] += (ymouse - Y[0]) * speed;x[0] = X[0] += (xmouse - 20 - X[0]) * speed;for (var i = n; i > 0; --i){y[i] = Y[i] += (y[i-1] - Y[i]) * speed;x[i] = X[i] += (x[i-1] - X[i]) * speed;};makecircle();},
init = function(){ // appends message divs, & sets initial values for positioning arraysif(!isNaN(window.pageYOffset)){ymouse += window.pageYOffset;xmouse += window.pageXOffset;} else init.nopy = true;for (var d, i = n; i > -1; --i){d = document.createElement('div'); d.id = 'iemsg' + i;d.style.height = d.style.width = a + 'px';d.appendChild(document.createTextNode(msg[i]));oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;};o.appendChild(oi); document.body.appendChild(o);setInterval(drag, 25);},
ascroll = function(){ymouse += window.pageYOffset;xmouse += window.pageXOffset;window.removeEventListener('scroll', ascroll, false);};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){window.addEventListener('load', init, false);document.addEventListener('mouseover', mouse, false);document.addEventListener('mousemove', mouse, false);if (/Apple/.test(navigator.vendor))window.addEventListener('scroll', ascroll, false);}else if (window.attachEvent){window.attachEvent('onload', init);document.attachEvent('onmousemove', mouse);};
})();//]]></script>


5. Pastekan kode yang sudah dicopy tadi kedalam kotak HTML/Java Script
6. Ganti tulisan yang berwarna biru sesuai keinginan sobat
7. Dan yang terakhir klik Simpan

Silahkan coba lihat hasilnya. selamat mencoba semoga bermanfaat.

Selasa, 13 Desember 2016

Cara Menghapus Atribusi "Powered by blogger" atau "diberdayakan oleh blogger"

Setiap Blog yang masih menggunakan template standar dari blogger umumnya masih menggunakan atribusi yaitu berupa tulisan "Powered by blogger" atau "diberdayakan oleh blogger" yang berada paling bawah. Nah jika sobat ingin menghapus nya ada cara untuk menghapus atribusi blogger. Sesungguhnya menghapus atribusi ini adalah suatu pelanggaran atau melanggar hak cipta tapi blogger Tapi blogger tidak memberikan sanksi atau hukuman kepada para blogger yang telah menghapus atribusi milik blogger. Saran saya sih silahkan sobat blogger menghapus atribusi blogger namum sertakan tulisan Powered by blogger untuk menghindari blog sobat terkena banned oleh blogger.com.
Ada dua langkah cara untuk menghapus atribusi blogger :
1. Buka kunci Atribusi Widget
  • Login ke https://www.blogger.com
  • Klit Template dan pilih Edit HTML
  • Arahkan kursor pada Expand Template Widget klik disembarang tempat kemudian tekan tombol CTRL + F nanti akan muncul kotak pencarian
  • Copy kode dibawah ini :
<!-- outside of the include in order to lock Attribution widget  -->
  • Kemudian pastekan kode tersebut pada kotak pencarian kemudian tekan enter.
  • Ganti kata lock menjadi unlock
  • Selanjutnya cari kode : <b:widget id=’Attribution1’ locked=’true
  • Ganti kata 'true' menjadi 'false'
  • Untuk menyimpan perubahan, klik Simpan Template
2. Hapus Widget Atribusi
  • Klik Tata Letak
  • Klik Edit pada Widget Atribusi
  • Pilih Hapus
  • Kemudian klik Simpan.
Menghapus atribusi blogger sudah selesai. Silahkan sobat klik Lihat blog untuk melihat hasil nya, tulisan "Powered by blogger" atau "diberdayakan oleh blogger" sudah tidak nampak.

Minggu, 11 Desember 2016

Cara mengganti tulisan Older Post, Newer Post dan Home

Pada umumnya kita perlu navigasi pada setiap artikel atau konten supaya pengunjung tidak bingung setelah membaca artikel atau melihat konten kita, kemana mencari link kembali, selanjutnya dan home. Untuk mempermudah pengunjung pergi untuk melihat dan membaca konten atau artikel blog kita perlu navigasi atau bisa mengganti tulisan older post, newer post dan home yang bawaan dari blog nya. Langsung saja cara nya sebagai berikut :
1. Mengganti tulisan older post


expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
  • Arahkan kursor pada Expand Template Widget klik disembarang tempat kemudian tekan tombol CTRL + F nanti akan muncul kotak pencarian.
  • Pastekan kode diatas dikotak pencarian lalu tekan enter
  • Ganti kode ini <data:olderPageTitle/></a> dengan Kembali</a>
Contoh : expr:title='data:olderPageTitle'><data:olderPageTitle/></a>Kembali</a>

2. Mengganti tulisan newer post
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
  • Arahkan kursor pada Expand Template Widget klik disembarang tempat kemudian tekan tombol CTRL + F nanti akan muncul kotak pencarian.
  • Pastekan kode diatas dikotak pencarian lalu tekan enter
  • Ganti kode ini <data:newerPageTitle/></a> dengan Selanjutnya</a>
Contoh : expr:title='data:newerPageTitle'><data:newerPageTitle/></a>Selanjutnya</a>

3. Mengganti Tulisan Home
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  • Arahkan kursor pada Expand Template Widget klik disembarang tempat kemudian tekan tombol CTRL + F nanti akan muncul kotak pencarian.
  • Pastekan kode diatas dikotak pencarian lalu tekan enter
  • Ganti kode ini <data:homeMsg/></a> dengan Halaman Utama</a>
Contoh : <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>Halaman Utama</a>

4. Yang terakhir jangan lupa klik Simpan Template.

Selamat mencoba semoga bermanfaat.

Sabtu, 10 Desember 2016

Cara Menghapus Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Di setiap blog pemula pasti sobat menjumpai yang namanya Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom). jika sobat merasa terganggu dengan adanya tulisan Langgan : Entri (Atom) dan Subscribe to : Poskan komentar (Atom) sobat bisa menghapus atau menghilangkan nya.
Sesungguhnya blogger.com menyediakan fasilitas tersebut untuk mempermudah pengunjung untuk berlangganan dan mengomentari artikel-artikel yang telah diposting diblog.
Cara untuk menghilangkan atau menghapus Langgan : Entri (Atom) :


  1. Loggin ke https://www.blogger.com
  2. Klik Template kemudian klik Edit HTML
  3. Arahkan kursor pada Expand Template Widget klik disembarang tempat kemudian tekan tombol CTRL + F nanti akan muncul kotak pencarian
  4. Copy kode ini : <b:include data='feedLinks' name='feedLinksBody'/>
  5. Pastekan kode tersebut pada kotak pencarian kemudian tekan enter
  6. Jika sudah ketemu, hapus semua kode tersebut atau tulisan yang terblok warna hitam. Selesai
Cara untuk menghilangkan atau menghapus Subscribe to : Poskan Komentar (Atom)
  1. Loggin ke https://www.blogger.com
  2. Klik Template kemudian klik Edit HTML
  3. Arahkan kursor pada Expand Template Widget klik disembarang tempat kemudian tekan tombol CTRL + F nanti akan muncul kotak pencarian
  4. Copy kode dibawah ini :
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
     5. Kemudian pastekan kode tersebut pada kotak pencarian kemudian tekan enter.
     6. Hapus semua kode atau tulisan yang terblok warna hitam. Selesai

Selamat mencoba semoga bermanfaat bagi sobat blogger.

Jumat, 09 Desember 2016

Cara mengedit postingan artikel yang salah dan kurang kata atau kalimatnya

Kita semua tentunya pernah bahkan sering salah dalam penulisan kata atau kalimat pada artikel blog, apa itu karena lupa atau sobat buru-buru dalam menuliskan artikel pada blog.
Untuk itu sobat bisa mengedit nya supaya artikel menjadi bagus dan memuaskan pengunjung diblog sobat.
Caranya juga sangat mudah sekali.
  1. Login ke https://www.blogger.com
  2. Pilih judul artikel yang mau diedit
  3. Klik edit, silahkan sobat ganti atau rubah kata-kata atau kalimat yang menurut sobat salah atau kurang.
  4. Kalau sudah selesai mengedit nya kemudian klik Perbarui.

Cara posting artikel pada blog

Setelah sobat berhasil membuat akun di blogger.com, Sobat harus membuat artikel yang sebanyak-banyak nya tentunya artikel yang bermanfaat ya buat pengunjung di blog kita.
Oke langsung saja ikuti langkah-langkahnya:


  1.  Login ke https://www.blogger.com
  2.  Pilih Pos kemudian Entri Baru



      3.  Ketik Judul Pos dan tulis artikel sobat tentang apa saja.


     4.  Silahkan ubah tulisan, ukuran, warna dan yang lain nya yang telah disediakan oleh blogger.com pada kotak yang bergaris merah.


     5.  Kalau sudah selesai menulis artikelnya tinggal soba klik Publikasikan


     6.  Terakhir sobat bisa klik Lihat blog supaya sobat bisa mengoreksi apakah ada yang salah atau yang kurang dalam penulisan artikel nya.


Selasa, 06 Desember 2016

Cara mengedit template pada blog

Mengedit tampilan blog memang sangat diperlukan untuk memperindah tampilan blog supaya banyak pengunjung betah mengunjungi dan membaca artikel blog sobat. Jika ingin mengedit template blog supaya lebih keren tampilan nya, hal ini perlu diketahui oleh sobat blogger tentang script CSS (Cascading Style Sheets), Javascript dan HTML Script atau kode ini memang agak sedikit rumit bagi para pemula tapi kalau sudah terbiasa mengedit template, memasang HTML dan javascript memang sangat mudah dipahami. Sobat harus download dulu templatenya, kalau bingung cari di google banyak template-template yang keren. Kalau sudah dapat templatenya kita langsung saja simak dan fahami tutorialnya :
  1. Masuk ke https://www.blogger.com
  2. Pilih Template seperti gambar dibawah
           

      3. Kemudian pilih Cadangkan /Pulihkan seperti gambar dibawah :  

          

      4. Klik Choose File

           

      5. Kemudian cari template yang sudah didownload tadi di komputer sobat lalu klik Open.
      6. Kemudian klik upload. Selesai.

Senin, 05 Desember 2016

Cara singkat membuat blog bagi pemula

Jika sobat ingin membuat blog, caranya sangat mudah. syaratnya anda harus mempunyai email dari gmail.com. Jika sobat sudah punya email dari gmail.com langsung saja.
1. Kunjungi atau masuk ke https://www.blogger.com
2. Masukan email dan sandi kemudian klik masuk. Selanjutnya
3. Klik Blog Baru.
4. Ketik judul yang di inginkan dan masukan alamat blog yang sobat inginkan. Kemudian pilih template yang sobat suka.
5. Klik Buat Blog. selesai deh blog sobat sudah jadi.

Minggu, 04 Desember 2016

Cara menghapus icon obeng dan tang di blog

Sering kali kita melihat icon obeng dan tang pada blog disamping atau disudut postingan artikel kita. Mungkin ini sangat mengganggu pada tampilan blog kita. Padahal icon obeng dan tang ini berfungsi untuk mempermudah pengeditan widget dan gedget secara langsung di halaman home atau postingan pada sebuah blog. 
Untuk menghilangkan icon obeng dan tang pada blog itu sangat mudah sekali, jika sudah punya akun di blog caranya :
1. Login ke blogger.com
2. Klik template, lalu klik Edit HTML
3. Cari script : ]]></b:skin> untuk cara cepat mencari kode tersebut tekan ctrl + F
4. Kemudian copy script nya
 ]]></b:skin> dan pastekan pada kotak pencarian tadi kemudian tekan enter

5. Selanjutnya copy script dibawah ini : .quickedit{
display:none;
}
6. Pastekan sript yang diatas tadi tepat sebelum atau diatas script ini : ]]></b:skin>
7. Klik simpan template, selesai.

Silahkan dilihat hasilnya icon obeng dan tang sudah tidak nampak lagi ditampilan blog anda.
Selamat mencoba semoga bermanfaat.

Rabu, 30 November 2016

Cara bikin font yang keren

Sobat Blogger pengen bikin tulisan keren tapi ga bisa? Jangan khawatir sobat blogger karena ada situs online yang bisa bikin tulisan keren dengan pilihan karakter font yang bagus dan menarik. Hasil nya juga bisa langsung sobat lihat dan juga bisa didownload hasil gambar nya. Jika sobat ingin mencobanya ikuti langkah berikut :
1. Klik link www.cooltext.com
2. Silahkan sobat pilih logo yang sobat suka, seperti contoh dibawah ini :
3. Jika sudah dipilih, silahkan masukan tulisan atau kata yang sobat inginkan
4. Sebelum klik CREATE LOGO silahkan sobat atur sendiri ukuran, warna, file format logo nya.
5. Kemudian klik CREATE LOGO selesai. logo sudah jadi.
6. Selanjutnya untuk mengambil logo yang telah sobat bikin tadi klik DOWNLOAD IMAGE dan simpan. Silahkan cek dan lihat hasil nya.