Cara Membuat Popular Post Berputar

tahap pertama :

• Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post seperti gambar dibawah ini (kalau tidak ada bisa cari entri Popular) :
  

• Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
• Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
• Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan

• Save

  tahap kedua
  
  Tahap Kedua : Cara Membuat Animasi Popular Post dengan Gambar Berputar
  
  
  • Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
  • Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini di atasnya

  .popular-posts .item-thumbnail {
  
  float:left;
  
  } 
  
  .popular-posts ul {
  
  padding-left:30px;
  
  } 
  
  .popular-posts ul li {
  
  list-style-image: none;
  
  list-style-type: none;
  
  display:inline;
  
  } 
  
  .popular-posts ul li img {
  
  padding:0px;
  
  -moz-border-radius: 5px;
  
  -webkit-border-radius: 5px;
  
  border-radius: 5px;
  
  -webkit-transition: all 0.3s ease;
  
  -moz-transition: all 0.3s ease;
  
  transition: all 0.3s ease;
  
  border: 2px solid #CCC;
  
  } 
  
  .popular-posts ul li img:hover {
  
  border:2px solid #ccc;
  
  -moz-transform: scale(1.3) rotate(-360deg);
  
  -webkit-transform: scale(1.3) rotate(-360deg);
  
  -o-transform: scale(1.3) rotate(-360deg);
  
  -ms-transform: scale(1.2) rotate(-360deg);
  
  transform: scale(1.3) rotate(-360deg);
  
  }

  • Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • Dan ganti semua kode tersebut dengan kode kode dibawah ini :

  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  
  <b:includable id='main'>
  
  <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
  
  </b:widget>

  • Save template kalian
  • SALAM BLOGGER

Cara Membuat Blog

Langkah awal untuk membuat sebuah blog gratis adalah :

1. Sobat diwajibkan memiliki sebuah alamat email, saran saya pakailah layanan gmail dari google. untuk membuat email dari layanan google tersebut anda bisa langsung menuju ke Gmail, untuk lebih jelasnya perhatikan gambar dibawah ini.

2. Langkah selanjutnya isi data data diform yang disediakan, jangan lupa paling bawah klik Saya menyetujui persyaratan layanan dan kebijakan privacy google, setelah itu klik Langkah berikutnya lihat gambar dibawah. 

3. Selanjutnya, klik kirim kode Verifikasi. lihat lagi gambar dibawah ya :)

4. sekarang cek ponsel anda, jika belum ada kode verifikasi dari google bisa dicoba lagi beberapa menit kemudian, gambar dibawah menggunakan modem, jadi kode verifikasinya langsung bisa di lihat dilayar laptop saya.

5. Masukin deh kode verifikasinya seperti dibawah ini

6. Selamat datang di akun Gmail anda, lalu klik Lanjutkan ke Gmail ya....

7. Sampai disini proses pembuatan akun Gmail sudah berhasil, sekarang ketahap selanjutnya ya...proses pembuatan blog. yaudah tanpa basa basi langsung buka tab baru di browser sobat ya, atau bisa langsung menekan (ctrl + T) buka blogger.com ya.... tinggal isi email dan sandi yang sama seperti di akun Gmail tadi. lalu klik Masuk

8. selanjutnya pilih Opsi profil blogger sobat, jika hanya membuat blogger sebaiknya klik yg sebelah kanan. lalu klik lanjutkan ke blogger. 

9. Sampai tahap ini sobat sudah sukses membuat akun blog, tahap selanjutnya silahkan lihat gambar dibawah ini untuk jelasnya. perhatikan baik baik tahap 1, 2, dan 3. sebelum ada tulisan This blog address is availableberarti nama blog yang ingin sobat buat sudah ada yang memiliki, silahkan ganti dengan nama lain, atau untuk mudahnya bisa tambahkan angka dibelakang alamat blognya, lihat contoh yang saya lingkari pada nomer 2 dibawah. setelah itu klik create blog. 

10. Nah sekarang blog sobat sudah jadi, lihat keterangan dibawah ini, angka 1 adalah Judul blog yang sobat ciptakan pada tahap sebelumnya, lalu angka 2 adalah start posting. alias untuk memulai membuat artikel.

11. Setelah sobat klik start posting, sekarang saatnya sobat membuat sebuah artikel... perhatikan baik baik langkah langkahnya dalam membuat sebuah artikel. tentunya dimulai dari angka 1 ya...hehehe... untuk jelasnya lihat gambar dibawah ini.

Langkah-langkah cara membuat artikel di blog :

Angka 1 : merupakan judul artikel yang nanti akan diterbitkan, boleh apa saja. silahkan berekspresi melalui artikel sobat, narsis juga ga ada yang larang koq :)

Angka 2 : merupakan isi dari artikel, silahkan mengarang bebas, mau curhat, kasih tips, trik, info, atau apa saja yang sobat ketahui, klo artikelnya bermanfaat pasti banyak yang suka dengan blog sobat deh.

