April 2015 ~ Indahnya berbagi

Rabu, 29 April 2015

CARA MEMBUAT RATING BINTANG BLOG DI PENCARIAN GOOGLE

Cara Membuat Rating Bintang Blog Di Pencarian Google
Cara menampilkan rating ulasan berupa bintang kuning di pencarian google
Biasa juga dengan ranting bintang rich snippet

Terkadang saat kita sedang browsing di google sedang mencari sesuatu tiba-tiba beberapa blog/website menampilkan bintang kuning seperti vote, ulasan, skor dan lain-lain
Lalu apa itu sebenarnya itu biasanya di sebut Rating Bintang atau Rich Snippets
Lalu adakah keuntungannya untuk blog, apa gunanya, fungsi dari Rating Bintang Rich Snippet adalah untuk menunjukan ulasan produk yang di beli seseorang sebagai contoh ThemeForest dan Codecanyon, menurut saya rating tersebut juga untuk membuat suatu blog/website terlihat profesional.

Berikut saya akan coba bagikan Tutorial menampilkan rating bintang rich snippet blog di pencarian Google untuk sobat yang ingin mencobanya.

Lalu pertanyaannya mungkin seperti ini Kenapa blog saya sendiri tidak terdapat rating bintang/Rich Snippet? saya sengaja tidak memasangnya, karna saya juga punya alasan tersendiri untuk tidak memasang rating bintang/Rich Snippet di blog ini, saya sudah mencoba sendiri rating bintang rich snippet ini pada blog yang masih menggunakan template standar bawaan blogspot.
demonya kira-kira seperti ini

Demo

Langsung ke tutorial
Seperti biasa login akun blogger-> menu tab template-> edit HTML

Cara Membuat Rating Bintang Rich Snippet Blog Di Pencarian Google

Step 1 : CSS Pembentuk Style
Letakan kode css berikut di atas ]]></b:skin> template sobat

.hrecipe{line-height:1.7em;font-size:13px;background:#f8f8f8;border:1px solid #e2e2e2;color:#333;overflow:hidden;margin:6px 0 0;padding:12px}.share-button-box{background:#09C;overflow:hidden;border:1px solid #000;margin:20px 0 0;padding:8px 12px 5px}.plus-button,.like-button,.tweet-button,.linkedin-button{float:left}.share-button-box .fb_iframe_widget span{width:100px!important}.tweet-button iframe{width:108px!important}img.comment_emo{height:auto!important;vertical-align:middle!important;width:auto!important;border:0!important}.comments .continue a:hover,.comments .comment .comment-actions a:hover{background:#eaeaea}.comment-content a,.deskripsi-artikel a,.hrecipe a{color:red}.plus-button iframe,.linkedin-button iframe{width:120px}

Step 2 : Penerapan HTML
Letakan kode html berikut di bawah <data:post.body/> template blog sobat

<div class='clear'/>
<div class='hrecipe'>
<img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' style='float:left;margin-right:10px;'/>
<span class='item'>
<span class='fn'><b><data:blog.title/></b> - "<u><i><data:post.title/></i></u>"</span><br/>
</span>
<b>Published :</b> <span class='published'><data:post.timestampISO8601/></span><br/>
<b>Title : </b><span class='summary'><data:post.title/></span><br/>
<b>Rating : </b><span class='review hreview-aggregate'>
<span class='rating'>
<span class='average'>5</span> On
<span class='count'>2014</span> reviews
</span>
</span>
</div>

Dan simpan template sobat lihat hasilnya, ohh iya Rating Bintang ini tidak akan langsung muncul begitu saja ya, jadi butuh proses waktu juga.

Cara Membuat Ratings Bintang Votes Blogger

By zafrands19.47No comments

BINTANG VOTE BLOGGER

Cara Membuat Ratings Bintang Votes Blog-Membuat sebuah widget seo menarik di blog anda yaitu rating bintang di dalam postingan blog tepatnya dibawah judul postingan :D, yang nantinya widget tersebut akan memberikan sebuah penilaian yang diberikan oleh pengunjung blog anda terhadap artikel yang sedang dia baca, baik itu dalam jumlah vote dan view :D. Semakin banyak dan besarnya vote dan view terhadap artikel blog anda maka hal tersebut akan menjadi sebuah penilaian bagi pengunjung blog anda bahwa artikel yang anda buat memang bermanfaat :)

