ads

Membuat Animasi Led Pada Blog dengan CSS

tanggal 16 Des 2012 | 03.24 tanggal tanggal No comments | 5
Description : Blogger Tips : Membuat Animasi Kit Led Pada Blog Blogger Tips kali ini saya akan membahas tentang bagaimana caranya untuk membuat Animas...
Blogger Tips : Membuat Animasi Kit Led Pada Blog

Blogger Tips kali ini saya akan membahas tentang bagaimana caranya untuk membuat Animasi Kit Led atau sebuah animasi yang berupa beberapa lampu led yang berjalan bolak balik, untuk contohnya anda bisa lihat dibawah ini..


Untuk membuat sebuah Animasi Led seperti diatas pada template blog anda.caranya adalah sebagai berikut :
1. Masuk pada menu Template kemudian klik Edit HTML
2. Pada edit html anda cari kode seperti ini ]]></b:skin>
3. Kemudian Copy kode CSS dibawah ini lalu letakan kode tersebut diatas kode ]]></b:skin>

Code CSS :

.kotak{background:black;text-align:center;float:left;width:100%;margin:0;padding:0}
.barlittle{background-color:#c30000;background-image:0;border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;width:32px;height:20px;float:left;margin-left:5px;opacity:0.1;-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-moz-animation:move 1s infinite linear;-webkit-animation:move 1s infinite linear}
#block_1,#block_10{-moz-animation-delay:.1s;-webkit-animation-delay:.1s}
#block_2,#block_6{-moz-animation-delay:.2s;-webkit-animation-delay:.2s}
#block_3,#block_7{-moz-animation-delay:.3s;-webkit-animation-delay:.3s}
#block_4,#block_8{-moz-animation-delay:.4s;-webkit-animation-delay:.4s}
#block_5,#block_9{-moz-animation-delay:.5s;-webkit-animation-delay:.5s}
@-moz-keyframes move{
0%{-moz-transform: scale(1.1);opacity:1;}
100%{-moz-transform: scale(1.1);opacity:0.0;}
}
@-webkit-keyframes move{
0%{-webkit-transform: scale(1.1);opacity:1;}
100%{-webkit-transform: scale(1.1);opacity:0.0;}
}

Keterangan :
silahkan anda sesuaikan kode yang saya beri warna biru ini width:32px;height:20px; sesuai dengan yang anda inginkan agar tampilan animasi Lednya bisa terlihat pas.

4.Setelah itu klik Simpan Template
5. Masuk ke Tata Letak kemudian tambah gadget Html/Javascript
6. Copy Code Xhtml dibawah ini pada gadget Html/Javascipt yang anda pilih tadi

Code Xhtml :

<div class='kotak'>
<div class='barlittle' id='block_5'></div>
<div class='barlittle' id='block_4'></div>
<div class='barlittle' id='block_3'></div>
<div class='barlittle' id='block_2'></div>
<div class='barlittle' id='block_1'></div>
<div class='barlittle' id='block_10'></div>
<div class='barlittle' id='block_6'></div>
<div class='barlittle' id='block_7'></div>
<div class='barlittle' id='block_8'></div>
<div class='barlittle' id='block_9'></div>
</div>

7. klik Simpan dan buka Blog anda untuk melihat hasilnya

Selamat mencoba dan semoga Artikel ini bermanfaat bagi anda.
Readmore
Add your Comment 0 komentar
Posted by: Umar Backry - Artikel Tutorial, Updated at: 03.24

Memberikan Link Publisher pada Homepage Blog

tanggal 21 Nov 2012 | 23.17 tanggal tanggal No comments | 5
Description : Memberikan link publisher pada home page sama pentingnya dengan memberikan link author pada halaman post.Pemberian Link publisher dimaksudka...
Memberikan link publisher pada home page sama pentingnya dengan memberikan link author pada halaman post.Pemberian Link publisher dimaksudkan untuk menegaskan bahwa kita sebagai penerbit blog yang kita tambahkan pada halaman google plus. Dan link author menegaskan bahwa kita yang memiliki profil google plus adalah sebagai penulis artikel atau penulis konten pada blog yang kita tambahkan pada halaman google plus tersebut.

Kalau sebelumnya kita sudah berganti profil dari profil blogger menjadi profil google plus yang langkah -langkahnya saya tulis pada artikel "Mengganti profil Blogger ke google plus", lalu setelah itu saya juga sudah jelaskan langkah - langkah memberi link author pada blog yang saya tulis pada artikel "Cara menampilkan Author blog di google".

Nah..., sekarang akan saya jelaskan secara mudah menambahkan link publisher pada blog kita yang tepatnya pada home page. Karena penempatan link publisher tidak diterima bila diletakkan pada halaman yang sama dengan link author. Dan google sendiri sangat menyarankan penempatan link publisher pada homepage dan link author pada halaman post atau halaman konten.

Jadi silahkan anda ikuti beberapa langkah mudah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

gambar

4. Cari kode di bawah ini atau yang mirip dengan kode ini : <head>

5. Copy kode di bawah ini dan taruh tepat setelah kode <head> :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='https://plus.google.com/105300861809836012204' rel='publisher'/>
</b:if>
Catatan : Ganti teks berwarna biru muda dengan id profil google plus anda.

6. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal kita TES dengan menggunakan "Rich Snippets Testing Tool". Silahkan masukkan ULR blog anda.
Bila berhasil maka akan tampak seperti pada gambar berikut :

gambar

Gambar diatas menunjukkan penempatan link author sudah benar pada halaman post.

Nah... bila semua sudah berhasil, maka akan kita lanjutkan ke tahap berikutnya yaitu "Cara Memasang Rating Bintang Rich Snippets" pada artikel yang akan datang.

OK... Selamat mencoba dan Semoga bermanfaat....

Sumber : www.carabuatwebgratis.com
Readmore
Add your Comment 0 komentar
Posted by: Umar Backry - Artikel Tutorial, Updated at: 23.17

Cara memasang Rating Bintang Rich

tanggal | 22.44 tanggal tanggal No comments | 5
Description : Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rat...
Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rating Bintang dan Rich Snippets.

Sebelum menuju caranya, sebaiknya kita mengetahui .... apa sih Rich Snippets?
Google Rich Snippets merupakan data terstruktur dalam bentuk snippets (cuplikan) atau bisa juga kita sebut dengan description pada homepage atau pada halaman artikel kita yang muncul dibawah setiap hasil pencarian Google.

Rich Snippets sebenarnya sudah diperkenalkan oleh Google pada sekitar pertengahan tahun 2009, yang gunanya untuk membantu penggunanya menemukan homepage ataupun halaman posting yang ada pada blog kita, dengan menunjukkan "snippet" atau cuplikan dari artikel yang kita buat.

Waah.... sudah lama juga ya..., padahal Blog ini lahir pertengahan 2010... Berkat aksi kreatif para mbah senior blogger, kini mulai marak menggunakan trik ini.

Dengan teknik ini, kita diharapkan memberikan informasi yang relevan kepada pengguna google tentang apa saja yang kita tulis. Sehingga menurut saya mungkin agar pengunjung benar - benar yakin akan mengunjungi blog kita.

Bersamaan dengan pemberian Rich Snippets pada hompage dan setiap halaman post yang kita terbitkan, kita juga dapat memberikan tanda rating bintang sekaligus. Sehingga yang ditampilkan pada pencarian google adalah hompage atau judul artikel, Snippets, dan tanda rating bintang,... kerren juga sih...

Sayang..., hal tersebut tidak mempengaruhi meringkat halaman blog kita pada hasil pencarian google, walaupun kita sudah memberikan tanda rating bintang dan Rich Snippets pada blog kita.

Tapi paling tidak pengunjung akan lebih mantab dengan melihat rating bintang dengan warna orange yang mencolok tersebut dan akhirnya mengklik Rich Snippets yang muncul pada pencarian google. Jadi sering sering artikel kita yang muncul dengan rating bintang di Klik orang, tentu pengunjung blog kita jadi bertambah, ....iya kan?

Nah... bagi anda yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets pada blog anda, pada artikel ini saya jelaskan langkah - langkahnya secara detail,mudah,dan yakin berkasil.

Untuk memasang Rating Bintang dan Rich Snippets, tentu ada beberapa tahapan yang harus kita lakukan. Dalam hal ini setiap tahapan saya tulis dalam satu artikel.

Berikut tahapan - tahapan sebelum memasang Rating Bintang dan Rich Snippets :
  1. Mengganti profil Blogger ke google plus.
  2. Cara menampilkan Author blog di google.
  3. Memberikan link publisher pada home page.
Bagi yang belum melakukan 3 tahap diatas, silahkan baca artikelnya dan ikuti langkah - langkahnya :
Dan bagi anda yang sudah melakukan 3 tahap diatas, anda tinggal ikuti langkah - langkah yang saya uraikan dibawah ini :

Seperti biasa .... :
1. Masuk Rancangan.
2. Edit HTML.
3. Centang "Expand Template Widget".
4. Letakkan kode dibawah ini, tepat setelah atau dibawah  tag <body> :
<div>
<div itemscope='Person' itemtype='http://data-vocabulary.org/Review'>

5. Dan Letakkan kode dibawah ini, tepat Sebelum atau diatas  tag </body> :
</div>
</div>

6. Cari kode seperti dibawah ini : (Ingat, kode seperti berikut ada 2, silahkan pilih yang pertama atau yang atas, hal ini mempengaruhi hfeed pada homepage.)

<h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
     <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
      <data:post.title/>
     </b:if>
    </b:if>
      </h1>

Catatan : Setiap template memiliki kode yg berbeda, terutama penggunaan tag <h1>   .....  </h1> . tapi tidak masalah, baik pakai h1,h2, atau h3.

7. Sisipkan kode berikut, pada kode diatas :
<span itemprop='itemreviewed'> ....... </span>

Hingga jadi seperti dibawah ini :
<span itemprop='itemreviewed'> <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
     <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
      <data:post.title/>
     </b:if>
    </b:if>
      </h1> </span>
Catatan : Kode diatas untuk menandai Judul yang tampil pada pencarian google.

8. Kemudian scroll kebawahnya kode diatas, dan cari kode seperti atau mirip kode berikut :
<div class='post-header-line-1'/>

9. Tambahkan kode dibawah ini, setelah kode diatas :

<div class='postdate' style='width:100%;margin-bottom:-15px;border-bottom:1px solid #ddd;position:relative;'>
<b:if cond='data:top.showTimestamp'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnNvgNploaFpN5Z27ljDh1TPh-lyWwc3zO40PAryaivWhqv_slMaQNroWifKoXeSs-ZhtYU75xVZHjO-KkxhyphenhyphenIZat7n_8LCUtm2YMznN2tNJ8hEGk9ASVWF1h9AyDCfoVWbhrdAcB_9U/'/>
<span itemprop='updated'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='updated' expr:title='data:post.timestampISO8601'>
<data:post.dateHeader/>
 | <data:post.timestamp/>
</abbr>
</a>
</span>
</b:if>

<b:if cond='data:top.showAuthor'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglOiIJH00bKjAq1HxzjZtBwwZB14IuSaajWBFA8iKyS20AG2plfWBi37B0OSHr3WCFBMFpHuBVwXS1UFhCubggJ0QAWY_ToZBvFopaSVMHHYPifOxO2O9WfSSjHsTTfLQX05cxfU_E4Wg/'/>  <span class='fn'>
<span itemprop='reviewer'>
<a href='https://plus.google.com/105300861809836012204' rel='author'><data:post.author/>
</a>
</span>
</span>
</b:if>

<b:if cond='data:post.allowComments'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyuCi06-9Eg08MozVjP7avmQrG-LCdmAC6BpkR2QM2ILHfNPvM1C20zDLXRf8KXv5BnSfITfyucyiQDr4GaPicKQ5Y3IVsrnQ-Jf_H-h27VNzYJgtLamyKWe0iXtb5sQ77E2KSFAt-rU/s1600/comments.png'/>
<span itemprop='Comments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>No comments</b:if>
<b:if cond='data:post.numComments == 1'>1 comment</b:if>
<b:if cond='data:post.numComments &gt;= 2'>
<data:post.numComments/> comments</b:if>
</a>
</span>
<span itemprop='rating'> | 3.4</span>
</b:if>
</div>
<br/>

<b>Description :</b>
<span itemprop='description'>
<data:post.snippet/>
</span>
<br/>


Catatan :
Pada bagian kode berwarna HIJAU, untuk menandai Update Artikel yang tampil pada pencarian google.
Pada bagian kode berwarna BIRU, untuk menandai Profil Google Plus sebagai Penulis yang tampil pada pencarian google. Silahkan ganti TEKS WARNA HIJAU MUDA dengan ID Profil Google Plus Anda
Pada bagian kode berwarna PINK, untuk menandai Jumlah komentar yang tampil pada pencarian google.
Pada bagian kode berwarna ORANGE,  untuk menandai Jumlah Rating Bintang yang tampil pada pencarian google.
Pada bagian kode berwarna BIRU MUDA,  untuk menandai Rich Snippets / Description yang tampil pada pencarian google.

10. SIMPAN TEMPLATE.

Untuk hasil pada langkah 9 diatas, Pada halaman posting tepatnya di bawah judul dan diatas artikel, akan tampak seperti gambar berikut :

gambar

Nah..., Sekarang tinggal kita lihat, apakah google berhasil mengekstrak Rating Bintang dan Rich Snippets yang anda pasang pada halaman post, anda dapat mempergunakan "Rich Snippets Testing Tool". Silahkan masukkan ULR ARTIKEL anda.


Bila anda berhasil maka akan tampak seperti gambar berikut :

gambar

Kotak merah pada gambar diatas menunjukkan bahwa link author bekerja dengan baik.

Kemudian dibawahnya akan seperti ini :

gambar

Kotak merah pada gambar diatas menunjukkan bahwa Item yang di review sudah muncul dengan baik.

 OK... Selamat mencoba dan Semoga bermanfaat....

Sumber : www.carabuatwebgratis.com
Readmore
Add your Comment 0 komentar
Posted by: Umar Backry - Artikel Tutorial, Updated at: 22.44
 
Copyright © 2012 ARTIKEL TUTORIAL | Powered by Blogger | Design by Umar Backry