MEMBUAT RECENT POST RESPONSIVE GAYA EDITBLOG

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!

CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

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 kotak dialog ketik saja .header-outer { Maka akan muncul kode yang segera dapat kita kenali sebagai untaian kode diatas. Hapus dan ganti kode yang kami sorot dengan warna kuning diatas dan ganti dengan kode yang juga kami sorot dengan warna yang sama di bawah ini:

.header-outer {
background-image: -ms-linear-gradient(left, #ADD8E6 50%, #FFB6C150%);
background-image: -moz-linear-gradient(left, #ADD8E6 50%, #FFB6C1 50%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #0c8d2a), color-stop(0.5, #0d4fa9));
_background-image: none;
}
Lalu Save/Simpan. Selesai.

2. HEADER DENGAN WARNA GRADASI TANPA ANIMASI (Style lanjutan)

Akan tetapi dua warna pada header terkadang suka menampilkan pemandangan yang kontras, walaupun warna yang kita pilih berdekatan namun terlihat jelas batas perbedaannya, pada perbedaan warna warna gradasi batas terlihat halus, cara memasangnya sama: Cari kode diatas yakni:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}

Hapus bagian bawah yang di sorot kuning keseluruhannya dan ganti dengan kode css linier yang sudah saya modifikasi dibawah ini:

background:#0F466E;
background:-webkit-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-moz-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-o-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-ms-linear-gradient(right,#0F466E 0%,#5093C4 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5093C4',endColorstr='#0F466E',GradientType=1);
height:100px;

Silahkan bermain dengan komposisi warna dengan merobah kode warna yang saya sorot warna kuning menurut selera kita masing masing. Kode warna css dapat di telusuri di internet.
Header ini sering dipakai oleh mas Sugeng dalam membuat menu navigasinya. Gradasi warna tanpa animasi terutama  terdapat tema tema vioMag terbarunya.

3. HEADER DENGAN GRADASI WARNA ANIMASI (Style Advance)

 Sedangkan untuk membuat gradasi warna dengan efek animasi pada template sederhana bawaan blogger agar supaya mirip desainnya template infinite Arlina kita hanya perlu merobah:
.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}

Hapus bagian bawah yang di sorot kuning keseluruhannya dan ganti css dibawah ini:

background: linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Desain dengan header dan Navigasi menu gradasi warna animasi adalah ciri ciri khas tema tema buatan ArlinaDesizn, kami mempelajarinya dari beberapa contoh dan mencobakannya ke tema tema bawaan blogger seperti tema Sederhana, PT.Keren sekali dll. Kebanyakan tema tema itu masih meninggalkan jejak struktur dan elemen elemen penting HTML dari tema tema asli bawaan blogger namun telah di rombak sedemikian rupa. Sama halnya dengan tema tema buatan Gooyabi.

Sebagai catatan pada template berbeda yang kami uji sebelumnya kode ini diletakan dibawah kode:

#header-wrapper {background:#fff; max-width: 1000px; margin: 0 auto; position: relative;}

Dengan menghapus kode yang di sorot dengan warna kuning dan menggantinya dengan kode diatas. Setiap template memiliki struktur yang sedikit berbeda satu sama lain