jquery recent post thumbnail news ticker blogger

Langkah1: Masuk ke menu 'Edit HTML'.
Langkah2: Gunakan 'Menu Find' (control+F) di browser anda untuk menemukan kode.
Langlah3: Pasang Script berikut diatas kode </head>

<style type='text/css'>
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/askamedia/java-script/news-ticker-askamedia.txt' type='text/javascript'></script>
<script type='text/javascript'>
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>

Langkah4: klik tombol Save Template untuk menyimpan perubahan.
Langkah5: Masuk ke Menu 'Page Elements'
Langkah6: Tambahkan elemen baru 'HTML java script', selanjutnya isi form tersebut dengan Script ini:

<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 125;
</script>
<script src="http://askamedia.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Langkah7: Klik tombol 'Save' pada element tersebut. Selesai.

recent post bloggertricks

Satu lagi widget recent post (posting terbaru) dengan dilengkapi dengan gambar kecil (thumbnail).

Widget yang diterbitkan oleh Bloggertriks ini terlihat cukup elegan. selain menampilkan judul posting terbaru dan thumbnail, widget ini juga menampilkan comment tracker. pemasangan widget ini juga sangat mudah, anda bisa langsung menambahkannya pada elemen laman Blogger.

Pemasangan Widget
Langkah 1: Login ke account 'Blogger' anda
Langkah 2: Dari Dashbor, masuk ke 'Tata Letak', pilih 'Elemen Halaman'.
langkah 3: Tambahkan 'Gadget baru', dan pilih 'HTML JavaScript'
Langkah 4: Copy-paste kode dibawah ini :
<script language="JavaScript"> imgr = new Array(); imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true; boxwidth = 298; cellspacing = 8; borderColor = "#ffffff"; bgTD = "#000000"; thumbwidth = 40; thumbheight = 40; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 5; home_page = "http://askamedia.blogspot.com/"; </script><br /> <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


Pengaturan Widget
Berikut adalah contoh pengaturannya
boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan
home_page : http://namabloganda.com/

Related Posts Widget Thumbnails for Blogger

Langkah1: Masuk ke menu 'Edit HTML' dan beri centang tanda 'Expand Widget Template'
Langkah2: Gunakan 'Menu Find' (control+F) di browser anda untuk mempermudah menemukan kode yang dimaksud.
Langlah3: Pasang Script berikut diatas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNK6jD7Kcylc0SlKmQDW3fS8G7NQlIkKURnx1asDD1aSMpCMvPgfQdYtLH8nHGvl4_Hc3EettkZYM7IVO_-pf2XkkLvnRUjNLSrqjxlVjJw6OE2lekEBXxyUq31q11g3SbuqM4jWkhm8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Langkah4: Cari kode
<div class='post-footer-line post-footer-line-1'> atau
<div class='post-footer-line post-footer-line-2'> atau
<div class='post-footer-line post-footer-line-3'>
Langkah5: Pasang script berikut di bawahnya.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Langkah6: Klik tombol 'Save Template'. Selesai.

auto readmore blogger

Read more kali ini sudah berfungsi secara otomatis memenggal semua artikel sebelum ditampilkan pada halaman posting. pada posting kali ini saya akan menyampaikan dua pokok penting yaitu pemasangan auto read more dan pengaturan variabelnya.

Untuk pemasangannya cukup mudah, yaitu melalui halaman edit HTML. Demikian juga pengaturannya, anda cukup memasukkan value yang telah tersedia.

Langsung saja pada pokok bahasan kita, namaun sebelum mengedit template sebaiknya Anda sudah membackup templete lengkap, dan menyimpannya di komputer anda. serta menggunakan menu Find (control F) untuk mempermudah pencarian kode yang dimaksudkan.

PEMASANGAN
Langkah 1. Masuk kehalaman 'EDIT HTML', dan beri tanda centang pada 'EXPAND WIDGET TEMPLATE'.

Langkah 2. Letakan script dibawah ini di atas kode </head>.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Langkah 3. Cari dan Hapus kode <data:post.body> lalu ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Langkah 4. simpan perubahan dan lihat Blog anda.


PENGATURAN
Anda dapat mengatur variabel yang ada pada Auto read more ini sesuai dengan kebutuhan anda, contohnya sebagai berikut:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Demikian cara memasang Auto read more dan pengaturan variabelnya, selamat mencoba dan semoga berhasil.... happy blogging.

