Cari Artikel

March 10, 2013

Memasang Ikon Sosial Media 3D Dengan Efek Berputar di Blog

Sosial media, selain sebagai ajang silaturrahmi dengan teman-teman, juga bisa digunakan sebagai tempat untuk berbagi tulisan misalnya tulisan kita di blog. Jangan pernah menyepelekan peran sosial media dalam promosi blog anda, karena dengan membagikan artikel kita di berbagai sosial media, teman-teman kita pun akan tertarik untuk membaca tulisan-tulisan kita di blog, sehingga dengan sendirinya akan menaikkan trafik pengunjung di blog kita. Terlebih lagi, bila ternyata teman kita juga membagikan artikel kita ke teman-temannya yang lain, tentunya ini akan sangat menguntungkan bukan?

ikon sosial media 3D dengan efek berputar di blog



Ikon sosial media yang terpasang di blog, tidak selalu hanya berupa ikon statis. Kita pun dapat memodifikasinya hingga terlihat menarik saat di pasang di blog. Salah satu dari modifikasi ikon sosial media ini adalah dengan memasang ikon sosial media 3D dengan efek berputar di blog. Bila anda penasaran dengan cara  memasangnya, maka sebaiknya anda simak caranya berikut ini.

Memasang Ikon Sosial Media 3D Dengan Efek Berputar di Blog

Step 1

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

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<style>
#social a:hover {
background-color: transparent;
opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center>
<div id="social">
<!--Awal Kode RSS -->
<a title="Grab Our Rss Feed" href="URL-FEED-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQpWpRnv5bwh409GBwcyPEqeBBpC0rBTF1dcvuX5Tuve25B7ZZlMMvJXTDCouX1Hy9Rm1ioKs9ixF9wo9zqKrGy7boTNv9PY7SLTViW4_Jg5Vxk5o_bAxbBbOtbIbXSG0lLwUOSK3fqPh/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Rss Icon-->

<!--Email RSS-->
<a rel="nofollow" title="Get Free Updates Via Email" href="URL-RSS-EMAIL-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEruoC37pP2qROJ5unOM__j2FW_wcF13qKcb1XQ1piUpZtnlWj-yWgeP_K0cl-LIIr9g3-5uYn4TlkLBl0lv8A2yTgjbVHkv-x8WZdAXwHhU3xJhTH7nkqpxxwCG-8SUoSdSIxhobj-MhL/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Email Rss Icon-->

<!--Google+-->
<a title="Follow Us On Google+" rel="nofollow" href="URL-GOOGLE-PLUS-Anda" target="_blank">
<img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbT29E6xnxytoWI02Y5robCuKfsueE-vl_e78oWJOlGjUxtcrJ-gBd0bcVYxC2HqCZFewvYMh-9iyR5DlDpIE2X_nMU7H-Tei3thN4iAdAgawph81sBY_hGfMAns0_cYIFdPo3-o2G_mc/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--Akhir Kode Google+-->

<!--Awal Kode Pinterest-->
<a title="Follow Our Pins" rel="nofollow" href="URL-PINTEREST-Anda" target="_blank">
<img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-RXvr_vVQQK-6W2QV_Wj8O-0ZJ8zISa0mjA34CGzHrolfKFNsG1eBYJ_ZYxAlhKyHXSd9tDHwjzCwM-Ycxwoj0xQASx7hp8ClXaVtJxB5bc3R3arnyU5hmL2VaUFLoxbORGweld_VElAL/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--Akhir Kode Pinterest-->

<!--Awal Kode Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="URL-FACEBOOK-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AOfHZD9sd6hRXlaETIck-Dt0ZWjdksbCxfpfDjtYQQV1K6lLy1mTulsSTxHmau2icJYkQdBvmKWh8e7mngjNN-N04ndcIEjf6x-z8XvpmDRUrjZlhj3F_GWjUrvCRit587z2kOjwXTRe/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Facebook-->

