5 Cara Mudah Menambahkan Script Recent Post ke Blog
Menambahkan posting widget baru untuk Blogger dapat memudahkan kepada pengunjung untuk mendaptkan artikel yang baru kita buat, Postingan tersebut otomatis semua orang untuk melihat dengan mudah artikel terbaru blog anda. Anda kemudian
dapat menggunakan informasi ini untuk merancang newsletter email dijadwalkan,
dan mengambil keuntungan dari apa yang sering disebut sebagai 'Twitter efek' di
mana pemirsa teratur akan memeriksa kembali di situs Anda untuk kemungkinan
bahwa posting baru yang tersedia. Tanpa ini, Anda memaksa orang untuk melakukan
menjalankan pencarian mereka sendiri untuk informasi dan konten, meningkatkan
kemungkinan bahwa mereka akan meninggalkan situs dan dapat menurunkan tingkat bouncing
blog Anda.
Terlepas dari tampak hebat blog anda dan dapat mengambil ruang minimal, ada
terlalu banyak manfaat bagi Anda untuk tidak memiliki posting widget baru untuk
Blogger. Bagian terbaik tentang add-ons ini adalah bahwa mereka datang dalam
berbagai macam desain yang sesuai tema apapun. Jika Anda tertarik untuk
menambahkan widget ke situs Anda, di sini ada 5 widget posting terbaru
yang sangat keren yang mungkin cocok dengan template Blogger Anda:
Caranya sangat mudah sekali tinggal anda copykan file scriptnya dan paste kan ke menu widgetnya dan langsung jadi. Dan tidak perlu mengotak-ngatik menu htmlnya.
Model # 1
Scriptnya :
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #cecece; float: right; margin: 5px;" 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>
<link href='http://fonts.googleapis.com/css?family=ubuntu+condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'ubuntu condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #f49a9a; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #fcd092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #fff59e; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #e1efa0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #b1daef; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
Model # 2
Scriptnya :
<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #cecece; float: right; margin: 5px;" 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: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69b7e2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "avant garde",avantgarde,"century gothic",centurygothic,applegothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69b7e2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: garamond,baskerville,"baskerville old face","hoefler text","times new roman",serif; font-size: 15px;}
</style></div>
Model # 3
Scriptnya :
Model # 4<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #cecece; float: right; margin: 5px;" href="http://helplogger.blogspot.com" rel="nofollow">recent posts widget</a>
<noscript>your browser does not support javascript!</noscript>
<link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69b7e2;}
.recent-posts-container {font-family: 'oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69b7e2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>
Model # 5
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #cecece; float: right; margin: 5px;" href="http://helplogger.blogspot.com">recent posts widget</a>
<noscript>your browser does not support javascript!</noscript>
<link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4d4d4d;background: #f7f7f7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4dace3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5c4d4d;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #ac707a; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4dace3;}
</style>
Scriptnya :
<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #cecece; float: right; margin: 5px;" 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>
<link href='http://fonts.googleapis.com/css?family=lobster|gloria+hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #fcd6cb; border-radius: 100%;}
.recent-posts-container {font-family: 'gloria hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #fcd6cb;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #fcd6cb;}
ul.recent-posts-container {border: 2px solid #fcd6cb; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4dace3;}
</style>
Bagaimana cara menambahkan Recent
Posts Widget di Blogger
Cukup ikuti langkah-langkah berikut di bawah ini:
Langkah 1. Masuk ke dashboard
Blogger Anda dan klik pada blog Anda
Langkah 2. Pergi ke
"Layout" dan klik "Add gadget" link di sisi kanan
Langkah 3. Dari jendela
pop-up, gulir ke bawah dan pilih "HTML / JavaScript" gadget:
Langkah 4. Paste kode widget
yang dipilih
Langkah 5. Tekan tombol
"Simpan" ... dan selesai !
Demikianlah postingan tentang 5 Cara Mudah Menambahkan Script Recent Post ke Blog semoga bermanfaat dan silahkan di coba di blog masing-masing.
0 Response to "5 Cara Mudah Menambahkan Script Recent Post ke Blog"
Post a Comment