Belajar ngeblog

Friday, 29 March 2013

Cara membuat efek Profile berputar saat di sentuh mouse

cursor,sebenarnya postingan ini sudah lama aku simpan tetapi belum saya publikasikan,oke kita langsung saja ke langkah langkah pembuatan nya.pertama tama

1.buka akun bloganda

2.masuk edit HTML jangan lupa centang tombol kota yang ada di samping kanan atas.

3.Cari kode ]]></b:skin>

4.kalau sudah ketemu kode ]]></b:skin> letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

.profile-img{

border:2px dashed #ffffff;

opacity:0.8;

border-radius:6px;

margin:0px 0 0px 0px;

padding:4px;

box-shadow:1px 1px 1px #555,-1px -1px 1px #555,0 0 8px #ffffff;

-moz-box-shadow:1px 1px 1px #555,-1px -1px 1px #555,0 0 8px #ffffff;

-webkit-box-shadow:1px 1px 1px #555,-1px -1px 1px #555,0 0 10px #ffffff;

-o-transition:margin-left 1.5s ease-in 2s,margin-top 1.5s 2.5s,-o-transform 1.5s ease-out 1s,opacity 2s ease-in; -moz-transition:margin 1.5s ease-in 2s,-moz-transform 1.5s ease-out 1s,opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s,-webkit-transform 1.5s ease-out 1s,opacity 2s ease-in

}

.profile-img:hover{

opacity:1.0;

border-radius:8px;

-moz-border-radius:8px;

-webkit-border-radius:8px;

-o-border-radius:8px;

-moz-box-shadow:1px 1px 1px #F00,-1px -1px 1px #F00,0 0 16px #F00;

-webkit-box-shadow:1px 1px 1px #F00,-1px -1px 1px #F00,0 0 16px #F00;

-o-box-shadow:1px 1px 1px #F00,-1px -1px 1px #F00,0 0 16px #F00;

margin:40px 0px 20px 10px;

-o-transform:rotate(1460deg) scale(1.8) translate(35px,10px);

-moz-transform:rotate(1460deg) scale(1.8) translate(35px,10px);

-webkit-transform:rotate(1460deg) scale(1.8) translate(35px,10px);

-o-transition:margin-left 1.5s ease-in 0.4s,margin-top 1.5s,-o-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;

-moz-transition:margin 1.5s ease-in 0.4s,-moz-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s; -webkit-transition:margin 1.5s ease-in 0.4s,-webkit-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s

}

Penjelasan:

kode yang saya kasih warna itu bisa anda ganti menurut selera anda,dari border sampai ke efek warna nya bisa kalian ganti sendiri..Sekian dan trimakasih semoga postingan saya ini berguna buat pengguna blogger semua.

Thursday, 28 March 2013

Widget Social Plugin Melayang

Selamat datang . Oke sobat kali ini saya akan membagikan satu lagi tips blogging tentang social plugin. Beberapa hari yang lalu saya juga pernah share cara membuat tombol social plugin berbentuk ICE CUBES, kali ini social pluginnya melayang-layang, pengin tau kayak apa? berikut demonya.

Nah, gimana sobat? Keren bukan?
Widget ini gak kalah keren deh sama social plugin lainnya. Yups, kalo mau tau cara bikinnya, monggo ikuti langkahnya.

Cara Widget Social Plugin Melayang
1. Login Blogger.
2. Masuk ke menu Template, pilih Edit HTML.
3. Jangan lupa centang "Expand Template Widget".
4. Cari kode </body>.
5. Copy dan pastekan kode berikut dibawah kode </body> :

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>


<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: 'https://twitter.com/arieadie2', text: 'Follow me on twitter' },
facebook: { url: 'https://www.facebook.com/arieadie30', text: 'Profile on facebook' },
rss: { url: 'http://feedburner.google.com/fb/a/dashboard?id=d30ktc85tqmuc9vlibpied1k7k', text: 'RSS Feed' },
google: { url: 'https://plus.google.com/112756918350798570373', text: 'Profile on google+' },
youtube: { url: 'http://www.youtube.com/user/arieadie821', text: 'Profile on youtube' },
orkut: { url: 'http://www.orkut.com/Main#Profile?uid=17377316960235376240', text: 'Profile on orkut' },
myspace: { url: 'http://www.myspace.com/600837781', text: 'Profile on myspace' },
digg: { url: 'http://digg.com/', text: 'Profile on digg' },

},
show: 8,
position: "left",
skin: "clear"
});

});

Keterangan :

