Cara Mudah Menghias Judul Posting Dengan CSS

Hari ini saya akan memberikan tutorial blogspot tentang bagaimana cara menghias Judul Posting atau Post Title sehingga terlihat menarik atau dapat menambah keindahan blog sobat blogger. Teknik yang akan saya terapkan adalah dengan memberikan efek bingkai (Bingkai dengan round corner) dan menambahkan background pada judul posting. Kenapa sih kita harus menghias atau memodifikasi tampilan judul posting? Karena judul posting adalah salah satu penggerak yang membuat pengunjung blog tertarik untuk membaca setiap posting yang kita publikasikan di blog.

Untuk menghias tampilan post title atau judul posting yang terdapat di blog, kita akan menggunakan kode CSS. Karena menggunakan kode CSS, sobat blogger pun tidak perlu memeras keringat untuk edit template karena kode CSS dapat kita masukkan ke template kita melalui laman Blogger Template Designer. Untuk lebih detailnya, ikuti tips trik blogspot berikut.
Cara Membuat Bingkai Dan Cara Menambahkan Background Pada Judul Posting

Sign In di blogger.com
Pada Menu drop down, klik Template
Klik tombol Costumize
Klik Advanced dan Pilih Add CSS
Copy Paste salah satu dari kode di bawah ini pada kolom yang tersedia

Kode CSS Pertama



.post-title {background: url("http://i1269.photobucket.com/albums/jj591/aditya9172/h3.png") no-repeat 4px center transparent;font-size: 20px;font-family: Oswald;font-weight:normal;padding: 3px 10px 3px 80px;color: #0274be;/*By blog-toolz.blogspot.com*/border: 3px solid #5bb5f0;text-shadow: 0 1px 0 #CCC;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;/*By www.tutorialblogspot.com*/box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;margin: 15px 3px;text-transform: uppercase;line-height: 1.3;}

Kode CSS Kedua



.post-title
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:auto;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
transition:width 3s;
width:auto;-moz-transition:width 3s; /* Firefox 4 */
-webkit-transition:width 3s; /* Safari and Chrome */
-o-transition:width 3s; /* Opera */
}
.post-title:hover
{
width:auto;background:#FAFAFA;
}


Klik Appy to Blog untuk menyimpan perubahan.

Tambahan:
Kalau sobat blogger menggunakan template bawaan blogger.com, kode CSS tersebut akan langsung bekerja di template sobat. Bagaiman dengan template hasil download? Kalau kode tersebut tidak bekerja, ganti kode .post-title menjadi .post h2

Kalau sobat blogger masih bingung, mamfaatkan kolom komentar di bawah ini untuk bertanya

Cara Membuka Aplikasi Android di PC (Emulator)

Android merupakan OS Bagus dan Banyak Sekali pengunanya untuk handphone dan tablet milik google.inc yang secara mengejutkan mampu menandingi OS terbaik milik Apple IOS yang terpasang pada iPhone. Hmm buat kalian yang belum mempunyai handphone atau tablet namun ingin merasakan bagaimana hebatnya OS Android ini jangan khawatir, kalian bisa memainkan android langsung di komputer dan laptop kalian dengan bantuan sebuah emulator. berikut 2 emulator terbaik untuk memainkan android di PC maupun laptop anda.

Berikut ini 2 cara membuka aplikasi andorid di PC dengan emulator gratis:

1. BlueStacks

adalah program menarik untuk Windows dan MacOS yang akan memberikan anda sensi menjalankan Permainan favorit dan aplikasi Android tepatpada sistem desktop Anda. Benar-benar gratis untuk men-download dan menggunakannya juga sangat mudah untuk memulai software ini.

