Cara Memasang Artikel Terkait / Related Posts Gambar Dengan Linkwithin

Cara Memasang Artikel Terkait / Related Posts Gambar Dengan Linkwithin. Sebelumnya dalam posting Cara Membuat Artikel Terkait / Related Posts Dengan Script Gambar telah dijabarkan gimana cara membuat artikel terkait / related posts gambar namun menggunakan script khusus dan sepertinya ini sedikit menyulitkan bagi teman semua yang baru memulai blogging, pasti ada rasa takut salah edit template atau membuat template blogspot nanti jadi rusak dan amburadul.

Bagi temen - temen semua yang kepengen memasang artikel terkait / related posts berupa gambar nggak usah khawatir sebab ada widget khusus yang scriptnya bisa kita letakkan dengan mudah ke dalam template blog. Mau tahu ni ?? Pergunakan saja widget dari Linkwithin teman... Cara-nya ikuti langkah - langkah yang ada di bawah ini. Cara pasangnya mudah kok teman..

Cara Memasang Artikel Terkait / Related Posts Gambar Dengan Linkwithin

Pertama langsung pergi ke situsnya di http://www.linkwithin.com/learn

Disana teman semua akan menemui sebuah kotak ungu, nah ini semuanya yang diperlulan untuk mendapatkan script artikel terkait / related posts-nya diantaranya email (isikan email valid kalian, nggak sama dengan email yang kita daftarkan untuk akun blogger nggak apa - apa), blog link (isi alamat blog kalian disini), platform blog (pilih blogger), width (jumlah artikel terkait / related posts yang mau dimunculkan).
Nah yang terakhir ni langsung aj deh teman semua klik tombol Get Widget!
Klik link install widget
Terakhir klik link Menambah Widget.

Nah sekarang widget artikel terkait / related posts gambar dari Linkwithin dah terpasang tepat dibawah posts blog...  Gimana teman nggak sulit kan, selamat mencoba dan semoga sukses..

Continue Reading... Label: artikel terkait, cara, gambar, memasang, membuat, related post

Cara Membuat Artikel Terkait / Related Posts Dengan Script Gambar

Cara Membuat Artikel Terkait / Related Posts Dengan Script Gambar. Masih sama ni topik postingan kita dari sebelumnya yaitu tentang membuat artikel terkait / related posts tapi kali ini khusus yang ber-gambar. Dengan menggunakan artikel terkait / related posts yang disertai gambar akan makin menarik minat pembaca untuk mengkliknya.

Lalu bagaimana sih cara membuat dan memasang artikel terkait / related posts dengan disertai gambar ?!
Yups mas bro dan sis semua mari kita ikuti cara - cara dibawah ini step by step ..

Cara Membuat Artikel Terkait / Related Posts Dengan Script Gambar

Seperti biasa ketika ingin mengedit template blogspot, pertama masuk di akun blogger.com dan pilihlah opsi template

Menuju di halaman berikutnya, pilih tombol Edit HTML

Selanjutnya ada peringatan semacam ini, langsung saja klik tombol Lanjutkan

Sebelum mengedit template blogspot, jangan lupa centang kotak Expand Template Widget,

Agar artikel terkait / related post ini muncul di bawah setiap posting blog teman, letakkanlah script artikel terkait / related post tepat dibawah kode <div class="post-footer-line post-footer-line-1">.

<!--Kode Artikel Terkait / Related Posts dengan Gambar Dimulai-->
<!-- remove -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!--Kode Artikel Terkait / Related Posts dengan Gambar Berakhir-->

Selanjutnya teman semua tambahkan script css dibawah ini kedalam template blogger kalian dan letakkan diatas kode ]]></b:skin>

#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:red;
}
#related-posts a:hover {
background-color:#pink;
}

Jangan lupa agar artikel terkait / related posts ini bisa jalan masukkan link javascript dibawah tepat diatas tag </head>

<!--Kode Artikel Terkait / Related Posts dengan Gambar Dimulai-->
<!-- remove -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aRPGASBsQDr5vdEyF2PHWTow5_pf1KgaDWsW__mp-pgMan01fQvg0TlD6Vyi541UVzsGjC9mk_MIHrG_tigFf46_7g1uGRu2bdd9jAvc_JnUT0pkNlw6rkMlSYcq1HVJH6xvAMmr2gQe/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="Baca Artikel Terkait Lainnya :";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Kode Artikel Terkait / Related Posts dengan Gambar Berakhir-->

