Ketika blog Anda mempunyai terlalu banyak posting, pengunjung tidak selalu mempunyai waktu atau cita-cita untuk pergi melalui semua posting yang ditulis di sana untuk menciptakan citra ihwal isi blog ini.Dengan demikian, sebuah posting acak widget yang akan memungkinkan pengunjung untuk menemukan konten yang lebih gampang sanggup benar-benar berguna. Tutorial ini akan menunjukkan cara untuk menambahkan random posts widget untuk menampilkan daftar posting secara acak dengan thumbnail dan kutipan.
Menambahkan Random Posts dengan Thumbnail dan Posting Ringkasan Blogger
Langkah 1. Login ke akun blogger Anda, pilih blog anda dan pergi ke Tata Letak.Langkah 2. Tambahkan widget gres dengan mengklik Tambahkan gadget and pilih Html/JavaScript dari jendela popup.
Langkah 3. Setelah menambahkan HTML/ JavaScript, kemudian copy script berikut dan paste di kotak Konten html/j4vascript.
<style> # acak-posting img { border-radius: 10px; float: left; margin-right: 5px; width: 75px ; height: 75px ; background-color: # F5F5F5; padding: 3px; transisi: semua 0.2s linear 0s; }
# acak-posting img: hover { opacity: 0.6; }
ul # acak-tulisan { list-style-type: none; padding: 0px; }
# acak-posting sebuah { font-size: 12px ; text-transform : karakter besar; padding: 0px auto 5px; }
# acak-posting a: hover { text-decoration: none; }
.random-summary { font-size: 11px ; background: none; padding: 5px; margin-right: 8px; }
# acak-posting li { margin-bottom: 10px; border-bottom: 1px #EEEEEE padat; padding: 4px; } </ style> <ul id = 'acak-posting'> <script type = 'text / j4vascript' > var randomposts_number = 5 ; var randomposts_chars = 110 ; var randomposts_details = ' yes '; var randomposts_comments = 'Komentar'; var randomposts_commentsd = 'Komentar Disabled'; var randomposts_current = []; var total_randomposts = 0; var randomposts_current = new Array ( randomposts_number);
randomposts fungsi (json) { . total_randomposts = json.feed.openSearch $ totalResults $ t } ? document.write ( '<script type = \ "text / j4vascript \" src = \ "/ feeds / posts / default alt = json-in-script & max-results = 0 & callback = randomposts \ "> <\ / script> ');
fungsi getValue () { for (var i = 0; i <randomposts_number; i ++) { var ditemukan = false; var rndValue = get_random (); for (var j = 0; j <randomposts_current.length; j ++) { if (randomposts_current [j] == rndValue) { ditemukan = true; istirahat } }; jikalau (ditemukan) { aku-- } else { randomposts_current [i] = rndValue } } };
function get_random () { var ranNum = 1 + Math.round (Math.random () * (total_randomposts - 1)); kembali ranNum }; </ script> <script type = 'text / j4vascript'> random_posts fungsi (json) { for (var i = 0; i <randomposts_number; i ++) { var entri = json.feed.entry [i]; var randompoststitle . = entry.title $ t; if ( 'konten' di entry) { var randompostsnippet = entry.content $ t. } else { if ( 'Ringkasan' di entry) { var randompostsnippet = entry.summary $ t. } else { var randompostsnippet = ""; } }; randompostsnippet = randompostsnippet.replace (/ <[^>] *> / g, ""); if (randompostsnippet.length <randomposts_chars) { var randomposts_snippet = randompostsnippet } else { randompostsnippet = randompostsnippet. substring (0, randomposts_chars); var spasi = randompostsnippet.lastIndexOf ( ""); randomposts_snippet = randompostsnippet.substring (0, spasi) + "& # 133;"; }; for (var j = 0; j <entry.link.length; j ++) { if ( 'thr $ Total' di entry) { var randomposts_commentsnum = entry.thr $ Total $ t + '' + randomposts_comments. } else { randomposts_commentsnum = randomposts_commentsd }; jika (entry.link [j] .rel == 'alternatif') { var randompostsurl = entry.link [j] .href; var randomposts_date = entry.published $ t;. if ( 'Media $ thumbnail' di entry) { var randompoststhumb = entry.media $ thumbnail.url } else { randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mkAcdB0fc_vJ2NRb3kRDU_sIDsORRXykZVZ5DH6hIxVWUAGV5qbmeXFklH2iuxw3a-eyN15eufm5dyFszPu-43SBBKHvn3MHL2x2SP699P4VVfXZsp8XxFd0ElPNH2ajVTcwFWZ0JCk/s1600/no_thumb.png" } } }; document.write ( '<li>'); document.write ( '<a href="' + randompostsurl +'" rel="nofollow"> <img alt = "' + randompoststitle + '" src = "' + randompoststhumb + '" /> </a> '); document.write (' <div> <a href="' + randompostsurl +'" rel="nofollow"> '+ randompoststitle +' </a> </ div> '); jikalau (randomposts_details == 'ya') { document.write ( '<span> <div class = "random-info">' + randomposts_date.substring (8, 10) + '.' + randomposts_date.substring (5, 7 '.') + + randomposts_date.substring (0, 4) + '-' + randomposts_commentsnum) + '</ div> </ span>' }; document.write ( '<br/> <div class = "random Ringkasan "> '+ randomposts_snippet +' </ div> <div style =" clear: both "> </ div> </ li> ') } }; getValue (); for (var i = 0; i <randomposts_number; i ++) { document.write ( '<script type = \ "text / j4vascript \" src = \ "/ feeds / posts / default? alt = json-in-script & start-index =' + randomposts_current [i] + '& max- hasil = 1 & callback = random_posts \ "> <\ / script> ') }; </ script> </ ul>
Opsi Random Posts
- Thumbnail dimensi: untuk mengubah ukuran thumbnail, gantikan nilai 75px.- Panjang Summary: Anda sanggup mengontrol panjang ringkasan (dalam hitungan karakter) dengan mengubah nilai 110 dari varrandomposts_chars = 110 ;
- Info Post : jikalau anda ingin menyembunyikan tanggal posting dan jumlah komentar ubah ' yes ' dari var randomposts_details '= yes '; menjadi ' no ';
- ukuran Font untuk Judul dan Ringkasan postingan: untuk mengubah ukuran font summary posting ubah nilai 11px dan untuk judul tulisan, yang nilai 12px ;
Klik pada tombol simpan dan Lihat blog Anda. Sidebar akan menampilkan widget posting secara acak pada setiap halaman blog anda.
Sumber http://duniatutorials.blogspot.com
Mari berteman dengan saya
Follow my Instagram _yudha58
0 Response to "Keren Widget Random Post Untuk Blogger Dengan Thumbnail Dan Summary"
Posting Komentar