Cari Artikel

March 09, 2013

Memasang Widget Ultra Recent Post di Blog

Hello warga kampoeng blogger! Hari yang cerah untuk membahas mengenai tips tentang cara memasang widget recent post di blog. Tempo hari saya sudah membahas mengenai cara memasang widget recent post sederhana tanpa gambar dan dengan gambar. Pada kesempatan kali ini saya akan berbagi tips lagi mengenai cara memasang widget ultra recent post di blog. Widget ultra recent post ini adalah salah satu dari widget recent post yang di modifikasi sehingga terlihat sangat cantik bila dipasang pada blog yang berlatar warna biru muda dan putih. Di  bawah ini adalah tampakan widget setelah anda memasang widget ultra recent post di blog anda.
memasang widget ultra recent post di blog

Anda tertarik untuk memasangnya di blog anda? Silahkan anda simak caranya berikut ini.

Memasang Widget Ultra Recent Post di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
 <center><img src="http://4.bp.blogspot.com/-NUjmsRyazXI/UHR3vCheOeI/AAAAAAAACys/h32I-Xslsqo/s1600/recent+post.png" width="145" height="43" alt="Recent Posts" /></center>
<style type="text/css">
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:10px;    border:1px solid #ccc;
    border-bottom:3px solid #87CEEB;
    border-top:1px solid #ddd;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}
img.recent_thumb:hover {padding:1px;width:65px;height:65px;border:1px;float:left;margin:10px; }
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;    border:1px solid #ccc;
    border-bottom:3px solid #87CEEB;
    border-top:1px solid #ddd;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
#recsn {padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

#recsn, #recsn a {color:#808080;}
.recent_posts_with_thumbs {float:left;width: 100%;min-height: 70px;margin: 5px 5px 5px 5px;padding:0;font-size:12px;}
</style>
<script style="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/ultra-widget-recent-posts.js"></script>
<script style="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var showcommentnum = false;
var showpostsummary = true;
var displayseparator = false;
var showpostdate = false;
var displaymore = false;
var numchars = 100;</script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

<div id="recsn" style="font-family: arial, sans-serif; font-size: 9px;">

Powered by <a href="http://thekampoengblogger.blogspot.com" title="Widget Recent Posts">Blogger</a></div>

<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/rearrange?blogID=1251654968934554442&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById("html1"));" target="configHTML1" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18"/>
</a>
</span>
</span>
<div class="clear"></div>

Step 3

Save

Catatan!
Jangan lupa untuk mengganti  http://bloganda.blogspot.com dengan URL blog anda sendiri

That's it!
Semoga bermanfaat.
Wassalam. 

Memasang Widget Recent Post Dengan Gambar (Thumbnail) Secara Horizontal

Pada beberapa artikel saya yang lalu, saya telah membahas tentang memasang widget recent post sederhana tanpa gambar dan dengan gambar. Nah, pada artikel kali ini, kita akan mulai sedikit memodifikasi widget recent post ini sehingga tampak cantik terlihat di blog.

Memasang recent post pada sidebar blog merupakan hal yang sudah umum kita lihat di blog. Memasangnya dengan gambar dan tidak hanya sekedar judul posting juga sudah biasa kita dapatkan. Akan tetapi, pernahkah anda mencoba cara yang satu ini? Memasang widget recent post dengan gambar (thumbnail) secara horizontal ? Tentunya belum kan? Jika anda penasaran untuk mencobanya di blog anda, dilahkan anda simak tentang bagaimana memasang widget recent post dengan gambar (thumbnail) secara horizontal. So, let's cekidot!

Memasang Widget Recent Post Dengan Gambar (Thumbnail) Secara Horizontal

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2 

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<div id="bp_recent"></div><div class="bp_footer"><small><a id="bp_recent_link" target="_blank" href="http://thekampoengblogger.blogspot.com" style="padding: 1px 0px 0px 19px;text-decoration:none;"></a>Powered By <a href="http://thekampoengblogger.blogspot.com/" target="_blank" title="blogger widgets">Blogger Widgets</a></small></div>
<script style="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/recentposthorizontal.js"></script>
<script style="text/javascript">
var numberOfPosts = 5;
var showPostDate = false;
var showSummary = false;
var showCommentCount = false;
var imgDim = 72;

var titleLength = 0;
var showThumbs = true;
var showNoImage = true;
var imgFloat = "left";
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src="http://URL-BLOG-ANDA/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails"></script>

Step 3

Save

