Menampilkan Related Post Thumbnails Dengan LinkWithin.

Ada beberapa cara membuat Related Post atau artikel terkait yang sudah kami posting pada blog ini. Dimulai dari Cara Menampilkan Artikel Terkait di Blogspot, kemudian artikel tersebut dimodifikasi agar tampilannya lebih menarik, Menampilkan Artikel Terkait Blogspot Modifikasi. 

Pada artikel kami yang lain Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot, kalau ini artikel terkaitnya disertai dengan tampilan gambar.

Untuk tampilan gambar Related Post atau artikel terkait bisa kita terapkan pada blog kita dengan bantuan situs LinkWithin. Blogspot Pemula share Cara Menampilkan Related Post Thumbnails Dengan LinkWithin.

Widget ini salah satu yang membuat pengunjung blog di blog kita bisa betah berlama-lama. Artinya kita mengarahkan para pengunjung untuk mengklik postingan yang berkaikan dengan postingan yang sedang dibaca.

Dengan kata lain Widget Related Post ini dapat menambah page view blog kita atau blog kita dapat kita Optimasi lebih baik. Bagaimana tertarik teman-teman ingin membuatnya?

Berikut Caranya:

1. Kunjungi situs http://www.linkwithin.com/
2. Isi data yang dibutuhkan lihat gambar dibawah ini.

• Email : Isikan email
• Blog link : http:// namablogcontoh.blogspot.com
• Platform : pilih Blogger kalo anda mau masukin di blog
• Within : Pilih jumlah tampilan thumbail yang anda inginkan (max 5)
• Centang My blog has light text on a dark background
• Lalu klik Get Widget.

3. Instalasi Widget pada blog :
 

• Klik Install Widget
• Pilih Blog dimana anda ingin tempatkan Related Post tadi. Lalu klik Add Widget (Menambah Widget) 

• Setelah Klik Add Widget (Menambah Widget) anda akan diarahkan langsung ke Rancangan Blog kita. Akan muncul seperti gambar dibawah ini:

 

• Selanjutnya pindahkan widget Linkwithin tadi tepat dibawah postingan.
• Setelah itu, Simpan Rancangan Template anda.
• Selesai

Bagaimana teman-teman bisakan semua? Mudah-mudahan bisa ya.

Read more »

Cara Membuat Recent Post Blogspot Dengan Thumbnail

Apa kabar teman-teman? mudah-mudahan pada sehat ya. Kami kali ini share Recent Post Blogspot Dengan Thumbnail. Widget yang satu ini dapat membantu page view blog kita. atau dengan kata lain untuk mempermudah pengunjung melihat artikel kita yang terbaru.

Recent Post yang akan kita buat ini adalah recent post statis dengan tampilan ada gambarnya / Thumbnails . Widget ini bisa dimodifikasi tampilannya dengan Kotak Scrollbar. Untuk menampilkan 10 postingan pada recent post dengan scroolbar tidak terlampau memakan tempat.

Menampilkan Recent Post pada sebuah blok, menurut para webmaster merupakan salah satu Optimasi Seo Blog. Kalau salah mohon koreksi. Dibawah ini contoh gambar dari hasil yang sudah diterapkan pada suatu blog

Membuat Recent Post dengan Thumbnail :

1. Login ke blogger.

2. Pilih Rancangan

3. Elemen Halaman

4. Add Gadget (HTML/JavaScript).

5. Copy kode dibawah ini dan paste pada gadget yang baru dibuat tadi.

