Widget Recent Post Gallery Invert

Cara Membuat Widget Recent Post Gallery Invert Blog Arlina Design

Mas Tamvan Berbagi cara membuat Widget Recent Post Gallery seperti pada template Invert arlina design. Bagi kalian yang ingin membuat widget popular post seperti pada template nukituwelah.blogspot.com . Maka kalian tepat sekali berada di blog tamvan ini :3 karena saya akan memberikan beberapa potongan scriptnya.

Demo Widget Recent Post Gallery

Result

Tutorial Blogger

1. Cara Membuat Widget Follower Keren Di Blog - New !!

2. Membuat Calculator Dengan Javascript dan CSS - New !!

3. Membuat Search Dan Follower Seperti brilio.net - New !!

4. Membuat Slide Recent Post Responsive - New !!

5. Membuat Widget Author Plus Follower With CSS - New !!

Nah untuk tutorialnya, silahkan ikuti langkah - langkah berikut ini.

• Login ke Blogger.com

• Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>

• Masukan CSS di bawah ini, tepat di atasnya.

/* CSS Recent Post Gallery */
.recent-galeri {padding:0;clear:both;}
.recent-galeri:after {content:"";display:table;clear:both;}
.recent-galeri .gallerytem{display:block;float:left;position:relative;margin:8px auto;overflow:hidden;padding:0}
.recent-galeri .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none}
.recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,0);display:block;clear:left;font-size:14px;line-height:1.3em;position:absolute;text-align:left;bottom:-20px;left:0;right:0;color:rgba(255,255,255,0);padding:10px;word-wrap:break-word;backface-visibility:hidden;transition:all .2s}
.recent-galeri .gallerytem:hover .ptitle{bottom:0;background:rgba(245,105,84,.95);color:rgba(255,255,255,1)}
.recent-galeri a img{background:#fdfdfd;float:left;transition:all .3s}
#HTML96 .widget-content,#HTML3 .widget-content {text-align:center;}
#HTML5 .widget-content{padding:20px 10px}
#HTML1 .widget-content,#HTML2 .widget-content {padding:0;margin:auto;text-align:center;}
#HTML1 .widget-content {border:0;}

• Lanjut, Cari kode </head> dan masukan JavaScript berikut di atasnya.

<script src='https://rawgit.com/mastamvan/backup/master/RecentPostin.js' type='text/javascript'/>

• Simpan Template, dan ikuti langkah berikut ini.

• Masuk ke tataletak Tambahkan Gadget / Add Widget.

• Dan masukan HTML di bahwah ini ke dalam widget tersebut.

<script>
var teja_tamvan_wid = 300; 
var teja_tamvan_hei = 170; 
var teja_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=3&amp;alt=json-in-script&amp;callback=tejasukmana"></script>

• Ok, Salam Tamvan, Tinggal lihat hasilnya.

Cukup sekian dan terimakasih, artikel dari mas tamvan tentang Widget Recent Post Gallery Seperti Blog Invert ini, semoga bermanfaat.

Kalo ada yang mau di tanyakan, silahkan bertanya di kolom komentar saja ya :)