Tutorial Blog

Pada postingan sebelumnya telah kita bahas yakni cara menciptakan imbas salju pada pointer mouse, tapi kali ini kita akan membahas imbas petir pada blog. Alasan menciptakan imbas petir pada blog biasanya untuk mempercantik halaman/tampilan blog.

Berikut langkah cara menciptakan efek petir pada blog :

1. Login akun blogger Anda. 
2. Pilih Tata Letak —> Tambah Gadget —> HTML/JavaScript.
3. Copy-Paste aba-aba di bawah pada HTML/JavaScript,
   type=”text/css”>body background-image:
   url(https://1.bp.blogspot.com/-6CsOJUHaxzU/UO7H1jfxWGI/AAAAAAAACHo/Wa2ajy8IgF0/s1600/storm.gif);
   background-color:transparent;

   Nb: Tidak semua template blog bisa menggunakan script tersebut, sebaiknya Anda coba terlebih dahulu.

4. Klik Simpan.

Nah, sangat mudahkan cara menciptakan imbas petir pada blog, jika Anda masih mengalami kesulitan silahkan hubungi kami melalui contac.

Sudahkan Anda menciptakan hidangan horizontal pada blog, rasanya kurang apabila sebuah blog tidak dilengkapi dengan hidangan horizontal. Selain untuk memperindah tampilan blog, sajian horizontal berfungsi untuk memudahkan pengunjung dalam memilih kategori postingan sebuah blog.

Berikut cara menciptakan menu horizontal di blog :

1. Login akun blogger Anda. 
2. Pilih Template > Edit HTML > klik Expand Template Widget 
3. Cari isyarat ]]> (Gunakan Ctrl – F untuk memudahkan pencarian). 
4. Copy paste aba-aba dibawah ini sempurna diatas kode ]]>
   #tejahtc
   height:33px;
   width:1000px;
   margin:0 auto;
   background:url(https://1.bp.blogspot.com/-4OAUtCw3wBA/UO2d5Qs6LMI/AAAAAAAACGw/vnCkUt9PCuE/s1600/catmenu.jpg) repeat-x;
   display:block;
   padding:0px 0 0px 0px;
   font-size:12px;
   font-family:”Segoe UI”,Calibri,”Myriad Pro”,Myriad,”Trebuchet MS”,Helvetica,Arial,sans-serif;
   font-weight:normal;
   border-top:1px solid #252424;

   #tejas
   margin: 0px;
   padding: 0px;
   width:1000px;
   background:#252525 url(https://1.bp.blogspot.com/-4OAUtCw3wBA/UO2d5Qs6LMI/AAAAAAAACGw/vnCkUt9PCuE/s1600/catmenu.jpg) repeat-x;
   height:33px;

   #tejas ul
   float: left;
   list-style: none;
   margin: 0px;
   padding: 0px;

   #tejas li
   float: left;
   list-style: none;
   margin: 0px;
   padding: 0px;

   #tejas li a, #tejas li a:link, #tejas li a:visited
   color: #fae7df;
   display: block;
   margin: 0px;
   padding: 9px 10px 10px 10px;

   #tejas li a:hover, #tejas li a:active
   background:url(https://3.bp.blogspot.com/-HUmTQXAvLR8/UO2d4uYS9uI/AAAAAAAACGs/EGssVB2msTQ/s1600/aexpfq.jpg) repeat-x;
   color: #fff;
   margin: 0px;
   padding: 9px 10px 10px 10px;
   text-decoration: none;

   #tejas li li a, #tejas li li a:link, #tejas li li a:visited
   background:#ED4A05;
   width: 150px;
   color: #fae7df;
   font-family:Tahoma,century gothic,Georgia, sans-serif;
   font-weight: normal;
   float: none;
   margin: 0px;
   padding: 9px 10px 10px 10px;
   border-bottom: 1px solid #FF7800;

   #tejas li li a:hover, #tejas li li a:active
   background:url(https://3.bp.blogspot.com/-HUmTQXAvLR8/UO2d4uYS9uI/AAAAAAAACGs/EGssVB2msTQ/s1600/aexpfq.jpg) repeat-x;
   color: #fff;
   padding: 9px 10px 10px 10px;

   #tejas li ul
   z-index: 9999;
   position: absolute;
   left: -999em;
   height: auto;
   width: 170px;
   margin: 0px;
   padding: 0px;

   #tejas li li

   #tejas li ul a
   width: 140px;

   #tejas li ul a:hover, #tejas li ul a:active

   #tejas li ul ul
   margin: -34px 0 0 170px;

   #tejas li:hover ul ul, #tejas li:hover ul ul ul,
   #tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul
   left: -999em;

   #tejas li:hover ul, #tejas li li:hover ul,
   #tejas li li li:hover ul, #tejas li.sfhover ul,
   #tejas li li.sfhover ul, #tejas li li li.sfhover ul
   left: auto;

   #tejas li:hover, #tejas li.sfhover
   position: static;

   Keterangan:
   Sesuaikan lebar sajian 1000px dengan ukuran template blog Anda. 

5. Selanjutnya letakkan arahan berikut dibawah isyarat
   atau copy arahan tersebut pada HTML/JavaScript dan letakkan dibawah header.

   • Link-Name-1
     

     • Link-Name-1-1
     • Link-Name-1-2
     • Link-Name-1-3

   • Link-Name-2
     

     • Link-Name-2-1
     • Link-Name-2-2
     • Link-Name-2-2
     • Link-Name-2-3

   • Link-Name-3
     

     • Link-Name-3-1
     • Link-Name-3-2
     • Link-Name-3-3

   • Link-Name-4
   • Link-Name-5
     

     • Link-Name-5-1
     • Link-Name-5-2
     • Link-Name-5-3
     • Link-Name-5-4

   • Link-Name-6
     

     • Link-Name-6-1
     • Link-Name-6-2

   • Link-Name-7
   • Link-Name-8

   Keterangan:
   Ganti tulisan yang berwarna merah dan ‘Link Anda di sini!’ dengan link kategori blog Anda, pola mirip dibawah ini.
   ‘http:///search/label/Adsense’
   Ganti goresan pena link name dengan judul kategori atau apapun semoga tampilan hidangan terlihat menarik, begitu juga link title mampu Anda samakan dengan link name. 

6. Simpan template.

Nah, sekian postingan cara membuat menu horizontal di blog, bila Anda masih mengalami duduk perkara silahkan hubungi kami melalui contac.

Sesuai dengan judul posting kali ini share otomatis posting blog ke facebook dan twitter, kita akan membuat postingan blog otomatis share sesaat sehabis kita publikasi posting di blog, dengan memakai share otomatis update posting blog kita langsung diterima pengunjung lewat jejaring sosial.

Berikut cara menciptakan share otomatis postingan ke facebook dan twitter :

1. Kunjungi situs http://app.dlvr.it/ 
2. Klik ‘Don’t have an account?’
   
3. Kemudian masukkan alamat email dan password, klik ‘Sign Up’.
   
4. Pada step 1 masukkan alamat URL blog Anda, klik ‘Next’.
   
5. Step 2 pilih share via facebook atau twitter, acuan: kita akan pilih twitter. 
6. Kemudian login dengan memakai akun twitter Anda. 
7. Setelah itu akan muncul halaman utama, jika Anda ingin menambahkan share via facebook dan twitter klik ‘add’.
   
8. Terakhir masuk akun email Anda dan konfirmasi dlvr.it

Nah, lihat postingan Anda sudah terupdate otomatis via facebook dan twitter. Jika Anda masih mengalami masalah silahkan hubungi kami melalui contac.

Favicon merupakan ikon/gambar yang muncul di pojok kiri address kafetaria yang disertakan pada hampir semua situs web atau blog sekaligus merupakan logo dari blog tersebut. Seperti teladan dibawah ini :

Ukuran gambar yang dipakai usahakan tidak lebih dari 100KB atau Anda mampu meng-upload gambar terlebih dahulu di FavIcon from Pics, berikut cara meng-uploadnya :

1. Kunjungi situs http://www.html-kit.com/favicon/ 
2. Pada Create a Favicon from any picture, klik ‘Browse’.
   
3. Kemudian klik ‘Generate FavIcon.ico’
4. Setelah itu jika Anda menginginkan favicon animasi, download dalam format gif dan simpan gambar.
   
5. Kemudian upload gambar pada free image hosting dan ambil link gambarnya, atau bisa Anda lihat caranya disini.

Selanjutnya kita akan memasang favicon pada blog, berikut langkah-langkahnya :

Cara pertama :

1. Login akun blogger Anda. 
2. Pilih ‘Tata Letak’ pada menu dropdown. 
3. Klik ‘Edit’ di bagian Favicon, lihat gambar!
   
4. Klik ‘Browse’, kalau sudah di upload klik ‘Simpan’.
   

Cara kedua :

1. Login akun blogger Anda. 
2. Klik Template —> Edit HTML —> beri tanda centang pada kotak Expand Widget Template. 
3. Tambahkan arahan dibawah ini sempurna diatas
4. 1
5. 2
6. 3
7. 4
8. Next »