Ganti kode # (pagar) dengan URL dari akun jejaring sosial yang sobat miliki. Misalnya twitter : http://twitter.com/lindamarlina40
Mengurangi tombol social plugin dapat sobat lakukan dengan mengurangi angka 8 pada show: 8, sesuai dengan keinginan sobat.
Untuk mengubah posisi widget ganti position: "left" dengan posisi yang sobat inginkan. Bisa "right (kanan), top (atas), bottom (bawah)"
Sobat bisa mengubah backgound social media ini dengan warna gelap dengan mengubah skin: "clear" dengan "dark".

6. Jika semua kode sudah diatur sesuai dengan keinginan sobat, langkah yang terakhir adalah klik tombol "Simpan Template".

Nah itulah cara membuat widget social plugin melayang di blog. Mudah bukan?
Semoga bermanfaat dan Terima kasih ^_^


<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>


<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: 'https://twitter.com/arieadie2', text: 'Follow me on twitter' },
facebook: { url: 'https://www.facebook.com/arieadie30', text: 'Profile on facebook' },
rss: { url: 'http://feedburner.google.com/fb/a/dashboard?id=d30ktc85tqmuc9vlibpied1k7k', text: 'RSS Feed' },
google: { url: 'https://plus.google.com/112756918350798570373', text: 'Profile on google+' },
youtube: { url: 'http://www.youtube.com/user/arieadie821', text: 'Profile on youtube' },
orkut: { url: 'http://www.orkut.com/Main#Profile?uid=17377316960235376240', text: 'Profile on orkut' },
myspace: { url: 'http://www.myspace.com/600837781', text: 'Profile on myspace' },
digg: { url: 'http://digg.com/', text: 'Profile on digg' },

},
show: 8,
position: "left",
skin: "clear"
});

});

Cara Membuat Efek Animasi di About Me atau Profil

Berikut conto efek yang akan dibuat:

Untuk membuat efek ini berikut langkah-langkahnya:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

dl.profile-datablock {clear: both; text-align:center;}
#sidebar .Profile img.profile-img {
border: 8px solid #aaa;
opacity: 0.3;
border-radius: 6px;
margin: 20px 0 20px 60px;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
#sidebar .Profile:hover img.profile-img {
opacity: 1.0;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 16px #222;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}

Ket: ubah nilai magrin 60px dengan sesuka kalian semakin kecil angka semakin ke kiri gambar tersebut.

6. Silahkan anda priview dulu, dan lihat hasilnya.

Selamat mencoba.....!!!

Cara Membuat Show hide Otomatis Ketika disentuh Cursor

Gimana?? menarik bukan..??

Baiklah langsung saja Ikuti langkah-langkah sebagai berikut :
1. Login ke blogger
2. Masuk ke rancangan
3. Pilih edit HTML
4. Cari kode ]]></b:skin> dan Letakkan kode CSS berikut diatasnya :