Catatan!
  • Bila anda ingin mengubah jumlah posting/artikel yang muncul, ganti angka 5 pada var numberOfPosts = 5
  • Bila anda tidak ingin menampilkan tanggal posting/artikel, ganti kata "false" pada var showPostDate = false menjadi "true"
  • Bila ingin menampilkan snippet (ringkasan) artikel, ganti  kata "false" pada var showSummary = false menjadi "true"
  • Untuk menampilkan jumlah komentar, ganti kata "false" pada var showCommentCount = false menjadi "true"
  •  Bila anda ingin mengubah ukuran gambar ganti angka pada var imgDim = 72 sesuai dengan ukuran gambar yang anda inginkan.
  • Ganti http://URL-BLOG-ANDA/ dengan URL blog anda

 Step 4

Letakkan widget di bawah body.

Step 5

Save Arrangement

Selesai! Sekarang perhatikan bagian bawah halaman blog anda, sudah terpasang widget recent post yang anda buat tadi. Seperti ini tampakannya.
widget recent post dengan gambar (thumbnail) secara horizontal

 
Semoga bermanfaat ya!
Wassalam.  

March 08, 2013

Memasang Widget Recent Post Dengan Gambar (Thumbnail)

Bila anda telah membaca artikel saya tentang memasang widget recent post sederhana di blog, maka anda tidak boleh melewatkan artikel saya yang satu ini, tentang bagaimana memasang widget recent post dengan gambar (thumbnail). Widget recent post dengan gambar memang menjadi salah satu daya tarik di blog, utamanya pada blog yang memang mengutamakan gambar dalam menyajikan artikelnya. Dengan menampilkan gambar, tentunya orang lain akan lebih paham mengenai artikel-artikel yang baru kita buat tersebut.

Memasang Widget Recent Post Dengan Gambar (Thumbnail)

Step 1

Masuk ke halaman dashboard > Layout > Add gadget >HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin: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;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://the-kampoeng-blogger.googlecode.com/files/recent-post-with-thumbnail.js'></script>
<script style='text/javascript'>
var displayseparator = true;
var showpostthumbnails = true;
var showpostsummary = true;
var displaymore = true;
var showcommentnum = true;
var numposts = 5;
var showpostdate = true;
var numchars = 100;</script>
<script src='http://www.BlogAnda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Step 3

Save

Catatan!
  • Untuk mengubah berapa jumlah post yang tampil pada recent post maka anda dapat merubah angka 5 dengan jumlah post yang ingin anda tampilkan
  • Ganti  www.BlogAnda.blogspot.com dengan URL blog anda
Dan hasilnya akan tampak seperti di bawah ini.


Selamat mencoba!
Wassalam.

Memasang Widget Recent Post Sederhana di Blog

Berbicara tentang widget recent post, anda tentunya sudah sangat familiar tentang widget yang satu ini. Yap, saat anda blog walking bila anda memperhatikan dengan seksama, anda tentunya sering menemukan widget ini terpampang di sidebar halaman blog. Widget recent post ini biasanya menampilkan cuplikan judul-judul postingan terbaru di blog. Tentu saja, ini akan sangat membantu mempromosikan artikel-artikel anda yang masih "fresh", sehingga akan membuat pengunjung selalu bisa mengetahui artikel-artikel terbaru di blog anda. Apakah anda tertarik untuk memasang widget recent post sederhana di blog anda? Berikut ini adalah cara memasang widget recent post sederhana di blog dengan snippet dan tanpa snippet. Nah, bagi anda yang tidak terlalu menyukai hal yang ribet, maka cara berikut ini mungkin akan cocok bagi anda.

Memasang Widget Recent Post di Blog

  • Widget Recent Post dengan Snippet

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<div id="recentsnip">
<script src="http://the-kampoeng-blogger.googlecode.com/files/recent%20post%20dengan%20snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="recsn" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://thekampoengblogger.blogspot.com/2013/03/Memasang-Widget-Recent-Post-Sederhana-di-Blog.html" target="_blank" title="Grab this Widget">Widget Recent Posts</a> by <a href="http://thekampoengblogger.blogspot.com" title="Widget Recent Posts">The Kampoeng Blogger</a></div>
<noscript>Browser anda tidak support JavaScript!</noscript>
<style type="text/css">
#recentsnip a {color: #666666; font-size: 14px;font-weight:bold;} #recsn {background: url(https://lh6.googleusercontent.com/-8JJ5fzXVGgA/UTmp1pay8bI/AAAAAAAAA_k/Ql4ZTwxNxx8/s15/calendars.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#recsn, #recsn a {color:#808080;}
#recentsnip { color: #666666; font-size: 12px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.recentsnip a {font-weight:bold; }
.recentsnipsumm {}
</style>

Step 3

Save

  • Widget Recent Post Tanpa Snippet (Hanya Judul)

 Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript 