Pertanyaan pertama tentang program ini adalah: apakah Ia akan bekerja dengan akun Google Play saya? Pertanyaan kedua saya adalah: Apakah BlueStacks akan mampu menandingi perangkat keras (handphone android) yang tepat untuk setiap aplikasi saya ingin menjalankan? Jawaban untuk pertanyaan pertama adalah tidak lebih rumit,dengan kata lain: ya. Ini akan bekerja dengan account Google Play Anda yang sudah ada. lalu apa pentingnya Google Play? Google Play digunakan untuk mencari ribuan aplikasi dan game. kemudian bagaimana cara mendapatkan aplikasi dan game dari google play? pergi ke browser seperti pada browser Android anda yang sebenarnya, di mana Anda dapat masuk ke account Anda dan mendapatkan akses ke aplikasi dibayar maupun gratis pada account Anda. Alternatifnya adalah dengan masuk ke menu, kemudian setting, kemudian pengaturan account, kemudian menambahkan account itu tidak akan lama untuk menyelesaikannya. Pertanyaan kedua sedikit lebih kompleks tetapi jawaban dasar adalah ya, mendukung hampir semua aplikasi di luar sana. Saya tidak dapat menemukan sebuah aplikasi yang tidak akan berjalan di BlueStacks. Jika anda ingin menjajal emulator ini silahkan gunakan link download cara membuka aplikasi andorid di PC (emulator) BlueStacks berikut: Download Page

2.Youwave

Lalu cara membuka aplikasi andorid di PC (emulator) yang kedua adalah dengan menggunakan software sejenis, namun sangat disayangkan software ini harus berbayar . Youwave merupakan Sebuah software aplikasi emulator android dengan menggunakan Virtual box.

Namun untung saja versi sebelumnya masih free atau gratis kalian dapat mendapatkan emulator Youwave android versi gratis ini berikut: Download page . Sekian postingan kami tentang cara membuka aplikasi andorid di PC (emulator) dengan menggunakan emulator Youwave dan emulator BlueStacks. Saya harap anda berhasil memainkan aplikasi-aplikasi android yang menyenangkan langsung di PC kalian.

Menginstall WeChat di PC

Akhir-ahir ini, mungkin Anda biasa melihat jeda komersial aplikasi chating WeChat di beberapa stasiun TV dengan model iklannya Gisella Anastasya.

Tidak butuh waktu lama, aplikasi mobile ini langsung meroket popularitasnya khususnya di Indonesia. Aplikasi ini sendiri bahkan telah digunakan oleh sekitar 300 pengguna dari seluruh dunia. Yang menjadi kelebihan dari aplikasi chat ini yaitu selain gratis untuk di install juga lintas platform. Artinya, anda dapat memakai aplikasi ini pada ponsel iphone, blackberry, Android, atau pun Windows mobile.

Namun sayangnya, aplikasi ini memang diperuntukkan untuk mobile smartphone saja dan bukan untuk digunakan pada PC. Bagi Anda yang tidak memiliki smartphone, jangan berkecil hati karena dengan trik berikut ini Anda pun bisa menggunakan Aplikasi ini di PC anda.

Ikuti langkah berikut:

1. Ada 2 Software untuk menjalankan Aplikasi Android, untuk bisa menjalankan aplikasi Android di PC. Anda bisa mendownload software nya  di SINI.

2. Anda juga memerlukan file .apk aplikasi WeChat. Anda bisa mendownloadnya di bawah ini :

DOWNLOAD

3. Setelah dua file tersebut Anda download, kemudian install software Bluestack terlebih dahulu. Setelah selesai, kemudian klik (jalankan) file WeChat yang telah Anda download tersebut maka WeChat akan terbuka di bluestacks.

Bagaimana ? Menarik bukan ? Selain WeChat Anda juga bisa mendownload aplikasi Android lainnya dan menjalankannya di PC.

Selamat Mencoba !

Cara Mendapatkan Ratusan Hingga Ribuan Like Status Facebook

Cara Mendapatkan Ratusan Hingga Ribuan Like Status Facebook. Cara agar status facebook mendapat ratusan jempol/like atau cara agar status facebook dilike ribuan orang. Pasti kamu bosan dengan status sobat yang sepi dengan like, sobat pasti ingin status di facebook kamu banyak like. Disini saya akan memberi tahu agar yang like status facebookmu banyak, caranya adalah dengan menggunakan autolike. Auto like adalah  sebuah progam untuk menghasilkan like yang banyak bahkan bisa mencapai ribuan like dan auto like ini bisa mencapai ribuan like. contohnya:

