Home Seputar Blogging Widget 4 Macam Widget Recent Post (Artikel Terbaru) Yang Responsiv Keren dan Simple Untuk Blog

Kamis, 28 Januari 2016

4 Macam Widget Recent Post (Artikel Terbaru) Yang Responsiv Keren dan Simple Untuk Blog

✔ Yos Syafendro
Widget recent post atau biasa disebut artikel terbaru, tentunya widget ini sanggat berguna sekali. Karena dengan widget ini akan ditampilan artikel terbaru yang baru saja Anda buat, jadi setiap ada artikel yang baru maka artikel itu akan masuk pada widget recent post yang telah Anda pasang pada blog Anda.

Widget recent post tentunya sangatlah berguna bagi pengunjung, karena dengan widget ini pengunjung jadi tau bahawa blog yang dikunjunginya ada update artikel terbaru. Tentunya ini juga akan menguntungkan kita, bagaimana tidak, jika pengunjung melihat ada artikel baru dan tertarik untuk membacanya maka sudah dipastikan pengunjung tersebut akan langsung mengklik artikel terbaru tersebut.

Bukan sekedar klik, ketika pengunjung mengklik artikel baru itu maka Page View blog kita akan bertambah, jika page view bertambah maka artikel tersebut akan mudah untuk dicari pada search engine atau mesin pencariaan.

Setelah saya jelaskan tentang Widget Recent Post dan keuntungannya, apakah Anda tertarik untuk memasangnya? Nah, bagi Anda sobat blogger yang tertarik untuk memasangnya pada blog Anda, silahkan dilanjutkan membaca artikel ini untuk mengetahui tutorial lengkapnya.

Cara Membuat Widget Recent Post (Artikel Terbaru) Yang Responsiv Keren dan Simple Untuk Blog

Diatas sudah saya jelaskan tentang widget recent post dan keuntungnya, selanjutnya saya akan membahas 4 Tipe Widget Recent Post (Artikel Terbaru) Yang Responsiv Keren dan Simple Untuk Blog beserta tutorial pembuatannya.

1. Widget Recent Post Warna-Warni Yang SEO Friendly

Widget recent post yang pertama ini adalah berbentuk warna-warni, saya sendiri sudah memasangnya, Anda dapat melihatnya di menu navigasi sebelah kanan. Memang sudah banyak yang membahas widget recent post warna-warni, tapi kali ini saya tampil beda, karena widget recent post yang satu telah dilengkap fitur yang sangat keren seperti:

*. Memiliki tab list warna-warni
*. Memiliki title tag pada gambar dan judul
*. Sudah SEO Friendly karena adanya title tag
*. Fast loading atau Loading lebih cepat

Berikut cara-cara pemasangan widget recent post warna-warni.
  • Masuk ke blogger
  • Pergi ke Tata Letak > Tambahkan Widget atau Add Gadget
  • Pilih HTML / JavaScriptLalu copy kode script dibawah dan pastekan pada tempat yang kosong.
style="color: #38761d;">HTML/JavaScript

<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:#333;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhK1g6hfw5qgdvNoUIxvNijPUcI_fzxP5CFSQJ4vmxJBJMV6vZ9_mShFaaZh08574C_dl7WLNCuSwr6YZMZB-1ZJIM89W5mR_p0NFsHCo4NLpPptjryceE32sYf32iyTeFgeukzEJMDXo/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:0;
padding:8px;
background-color:white;
border-bottom:1px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 10px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:normal normal 12px/normal Oswald;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#ffffff;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:1%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:3%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:5%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:9%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:10%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://www.panduantemplateblog.com",
    rp_numPosts = 5,
    rp_thumbWidth = 50,
    rp_numChars = 80,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheAQv8WXfeSxqhnUOoq3pM915K4CKQlIAP21r8AzTL0WtP82_HaN9Xs0FTeaLUqyHgvUz3BtjKcAqWCh1AmGb8fRaMW7Dz0FDuKjti8VjqJaNZYEkEctjPkd-jGwmR7FeMPiu6zrH1Y8g/s1600/minismallest-img.png",
    rp_newTabLink = false,
    rp_loadTimer = "onload";