Keterangan : Angka yang berwarna merah ini bisa teman ganti dengan angka lainnya untuk menentukan jumlah artikel terkait / related posts dan bila ingin mengganti judul widget ini ganti kalimat berwarna hijau dengan kalimat kalian misal, Baca juga artikel terkait lainnya.

Langkah memasang script artikel terkait / related posts sudah selesai. Sekarang teman semua harus menyimpan hasil pengeditan template ini. Klik tombol Simpan Template dan Tutup.

Moga - moga makin banyak jumlah pageview yang bisa kita dapatkan bila memasang script artikel terkait / related post dengan gambar ke dalam blog kita.
Ok, selamat mencoba dan semoga sukses teman...

Continue Reading... Label: artikel terkait, blog, blogger, blogspot, cara, gambar, memasang, membuat, related post

Cara Membuat Dan Memasang Artikel Terkait / Related Post Disertai Logo

Cara Membuat Dan Memasang Artikel Terkait / Related Post Disertai Logo. Sebelumnya kita sudah pernah membahas cara membuat artikel terkait / related post di blog namum kali ini sedikit berbeda teman, kita akan mencoba membuat dan memasang artikel terkait / related post yang disertai dengan logo. Jadi di masing - masing list artikel terkait / related post nantinya akan muncul logo blog kita. Jadi makin keren nggak ?!

Langsung aja deh kita utak - atik template blogspot kita dan ini ni cara membuat dan memasang artikel terkait / related post ke dalam blog

Cara Membuat Dan Memasang Artikel Terkait / Related Post Disertai Logo

Seperti biasa ketika ingin mengedit template blogspot, pertama masuk di akun blogger.com dan pilihlah opsi template

Menuju di halaman berikutnya, pilih tombol Edit HTML

Selanjutnya ada peringatan semacam ini, langsung saja klik tombol Lanjutkan

Sebelum mengedit template blogspot, jangan lupa centang kotak Expand Template Widget,

Agar artikel terkait / related post ini muncul di bawah setiap posting blog teman, letakkanlah script artikel terkait / related post tepat dibawah kode <data:post.body/>. Bila kode ini ada dua atau lebih, pilihlah dibawah kode yang ke dua saja supaya list artikel terkait / related post bisa muncul tepat setelah postingan blog.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Artikel Terkait:</b></font>
<font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</b:if>

keterangan : untuk mensetting banyaknya list artikel terkait / relared post teman semua bisa mengganti angka yang berwarna merah diatas sesuai dengan angka yang teman semua inginkan

Melanjutkan ke langkah berikutnya supaya artikel terkait / related post ini makin cantik, teman semua bisa menambahkan beberapa script css untuk menyisipkan sebuah logo di masing - masing list artikel  terkait / related post nantinya. Cara-nya, letakkan script css di bawah ini tepat diatas kode ]]></b:skin>

#related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&amp;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEV6QVECkmStlnYt4NsW1Mq59VyfFqraYCH6glczUZHW8mS7zZp6nE2Hj39toOmTvWMZa4dJmpY79psYNN6cIbmAXCD2GnqsXglpBKShLRAUKwRKVMbE9mcw39DM5ypEqjRud7aWu-ttm/s1600/r.png&amp;quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

Keterangan : Ganti url logo yang berwarna merah di atas dengan url logo blog kalian.

Langkah terakhir, letakkan javascript dibawah tepat diatas tag </head>

<script src='http://related-project.googlecode.com/files/artikel%20terkait.js' type='text/javascript'/>

Selesai mengedit template blog, langsung aja teman simpan template ini. klik tombol Simpan Template dan Tutup.

Akhirnya langkah membuat dan memasang artikel terkait / related post dah selesai...

Continue Reading... Label: artikel terkait, blogger, blogspot, cara, logo, memasang, membuat, related post

Cara Membuat Artikel Terkait / Related Post di Blog

Cara Membuat Artikel Terkait / Related Post di Blog. Ada banyak cara supaya semua postingan yang sudah kita buat ni bisa terbaca oleh semua pembaca kita lo teman dan salah satunya adalah membuat widget artikel terkait / related post sebab adanya widget artikel terkait / related post ini akan sangat membantu pembaca kita untuk mendapatkan info tentang artikel kita lainnya yang berhubungan dengan artikel yang mereka baca.