Bagaimana hasilnya memuaskan kan?. Kamu bisa simak cara mudah diatas dengan beberapa situs penyedia autolike berikut:

1. Spenza Sumpiuh.
2. FB Auto Liker.
3. Cyber Zombie.
4. Post Liker.
5. Indoliker.
6. Arisan Jempol.
7. Like Hoot.
8. Autoliker Me.
9. Likelo.
10. Status Liker.
11. Oke Like.
12. To Like.

Kamu bisa pilih salah satu situs penyedia autolike diatas, mungkin situs website tersebut masih sedikit, insya allah saya akan mengupdate kembali artikel ini untuk situs web autolike terbaru.. Selamat Berburu Like..

Membuat widget FB, Tweet, RSS di blog

Widget Blog : Tombol Jejaring Sosial Facebook dan Twitter dengan CSS 3 - Seperti yang kita ketahui bahwa facebook dan twitter merupakan jejaring sosial yang paling banyak di gemari terutama oleh kalangan remaja, dengan situs tersebut memudahkan kita untuk berinteraksi secara gratis dan menarik. 

Untuk kali ini saya akan berbagi script Widget Blog Facebook dan Twitter dengan CSS 3 yang jika di sorot dengan pointer maka gambar tersebut akan membesar, penasaran seperti apa penampakannya berikut adalah screenshot Widget Blog Facebook dan Twitter dengan CSS 3:

Screenshot :

INI Script WidgetNya :

<!--Social Network Buttons Widget By SalamSuksesBoys.blogspot.com-->
<style>
/* MoreBlogTools.com */
.MBT-bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.MBT-bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.MBT-bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.MBT-bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>

<ul class="MBT-bubblewrap">
<li><a target="_blank" href="http://facebook.com/NilaiLahhAkku">
<img src="http://3.bp.blogspot.com/-luB94ORNgho/UHwO4URAQoI/AAAAAAAAAME/MS5Jf7ombVo/s1600/facebook%252BMoreBlogTools.png" title="I Am On Facebook (Add)" /></a></li>

<li><a target="_blank" href="https://twitter.com/BoysDhika">
<img src="http://1.bp.blogspot.com/-lC9tpit-g2k/UHwO7AHPOfI/AAAAAAAAAMc/VLrKnEd_VRw/s1600/twitter%252BMoreBlogTools.png" title="I Am On Twitter (Follow)" /></a></li>

<li><a target="_blank" href="http://feeds.feedburner.com/SalamSuksesBoys">
<img src="http://2.bp.blogspot.com/-6W5sXShR7BA/UHwO6ZyGT6I/AAAAAAAAAMU/OQIhH7bcTX0/s1600/rss%252BMoreBlogTools.png" title="I Am On RSS Feed (Click)" /></a></li>
</ul>
<!--Social Network Buttons Widget By SalamSuksesBoys.blogspot.com-->

Catatan : Anda Bisa ubah URL facebook, URL twitter dan URL feedburner Menggantinya dengan URL milik anda sendiri tentunya. :)

Cara Pemasangan :

1. Masuklah ke Akun Blogger.com milik anda
2.  Pergi ke TATA LETAK Ingat bukan ==>> HTML
3. Tambah Widget dan pilih HTML/Javascript
4. Copy/Paste Kode yang diatas.
5. Terakhir Lalu Simpan.

Cara Membuat Kotak Judul Postingan Keren

Kali ini saya akan memberi cara untuk memperindah blog anda dengan sebuah efek menarik pada kotak judul postingan. Caranya sangat mudah, anda tinggal copy kode dibawah ini dan letakkan di Html / Javascript.


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/55/93/15023955_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>Red Dragon Designs<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/43/86/15036834_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>Red Dragon Designs<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/42/86/15036824_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/19/76/15036791_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/66/76/15036766_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/23/76/15036732_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/77/66/15036677_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/96/66/15036669_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/56/66/15036665_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/45/66/15036654_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/25/85/15045852_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/27/85/15045872_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/78/85/15045887_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/18/85/15045881_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/66/85/15045866_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/26/85/15045862_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/87/85/15045878_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></b></a>