Dalam membuat widget ini kita akan memanfaatkan sebuah jasa dari web yang menyediakan fitur rating bintang ini. Selain widgetnya ringan untuk dipasang di blog anda, widget tersebut juga akan menambah fitur yang ada dan mempercantik blog anda dan terlihat lebih profesional :D tentunya, oke langsung ke proses pemasangan widget rating bintang ini ke blog anda :D.

Tutorial Membuat Rating Bintang Votes Dan Views Dalam Postingan Blog

Pertama anda kunjungi http://www.graddit.com/ratings-widget
Selanjutnya klik tab menu Rating Widgets, dan muncul tampilan seperti gambar dibawah ini

Cara Membuat Ratings Bintang Votes Blogger

Selanjutnya masuk Dashboard blog anda kemudian pilih Template dan klik Edit HTML. Setelah itu copy kode yang ditunjukan No.2 pada gambar, dan paste sesudah kode <head> atau sebelum </head>, tekan Ctrl+F untuk mempercepat pencarian.
<head><link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
</head>
Kemudian pilih Blogger seperti yang ditunjukan No.3 pada gambar diatas.
Disamping kiri yang ditunjukan No.4 itu desain bentuk rating yang nantinya akan digunakan di blog anda, pilih salah satu yang sesuai dengan desain blog anda :D.
Selanjutnya copy kode yang ditunjukan seperti No. 5 pada gambar diatas, seperti dibawah ini :

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["☆","★"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if>
Kemudian paste kode script rating bintang sesudah kode  <div class='post-body entry-content'>, jika terdapat lebih dari satu maka pilihlah yang pertama, tekanCtrl+F untuk mempercepat pencarian dan hasilnya seperti dibawah ini :
   <div class='post-body entry-content' ~~expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>~~
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["☆","★"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if><br/><br/>
  <data:post.body/>
  ~~<div style='clear: both;'/> ~~

Setelah itu simpan dan lihat hasilnya :D

Senin, 27 April 2015

By zafrands22.47No comments

Cara Membuat Menu Navigasi di Blog

Assalamualaikum wr wb

Ghanishare - kali ini saya akan share cara membuat menu navigasi di blog, kegunaannya yaitu untuk mengakses link ke halaman tertentu, atau bisa untuk menggolong-golongkan artikel supaya lebih mudah dalam mengaksesnya.
Dalam memasang menu navigasi tersebut kita harus memasukkan sedikit dari kode CSS dan menambahkan sedikit kode HTML.
Cara-caranya :

1. masuk ke blog anda lalu pilih Template lalu pilih Edit HTML.
2. cari kode ]]></b:skin> lalu tempelkan kode di bawah ini tepat di atasnya.

#cssmenu {
  position: relative;
  height: 44px;
  background: #2b2f3a;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#cssmenu > ul {
  position: relative;
  display: block;
  background: #2b2f3a;
  height: 32px;
  width: 100%;
  z-index: 500;
}
#cssmenu > ul > li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > #menu-button {
  display: none;
}
#cssmenu ul li a {
  display: block;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  color: #7a8189;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu li.has-sub::after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
#cssmenu > ul > li.has-sub::after {
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;
  transition: left .25s ease;
}
#cIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  top: -12px;
  right: 100%;
  z-index: -2;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 70px;
  opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000;
}
#cssmenu ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 44px;
  opacity: 1;
}
#cssmenu ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 130px;
  border-bottom: 1px solid #eee;
  padding: 10px 20px;
  font-size: 12px;
  color: #9ea2a5;
  background: #fff;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}
#cssmenu ul ul li:hover > a {
  background: #f6f6f6;
  color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
  border-bottom: 0;
}
.submenuArrow {
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #fff;
  position: absolute;
  top: -12px;
}
#cssmenu ul ul li.has-sub::after {
  border: 4px solid transparent;
  border-left-color: #9ea2a5;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu ul ul li.has-sub:hover::after {
  border-left-color: #fff;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: auto;
  }
  #cssmenu ul {
    width: auto;
  }
  #cssmenu .submenuArrow,
  #cssmenu #indicatorContainer {
    display: none;
  }
  #cssmenu > ul {
    height: auto;
    display: block;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu li,
  #cssmenu > ul > li {
    display: none;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu ul > li:hover > ul,
  #cssmenu ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
  }
  #cssmenu ul .has-sub::after {
    display: none;
  }
  #cssmenu ul li a {
    padding: 12px 20px;
  }
  #cssmenu ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
  }
  #cssmenu ul ul li:hover > a {
    background: none;
    color: #8c9195;
  }
  #cssmenu ul ul ul a {
    padding: 8px 50px;
  }
  #cssmenu ul ul ul ul a {
    padding: 8px 65px;
  }
  #cssmenu ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #cssmenu ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #cssmenu > ul > #menu-button {
    display: block;
    cursor: pointer;
  }
  #cssmenu #menu-button > a {
    padding: 14px 20px;
  }
  #cssmenu ul.open li,
  #cssmenu > ul.open > li {
    display: block;
  }
  #cssmenu > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #cssmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    border-bottom: 2px solid #7a8189;
    right: 20px;
    top: 15px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    right: 20px;
    top: 25px;
  }
  #cssmenu ul.open #menu-button::after,
  #cssmenu ul.open #menu-button::before {
    border-color: #fff;
  }
}