<!--Awal Kode Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="URL-TWITTER-Anda" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3AI0nR50SYtq6cPiSI5NOLWwNUcBCI9KUocyzTn_fTa9tBAXvSGWAhWYMNZUHLj8eqmYbfwY-jUK90ikxm6leltlfcw2IHfHxNFL1Xto0AqZUYidWsDvL4-LO7uTkV1eo275aBN9sPIw/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Twitter-->
</div>
<br/>
<!--Awal Kode Tombol Feed Count-->
<a href="URL-FEEDBURNER-Anda" target="_blank">
<img alt="The Kampoeng Blogger" src="http://feeds.feedburner.com/~fc/thekampoengblogger?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--Akhir Kode Tombol Feed Count-->
</center>
Catatan!
Silahkan anda mengganti kode yang diberi warna merah dengan URL sosial media dan URL Feed anda sendiri.

Step 3

Klik Save

Semoga bermanfaat.
Wassalam.

Memasang Twitter Burung Terbang Berbagai Warna di Blog

Twitter burung terbang berwarna biru muda di blog mungkin sudah biasa anda lihat di blog, akan tetapi twitter burung terbang dengan warna yang berbeda-beda, pastinya sangat jarang anda lihat bukan? Nah, pada kesempatan kali ini saya akan membahas tentang bagaimana memasang twitter burung terbang berbagai warna di blog. Memasang twitter burung terbang dalam beberapa warna ini tentu saja akan membuat blog anda semakin menarik, karena warna dari burung twitter menjadi serasi dengan blog anda. Apakah anda penasaran mencobanya? Silahkan simak caranya berikut ini.

twitter burung terbang berbagai warna di blog

Memasang Twitter Burung Terbang di Blog

Step 1

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

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<!-- floating twitter Bird -->
<script type="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/twitterburungterbang.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCFL8LOYsmba6H9FbnVHuShTX4J6LpMfDXAnIr1jT59s-0raEfuX-uDsHrxVJY49Op70a8w6glyUiaEFY8e3fzjgcWE9xLqn03R3zV10878Jy9xY3INvjGh3YmmiirRh4rC3TDhlFxZk/s320/burung%2520twitter%2520terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://thekampoengblogger.blogspot.com/";
tripleflapInit();
</script>

 Step 3

Klik Save

Catatan!
  • Ganti username dengan nama user name twitter anda
  • Bila anda ingin mengubah warna burung, ganti URL Gambar yang diberi warna merah dengan URL Gambar berikut.

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxaLcMWvETYrdqkbrEZ5Jv_JKLbn3jXOMF0OIxOogNQo1dr9qpqRB48BvbnNpA0JXOd0Z4sSjUb40Dmqw_qKTosDSOOtHHA6fFpXfwG_WCt7KvOn9-L-PO9hi0edyp7GSKeyQTwGgc3pY/s320/burung%2520putih.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilgHHN5NE66b8MQS4-PTOY0pqGjnlTMM1Xm6jwvtT2CwBpi2sbIklytoOotcRs7z62iszSt1I1BrwkDzFSBwAQOcDSqPghoZDf7VC2Y3xlbMOJfxezwTiYQPW9ZQecUu56P3UrMyAWWi8/s320/burung%2520merah.png

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_D7pYHpJqJoJZN9JjXNzO3Hzsl7iFxefE1MdzmOfgi-UDzU7lkm-0MHh74qGBqeI_WbjcR-b24MPpFt5s5Adkti98-vX5Ipd5iOsEpU8ci5mHBzVyBrqB1xOJexHSmeBh5O-D6re344Y/s320/burung%2520kuning.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7z1BHZmhOUI6yvor_TXRx-HRi1mu61l-wQCIvXehXk19Fts16XgpuzrKZ6wqESoRZvBZRkqsX2jyU6E9e8jkduOXJOu8YNOl6jWiMdBHzbxMuQsFuVQ4JtAS1XIquQIWouRKBRpB8hY/s320/burung%2520hitam.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgclM7Ev3yS5wMT55nw_IqH_xVjylZL8yOsaC5fz75NoKhawlgHl2_t0N-zPq_qBi-Dm7nDuWcA8R5ETfxOCY_DxauPkxvQ5qcO93grKrsqPWpKbT2Y6zVM6FjBLxNZ5mf0FY58hJDZx48/s320/burung%2520hijau.png