<style type="text/css">.hover-effects-from{http://reddragondesigns.net/}a:hover {background-image:url('http://c.myspace.com/Groups/00015/55/85/15045855_l.gif'); background-position:top left; background-repeat:repeat; background-attachment:fixed;} </style><a href="http://reddragondesigns.net/" style="position:absolute; top:10px; left:0px; height:75px; width:100px; "><b><small><small><br><center>http://reddragondesigns.net/<br>Hover Effects</small></small></center></a> <br>

Kalo sudah sekarang disimpan dan lihat hasilnya.
Cukup sekian semoga Cara Membuat Kotak Judul Postingan Keren dapat bermanfaat.

Cara Membuat Random Post Dengan Thumbnail

Sore sobat blogger semua, sekarang saya akan membagikan tips Cara membuat widget Random Post atau artikel acak dengan gambar kecil (with thumbnail) keren dan loading ringan. Untuk demonya silahkan lihat pada sidebar kanan blog ini. apakah anda tertarik untuk memasangnya? bila tertarik memasang ini dia caranya sebagai berikut :

Langkah-langkah Widget Random Post/Postingan Acak dengan Gambar (Thumbnail) :

1. Pilih menu tata letak kemudian tambahkan gadget
2. Lalu pilih HTML/JavaScript
3. Kemudian Copy semua kode dibawah ini dan pastekan ke kolom widget ke dalam HTML/JavaScript tersebut, untuk judulnya silahkan sobat bikin sendiri,

<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px; height:36px;padding:3px}
-->
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPmX3aMBjgDUqcailIogDqOD0StdjMQO-HKiNOg5zXaXstAAKb5svdIKJgRypRO8LYemTzxDhAniTJXP-7Mz_DC9ZxeHOJuwyMda-aYeglUd-FnKjnHhv9dfymtuI04Z2qtfkF79m-Pmz/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

 5. Simpan dan lihat hasilnya.

Screenshot :

  
Keterangan :

- Kode #FFFFFF merupakan background widget random post, silahkan sobat ubah dengan warna yang sesuai dengan keinginan anda, untuk melihat kode warna Klik Disini.

-Angka  5 menunjukan jumlah artikel yang ditampilkan

-Angka 60 Jumlah isi cuplikan

-Kata 'Yes' adalah pilihan untuk memperlihatkan tanggal dan jumlah komentar, jika ingin menyembunyikan tanggal dan jumlah komentar, silahkan ganti dengan 'no'

-Jika ingin merubah ukuran gambar bisa anda ubah pada opsi width:36px;heigth:36.

Oke itulah tips kali ini yang bisa saya bagikan buat rekan-rekan semuanya, semoga artikel ini bermanfaat buat yang membutuhkannya, atas perhatiannya dan kunjungannya ke blog yang sederhana ini saya ucapkan terima kasih.oh iya jangan lupa tinggalkakan komentar,serta kritikannya ya

Cara Membuat Random Post Bergerak Di Blog

Z-T Blog - share-share-share lagi.. :D kali ini mau berbagi bagaimana membuat recent post random/mengacak dengan thumbail.. mungkin ini bisa membantu sobat kalau ada posting yang lama dan jarang di lihat orang lain lagi, dengan adanya recent post ini, karena berkerja menampilkan posting secara random, ada kesempatan posting sobat yang sudah lama dan kusam akan muncul kembali dan pengunjung pun bisa melihatnya juga.. lumayankan untuk menambahkan popularitas untuk post sobat yang sudah lama.. :D 

Fitur

• Berganti post dengan cara Bergerak Ke Bawah

Cara

1. masuk ke Tata Letak
2. Tambahkan Gadget
3. cari HTML/JavaScript
4. masukan kode di bawah ini...
5. Lalu save.. :)

<div style="margin-bottom: 15px;">

