Januari 2013

Cara Membuat Rating Bintang Pada Postingan di Blog


Cara Membuat Rating Bintang Pada Postingan di Blog - Pada kesempatan kali ini saya ingin share sebuah tutorial tentang cara membuat rating bintang pada postingan di blog. Rating bintang, maksudnya adalah bahwa setiap postingan/artikel yang telah anda publish nantinya akan di hitung jumlah suara/rating dengan icon bintang yang di peroleh oleh poostingan/artikel anda tersebut dengan batas nilai maksimal yang telah di tentukan. Rating ini nantinya akan muncul pada setiap hasil penelusuran di search engine google.

Contoh tampilannya adalah seperti gambar berikut ini :


Nahh, kurang lebih jika anda mengeceknya di http://www.google.com/webmasters/tools/richsnippets maka hasilnya akan tampak seperti gambar tersebut. Dan untuk cara membuatnya silahkan bisa anda simak tutorial tentang cara membuat rating bintang pada postingan di blog berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian cari kode <head> dan letakkan script berikut ini tepat di bawahnya!

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='url profile google+' rel='publisher'/>
</b:if>

*Ganti tulisan "url profile google+" dengan alamat url profile google plus anda.
Contoh : https://plus.google.com/107747490223618304612

5. Tambahkan kode berikut ini tepat di bawah kode <body> :

<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>

6. Dan tambahkan kode </div></div> di atas kode </body>.

7. Tambahkan kode berikut tepat di bawah kode <data:post.body/> :

Description: <span itemprop="description"><data:post.title/></span>
Rating: <span itemprop='rating'>4.5</span>
Reviewer: <span itemprop='reviewer'><data:post.author/></span>
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span>

8. Setelah itu klik save/simpan template dan selesai...

Demikian postingan tentang cara membuat rating bintang pada postingan di blog ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...
12.43

Membuat Tampilan 2 Kolom di Homepage (Halaman Awal) Blog


Membuat Tampilan 2 Kolom di Homepage (Halaman Awal) Blog - Setelah beberapa waktu lalu saya tidak pernah posting di karenakan sibuk di dunia kerja (magang), kali ini saya akan share sebuah tutorial tentang cara membuat tampilan 2 kolom di homepage (halaman awal) blog. Dengan di buat menjadi 2 kolom, maka tampilan homepage (halaman awal) blog anda akan lebih rapi dan tidak terlalu memakan banyak tempat. Selain itu, blog akan terkesan lebih professional dan menarik.

Langsung saja simak tutorial tentang cara membuat tampilan 2 kolom di homepage (halaman awal) blog berikut ini dengan baik dan benar!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di bawahnya!

  <style type='text/css'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    #main-wrapper {
width:650;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;
} 
    h2.date-header, .jump-link, .feed-links, .post-footer {
display:none;
}
    #blog-pager {
width:100%; clear:both;
}
    .post {
margin:.0 10px 10px 0;background:none;width:290px;height:340px;float:left; border-bottom: 1px solid #ccc; positon:relative;overflow:hidden;
}
    .post-body {
margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;
}
    .post h3 {
height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;
}
    .post h3 a, .post h3 a:visited, .post h3 strong {
font-weight:bold;color:#102D57;
}
    .post h3 strong, .post h3 a:hover {
color:#000;text-decoration:underline;
}
    </b:if>
  </style>

5. Kemudian klik save/simpan template, selesai...

Sekian postingan pada kesempatan kali ini tentang cara membuat tampilan 2 kolom di homepage (halaman awal) blog ini, kurang dan lebihnya mohon di ma'afkan. Semoga bermanfaat bagi anda dan jangan lupa untuk berkunjung lagi di lain waktu. Salam sejahtera by ngeposta...
10.57

Membuat Tool Tips JQuery Sederhana


Membuat Tool Tips JQuery Sederhana - Tool tips JQuery ini adalah suatu hal yang terbilang unik dan bisa membantu, fungsinya adalah untuk memberikan keterangan/informasi pada suatu tulisan atau link (bisa berupa text ataupun gambar). Selain itu, ada juga yang menjadikannya sebagai hiasan untuk menarik pandangan para pengunjung blog/webnya.

Langsung saja, ini dia tutorial untuk membuat tool tips JQuery sederhana. Silahkan bisa anda simak dan ikuti dengan baik tutorial berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}

5. Setelah itu, sisipkan kode berikut ini tepat di bawah kode ]]></b:skin>.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='http://vikrymadz.googlecode.com/files/helper-blogger-tooltip01.js'
type='text/javascript'></script>

6. Langkah selanjutnya klik save/simpan template.

Dan untuk cara penggunaan tool tips JQuery sederhana ini cukup sederhana, anda tinggal menaruh kode ini di bagian yang anda kehendaki :

<b data-tooltip="GANTI DENGAN TEKS SESUAI KEINGINAN ANDA">
GANTI DENGAN TULISAN, LINK (TEXT/GAMBAR), DLL.
</b>

Kode tersebut bisa anda gunakan di area posting ataupun di area sidebar blog/web anda. Cukup sekian postingan tentang cara membuat tool tips JQuery sederhana ini, selebihnya saya mohon ma'a atas segala kekurangan yang ada. Semoga bermanfaat bagi anda dan salam sejahtera by ngeposta...
10.00
Langganan: Komentar (RSS)
 

Cs Support

Link Sahabat

About this blog