Mau tahu ni gimana cara membuat dan memasang artikel terkait / related post di blog kita. Langsung aja deh kita bahas dalam posting blog ini...

Cara Membuat Artikel Terkait / Related Post di Blog

Seperti biasa ketika ingin mengedit template blogspot, pertama masuk di akun blogger.com dan pilihlah opsi template

Menuju di halaman berikutnya, pilih tombol Edit HTML

Selanjutnya ada peringatan semacam ini, langsung saja klik tombol Lanjutkan

Sebelum mengedit template blogspot, jangan lupa centang kotak Expand Template Widget,

Agar artikel terkait / related post ini muncul di bawah setiap posting blog teman, letakkanlah script artikel terkait / related post tepat dibawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>
<div class='widget-content'>
<h3>Artikel Terkait Lainnya :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>

Terakhir yang harus dilakukan adalah menyimpan hasil editan ini, klik tombol Simpan Template dan Tutup.

Kalo teman semua kepengen membuat artikel terkait / related post yang ada gambar logo blog, ni cara-nya ada dalam posting Cara Membuat Dan Memasang Artikel Terkait / Related Post Disertai Logo. Silakan dibaca tutorial-nya teman..
Dalam membuat artikel terkait / related post ternyata tidak sulit ya. Selamat mencoba teman dan semoga berjalan baik :)

Continue Reading... Label: artikel terkait, blog, cara, memasang, membuat, related post

Cara Membuat / Memasang Rating Bintang Rich Snippet Google di Blogger

Hi semua, di posting ini kita akan coba membuat sebuah rating bintang yang akan bisa muncul di halaman SERP Google mendampingi semua list postingan blog kita teman.. Jika kita berhasil memasang rating bintang Rich Snippet ini ke dalam template blogger pastinya akan menjadi keuntungan buat blog kita sendiri, pasalnya selain SEO bagi Google juga bisa meningkatkan klik dari peselancar mesin pencari Google sebab postingan kita akan nampak lebih profesional dan berkualitas. Hmmm postingan blog dah terasa seperti hotel ber-bintang, beda ma lainnya :)

Mau tahu gimana cara membuat / memasang rating bintang rich snipper ini dalam template blogger ? silakan simak aja tutorial singkat ini :

Cara Membuat / Memasang Rating Bintang Rich Snippet Google di Blogger

Seperti biasa ketika ingin mengedit template blogspot, pertama masuk di akun blogger.com dan pilihlah opsi template

Menuju di halaman berikutnya, pilih tombol Edit HTML

Selanjutnya ada peringatan semacam ini, langsung saja klik tombol Lanjutkan

Sebelum mengedit template blogspot, jangan lupa centang kotak Expand Template Widget,

Agar rating bintang rich snippet tersebut bisa muncul kita harus memasang kode di bawah ini tepat di bawah tag <body>

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

Kemudian cari penutup tag body yaitu </body>, letakkan kode berikut diatasnya sebagai penutup kode rating bintang rich snippet tersebut

</div></div>

Tidak berhenti sampai disini teman, hapuslah kode html judul blog teman yang seperti dibawah ini

<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>

Kemudian ganti dengan kode html di bawah ini

<span itemprop='itemreviewed'><span itemprop='description'>
<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>
</span></span>

Lalu carilah kode html <data:post.author/> dalam template blogger teman dan ganti menjadi

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

Tinggal beberapa langkah lagi pembuatan rating bintang rich snippet akan selesai. Yups kita lanjutkan teman.. Teman cari tag </head> dan letakkan script berikut diatasnya ya agar nantinya rating bintang rich snippet ini bisa muncul sekaligus diikuti profile kita.

<link href='https://plus.google.com/106672344333897149740' rel='publisher'/>

Catatan : ganti angka berwarna merah diatas dengan ID Google+ kalian
Terakhir tinggal meyimpan hasil edit, klik klik tombol Simpan Template dan Tutup

Jangan lupa teman, setiap membuat postingan kalian semua harus menambahkan script rating dibawah ini, dibagian akhir postingan blog kalian..

Rating: <span itemprop="rating">5</span>

Nah,, tutorial cara membuat / memasang rating bintang rich snippet pada template blogger dah selesai. Tinggal menikmati hasilnya...
Selamat mencoba teman..

Continue Reading... Label: blogger, cara, google, memasang, membuat, rating bintang, rich snippet