<style type="text/css">

#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}

#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:70px;padding:1px;list-style:none;}

#rp_plus_img a{color:#3366ff;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}

#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>

<script type="text/javascript">

var speed = 400;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 20;

var numchars = 60;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

</div>

Keterangan :

1. kode yang warna Hijau adalah kecepatan untuk berpindahnya post ke post lain,, jika perlu sobat bisa ubah kecepatannya..
2. kode yang warna Pink adalah waktu berhentinya post/di pause.. bisa di ubah juga jika perlu..
3. kode yang warna Orange adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati..  :)

nanti hasilnya akan seperti ini..

saya ambil dari blog saya sendiri.. hehee.. :D ,menarik tidak..? :D semoga bermanfaat saja untuk sobat semuanya.. saya hanya berbagi.. berbagi itu indah loh sobat.. hahaa.. :D ,jangan lupa tinggalkan komen yaa..? terima kasih.. :)

Membuat Iklan Banner Ukuran 125 x 125

Membuat banner 125x125 mungkin akan menjadi sesuatu yang menarik untuk dipasang pada blog (sebenarnya ini alasan saya memasang banner 125x125 pada katakanhey.blogspot.com) haha. Tapi diluar dari ketertarikan banner 125x125 ini, dapat juga berbuah hasil yang maksimal jika ada situs lain yang ingin memasangkan iklannya.

Cara Membuatnya :
1. Masuk pada Blogger
2. Pilih Rancangan > Elemen Laman
3. Tambahkan 1 Gadget/Widget HTML/JavaScript
4. Paste-kan kode berikut dalam widget tersebut

<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center>
<!-- iklan#1 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- iklan#2 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
</tr>
<tr>
<td><center>
<!-- iklan#3 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- iklan#4 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</td></center>
</tr>
</tbody></table>
</div> 

5. Ganti URL iklan anda dan URL gambar iklan anda sesuai dengan URL iklan yang anda pasang dan gambarnya. (modifikasi saja)
6. Simpan.

Selamat Mencoba

Cara Membuat Banner Bergerak Bolak Balik

Banner berupakan gambar yang ditampilkan pada halaman blog yang bertujuan memperkenalkan / mempublikasikan sesuatu. Banner biasanya digunakan sebagai alat untuk mengiklankan sesuatu, Banner juga kadang digunakan sebagai link bergambar yang mengarah pada sebuah alamt URL baik itu postingan artikel dan lain-lain.

Jika banner pada sebuah blog semakin banyak tentu ini akan menjadi sesuatu yang rancu, perlu dilakukan manage banner. Cara yang satu ini dapat digunakan untuk memanage banner karna dapat menampilkan banyak banner dalam satu deretan atau sekedar membuat banner Anda menjadi terlihat mencolok karna trik ini akan membuat banner bergerak secara bolak balik dan hanya akan berhenti jika disorot oleh kursor mouse.

Contoh Banner bergerak :

Sudah anda bayangkan jadinya kalau dipasang pada blog Anda.
Langkah pembuatan :

1. Masuk pada akun Blogger Anda
2. Pilih Rancangan >>  Elemen Laman >> Tambah Gadget pada tempat yang diinginkan
3. Pilih HTML / JavaScirpt
4. Pastekan kode berikut :
   
   
   <marquee align="center" behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="340 px">
   <a href="URL Tujuan Gambar 1" target="_blank"><img border="0" height="80" src="URL Gambar Banner 1" width="130" /></a>
   <a href="URL Tujuan Gambar 2" target="_blank"><img border="0" height="80" src="URL Gambar Banner 2" width="130" /></a>
   <a href="URL Tujuan Gambar 3" target="_blank"><img border="0" height="80" src="URL Gambar Banner 3" width="130" /></a>
   <a href="URL Tujuan Gambar 4" target="_blank"><img border="0" height="80" src="URL Gambar Banner 4" width="130" /></a>
   <a href="URL Tujuan Gambar 5" target="_blank"><img border="0" height="80" src="URL Gambar Banner 5" width="130" /></a>
   </marquee><div style="font-size: 8px; text-align: right;">Widget by<a href="http://www.blooger.co.id/2013/05/banner-berupakan-gambar-yang.html" target="_blank"> SCHOLOVERS blogger</a></div>
   
   