Angka 3 : merupakan Label, silahkan isi apa saja. contohnya seperti ini, misalnya judul artikel yang sobat buat adalah Tips melangsingkan tubuh, nah label tersebut bisa di isi dengan Tips sehat, atau yang lainnya. kan ga nyambung seandainya label tsb di isi dengan Ilmu komputer. :p

Angka 4 : Nah tahap ini adalah melihat dulu artikel sebelum diterbitkan, jika ada yang salah bisa dibenarkan dulu sebelum artikel diterbitkan.

Angka 5 : Jika pada tahap 4 sobat sudah yakin, sekarang tinggal klik Publish (Terbitkan)

12. Gambar dibawah ini merupakan contoh artikel yang sudah berhasil diterbitkan. dan untuk melihat artikelnya silahkan klik tombol view. selesai.... nah mudah bukan ?

13. Selamat Berkarya ya sob, oiya bagi sobat yang ingin tulisan hasil karyanya di publikasi di blog ini silahkan kirimkan artikel sobat ke email (indra_andriyadi@yahoo.com) jangan lupa link facebook kamu ya.  dengan catatan artikel merupakan hasil karya sendiri dan bukan hasil copy paste dari blog lain.

Cara Buat Link Download

Apa Itu link download ? Link download adalah seuatu teks atau gambar yang bisa di klik untuk mengarahkan link ke sebuah hosting untuk mendownload sebuah file . Bagaimana Cara membuatnya ? caranya begini Copy kode berikut lalu paste di blog kalian :

<a href="http://www.klinik-it.blogspot.com">Download</a>

Keterangan : Teks yang berwarna biru adalah Link tujuan ketika teks Yang berwarna Merah Di Klik . Teks Yang Berwarna merah juga Bisa anda ganti Dengan kata lain misalnya saja "Klik Disini"Ataupun yang lainya !

Ada banyak Fariasi untuk membuat link download,diantarannya dengan cara membuat linknya berhuruf besar,Miring tebal atau dengan menggunakan gambar . Contohnya sebagaiberikut :

Copy paste kode berikut untuk membuat teks link download menjadi tebal :
<a href="klinik-it.blogspot.com"><b>Download</b></a>

Untuk membuat teks tersebut miring silakan ganti kode <b>dan</b> Dengan <i>dan</i> .

Dan untuk membuat link tersebut Berukuran kecil sampe besar ganti kode yang saya hijaukan dengan kode <h1> dan </h1> . ganti angka tersebut dengan angka 1 - 6 jika ingin menyesuaikan ukuran besar link .

Cara Selanjutnya adalah membuat link download dengan gambar/ikon
Caranya copy paste kode berikut ke blog anda :

<a href="http://www.klinik-it.blogspot.com" title="Download"><img src="http://farm5.static.flickr.com/4042/4278913170_e7973277d8_o.png" width="216" height="74" alt="download[4]" /></a>

Hasilnya adalah sebagi berikut :



Keterangan Ganti Link yang berwarna biru dengan Full link Hosting tujuan anda .

Selamat Mencoba ..........?

Cara Membuat Chat Box di Blogger

Awal belajar ngeblogging saya masih blum faham maupun mahir tapi kalau saya menjajali dunia bloging ternyata asik juga walaupun masih newbie atau pemula. Yaudah langsung saja kita awali dengan bismillah ..hehehe..

Untuk membuatnya cukup mudah silahkan ikuti panduannya di bawah ini Cara membuat chat box di blog dengan aplikasi Cbox :

1. Silahkan kunjungi  http://www.cbox.ws dilanjutkan klik ‘Sign Up’ Lihat contoh gambar di bawah ini :

2. Get Your own Cbox  - Pada aplikasi sign up silahkan isi lengkap : Cbox name – Isi sesuai selera anda tanpa spasi, Email address – Isi dengan alamat email anda,Password – Buat password anda, Confirm password – Masukkan ulang password anda, Website - Isi dengan alamat web atau blog anda, Language - Pilih bahasa aplikasi pada menu drop down, Style - Anda bisa merubah tampilan aplikasi sesuai selera anda. Setelah selesai diisi klik ‘Create my Cbox!’ Lihat contoh gambar isian aplikasi di bawah ini :

3. Jika sukses ada ucapan  dalam bahasa inggris yang artinya mungkin seperti ini :

“Cbox telah dibuat!
Cbox Anda tipstriks  berhasil dibuat.
Anda sekarang dapat log in ke panel kontrol Cbox untuk mendapatkan kode AndaLog in  di bagian atas halaman ini. Sebuah  salinan rincian account Anda telah dikirim melalui email ke tipstriks@ gmail.com Periksa email Anda, jika Anda tidak dapat menemukannya, periksa folder spam Anda”. 

4. Silahkan cek inbox email anda kemudian klik link yang ditunjukan Cbox admin yang akan menuju halaman Cbox dan silahkan login masukkan Cbox name dan password anda dan klik tanda panah di sampingnya. Lihat contoh gambar Cbox login di bawah ini :

Lihat contoh inbox email di bawah ini :

5. Setelah login pada control panel Cbox anda silahkan copy dan paste di blog anda  kode html yang sudah disiapkan untuk anda. Selesai.  Lihat gambar kode html di bawah ini :