Warna Cokelat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjeZSfEBdXOVB_WhXy26Fl13Aefax-K42IdjS3nWoqwQ0R2S3Vs-JdINUlJlqlD2MGwpYoi8L33Wqorc3thLu5gWtyi10LnuBccGJ6tB5o_jlKbyeLNoQzJRTDIItm33h9BlcqRXhAas/s320/Burung%2520coklat.png

Warna Biru Tua

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Gdke6LbkyS4k6__Xy3KsW9DHA-tImbhMbqa-sYdwaGAbY4hXn0VSLUwbYTumlKxeeqKYQuhcq4YuPaAuJdIWMvCSiHw2fIhE9b9Kqw8FhLRuvS9_4BjhLDpC96uzOLBsQ9iBDQsmc6Q/s320/Burung%2520Biru%2520tua.png


Selamat mencoba!
Wassalam. 

Membuat Dropcap (Huruf Besar) Pada Postingan Artikel di Blog

Setelah sempat absen beberapa hari, alhamdulillah akhirnya hari ini bisa posting lagi. Nah, pada kesempatan kali ini, saya akan mencoba membahas tentang bagaimana cara membuat dropcap (huruf besar) pada postingan artikel di blog.

Apakah anda tahu apa itu dropcap? Bila anda sering mengoperasikan microsoft word saat mengetik tugas-tugas anda, mungkin anda akan mempunya sedikit bayangan tentang dropcap ini. Dropcap adalah huruf besar yang biasanya terdapat pada awal kata di dalam sebuah artikel. Biasanya dropcap dipakai untuk memulai sebuah artikel baru dalam sebuah tulisan. Bila anda masih belum mengerti apa itu dropcap, silahkan anda lihat gambar di bawah ini.

membuat dropcap (huruf besar) pada postingan artikel di blog

Membuat Dropcap (huruf besar) Pada Postingan Artikel di Blog