<div id="titleonly">
<script style="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/recent-post-judul-saja.js"></script>
<script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rectitle"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Widget" target="_blank">Recent Posts Widget</a> by <a href="http://thekampoengblogger.blogspot.com/" title="Widget Recent Posts">The Kampoeng Blogger</a></div><noscript>Maaf! Pastikan bahwa JavaScript terpasang di browser anda.</noscript>
<style type=text/css>
#titleonly a {background: url(https://lh5.googleusercontent.com/-xgsyHR8EYfg/UTnLuVsiKII/AAAAAAAABAA/-hhYe6UNfcM/s16/1362763742_arrow_right.gif) 0px 0px no-repeat; color: #666666; font-size: 13px; padding: 1px 0px 0px 19px; margin: 5px 0px 0px 0px;line-height:25px;} #rectitle {background: url( https://lh6.googleusercontent.com/-8JJ5fzXVGgA/UTmp1pay8bI/AAAAAAAAA_k/Ql4ZTwxNxx8/s15/calendars.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rectitle, #rectitle a {color:#808080;}
.titlepost {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Step 3

Save

Catatan!

  1. Untuk mengubah banyaknya post/artikel yang tampil pada recent post, ganti angka 5 sesuai dengan jumlah post/artikel yang ingin anda tampilkan
  2. Untuk menampilkan tanggal post/artikel, ganti false dengan kata true
  3. Ganti angka 100 dengan jumlah karakter yang anda ingin tampilkan
  4. Untuk mengubah warna huruf judul post/artikel ganti kode warna yang diberi warna biru, dan bila anda ingin mengubah ukuran hurufnya cukup mengubah ukuran yang diberi warna oranye
  5. Ganti http://bloganda.blogspot.com dengan alamat blog anda
Selesai! Anda dapat melihat hasilnya di bawah ini.


Recent post title only
Recent post tanpa snippet
Recent post with snippet
Recent post dengan snippet
Semoga bermanfaat.
Wassalam.

March 06, 2013

Memasang Efek Berputar Pada Gambar di Blog

Bila anda pernah membaca artikel saya tentang bagaimana memberikan efek fading pada gambar maka pasti anda juga akan tertarik dengan efek yang satu ini yaitu bagaimana memberikan efek berputar pada gambar. Efek berputar ini  akan membuat gambar di blog anda lebih menarik dibandingkan gambar statis yang biasa anda lihat saat anda berkunjung ke blog orang lain. Pengunjung anda mungkin akan lebih terkesan dengan blog anda, bila anda memasang beberapa efek pada gambar di blog anda, dan salah satunya adalah efek ini. Meskipun penilaian dari pengunjung blog anda mengenai efek pada gambar ini pastinya akan berbeda-beda menurut selera masing-masing, akan tetapi memasang efek berputar pada gambar di blog anda tidak ada salahnya untuk dicoba.

memasang efek berputar pada gambar di blog

Memasang Efek Berputar Pada Gambar di Blog

Sebelum anda mengubah atau menambah kode script pada halaman HTML Template anda, sebaiknya anda mem-backup template anda terlebih dahulu. 

Step 1

Masuk ke halaman dashboard > Template > HMTL

Step 2

Letakkan kode berikut di atas kode ]]><b:skin/>
.Kampoengspinning img {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.Kampoengspinning img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Step 3

Save Template

Step 4

Tambahkan class="Kampoengspinning" ke dalam kode href gambar anda

<a class="Kampoengspinning" href="URL GAMBAR" imageanchor="" style=""><img alt="" border="" height="" src="URL GAMBAR" title="" width="" /></a>
Selesai!
Anda bisa melihat contohnya di bawah ini


Happy Blogging!
Wassalam.

March 05, 2013

Membuat Efek Refleksi Pada Gambar di Blog

Terdapat berbagai macam efek yang bisa anda terapkan pada gambar anda, salah satunya adalah membuat efek refleksi pada gambar di blog. Efek refleksi ini, bila dipasang pada gambar, maka gambar akan terlihat seperti memiliki bayangan pantul yang terlihat samar. Contohnya seperti gambar di bawah ini.

efek refleksi pada gambar di blog

Membuat Efek Refleksi Pada Gambar di Blog

Sebelum anda menambahkan kode script pada halaman HTML Template anda, sebaiknya anda mem-backup template anda terlebih dahulu. 

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut di atas kode  </head> 
<script src='http://the-kampoeng-blogger.googlecode.com/files/reflection.js' type='text/javascript'/>

Step 3

Ganti halaman post dari compose ke HTML

Step 4

Letakkan kode berikut, dimana saja anda ingin meletakkan gambar
<img src="URL GAMBAR" class="reflect"/> 
Silahkan anda mengganti kata URL GAMBAR dengan URL gambar anda.

Bagaimana? cukup mudah kan?
Selamat mencoba!
Wassalam.

March 04, 2013

Menambahkan Efek Zoom Pada Gambar di Blog

menambahkan efek zoom pada gambar di blog
Pada artikel saya yang lalu, saya sudah pernah membahas tentang bagaimana membuat efek gabungan aantara drop shadow dengan efek zoom pada gambar. Oleh karena mungkin ada blogger yang hanya ingin salah satu efek dari kedua efek tersebut saja yang dipasangkan pada gambar, maka kali ini saya hanya akan membahas tentang bagaimana cara menambahkan efek zoom pada gambar. Dengan menambahkan efek zoom pada gambar anda di blog, maka anda tidak perlu untuk mengklik gambar agar gambar menjadi lebih besar. Anda hanya perlu meletakkan mouse anda pada gambar, maka gambar tersebut akan membesar secara otomatis (fungsi zoom). Contohnya dapat anda lihat pada link demo di bawah ini.


Menambahkan Efek Zoom Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin>
.TKBZoom img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.TKBZoom img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Step 3

Save Template

Step 4

Tambahkan kode yang ditandai warna merah berikut sebelum kode gambar anda.
<div class="TKBZoom" style="text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR" /></a>
</div>
Bila anda ingin menyesuaikan letak gambar, anda hanya perlu mengubah "center" menjadi "left" atau "right".
Selamat mencoba!
Wassalam. 
 

March 03, 2013

Efek Rollover Pada Gambar

Efek rollover pada gambar adalah salah satu efek gambar dimana gambar otomatis akan berubah menjadi gambar lain bila mouse diletakkan di atas gambar (disebut dengan rollover) dan akan kembali seperti semula bila mouse disingkirkan dari gambar. Membuat Efek rollover pada gambar sangatlah gampang, anda hanya perlu beberapa langkah untuk memasang efek ini pada gambar anda. Sebagai contoh anda dapat melihat gambar di bawah ini.



Membuat Efek Rollover Pada Gambar

Step 1

Masuk ke halaman HTML (disamping compose)

Step 2

Letakkan kode berikut pada halaman HTML anda (letaknya terserah dari anda dimana anda ingin menempatkan gambar)
<a href="URL BLOG ANDA"><img src="URL GAMBAR PERTAMA" onmouseover="this.src='URL URL GAMBAR KEDUA'" onmouseout="this.src='URL GAMBAR PERTAMA'" /></a> 
Selesai!
Mudah kan? Anda baru bisa melihat hasilnya setelah anda mempublish artikel anda.
Selamat mencoba!
Wassalam.

Menggabungkan Efek Drop Shadow dan Perbesar Gambar Otomatis pada Gambar di Blog

Menarik sekali bahwa begitu banyak modifikasi yang bisa dilakukan terhadap gambar yang kita upload. Berbagai macam cara modifikasi untuk mempercantik tampilan gambar yang dapat anda coba untuk membuat pengunjung tertarik untuk datang ke blog anda. Salah satu modifikasi yang pernah saya bahas di blog ini adalah bagaimana anda memberikan efek fading pada gambar, efek lainnya yang dapat membuat pengunjung terkesima dengan blog anda adalah dengan menggabungkan efek drop shadow dan perbesar gambar otomatis pada gambar di blog. Dengan efek drop shadow dan perbesar gambar otomatis ini,  gambar anda akan terlihat seperti melayang saat mouse anda letakkan di atas gambar. Anda tertarik untuk memasangnya di blog anda?

Menggabungkan Efek Drop Shadow dan Perbesar Gambar Otomatis Pada Gambar

Sebelum anda melakukan perubahan pada halaman HTML Template anda, ada baiknya ada mem-backup template anda terlebih dahulu untuk berjaga-jaga bila terjadi error saat memasukkan kode.

Step 1

Masuk ke halaman dashboard > Template > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin> 
.TKBeffect img {
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s; 
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TKBeffect img:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow: 0px 0px 30px gray;
-webkit-box-shadow: 0px 0px 30px gray;
-moz-box-shadow: 0px 0px 30px gray;

opacity: 1;
}
Bila suatu saat anda ingin memperkecil ukuran gambar maka anda dapat menurunkan ukurannya 0.7 ke ukuran  yang lebih kecil atau bila anda ingin membuat image menjadi lebih buram (fade) maka anda hanya perlu menurunkan nilai 0.5 menjadi angka yang lebih kecil. 

Step 3

Tambahkan kode yang ditandai warna merah berikut sebelum kode gambar anda.
<div class="TKBeffect" style="text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR" /></a>
</div>
Bila anda ingin menyesuaikan letak gambar, anda hanya perlu mengubah "center" menjadi "left" atau "right"
Silahkan anda melihat hasilnya disini


Bagaimana? efek yang lumayan bukan?
Selamat mencoba!
Wassalam.