.bgsGR_onmos {
height: 32px;
width: 260px;
border: 2px solid #666666;
background: #CCCCCC;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
padding: 5px 5px;
margin: 15px auto;
font: 11px Arial;
color: #003366;
overflow: hidden;
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos:hover {
min-height: 250px;
border: 2px solid #333333;
background: #111;
box-shadow: 0 1px 15px #000;
-moz-box-shadow: 0 1px 15px #000;
-webkit-box-shadow: 0 1px 15px #000;
color: #000; text-shadow: 0 1px 1px #888;
}
.bgsGR_onmos h3, .jerohan h3 {
font-size: 14px;
font-family: Droid Serif;
font-weight: bold;
color: #000;
text-align: center;
text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
padding: 3px 10px;
background: #bbb;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #999;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.bgsGR_onmos h3:hover {
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos img.mini, .bgsGR_onmos img.minianima {
width: 70px;
border: 4px solid #666;
padding: 3px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
float: left; margin: 0 10px 5px 0;
background: #222;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.bgsGR_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
border: 4px solid #CCCCCC;
background :#666;
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
margin-top: 20px;
margin-left: 15px;
}
.bgsGR_onmos img.minianima:hover {
-o-transform: scale(1.4) rotate(360deg) translate(0px);
-moz-transform: scale(1.4) rotate(360deg) translate(0px);
-webkit-transform: scale(1.4) rotate(360deg) translate(0px);
}
.jerohan {
margin-top: 15px;
height: 200px;
overflow: auto;
padding: 0 5px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out; background: #CFE7E9;
}
.jerohan:hover {
background: #333;
color: #eee;
text-shadow: 0 0px 1px #fe0303;
}
.jerohan h3 {
margin: 20px 0;
max-width: 204px;
background: #66CCFF;
box-shadow: 0 1px 12px #eee;
-moz-box-shadow: 0 1px 12px #eee;
-webkit-box-shadow: 0 1px 12px #eee;
}
.jerohan h3:hover {
background: #888;
border: 1px solid #666;
box-shadow: 0 1px 12px #fff;
-moz-box-shadow: 0 1px 12px #fff;
-webkit-box-shadow: 0 1px 12px #fff;
}
.jerohan ul {
padding: 0;
margin: 0;
list-style: none;
}
.jerohan li {
padding: 0;
margin: 0;
list-style: none;
border-bottom:1px dotted #777;
}
.jerohan li a{
color: #03d8fe;
padding: 0;
margin: 0;
text-decoration:none;
font-size: 12px;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.jerohan li a:hover {
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
color: red;
text-shadow: 0 1px 1px #000;
margin-left: 20px;
}

5. Setelah itu, copy kode berikut di bawah kode ]]></b:skin>

6. Terakhir copy kode dibawah ini dan letakkan di kolom entri/Membuat Posting.

<div class="bgsGR_onmos"><h3>
Show</h3>
<div class="jerohan">
<h3>
judul Terserah</h3>
isi Teks atau HTML</div>
</div>

KET::: teks yang bewarna orange adalh Judul kode, dan yang berwarna merah Isi dengan kode script.

7. Setelah Itu Lihat Hasilnya.

Cara Buat Backround Entri Berubah Warna Saat Disentuh Mouse

Cara Buat Backround Entri Berubah Warna Saat Disentuh Mouse
seperti biasa kali ini saya memposting artikel Tips Trik blog. Cara Buat Backround Entri Berubah Warna Saat Disentuh Mouse Mungkin diantara sahabat blogger ada yang tertarik membuat backround entri blog berubah saat disentuh mouse. tanpa basa-basi langsung saja, berikut ini langkah-langkahnya:

1. Login ke blogger

2. Klik Rancangan >> Edit Html

3. Kasih centang pada "Expand Template Widget".

4. Tekan CTRL + F dan cari kode ]]></b:skin>

5. Letakkan kode berikut tepat diatas kode ]]></b:skin>

.post-body:hover {background:#000;color:#fff;}

Catatan: #000 adalah backround entri. #fff adalah warna teks atau tulisan.

6. Jika sudah klik "SIMPAN TEMPLATE"
7. Lihat hasilnya.
Catatan: karna semua template berbeda beda jangan salahkan saya jika tips ini tidak berhasil saya pernah menguji blog template yang dulu dan yang sekarang yang dulu bisa berhasil dan template yang ini tidak berlaku

selamat mencoba semoga berhasil

Cara Membuat Related Post Thumbnail Plus Kotak Feedburner

Berikut langkah cara bikin related post plus feedburner di bawah postingan blog :
1. Login ke Blogger
2. Pilih Rancangan
3. Pilih Edit HTML centang expand widget templates
4. Backup dulu template anda, biasa deh untuk jaga-jaga apabila ada kesalahan edit
5. Lalu cari kode ]]></b:skin>
6. Kalau sudah dapat, letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDrjk2Hsi1taBIW7LDHq0ZNBy5y8JLDGMPuE9baYeAcXz1HnRXA3RdMOWGyN7c1y5mGrnmcXYbf-LopSdYa3T4WmlKt2HVLCBF2M5iHiUTOWpBPPz6JipM8h-OR6R7vL1Xzf3w8ECIyaE/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

7. Berikutnya anda cari lagi kode <data:post.body/>
8. Kalau sudah dapat, letakkan kode di bawah ini tepat di bawah kode <data:post.body/> (jika pada template anda terdapat 2 atau 3 kode, anda pilih kode yang terakhir ya)

<b:if cond='data:blog.pageType == "item"'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnE4mwFlgvQ_Jpg3zsiLlfwPxsjpOlhK6VZWdEDVEB8SiSvxtc_M_3MdtBcgud1WN-qDveeF_bqOywLjGcI3RbDacXAsIvy0jy689zTTwC9Bu-9WtiUJiTnrDGk6eSj0q7Ujdmje3Ooyg/s1600/no+image.jpg";
var maxresults=6;
</script>
<script src='https://sites.google.com/site/blogrudyhartono/js/related.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>

<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/sangpengembara821' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://sangpengembara821.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=sangpengembara821', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='sangpengembara821'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/sangpengembara821'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/sangpengembara821?bg=ceaa6c&fg=444444&anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