Sebelum anda melakukan perubahan 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 tepat di atas kode  ]]></b:skin>
/* Kode Dropcap by thekampoengblogger.blogspot.com
----------------------------------------------- */
.dropcap {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:Arial;
font-size:150px;
Catatan !
Untuk memodifikasi dropcap anda, silahkan anda mengubah settingan berikut sesuai dengan keinginan anda.
  • Ganti kode warna #000000 untuk mengganti warna huruf (untuk mencari kode warna yang diinginkan lihat di halaman kode warna)
  • Ganti kode warna #ffffff untuk mengganti background huruf
  • Ganti huruf Arial dengan mengetikkan nama huruf yang anda inginkan (baca bagaimana menambah huruf di blog)

Step 3

Klik Save Template

Step 4

Saat anda akan memulai sebuah tulisan, masukkan kode berikut ke halaman HTML (di samping compose).
<span class="dropcap">huruf awal</span>
Ganti huruf awal dengan huruf awal tulisan anda.
Contohnya : <span class="dropcap">A</span>

Selesai!
Semoga bermanfaat.
Wassalam.

Memilih dan Menambah Model (Style) Huruf (Font) di Blog

Dalam membuat sebuah artikel, atau judul atau apa saja yang berhubungan dengan huruf-huruf, memilih ukuran dan model huruf sangatlah penting, karena ini akan mempengaruhi minat baca dari pengunjung yang datang ke blog anda. Bayangkan saja bila artikel anda dipenuhi dengan huruf yang meliuk-liuk, atau semua huruf di tebalkan, tentunya ini akan membuat orang yang membaca artikel tersebut sakit mata saat melihatnya. Terlebih lagi bila ternyata artikel anda adalah artikel yang berupa paragraf, dijamin, pengunjung anda mungkin akan segera menekan tombol close pada sudut bar browsernya. Anda tidak ingin blog anda seperti itu kan? Nah, bila anda ingin mengetahui seperti apa bentuk font yang baik, sekedar tips, sering-seringlah blogwalking ke blog orang lain, lihatlah bentuk fontnya, apakah artikelnya menyenangkan untuk anda baca atau tidak, karena artikel yang baik, bukan hanya sekedar penuh style dan warna warni, tapi syarat utamanya adalah enak dipandang mata.

memilih dan menambah model (style) huruf (font) di blog


Lalu, bagaimana bila anda ingin mengubah huruf di blog anda namun ternyata huruf yang tersedia hanya terbatas? Nah, kali ini saya akan sedikit membantu anda mengenai hal ini. Saya akan membahas mengenai bagaimana cara menambah dan mengganti model (style) huruf (font) di blog. Silahkan anda simak caranya berikut ini.

Memilih dan Menambah Model (Style) Huruf (Font) di Blog

Memilih Jenis Huruf (Font)

Step 1

Bukalah situs http://www.google.com/webfonts/#

Step 2

Utak-atiklah ukuran hurufnya untuk melihat huruf yang akan anda pilih dalam berbagai ukuran.
menambah dan mengganti model (style) huruf (font) di blog

Step 3

Bila jumlah font yang akan anda gunakan terlalu banyak, anda dapat memilah-milahnya lagi dengan cara mengutak-atik menu filter yang ada pada sidebar kiri halaman.  Aturlah sesuai keinginan anda jenis hurufnya (type font), ketebalannya (thickness), kemiringannya (slant) dan lebarnya (width).

Step 4

Bila anda telah selesai memilih huruf yang anda inginkan, klik Add to collection. Anda dapat memilih lebih dari satu huruf.

Step 5

Klik Use

Step 6

Anda akan diarahkan ke halaman lain. Silahkan centang jenis huruf (ketebalan dan kemiringan) sesuai yang anda inginkan.
menambah dan mengganti model (style) huruf (font) di blog

Catatan!
Bijaklah dalam memilih! Semakin banyak jenis huruf yang anda pilih maka semakin loading blog anda!

Step 7

Copy kode yang diberikan yang akan di pasang di blog anda nantinya.

Menambah Font di Blog

Step 1

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

Step 2

Letakkan kode yang sudah anda copy tadi di atas kode <![CDATA[/*

Step 3

Berikan kode / sebelum tanda penutup pada kode font tersebut.
Contohnya :
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'/>

Step 4

Klik Save Template

Selesai!
Sampai tahap ini font anda sudah bertambah di blog anda. Bila anda ingin mengganti semua font anda  maka silahkan membaca tutorial berikutnya.
Wassalam.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-z__swLRyeu2seodUSOqe_zI-vjRqdwE-XCdf8lkm5CDvE_ncLgml6l9TBNqDsOLW1Fj_VQVR0eUMWDFUwwqnUqNHeRGUnUkFu_Y_xcdifkk_sqwgvuoAmBlDjPTydZ0h1_sX9koj9DwN/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhJaY1o6P8blKny-XXQcWwBKSlmBh0MFqz05xbZ2TN0sDjGfcS6oWH-LnDEj37-5d_HIPbJUfgjnS2r9YlUdSeQIVixjO0S_Qi3GhDhtqDITUEXj0ZrKz-o61sY6f9UZCpB_-oux4l8s/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIKNfe_Ys1Gw-FiGBDkjgNCp7Lj2POV-efu0nphIKNK-NSOS5ARkpEa78SWP4BmLtZ1KaX2BzLY_oM5o9YUNr0E3j5rWuRDbcODEV-awjM8viGObW9Fhy9_LzCzUA3nZPGkBn015fbwE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhJaY1o6P8blKny-XXQcWwBKSlmBh0MFqz05xbZ2TN0sDjGfcS6oWH-LnDEj37-5d_HIPbJUfgjnS2r9YlUdSeQIVixjO0S_Qi3GhDhtqDITUEXj0ZrKz-o61sY6f9UZCpB_-oux4l8s/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.