Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, July 20, 2013

Random post dengan gambar valid html5

Widget random post dengan gambar ini mempunyai script yang memang ringan walaupun script widget random post ini mampun untuk menampilkan Judul postingan, dan gambar bahkan menampilkan beberapa kata dari artikel yang telah diposting. Pada postingan saya dihari hari yang lewat, saya telah membuat suatu artikel yang berisi Script widget random post yang tidak menampilkan gambar. Tulisan saya kali ini terinspirasi dari dorongan beberapa teman yang mengatakan untuk sekalian gambar untuk widget ini ditampilkan. Widget ini SEO Friendly dan Valid HTML 5 dan CSS 3 kenapa saya katakan demikian, sebab script widget ini menganut penulisan tag tag yang dianjurkan oleh prinsip SEO dan Valid HTML 5. Disamping hal tersebut widget ini mempunyai script yang memang benar benar mempunyai loading yang ringan dan tidak akan mempengaruhi loading blog anda. Tampilan yang benar benar mempunyai design yang menarik akan menambahkan kesan menarik juga pada halaman blog kesayangan anda. Widget random post dengan gambar ini saya namakan dengan " Widget Beautiful Avatar Random Post ". Oke tanpa penjelasan yang lebihpanjang lagi dan saya harap anda sudah memahami temtang kegunaan dari script random post dengan gambar ini kini saatnya kita menuju TKP dan silahkan anda simak penjelasan tutorial berikut. Untuk melihat tehnik pembuatan random post tanpa gambar yang SEO Friendly dan Valid HTML 5 silahkan kunjungi halaman ini : http://rivai-silaban.blogspot.com/2013/07/widget-random-post-seo-friendly-html5.html

random post dengan gambar valid html5

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#BD_random-post img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:42px;
height:36px;
padding:3px;
border-radius:0 10px 10px 0;
list-style-type: none;
}
#BD_random_avatar td {
list-style-type: none;
width: 100%;
padding: 3px;
}

#BD_random_avatar a {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #0000CC;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 10px;margin-left:10px;
background: url() 0px 50% no-repeat;
background-color: #FFFFFF;
}

#BD_random_avatar a:hover {
background: #ffffff url() 0px 50% no-repeat;
color:#990000;
text-transform: none;
background-color: #FFE1E1;
}
.BD_random_list {
color: #000;
text-decoration: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;list-style-type: none;
}


Install Program Tag HTML


Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;
  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code HTML dibawah ini, paste pada gadget anda.