9. Selesai, Save Templates dan lihat hasilnya di bawah postingan blog anda.

Keterangan :
Warna pink : ganti dengan alamat feed anda.
Warna biru : ganti dengan URL anda.

Cara Membuat Related Post Thumbnails keren

- Recent Post atau List Artikel Terbaru banyak sekali digunakan oleh para blogger. Memasang widget recent post juga berperan dalam Optimasi Seo On Page. dengan memasang Widget Recent Post di Halaman Blog pengunjung akan lebih mudah mengakses setiap artikel terbaru kamu. Tentunya kemudahan mengakses artikel dihalaman blog akan meningkatkan jumlah page view blog kamu.

Recent Post yang Master Chef katakan keren disini karena gayanya berbeda dengan gaya recent post yang lainya karen Widget Recent Post ini dilengkapi dengan Fitur Previous dan Next dibawahnya seperti terlihat pada gambar dibawah ini :

Nah buat Sobat Blogger Dapur Tutorial Blogspot dan Seo yang tertarik dengan Widget ini kamu bisa memasangnya dengan sedikit melakukan Edit HTML pada halaman blog kamu. Berikut resepnya untuk Membuat Recent Post Dengan Thumbnail Keren.

Login terlebih dahulu kehalaman blog
Dari bagian Dashbord blog kamu pilih Template untuk Masuk kehalaman Edit HTML (Baca Cara Masuk ke Halaman Edit HTML)
Downlad dulu template lengkap blog kamu untuk mengantisivasi kesalahan Edit HTML (Baca Caranya Upload dan Back-Up Template Blog)
Jangan lupa Centang Expand Template Widget
Jika sudah cari kode ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
Setelah kode berhasil ditemukan Copy Kode dibawah ini dan paste diatas kode ]]></b:skin>

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3QNhyphenhyphenBJgUkWiiTHa4q-azMIh0NB9RFdtp3W4Lj98Mpgm3tvs8U33vZkLvlJFDLbK_-ej9mFxngHC1QriiMg83et0ZSD7kmedLII1AB2oWro7cOI0u3gkPOr_0yKUyOjJGK5fiF5m0Muo/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Masih di are Edit HTML, sekarang cari kode </head>
Copy kode dibawah dan letakan diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://sangpengembara821.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnE4mwFlgvQ_Jpg3zsiLlfwPxsjpOlhK6VZWdEDVEB8SiSvxtc_M_3MdtBcgud1WN-qDveeF_bqOywLjGcI3RbDacXAsIvy0jy689zTTwC9Bu-9WtiUJiTnrDGk6eSj0q7Ujdmje3Ooyg/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan :

Setelah itu Klik pada tombol Save Template
Kembali ke Dashbord blog kamu, Pilih Tata Letak
Klik Add a Gadget atau Tambah Gadget
Pilih Widget HTML Java/Script
Copy Kode Berikut :

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Paste kedalam kolom HTML/JavaScript
Klik Simpan
Selesai dan Lihat hasilnya

Itu dia Resep Cara Membuat Recent Post Dengan Thumbnail Keren semoga bisa membantu.

Recent Post adalah widget yang akan menampilkan beberapa artikel / postingan terakhir blog. Adapun jumlah portingan yang di tampilkan bisa diatur sesuai keinginan kita dengan mengacak - acak kode HTMLnya. Dengan Related Post Thmbnails ini, pengunjung akan dengan mudah melihat beberapa artikel terakhir yang diposting di blog. Dengan sekali klik, pengunjung akan langsung menuju ke artikel yang masih fresh. Mau tahu cara memasang Cara Membuat Related Post Thumbnails Bergerak dilengkapi dengan bingkai yang tidak bisa digunakan untuk foto dinding di rumah pada blog anda ? (Kalau kalimatnya terlalu panjang, silahkan ambil nafas dulu. Bernafas melalui hidung... lalu keluarkan melalui bokong hehehehe......). a. Login ke Blogger. b. Di halaman Dasbor, kita pilih Rancangan. c. Kemudian pilih Edit HTML d. Beri tanda centang pada Expand Template Widget e. Cari kode f. Taruh (copy paste) kode berikut ini di atasnya

h. save template gimana sob, mudahkan, perlu ketelitian sob, jangan keburu-buru nanti malah kacau hasilnya, semoga bermanfaat ya sob :)

Read more at: http://www.hajsmy.us/2011/06/cara-membuat-related-post-thumbnails.html