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

Membuat Animasi Auto Typing Text Menggunakan JavaScript


Membuat Animasi Auto Typing Text Menggunakan JavaScript - Kalo kita bicara mengenai animasi, pastinya kita akan lagsung merasa penasaran dan ingin segera melihat atau bahkan mengetahuinya. Nahh, kali ini saya akan share tentang cara membuat animasi auto typing text menggunakan JavaScript. Animasi auto typing text di sini maksudnya adalah animasi ketikan otomatis (mengetik sendiri), artinya tulisan yang sudah kita siapkan akan secara otomatis mengetik sendiri (muncul satu persatu dengan sendirinya).

Masih bingung? Kalo begitu langsung saja kita menuju ke tutorial cara membuat animasi auto typing text menggunakan JavaScript berikut ini... Silahkan bisa anda simak lalu ikuti dengan baik dan seksama!

Animasi auto typing text menggunakan JavaScript ini bisa anda letakkan di dalam postingan ataupun di sidebar sebagai widget eksternal. Jadi anda tidak usah kebingungan karena mau di letakkan di mana saja bisa. Caranya anda tinggal copy/salin script kode di bawah ini lalu pastekan di tempat yang anda inginkan.

<form name="news">
<textarea cols="50" name="news2" rows="3" wrap="virtual"></textarea>
</form>
<script type="text/javascript">
//<![CDATA[
var newsText = new Array();
newsText[0] = "Hello Sobat Ngeposta!";
newsText[1] = "Anda Sedang Membaca Artikel Tentang:";
newsText[2] = "Membuat Animasi Auto Typing Text";
newsText[3] = "Semoga Bermanfaat Bagi Sobat Semua...";
newsText[4] = "Dan Selamat Mencoba!";
newsText[5] = "Jangan Lupa Tinggalkan Komentar Sobat...";
var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)
var tspeed = 100; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE -------------
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
//]]>
</script>

Hasilnya :


Note :
Untuk value (isi) dari newsText[0] sampai dengan newsText[5] bisa anda ganti dan sesuaikan dengan keinginan anda sendiri.

Sekian dulu postingan tentang cara membuat animasi auto typing text menggunakan JavaScript ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kesalahan yang ada. Salam sejahtera by ngeposta...
10.00

Membuat Efek Auto Zoom Image View

Membuat Efek Auto Zoom Image View - Efek auto zoom image view, maksudnya adalah jika kita mengarahkan cursor (pointer cursor) ke arah gambar maka secara otomatis gambar tersebut akan mengalami zoom (perbesaran ukuran). Hal ini dapat memberikan keunikan dan membuat daya tarik blog anda menjadi lebih bagus. Namun tetap ingat! Pastikan blog anda tidak memasang terlalu banyak widget atau pernak-pernik yang berbobot sedang atau bahkan berat. Karena jika hal itu tidak anda pedulikan dan anda tetap memasangnya secara berlebihan, maka bukan hasil yang bagus yang akan anda dapatkan. Justru hasilnya akan buruk dan berdampak negatif pada kualitas blog anda khususnya pada waktu loading.

Nahh, untuk cara membuat efek auto zoom image view ini anda bisa mengikuti tutorial tentang cara membuat efek auto zoom image view berikut ini dengan baik!

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!

.post img:hover {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}

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

Cukup sekian dulu postingan pada kesempatan kali ini, semoga bisa bermanfaat bagi anda semua. Selebihnya saya mohon ma'af atas segala kesalahan dan kekurangan yang ada. Jika anda menyukai postingan tentang cara membuat efek auto zoom image view ini, silahkan bantu share ke social media dan jangan lupa tinggalkan komentar anda. Salam sejahtera by ngeposta...
10.00

Membuat Widget Labels atau Category Menjadi Dua Kolom


Membuat Widget Labels atau Category Menjadi Dua Kolom - Untuk menghemat tempat yang ada pada blog/web anda, maka kita benar-benar harus bisa berpikir lebih creative dan responsive dalam menanggapi suatu permasalahan yang ada. Widget labels atau category yang ada di blog anda bisa di minimalis agar tidak terlalu memakan tempat, yaitu dengan cara membuatnya menjadi dua kolom.

Langkah pertama yang harus anda lakukan adalah pasang dulu widget labels atau category di blog anda, silahkan bisa anda ikuti tutorial berikut ini :

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


3. Klik "Tambah Gadget".


4. Kemudian pilih "Labels".


5. Atur widget tersebut menjadi seperti berikut :


6. Klik save/simpan.

Setelah itu, kita beranjak ke langkah selanjutnya yaitu menyisipkan sedikit kode ke bagia HTML template blog untuk membuat widget labels atau category yang sudah di buat agar menjadi dua kolom. Silahkan ikuti langkah-langkah berikut ini!

1. 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!

#Label1 li {
      float: left; 
      width: 45%;
}

5. Lalu klik save/siimpan template, slesai dan lihat hasilnya...

Note :
Untuk previewnya bisa langsung anda lihat pada gambar di atas, hasilnya kurang lebih seperti itu.

Cukup sekian postingan tentang cara membuat widget labels atau category menjadi dua kolom ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...
10.00

Membuat Paragraf Dua Kolom Dalam Postingan

Membuat Paragraf Dua Kolom Dalam Postingan - Untuk membuat paragraf dua kolom dalam postingan, caranya cukup mudah saja. Anda hanya perlu menggunakan selector CSS yaitu column-count dan column-gap kemudian anda padukan dengan tag HTML biasa seperti <div> atau <span>. Fungsi dari membuat paragraf dua kolom dalam postingan ini adalah membuat kesan indah dan rapi, selain itu juga untuk menghemat ruang teks yang ada supaya bisa di manfaatkan untuk menampung isi yang lainnya.

Cara membuat paragraf dua kolom dalam postingan ini sangat simple dan scriptnya pun menurut saya pribadi sangat mudah untuk di pahami, Berikut tutorial cara membuat paragraf dua kolom dalam postingan, silahkan simak dan perhatikan dengan baik!

1. Copy dan pastekan script berikut ini di dalam halaman menu posting/edit posting blog anda.

<div style="background-attachment: scroll; background: #f0f0f0;
-moz-column-count: 2; -moz-column-gap: 25px; -webkit-column-count: 2;
-webkit-column-gap: 25px; -o-column-count: 2; -o-column-gap: 25px;
column-count: 2; column-gap: 25px; height: auto;
width: auto; padding: 10px">

Masukkan teks anda di sini!

</div>

2. Ganti tulisan "Masukkan teks anda di sini!" dengan tulisan yang anda inginkan dan selesai.

Maka hasilnya kurang lebih akan terlihat seperti berikut ini :

Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Ngeposta mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Ngeposta mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Ngeposta mengucapkan terima kasih atas kunjungan anda.

Cukup sekian postingan tentang cara membuat paragraf dua kolom dalam postingan ini, semoga bermanfaat bagi anda semua. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...
10.00
Langganan: Postingan (RSS)
 

Cs Support

Link Sahabat

About this blog