Penggunaan Microdata

Penggunaan Microdata

- Sebelum mengetahui penggunaan Microdata, agan harus mengenal HTML dulu supaya lebih paham dalam mengenali penggunaan Microdata yang akan dibahas. karena Microdata adalah sebuah markup untuk menghiasi tampilan sebuah HTML, salah satunya yaitu untuk tampilan blog selain untuk menghias tampilan HTML, microdata juga berfungsi mempercepat untuk ditemukan oleh mesin pencari seperti google yaiu ketika kita posting yang sudah ada microdatanya maka postingan tersebut akan lebih cepat dicari dan postingan tersebut akan muncul dihalaman awal.

Syarat dan Ketentuan

Microdata ini mempunyai Syarat dan Ketentuan untuk menaruhkan kata kunci di dalam HTML. Syarat untuk microdata pada HTML yaitu terdapat 2 kosakata yang berbeda sehingga kosakata yang digunakan cukup unik, kosakata untuk microdata yang support yaitu vocabulary.org dan schema.org. beberapa webmaster terutama Google menyarankan penggunaan kosakata dari schema.org, dengan alasan kosakata schema.org lebih banyak dan lebih fleksibel dari pada kosakata data-vocabulary. Walau contoh yang diberikan oleh Google masih menggunakan data-vocabulary namun disarankan pada webmaster untuk menggunakan Schema yang lebih banyak kosakatanya dan kemungkinan kedepannya, data-vocabulary tidak lagi digunakan.

Cara Memasang Microdata

Langkah berikut ini untuk memasang microdata pada blog :

1. Login Blog
2. Pilih template kemudian Edit HTML
3. cari kode <b:includable id="post" var="post">
4. Templekan kode yang dibawah ini setelah kode nomor 3. 

<div class='post hentry uncustomized-post-template' property='blogpost' itemscope='' itemtype='http://schema.org/Blog' style='display:none;'>

<div expr:content='data:post.title' itemprop='name alternateName'/>

<div expr:content='data:post.url' itemprop='url'/>

<div content='http://ancerafriono.blogspot.com/' itemprop='additionalType'/>

<div expr:content='data:post.thumbnailUrl' itemprop='image thumbnailUrl'/>

<span itemprop='description articleBody articleSection'><data:post.body></span>

<span itemprop='author editor'><data:post.author></span>

<span itemprop='datePublished dateCreated'><data:post.timestamp></span>

<span itemprop='version'>TechnologyNews</span>

<span itemprop="contentLocation">http://ancerafriono.blogspot.com</span></div>

Setelah itu tempelkan kode kemudian save / publish dan cek kembali di google. 

Semoga Bermanfaat untuk informasi lainnya klik disini.

Sumber: http://jokeyinside.blogspot.com/2014/06/softskill-web-science.html

http://bloggeraneukaceh.blogspot.com/2014/07/cara-memasang-blog-posting-di-blogger.html

Tweet

Cara Untuk Membuat Button Share di Blog

Cara Untuk Membuat Button Share di Blog share button

- Hay guys, ini info yang cukup menarik bagi kalian nih apalagi yang lagi menjalani tugas kuliah ataupun tentang modifikasi blog, disini akan dijelaskna cara untuk pemasangan tombol share baik dari facebook, tweeter dan google +, nah sekarang apa saja si alatnya ataupun bahan yang dibutuhkan. alatnya yang pertama adalah laptop/PC kemudian internet. setelah itu ada semua kita masuk bloger.com.
jika anda sudah mempunyai akun blog maka langsung login dan jika belum tinggal daftar saja gratis kok. nah berikut cara lenkapnya :

1.Jika sudah masuk ke blog anda pilih ke opsi lainnya dan pilih template lalu edit HTML
2.Cari kode ]]></b:skin> kemudian tempelkan kode dibawah ini tepat diatas kode yang dicari tersebut :

/* social share buttons */
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7YCZ0LRcPH7xiNkZvxcY4c35_DcKCvvytzq1IYshsR5Q5kgVONvMvUijtVLskMRku643FjvrDPhALu9_eYTvLeVf8qEpHPAidCFXYOCi3OL0w1HhYINKuxROeRj9aoXxdkT8xB7IaAQQ/s1600/rect3799.png) no-repeat 200px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

3. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>

<div class='social-buttons-box'>

<div class='social-buttons'>

<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>

<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>

<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>

</div>

</div>

<!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->

<div style='clear: both;'/>

4. Kemudian kita pasang kode js pemanggil sosmed tadi , caranya cari kode </body> dan paasang kode dibawah ini diats kode tersebut :

<script>

  window.___gcfg = {lang: &#39;id&#39;};

  (function() {

    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;

    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;

    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);

</script><div id='fb-root'/>

<script type='text/javascript'>

5. Simpan template tersebut dan kemudian lihat blog dan lihat hasilnya. 

Sekian tutorial sederhana dari saya semoga bermanfaat yagh ,,,,, untuk info lainnya klik saja di sini

Tweet