//]]>
</script>
<script src='https://dl.dropboxusercontent.com/s/m6emd2j1kc5517k/pt
  • Klik save atau simpan

 

2. Widget Recent Post Slider Responsiv

 

widget recent post responsive keren simple

Widget recent post yang kedua ini sangatlah cocok sekali bagi Anda yang pengguna Template Responsiv, karena widget recent post yang satu ini sudah responsiv.
 
Berikut cara-cara pemasangan widget recent post Slider Responsiv.
  • Masuk ke blogger
  • Pergi ke Tata Letak > Tambahkan Widget atau Add Gadget
  • Lalu pilih HTML/JavaScript
  • Setelah itu copy kode script dibawah dan pastekan dikotak yang kosong

<style>
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.seyosnya.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

  • Klik save atau simpan

Keterangan: silahakn diganti http://www.seyosnya.blogspot.com/ dengan alamat blog Anda


 3. Widget Recent Post Thumbnail Keren

Widget ini sangatlah keren, karena mempunyai thumbnai atau gambar yang keren.
Berikut cara-cara memasang widget recent post thumbnail keren.
  • Masuk ke blogger
  • Pergi ke Tata Letak > Tambahkan Widget atau Add Gadget
  • Lalu pilih HTML/JavaScript
  • Setelah itu copy kode script dibawah dan pastekan dikotak yang kosong

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"alamat blog/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

  • Klik save atau simpan template

Keterangan:
  •   Ganti"alamat blog" dengan alamat blog Anda
  • Untuk menonaktifkan scroll bar, hapus nomor 500.Jika Anda ingin mennampilkan lebih dari 8 artikel, ganti angka 8 menjadi berapapun yang Anda suka
  • Jika Anda hanya ingin judul postingan saja yang tampil, ganti true dengan none dan ganti 0 dari padding-top:0px; dengan 10


 4. Widget Recent Post Hanya Menampil Gambar atau Thumbnail Saja Yang VALID HTML5

widget recent post responsive keren simple

Widget recent post yang terakhir ini hanya akan menampilkan gambar atau thumbnail saja, jadinya terlihat keren karna simple dan elegan. Widget ini juga sudah VALID HTML5, jadi Anda tidak perlu khawatir lagi dengan adanya eror code.
Berikut cara-cara memasangnya.
  • Masuk ke blogger
  • Pergi ke tata letak > Tambahkan Widget atau Add Gadget
  • Lalu pilih HTML/JavaScript
  • Setelah itu copy kode script dibawah dan pastekan dikotak yang kosong

<div id='bp_recent'></div>
<script style='text/javascript' src='https://googledrive.com/host/0B8a75E285BMHcThrdkdWZUNiUzg'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 90;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://www.seyosnya.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>
  • Klik save atau simpan

Keterangan:
  • kode var numberOfPost = 12; adalah jumlah postingan, silahakan ganti angka 12 dengan angka yang Anda inginkan
  • untuk http://www.seyosnya.blogspot.com/ silahkan diganti dengan URL blog Anda

 Nah itulah 4 Macam Widget Recent Post (Artikel Terbaru) Yang Responsiv Keren dan Simple Untuk Blog, semoga bermanfaat untuk Anda.
4 Macam Widget Recent Post (Artikel Terbaru) Yang Responsiv Keren dan Simple Untuk Blog 4 Macam Widget Recent Post (Artikel Terbaru) Yang Responsiv Keren dan Simple Untuk Blog Yos Syafendro 5.0 stars based on 35 reviews Widget recent post atau biasa disebut artikel terbaru , tentunya widget ini sanggat berguna sekali. Karena dengan widget ini akan ditampi...
Load disqus comments

0 komentar

Langganan: Posting Komentar (Atom)