MEMBUAT RECENT POST RESPONSIVE GAYA EDITBLOG

Oleh sufyan Yaan -
Recent post adalah adalah ujud lain dari thumbnail dan snippet home page blogger yang di olah secara singkat dari isi posingan blog secara berurut di mulai dari yang terbaru, untuk melengkapi tutorial pemakaian tema blogger editblog mungkin ada yang tertarik menambahkan widget ini ke dalam tema blog. Jika tidak abaikan saja.
Image recent post pada side bar editblog
Cara pemasangan recent post sangat mudah tingga masuk ke pengaturan blog masuk ke lay out pilih HTM/Java script kopi pastekan saja kode dibawa ini kedalam kotak widget HTM/Java script tadi:
Setelah HTML/Javascript kita pilih akan muncul kotak dialog widget yang dapat ditulis atau di pastekan kode seperti ganbar dibawah ini:
Kopi pastekan kode dibawah ini kedalam kotak widget tersebut:

<div class="recentpoststyle"><script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... Baca selengkapnya..";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}</script><script type="text/javascript">var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></script><a style="font-size: 9px; color: #E6E6FA;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle {counter-reset: countposts;list-style-type: none;}.recentpoststyle a {text-decoration: none;color: #49A8D1;}.recentpoststyle a:hover {color: #000;}.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#FF69B4;background:#E6E6FA; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}</style></div>
Demikian cara membuat widget recent post yang responsive dan ringan. Selamat ngeblog!

Komentar

Posting Komentar

Popular Minggu ini:

CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

4 komentar Oleh sufyan Yaan -
Gambar
Para desainer tema blogger mempunyai gaya dan style dalam mendesain template blogger. Misalnya Mas Sugeng dengan header menu navigasi gradasi warna, ArlinaDesign dengan gradasi animasi. Beberapa trik dapat kita intip melalui inspect elemen, walau beberapa situs berhasil menyembunyikan inspect elemen beberapa jenis browser, namun trik untuk menampilkan inspect elemen semakin bagus. Melalui itu kita dapat mengetahui bagaimana cara mereka mendesain template mereka. Paling tidak kita dapat meniru beberapa style yang kita inginkan.  1. HEADER DENGAN DUA WARNA BERBEDA (Style Pemula) Membuat warna header blog bawaan  menjadi dua warna secara sederhana adalah mudah misalnya untuk tema sederhana tinggal masuk ke pengaturan blog pilih TEMA lalu masuk ke "Edit HTML" cari kode dibawah ini: .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; } Dengan cara menekan CTRL+F pada sebelah atas kanan akan muncul ...
Baca selengkapnya

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

2 komentar Oleh sufyan Yaan -
Gambar
Tulisan ini di posting adalah karena beberapa problem muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTEma yang dibuat berdasarkan tema sederhana bawaan blogger. Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Ini pasti celah kelemahan tema jadi harus di perbaiki. Ketika menulis pada dasbor blog sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets dan pada saat dilakukan penulisan dalam bentuk list keduanya berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisan berurut seperti tumpukan untaian kata kata tanpa penomoran dan tanda bahwa itu adalah bentuk daftar. Dan menurut kami semua fungsi dalam penulisan apalagi yang mendasar adalah sanga...
Baca selengkapnya

CARA MENGHAPUS TOMBOL SHARE BAWAAN BLOGSPOT DAN MENGGANTIKANNYA DENGAN TOMBOL SHARE RESPONSIVE

Posting Komentar Oleh sufyan Yaan -
Gambar
Gambar tombol Share pengganti pada blogspot Tombol bawaan blogspot atau blogger itu yang kami maksud bentuknya yang seperti ini: Terlihat kecil dan monoton, dan trik untuk menggantinya sangat mudah.  Masuk ke pengaturan blogspot/blogger, pilih TEMA lalu klik "editHTML" cari salah satu kode di bawah ini: <div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div> Atau kalau tidak ketemu cari kode dibawah ini, kita dapat menerapkan ini dengan mudah pada template jenis sederhana, awsome dst: <div class='post-share-buttons goog-inline-block'> <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/> </div> Atau...... Perhatikan gambar baik-baik: Gunakan saja ctrl+F untuk mempercepat pencarian, dan kalau sudah ketemu hapus saja. Kode yang kita sebutkan diatas terlihat dalam HTML blogspot sebagai berikut: Dan perhatikan setelah di hapus...
Baca selengkapnya