Cara menempatkan aplikasi Cbox di blogspot silahkan login ke blogger ►Dasbor/Dashboard ► Rancangan/Lay Out ►Tambah Gadget/Add Gadget ►Pilih Gadget HTML ► Paste 

Dengan tips dan triks Cara membuat chat box di blog dengan aplikasi Cbox, semoga bisa membantu anda.


selamat mencoba dan sukses selalu

Read more: http://tanyajawabsemua.blogspot.com/2012/04/cara-membuat-chat-box-di-blogger.html#ixzz2klxDG77X

Cara Membuat Menu bar Multi Level Drop Down

Posting kali ini Trieck69 aka membahas tentang Bagaimana Membuat Multi Level Drop Down di blog anda.Karena pernah ada yang nanya tentang membuat menu bar yang berbobot maka kali ini aku akan menjawab pertanyaan itu aku sendiri bingung mau jawab apa soalnya aku juga kurang mengerti apa sebenarnya dari maksud pertanyaan itu. jadi kupikir mungkin yang dimaksud adalah Menu bar multi level drop down kali yaaaa...????

Baiklah buat temen temen yang suka ngotak atik bolg yang masih belum mengerti tentang cara Menu bar multi level drop juga boleh untuk mengikuti tutorial ini


Caranya sangat lah mudah, ikuti  saja langkah berikut:

1. Login dulu ke bloger.com
2. Ke menu rancangan  >---->>Lalu pilih edit html
3. Sebelum mengedit template Anda, Anda sebaiknya menyimpan sebuah salinan dari template tersebut
4. Lalu cari kode </head> di kotak html,jika susah mencari anda bisa menekan Ctrl+f untuk mengeluarkan menu pencarian huruf  pada halaman Mozilla Firefox.
5. Letakkan kode berikut persis diatas kode </head>:
   
   
   
   
   
   
   
   <link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.css" />
   
   <!--[if lte IE 7]>
   <style type="text/css">
   html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
   </style>
   <![endif]-->
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   <script type="text/javascript" src="http://dsai.588.googlepages.com/slidemenu_horiz.js"></script>
6. Simpan template yang sudah dipaste kan sesuai dengan yang diatas
7. Setelah di save sekarang menuju menu Tata letak dan pilih menu Elemen halaman Lalu tambah gadget halaman dengan 
   
   
   
   
   
   
   

   HTML/JAVASCRIPT Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda. Oleh Blogger

8. copy kode berikut dan pastekan ke dalam gadget HTML/JAVASCRIPT Anda:
   
   
   
   
   
   
   
   <div id="myslidemenu" class="jqueryslidemenu">
   <ul>
   <li><a href="http://trieck69.blogspot.com">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Folder 1</a>
   <ul>
   <li><a href="#">Sub Item 1.1</a></li>
   <li><a href="#">Sub Item 1.2</a></li>
   <li><a href="#">Sub Item 1.3</a></li>
   <li><a href="#">Sub Item 1.4</a></li>
   </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Folder 2</a>
   <ul>
   <li><a href="#">Sub Item 2.1</a></li>
   <li><a href="#">Folder 2.1</a>
   <ul>
   <li><a href="#">Sub Item 2.1.1</a></li>
   <li><a href="#">Sub Item 2.1.2</a></li>
   <li><a href="#">Folder 3.1.1</a>
   <ul>
   <li><a href="#">Sub Item 3.1.1.1</a></li>
   <li><a href="#">Sub Item 3.1.1.2</a></li>
   <li><a href="#">Sub Item 3.1.1.3</a></li>
   <li><a href="#">Sub Item 3.1.1.4</a></li>
   <li><a href="#">Sub Item 3.1.1.5</a></li>
   </ul>
   </li>
   <li><a href="#">Sub Item 2.1.4</a></li>
   </ul>
   </li>
   </ul>
   </li>
   <li><a href="http://trieck69.blogspot.com">Item</a></li>
   </ul>
   <br style="clear: left" />
   </div>
   
   
9. simpan gadget trus letakan gadgate persis dibawah header save template dan lihatlah
10. Anda juga bisa menambah dan mengganti nama menu sesuka hati, Saya ambilkan contoh dimenu yang pertama
    
    
    
    
    
    
    
    Menu yang belum dirubah
    
    

    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://trieck69.blogspot.com">Item 1</a></li>

    
    

    perhatikan kode yang diberi warna hijau,karena warna hijau lah yang akan kita rubah

    menjadi
    
    

    Menu yang sudah dirubah
    
    
    <div id="myslidemenu" class="jqueryslidemenu">

    
    
    
    
    
    

    <ul>
    <li><a href="http://URL BLOG ANDA.blogspot.com">HOME</a></li>

    
    

    PERUBAHAN

       URL MASUKAN SESUAI DENGAN ALAMAT YANG MAU DITUJU

      TEXT ITEM 1 SAYA GANTI MENJADI HOME

    
    
11. Terimakasih, Dan kini Anda telah memiliki Menu bar Multi Level Drop Down di Blog Anda.....