3. Lalu masuk ke Tata Letak lalu klik Tambahkan Gatget lalu tambaahkan HTML/JavaScript dan tempelkan kode berikut

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <link rel='stylesheet' type='text/css' href='styles.css' />
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script type='text/javascript' src='menu_jquery.js'></script>
</head>
<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='Link'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='Link'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='Link'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='Link'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='Link'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='Link'><span>About</span></a></li>
   <li class='last'><a href='Link'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>

Isikan Link dengan link yang anda ingin terapkan
Kata-kata seperti Home, About, dan Contact bisa di ganti dengan kata yang ingin diterapkan
Kata Product menandakan tampilan awalnya
Kata Product 1 dst menandakan menu dropdown dari tampilan awal Product.
Kata Sub Item menandakan sub item dari Product 1 dst.

4. Lalu simpan dan letakkan widget tersebut di atas letak posting dengan cara drag widget tersebut ke atas letak postingan.

5. Lihat tampilannya

Sekian dari saya tentang Cara Membuat Menu Navigasi di Blog, terimakasih sudah mengunjungi Ghanishare, dan semoga bermanfaat

Minggu, 26 April 2015

By zafrands02.12No comments

Cara Membuat PopUp Like Facebook dan Follow Twitter di Blog

Cara Membuat PopUp Like Facebook dan Follow Twitter di Blog

v Silahkan masuk ke blogger anda.

v Kemudian masuk pada Tata letak.

v Pilih HTML/Java Secript

v Masukan Kode Dibawah ini :

v Warna Biru Kode Like Box Facebook Anda, Warna Merah User Name Twitter anda, Warna Hijau Ganti dengan Kata-kata anda.

v Kemudian Simpan

Catatan:

Untuk mendapatkan Kode Like Box Facebook, anda harus mengikuti langkah-langkah berikut:

1. Buka halaman pengembang Facebook, dalam hal ini adalah harus membuka URLhttps://developers.facebook.com/docs/reference/plugins/like-box/

2. Masukkan URL Halaman Facebook atau Fans Page yang Anda kelola kemudian tentukan setelan untuk tampilan like box. Dalam hal ini misalnya: mengatur ukuran lebar dan tinggi, warna, maupun elemen yang akan ditampilkan pada like box. Dan untuk lebih jelasnya perhatikan gambar di bawah ini.

3. Klik tombol ‘Get Code’ untuk mendapatkan kode plugin like box Anda, seperti tampak pada gambar di bawah ini.

4. Silahkan salin Kode Like Box anda ke yang code yang warna biru diatas (warna biru kode like box facebook anda)

Indahnya berbagi

Iklan

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Rabu, 29 April 2015

CARA MEMBUAT RATING BINTANG BLOG DI PENCARIAN GOOGLE

Cara Membuat Ratings Bintang Votes Blogger

Tutorial Membuat Rating Bintang Votes Dan Views Dalam Postingan Blog

Senin, 27 April 2015

Cara Membuat Menu Navigasi di Blog

Minggu, 26 April 2015

Cara Membuat PopUp Like Facebook dan Follow Twitter di Blog

Sample Text

Author

Formulir Kontak

Cari Blog Ini

Arsip

Pages

JOIN THE TEAM

ADS

Popular Posts

Popular Posts

Arsip Blog

Recent Posts

Sample Text

Theme Support

Text Widget

Iklan

Rabu, 29 April 2015

CARA MEMBUAT RATING BINTANG BLOG DI PENCARIAN GOOGLE

Tutorial Membuat Rating Bintang Votes Dan Views Dalam Postingan Blog

Senin, 27 April 2015

Cara Membuat Menu Navigasi di Blog

Minggu, 26 April 2015

Social Profiles

Sample Text

Author

Formulir Kontak

Cari Blog Ini

Arsip

Pages

JOIN THE TEAM

ADS

Popular Posts

Popular Posts

Arsip Blog

Recent Posts

Sample Text

Theme Support

Text Widget