recent post thumbnail bloggerplugins

Tampilan widget ini mamang sama seperti widget yang pernah saya posting disini. Bedanya pada widget ini menggunakan Javascript dan CSS.

Bloggerpluggins memang sudah lama menerbitkan widget ini. tak ada salahnya kalau kita bahas kali ini. pemasangannya pun juga cukup mudah, jadi bagi anda yang ingin mencobanya silakan saja. melalui posting ini akan saya share waktu meggunakan widget ini.

PEMASANGAN WIDGET
Langkah 1: Login ke account 'Blogger' anda
Langkah 2: Dari Dashbor, masuk ke 'Tata Letak', pilih 'Elemen Halaman'.
langkah 3: Tambahkan 'Gadget baru', dan pilih 'HTML JavaScript'
Langkah 4: Copy-paste kode dibawah ini :

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 5;
var numchars = 100;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Langkah 5: Simpan perubahan, dan lihat blog anda...
Nah, sekarang di Blog anda sudah terpasang 'widget artikel terbaru dengan thumbnail'.


PENGATURAN VARIABEL
anda dapat mengatur variabel yang tersedia berikut ini:

var numposts: Jumlah posting yang ditampilkan
var numchars: Jumlah karakter yang ditampilkan
var showpostthumbnails: Gambar kecil ('true'=ditampilkan, 'false'=dihilangkan)
var displaymore: Link baca selengkapnya ('true'=ditampilkan, 'false'=dihilangkan)
var displayseparator: Garis antar posting ('true'=ditampilkan, 'false'=dihilangkan)
var showcommentnum: Jumlah komentar ('true'=ditampilkan, 'false'=dihilangkan)
var showpostdate: Tanggal posting ('true'=ditampilkan, 'false'=dihilangkan)
var showpostsummary: Ringkasan ('true'=ditampilkan, 'false'=dihilangkan)

Demikian tadi coret-coret saya untuk widget artikel terbaru dengan thumbnail. semoga bermanfaat...

jquey featured content slider

ini merupakan salah satu rekayasa jquery yang cukup populer, pada widget ini terdiri dari dua bagian yaitu: bagian utama berupa gambar besar dan bagian kedua berupa thumbnail, kedua bagian tersebut akan bertransisi secara otomatis menggunakan effect slide yang menawan. tentunya widget ini sangat menarik perhatian pengunjung, dan dapat memperindah tampilah blog. nah selanjutnya berikut ini adalah cara memasang widget tersebut...

Langkah1: Masuk ke menu 'Edit HTML'.
Langkah2: Gunakan 'Menu Find' (control+F) di browser anda untuk menemukan kode.
Langkah3: Pasang Script berikut diatas kode </head>

<style>
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:248px;
}
#featured ul.ui-tabs-nav li{
padding:0; padding-left:15px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:54px;
color:#333; background:#fff;
margin: 2px 0 2px 0;
padding: 3px;
text-align: left;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}

#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url(&#39;https://lh5.googleusercontent.com/-0M5Ej6OSWe4/UDpw8ytf5yI/AAAAAAAABAw/FUFRwbnPE9o/s118/nav-selected4.png&#39;) top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:1px 5px 0 2px;
background:#fff;
padding:2px;
border:1px solid #eee;
width: 65px;
height: 45px;
}
#featured .ui-tabs-panel img{
float: left;
width: 400px;
height: 250px;
}

#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWgTihl6idU7JmDKaj1UnbGHebKNn4rihyphenhyphentTc0qFFHu8ENEQgx3cy7wdFic9W8LY3V84-89NpcMk07WHAxVdAdOWnGIk3wwjtVrMU_aLvYxoHan9VELy8H1Hi1E-pYKvLqqbYIf8YFNY/s1600/transparent-bg.png&#39;);
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/><script>$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});</script>

Langkah4: klik tombol Save Template untuk menyimpan perubahan.
Langkah5: Masuk ke Menu 'Page Elements'
Langkah6: Tambahkan elemen baru 'HTML java script', selanjutnya isi form tersebut dengan Script ini:

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>

Langkah7: Klik tombol 'Save' pada element tersebut. Selesai.