<right><style> img.recent_thumb
{padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs
{float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;}
ul.recent_posts_with_thumbs li
{padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a
{text-decoration:none;}
.recent_posts_with_thumbs normal
{font-size:13px;}
</style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

6. Simpan atau save

7. Kemudian lihat hasilnya.

Script ini bisa dimodifikasi sendiri seperti untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Kalau masih ada kesulitan silahkan tulis di kolom comment ya, bareng-bareng diskusi kita teman-teman.

Selamat mencoba dan salam blogger.

Read more »

Cara Menampilkan Iklan Tepat Disamping Kotak Komentar Blogspot

Para pemirsa yang budiman, mau pidato atau mau posting Artikel? Sory lagi ngelamun. Share Cara Menampilkan Iklan Tepat Disamping Kotak Komentar Blogspot, karena google ads Blogspot Pemula ada sedikit masalah, kami pasang iklan pada blog ini dari AdsenseCamp, ada satu iklan yang kami tempatkan tepat disamping kotak komentar, yah tujuannya sih yah pada tahu dah.

Oh ya sekedar mengingatkan, jangan lupa untuk Memasang Google Analytics pada blog nya ya Sobat, Google analytics ini banyak manfaatnya buat blog, tapi kami tidak akan mengutarakannya satu persatu pada artikel kali ini.

Menampilkan Iklan Tepat Disamping Kotak Komentar

1. Login Dulu ke blog masing-masing

2. Kemudian ke menu edit HTML

3. Centang pada EXpand template widget

4. Cari kode dibawah ini, biasa make CTRL+F pada keyboard.

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

5. Bila kode diatas tidak ditemukan caranya cari kode yang hampir-hampir sama dengan kode diatas. Mungkin berbeda pada ukuran lebar dan tingginya. Bila sudah sekarang ganti kode diatas dengan kode ini.

<table border='0' width='600'><tr> <td align='center'>http://blogspotpemula.blogspot.com</td> <td align='center'><iframe class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/></td></tr></table>

6. Setting sedikit height='210' biar lebih presisi posisinya.

7. Ganti text yang berwarna biru dengan kode iklan. atau kalau mau boleh mengganti apa yang mau kita tampilkan disamping kotak komentar.

8. Untuk kode iklan ads jangan lupa di-parse dulu ya sobat, biar bisa nongol tuh iklannya cara nya bisa di simak di Menampilkan Kode HTML dalam Postingan.
9. Setelah selesai semua jangan lupa

10. Save atau simpan.

Kemudian lihat hasilnya, mudah-mudahan bisa semua ya.

Read more »

Menampilkan Total Post dan Comment Blogspot

Terkadang ingin melihat statistik berapa total jumlah postingan dan berapa total comments yang ada di blog kita. Widget ini cukup simpel bila kita ingin membuatnya.

Total Post dan Comment Blogspot adalah widget yang berfungsi untuk menampilkan berapa total postingan dan komentar yang berada didalam blog kita. Bagaimana? tertarik, ikuti langkahnya dibawah ini.

Membuat Total Post dan Comment Blogspot:
1. Log in ke blogger
2. Masuk ke Rancangan
3. Pada Elemen Halaman pilih Tambah Gadget atau Add Gadget
4. Pilih HTML/JavaScript
5. Copy dan Paste Kode Di bawah ini kedalam kolom HTML/JavaScript tersebut

    <script style="text/javascript">
    function numberOfPosts(json) {
    document.write('Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
    }
    function numberOfComments(json) {
    document.write('Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
    }
    </script>
    <font color="blue"><script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
    <script src="http://namablog.blogspot.com/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

Keterangan :
Gantilah kode yang berwarna biru dengan Url blog anda

6. Simpan dan selesai

Read more »

Membuat Recent Comment Dengan Java Script

Setelah pada postingan awal kita membuat Recent Comment Post with Feed Blogspot kini kita lanjutkan dengan membuat Recent Comment With Java Script.

Sript ini Blogspot Pemula Ambil dari Blogger kolom-tutorial.blogspot.com/ (kalau Salah mohon koreksi). Sebelum dan sesudahnya Blogspot Pemula mengucapkan terimakasih kepada pemilik script.

Seperti yang telah kita ketahui jika recent comment itu penting untuk membangun komunikasi yang lebih aktual dengan para pembaca yang berkomentar.

Karena dengan recent comment tersebut maka pemilik blog akan tahu lebih cepat siapa saja yang berkomentar di postingan dalam blognya sehingga dia pun akan lebih sigap dalam membalas komentar tersebut hingga menciptakan suasana yang komunikatif. 

Menjawab pertanyaan yang di ajukan pembaca lebih awal, menjawab kritikan yang di berikan pembaca lebih awal, dan memberikan request yang diminta pembaca lebih awal adalah beberapa bentuk manfaat bagi pemilik blog dengan adanya recent comment ini.

Recent Comment Dengan Java Script

• Pertama adalah kita tentu harus masuk ke akun blogger kita.
• Klik rancangan.
• Klik add gadget dan pilih HTML/JavaScript.
• Masukan script recent comment di bawah ini dan simpan.

<script style="text/javascript" src="http://amen24.googlepages.com/showrecentcomments.js ">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://blogspotpemula.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan;
Ganti namablogkita dengan alamat blog kita masing-masing.
var numcomments : menunjukan jumlah komentar yang akan ditampilkan.
var showcommentdate : menunjukan tanggal komentar di publikasikan.
var showposttitle : menunjukan judul dari postingan yang dikomentari.
var numchars : menunjukan jumlah karakter dari komentar yang akan dimunculkan dalam recent comment ini.

Semoga Bermanfaat.

Read more »

Membuat Recent Comment Post with Feed Blogspot

Buat para blogger yang ingin bisa melihat dan memantau setiap comment yang terakhir dapat menerapkan ini pada blog nya. Membuat recent comment atau komentar terakhir dan postingan artikel terakhir dengan menggunakan fasilitas gadget blogger yang telah disediakan. 

Kita cukup ke halaman edit element blogger, kemudian tambah Gadget  dan pilih Feed yang berada paling bawah kemudian akan muncul tampilan seperti ini:

Isikan URL feed komentarnya seperti ini:

http://blogspotpemula.blogspot.com/feeds/comments/default

dan URL feed untuk postingan terakhir seperti ini:

http://blogspotpemula.blogspot.com/feeds/posts/default

Ganti domain blog diatas dengan domain blog Sobat, kemudian pilih lanjutkan 

jika benar penempatan url feednya maka tamplian selanjutnya seperti ini:

Pengaturan komentar tinggal bisa diatur.
Jika sudah disave saja..., Kemudian lihat hasilnya

Semoga Bermanfaat

Read more »

Koleksi Navigation page blogger

Blogspot Pemula posting Artikel Koleksi Navigation page blogger. bagi yang ingin mempraktekkannya sepertinya cukup bagus untuk mempercantik blog kita.

Next page menurut bahasa simpel saya yaitu no urut halaman yang biasa nya di simbolkan dengan angka seperti angka 1,2 ,3 dst yang di hiasi berbagai macam bentuk yang unik ,tutorial cara pembuatan nya banyak sekali tersedia di internet.

Dalam Artikel kali ini saya mencoba untuk mengoleksi next page yang cantik yang mungkin menarik untuk di pasang yang kode-kode nya saya dapatkan dari para master-master blog yang mana sebelum nya telah saya coba terlebih dahulu...

Sebelum pembahasan lebih lanjut saya mengucapkan terima kasih kepada para master - master yang telah bersedia membagikan ilmu nya kepada kita para blogger pemula,OK...dari pada penjelasan yang panjang lebar langsung aja yuk kita simak koleksi nya di bawah ini:

1. Next page cantik ala google

 

Widget dari abu farhan ini lumayan cantik untuk di terapkan dengan bentuk gambar dan tampilan yang menyerupai dengan next page kepunyaan mbah google di sisi lain dari next page kreasi dari abu farhan ini  cukup lumayan menambah berat blog kita kira kira widget ini berukuran 5 kb.

2. Next page  Paginator 3000

Widget ini juga dari abu farhan tampilan nya yang bergaris dengan di bumbuhi angka di atas nya,kelihatan nya lebih sederhana dengan warna orange...ehm gimana kira kira berminat?

3.Navigation page ala Anshul Dudeja

 

Widget satu ini termasuk sederhana dan terkesan elite..widget dari Anshul Dudeja tidak terlalu berat kode script nya dengan ukuran sekitar 5 kb  yang akan terletak secara otomatis di bawah artikel kita.

Demikian dulu kayak nya koleksi tentang navigation page untuk blog dan semakin bertambah aja neh koleksi untuk mempercantik blog kita ..

Ref : web.gallerydunia.com

Semoga Manfaat.

Read more »

Cara Memasang Widget Histats di Wordpress

Memang biasanya biar bikin kita nambah semangat ngeblog pasti ngeliat status visitor (Pengunjung) di blog kita. Cara Memasang Widget Histats di Wordpress.

Tidak seperti biasanya Blogspot Pemula kali ini Posting artikel Cara Memasang Widget Histats di Wordpress, Betul Histats di Wordpress. Ada sedikit perubahan pada script yang dilakukan agar bisa Widget Histats kita terpasang pada Wordpress.

Berikut Caranya:

–> Login di Histats, bila belum daftar dulu histats.com
–> Ketik blog wordpress.com yang dimiliki di tempat yang disediakan, terus register

–> Setelah masuk ke kontrol panel, klik “add new website”

–>isi seluruh form yang tersedia  klik “Continue”

–>klik blog-mu

–>Pilih menu “counter code”

–>Kemudian pilih model yang dikehendaki dengan klik, misal 4 lines.

–>Centang beberapa pilihan di atasnya kemudian “SAVE”
–>Klik “counter id” maka muncul Histats untuk blog kita. Pada pilihan kode pilih “no javascript”
–>Kopipaste seluruh kode yang muncul di bawahnya dan taruh sementara di notepad atau word untuk diedit nantinya

Ini yang diganti,

1. Ganti kata embed dengan gigya width=”” height=”” dan ganti tanda kurung <> dengan tanda kurung [ ] (tanda kurung ini diganti khusus untuk baris yang embed tadi)
2. Hanya itu yang diganti, yang lainnya sama dengan yang aslinya.
3. Taruh link tersebut di sidebar dimana kamu suka di blogmu.
4. Dan jangan lupa disimpan.

Untuk melihat hasil pemasangan Widget Histats di Wordpress dapat dilihat di sini. 

Semoga Manfaat

Read more »

Cara Menampilkan Artikel Terkait di Blogspot

Cara Menampilkan Artikel Terkait di Blogspot. Blogspot Pemula jalan-jalan ke Tutorial blog teman-teman, disana kami menemukan banyak Cara Menampilkan Artikel Terkait dibawah postingan buat Blogspot.  

Tutorial Blog kali ini Blogspot Pemula Posting Cara Menampilkan Artikel Terkait di Blogspot yang di tampilkan di bawah artikel, dan penampilan nya berdasarkan kategori label.

Berikut Cara Menampilkan Artikel Terkait di Blogspot :
1. login ke Blogger
2. Lalu pilih Tata Letak-->Edit HTML
3. Selanjutnya centang Expand Widgets Template template
4. Cari kode berikut ini :

<data:post.body/>

Note:
Buat blog yang ada "read more" nya akan ditemukan 2 kode <data:post.body/>, pilihlah kode yang pertama

5. Kalau sudah ketemu, taruh script berikut ini di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>ARTIKEL TERKAIT</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

6. Kalau sudah kita ditaruh script di atas, SIMPAN template kita 

Demikian Postingan Artikel Cara Menampilkan Artikel Terkait di Blogspot.

Semoga Manfaat.

Read more »