5. Ganti :
   
   • width="340 px" ganti 340 menjadi total lebar banner Anda
   • height="80" ganti 80 menjadi tinggi banner Anda
   • width="130" ganti 130 menjadi lebar persatu banner Anda
   • URL Tujuan Gambar ganti menjadi alamat URL yang dituju oleh gambar
     
   • URL Gambar Banner ganti menjadi alamat URL gamabr banner yang akan tampil
6. Setelah semuanya selesai Simpan tanpa memberikan judul widget dan lihat hasilnya

Selamat Mencoba & Happy Blogging

Menambahkan Link URL Pada Menu Blog

Pada posting sebelumnya saya membahas mengenai Cara Membuat Banner Bergerak Bolak Balik kali ini cara Menambahkan Link URL Pada Menu Blog.

Pada menu template standart terdapat beberapa kategori, seperti yang anda lihat diatas. Menu-menu tersebut belum mempunyai link khusus pada awalnya sehingga menjadi kurang berguna. Bagi teman-teman yang ingin menambahkan link pada menu blognya silahkan ikuti langkah-langkahnya:

1. Masuk pada blogger.com
2. Pililh Rancangan > Edit HTML
3. Lalu cari kode berikut. cepatnya tekan ( ctrl+f )

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

Pada banyak template kode diatas merupakan kode awal sebuah menu yaitu Home menu

4. Jika ingin mudahnya cari nama menu blognya saja. Misal nama menu blognya Blogging.

 5. Setelah anda temukan

<li><a href='Your Link Here'>Blogging</a></li>

ganti kalimat your link here dengan link yang anda inginkan.
6. Lalu Simpan Tempalate

Selamat Mencoba

Membuat Contact Form Pada Blog

Beberapa waktu yang lalu, saya menerima email dari Contact Form blog saya. Teman saya ini bertanya "cara buat contact seperti ini gimana gan? "  dan saya memjawab "gampang ", juga telah berjanji untuk membuatkan artikel untuk membuat Contact Form atau lebih familiar disebut Contact Me. Inilah saya dan artikel Membuat Contact Form Pada Blog untuk memenuhi janji.  : D

Sebenarnya peranan Contact Form ini untuk blog kita sangat penting. Form ini akan memjaga ke-privacy-an komunikasi antara Admin blog dan Visitor. Contact Form ini juga terbukti menghindarkan Admin dan Visitor terkena spam saat berkomunikasi, juga membantu Visitor blog Anda untuk bertanya lebih lanjut mengenai suatu hal.

Untuk membuat Contact Form :

1. Silahkan pilih salah satu penyedia jasa Contact Form dibawah ini :
   
   • http://kontactr.com/
   • http://mycontactform.com/
   • http://emailmeform.com/
   • http://www.123contactform.com/
   • https://www.formspring.com/
     
     
2. Buatlah akun pada penyesia jasa Contact Form yang telah anda pilih. Setelah terdaftar dan tervalidasi Anda dapat mengubah tampilan dasar Contact Formnya dengan Costumize. Penggunaan setiap situs-situs tersebut sangat mudah sehingga tidak perlu dibahas lagi pada artikel ini.
3. Setelah itu copy kode dari form yang telah dibuat. Ada banyak pilihan untuk memasang kode pada blog yang bisa Anda pilih ; untuk blogger/bloggsopt atau pilih kode HTML/JavaScript. Jangan pilih kode jenis PHP.

Memasang pada Blogger :

1. Masuk pada Blogger
2. Pilih Posting >> Edit Laman >> Laman Baru
3. Pada Laman Baru pilih Edit HTML
4. Paste kode Contact Form yang sudah di copy sebelumnya
   
   
5. Setelah selesai pilih Tayangkan Laman

Selamat Mencoba & Happy Blogging