<div id="BD_random_avatar">
<div class="BD_random_list">
<div id='BD_random-post'>
<script type='text/javaScript'>
var rdp_numposts=5;// Jumlah post yang ditampilkan
var rdp_snippet_length=100;// Jumlah tulisan yang ditampilkan
var rdp_info='yes';
var rdp_comment='Komentar';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script src=\"/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts\" type="text/javascript"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else
{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://2.bp.blogspot.com/-v8tkThQzTpw/UeofypOZk6I/AAAAAAAABkc/R54BVRzZu7U/s1600/no-image.gif"}}};document.write('<li style="border-bottom: dotted #000 1px;background-color: #eee;">');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<br/><span style="margin-top:8px">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<br/><span style="margin-right:5px;text-align: left;">'+rdp_snippet+'</span></li><br/>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script src=\"/feeds/posts/default?alt=json-in-script&amp;start-index='+rdp_current[i]+'&amp;max-results=1&amp;callback=random_posts\" type="text/javascript"><\/script>')};
</script>
</div></div></div>

Keterangan Gambar
  • Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
  • Code warna Biru jumlah kosa kata yang akan ditampilkan
  • Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.


Kesimpulan

Widget Random Post ini dilengkapi dengan gambar yang secara otomaits ditampilkan bila artikel tersebut memiliki suatu gambar dan akan menampilkan gambar pengganti bila artikel tersebut tidak memiliki gambar. Widget Random Post image ini SEO Friendly dan Valid HTML 5 Serta Fast loading script, Cocok untuk widget random post halaman blog kesayangan anda.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 12:50 PM

35 comments :

  1. mantab nih artikelnya ,,
    sob mau nanya gimana cara mengatasi

    & did not start a character reference. (& probably should have been escaped as &.)

    di http://validator.w3.org/

    ReplyDelete
  2. oh itu sob, pada dasarnya penulisan karakter dan atau [ & ] pada html 5 harus memilik code tambahan [ amp; ] jadi sambung saja code [ & dengan amp; ] tanpa spasi sob. Semoga penjelasan ini bermanfaat sob..

    ReplyDelete
  3. Salam hormat Bang Rivai
    Artikel yang sangat bermanfaat nih khusus nya
    Buat saya. dan umum nya buat sobat Blogging
    Yang peduli dengan template blog nya yang benar2 Valid HTML5/CSS nya.
    Terima kasih atas Ilmu dan berbagi nya yah Sob,..
    Mohon idzin simak dan menerapkanya di blog saya Bang.

    ReplyDelete
    Replies
    1. silahkan sob, bila ada masalah silahkan share bersama saya dengan senang hati saya akan membantu.

      Delete
  4. Mohon maaf mau tanya mas..
    saya sudah ikuti sesuai dengan petunjuk, tapi kok terpasang jadi 2 ya mas, yang satu di widget sebelah kanan, dan yang satu di bawah blog saya..
    mohon solusinya mas..

    ReplyDelete
    Replies
    1. coba de tiliti dulu codenya terkadang kesalahan itu ada gara gara salah pasang code atau code yang tidak komplit

      Delete
  5. Mohon maaf mas, kalau mas berkenan saya minta tolong sekali supaya mas Rivai bisa berkenan melihat blog saya..
    Random post yang tidak saya iginkan berada di bagian bawah sendiri mas..
    Mohon bantuannya mas, dikarenakan baru belajar..
    terimakasih..

    http://muacemmuacem.blogspot.com/

    ReplyDelete
    Replies
    1. itu masang random postnya di widget kan, apa di bagian template langsung mas...

      pemasangannya harus di wiget mas termasuk semua scriptnya...

      Delete
    2. saya melihat blognya code random postnya terpasang di code template ya mas..

      Delete
  6. Terima kasih mas sudah menyempatkan waktu untuk melihat blog saya..
    Saya pasang di widget mas, tapi di template juga ada.
    Kalau yg di tempalte di hapus, yg di widget juga kehapus mas..
    Mohon bantuannya mas..
    terimakasih..

    ReplyDelete
    Replies
    1. coba dulu hapus semua kodenya baik itu dari widget ataupun dari template, kemudian keluar dulu dari blognya, setelah itu masuk kembali coba pasang hanya di widget aja mas..., CSS nya saja yang dipasang di code template mas..

      Delete
    2. saya melihat code CSS nya dirubah, atau code random postnya ini code dari siapa ya...
      saya lihat codenya .rp-post-link

      Delete
  7. Siap mas, saya coba terlebih dahulu..
    terimakasih mas, nanti saya mampir ke sini lagi hehehehe

    ReplyDelete
  8. Cara upload kodenya gimana mas, tadi saya coba kok gak bisa?

    ReplyDelete
    Replies
    1. login dasbor lalu cari "TATA LETAK "
      Silahkan klik "Add Gadget "( Tambahkan gadget )
      Pilih " HTML / JavaScript "
      pastekan code scriptnya,

      kalo CSSnya pasang di bagian CSS

      Delete
    2. coba download dulu code templatenya soalnya saya bingung lihat codenya, scriptnya kok bisa di bawah yah...

      Delete
  9. Mas Rivai, sudah saya coba seperti petunjuk dari mas, tapi gak jadi mas, mohon untuk melihat blog saya..

    ReplyDelete
    Replies
    1. coba download dulu code templatenya soalnya saya bingung lihat codenya, scriptnya kok bisa di bawah yah...

      kirim ke email saya frameigitall@gmail.com

      Delete
  10. Siap mas..
    Saya kirim sebelum pasang dari scrip mas ya, soalnya mau download yang baru td malah eror mas..

    ReplyDelete
  11. Replies
    1. ke sini kan mas...

      framedigitall@gmail.com

      coba diulang ngirimnya mas

      Delete
  12. Replies
    1. saya sudah lihat mas, code script yang paling bawah sekali yang membuat demikian, Scriptnya harus di rombak mas, soalnya sistem randomnya terpengaruh pada coe scriptnya, kalo saran saya udah pake script ranom post yang tidak memakai gambar snippet aja, jadi dia hanya tulisan saja,

      Delete
  13. Saya juga sudah coba make yg gak ada gambarnya mas..
    tp tetep ada dobel mas, yang di widget sama yang di bawah mas..
    ada solusi lagi gak mas biar gak harus di rombak mas?
    pleasee,,

    ReplyDelete
    Replies
    1. coba lihat di forum ini mas codenya

      http://diskusi.rivai.org/template/NamlServlet.jtp?new_topic

      Delete
  14. Saya juga sudah coba mas, make random post yang gak pake gambar, tapi hasilnya sama mas, tetep ada doble mas..
    ada solusi lagi gak mas biar saya gak harus ngrombak semuanya mas, apa ganti yang mana gitu mas..
    please help mas..

    ReplyDelete
    Replies
    1. coba lihat di forum ini mas..

      http://diskusi.rivai.org/Random-post-code-td28.html

      Delete
  15. kok error ya mas gak bisa di buka alamatnya tadi, keluar pesan ini mas:
    Oops... An error has occurred

    Please contact Nabble Support and explain what you did to cause this error. Your feedback is very important to us.

    ReplyDelete
    Replies
    1. kandah bisa..

      ini linknya, sekalian gabung gan, mana tau besok besok ada pertanyaan lagi biar disana di bahas gan

      Delete
  16. Oh bisa mas Rivai, terimakasih sudah gak double..
    tp mohon maaf mas, kalau yang ada gambarnya ada gak mas?
    terimakasih..

    ReplyDelete
    Replies
    1. kemarin saya tidak memikirkan untuk buat gambarnya gan, soalnya pake gambar berat beratin blog, tapi menurut saya bagus gitulah mas, soalnya loading blog mas, berat bangat, di tambah bayak gambar nantinya lelet.

      Delete
  17. Oh iya mas, terimakasih terimakasih banyak mas ini sudah sangat membantu sekali...
    Oh iya mas, kalu misalnyna lain kali mas ada waktu, saya Request yang ada gambar sama tulisannya ya mas..
    terimakasih banyak mas..

    ReplyDelete
  18. Mas, saya mau masuk forum diskusi lagi kok gak bisa ya?
    saya mau tanya mas, facebook fans page saya kalau pas buka blog pertama kali kok gak kelihatan ya mas, tersembunyi..
    tapi kalu liat salah satu postingan dia baru bisa kelihatan semua,,,
    itu bagaimana ya mas?

    ReplyDelete
    Replies
    1. Bahas di forum aja mas, soalnya pertanyaan ini dah lari jalur dari artikel mas..

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog