Home All posts

Thursday, December 13, 2012

Cara Membuat Dropdown Menu Label

✔ Jaringan Share Comment
Tips Blog kali ini adalah Cara Membuat Dropdown Menu Label. Ini adalah salah satu tips yang bisa sobat gunakan untuk memodifikasi label blog sobat, di postingan saya sebelumnya adalah Cara Edit Label Blog Dengan CSS3. Dropdown menu label ini salah satu keunikanya adalah label blog sobat menjadi dropdown, sehingga dapat merampingkan tampilan label dan dapat menghemat tempat blogsobat. Contoh nya seperti gambar dibawah ini :


Cara Membuat Dropdown Menu Label : Ikuti langkah-langkah dibawah ini :

1. Sobat cari kode html label blog sobat, kode nya seperti dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

2. Ganti dengan kode dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Save template dan llihat hasilnya.

Note :
  • Untuk menghindari eror jangan lupa backup template.
  • Width 100% adalah lebar nya, silahkan sobat ubah dan disesuaikan.
  • Click to choose a label, juga bisa sobat ganti dengan kata-kata sobat sendiri.
Okey cukup sekian sob tips blog kali ini,  yaitu Cara Membuat Dropdown Menu Label.

Semoga tips ini bermanfaat.

Script : www.bloggersentral.com

Tuesday, December 11, 2012

Cara Membuat Floating Menu Vertikal

✔ Jaringan Share Comment

Satu lagi tips blog untuk sobat blogger yang ingin mempercantik tampilan menu blognya, kali ini menu yang akan saya share adalah cara membuat floating menu vertikal. Floating menu ini posisinya melayang disebelah sidebar blog sobat dan akan mengikuti naik turun mouse yang sobat gerakkan.

Bagaiman cara membuat floating menu vertikal ini ? ikuti langkah-langkah dibawah ini :

Copy kode script di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

#floatMenu { position:absolute; top:170px; left:65%; margin-left:290px; width:70px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:0px solid #99; border-left:3px solid #fff; text-decoration:none; color:#fff; padding:5px 5px 5px 25px; width:80px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit-box-shadow: #333 0px 0px 10px; } #floatMenu ul li a:hover { color:#AD3D29; background-color: #000; border-right:3px solid #999; width:100px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 0px; } #floatMenu ul.menu1 li a:hover {border-color:#bdbdbd;} #s { background:#AD3D29; color:#00ff00; width:230px; padding-left:15px; font-weight:bold; font-size:10px; padding:1px; border-bottom:1px solid #F0F0F0; border-right:1px solid #F0F0F0; border-top:1px solid #F0F0F0; border-left:0; font-family: Verdana; }

Kemudian cari lagi kode </head>. Copy kode script di bawah dan pastekan tepat di atas kode </head>

<script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery_mini.js'></script> <script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery.dimensions.js'></script> <script language='javascript'> var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:500,queue:false}); }); }); </script>


Setelah itu cari kode </body>.  Copy kode script di bawah dan pastekan tepat di atas kode </body>
 

<div id='floatMenu'> <ul class='menu1'> <li><a href='#' title='Link 1'> Link 1 </a></li> <li><a href='#' title='Link 2'> Link 2</a></li> <li><a href='#' title='Link 3'> Link 3 </a></li> <li><a href='#' title='Link 4'> Link 4</a></li> <li><a href='#' title='Link 5'>Link 5</a></li> <li><a href='#' onclick='MGJS.goTop();return false;'> Back to top </a></li> </ul> </div>


Kemudian save template dan lihat hasilnya.
Cukup sekian tips blog kali ini  Cara Membuat Floating Menu Vertikal . Semoga Bermanfaat

Cara Membuat News Ticker

✔ Jaringan Share Comment
Tips Blog kali ini yang ingin saya share ke sobat blogger adalah Cara Membuat News Ticker.
News Ticker adalah headline postingan terbaru blog kita, widget ini menampilkan beberapa postingan terbaru kita dalam bentuk teks berjalan. Untuk lihat demonya silahkan lihat gambar dibawah ini.


 Cara Membuat News Ticker :

1.    Login ke Blogger

2.    Pilih tab Design > Edit HTML

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

4.    Copy kode di bawah ini dan pastekan tepat di bawah kode ]]></b:skin>

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/> <script type='text/javascript'> //<![CDATA[ var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e}; var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}}; //]]></script> <style type='text/css'> .titlefield{ /*CSS for RSS title link in general*/ text-decoration: none;} .labelfield{ /*CSS for label field in general*/ color:#666;font-size: 100%;} .datefield{ /*CSS for date field in general*/ color:#eee;font:normal 13px Arial;} #example1{ /*Demo 1 main container*/ width: 800px; height: 14px; border: 0px solid #aaa; padding: 0px; font:bold 13px Arial; text-transform:none; text-align:left; background-color:transparent;} code{ /*CSS for insructions*/ color: #000;} #example1 a:link, #example1 a:visited {color:#FFC932;text-decoration:none;} #example1 a:hover {color:#fff;text-decoration:none;} .newspic{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_Hh-S1vaBnUtSKnqhIfwCKlA5LetVRLJMfC3zL2YeOwRGfwjzD2C3UTmFs6SeB9jiF6o_H2o5wu7EVP7uqsKavCzvlfnCaxZiNtVKJNvWLXE2DSh3zO5Sv62e2G477dpznlG-tkJi98/s1600/bg_news.png) no-repeat top center;width:970px;margin:0 auto;padding:0 auto;height:26px}.news{width:970px;margin:0 auto;padding:0 auto;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#ddd;overflow:hidden;clear:both}.news a:link,.news a:visited{color:#ddd;text-decoration:none}.news a:hover{color:#fff;text-decoration:underline} </style>

5.    kemudian cari kode  <div id='main-wrapper'>

6.    Copy kode di bawah ini dan pastekan tepat di atas kode <div id='main-wrapper'>

<div class='newspic'> <div class='news'> <div style='float:left;margin-left:10px;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'> News Update : </div> <div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'> <script type='text/javascript'> var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;) cssfeed.addFeed(&quot;Tutorial Blog&quot;, &quot;urlblogsobat/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script> </div></div></div>


8.     Ganti tulisan urlblogkamu dengan url yang kamu miliki

9.    Setelah selesai simpan template dan lihat hasilnya.

Selesai sudah tutorial Cara Membuat News Ticker. Selamat mencoba, semoga berhasil dan bermanfaat

Script by : www.tutorial-4u.com

Monday, December 10, 2012

Cara Menginstall Ulang Windows Xp..

✔ Jaringan Share Comment
Sebagian orang Cara Install Ulang Windows Xp di Komputer PC atau Laptop kita barangkali merupakan suatu perihal yang gampang,, Tetapi untuk yang lain yang baru mencoba atau mungkin yang sudah lupa Cara Install Ulang Windows Xp ini cukup menyusahkan,, Buat saya sendiri juga terkadang kelupa'an dan ada pula keliru mungkin karena saya jarang melakukan hal yang seperti ini mungkin ya.. Hehee.. ☺

Cara Install Ulang Windows Xp memang tidak semudah Cara Install Ulang Windows 7,,  Namun bisa saja jadi mudah yang penting kita teliti dalam menjalani tahapan demi tahapannya..

Berikut selengkapnya :

1. Sebelumnya jangan lupa Masukkan terlebih dahulu CD Windows Xp yang kita gunakan,, dan pastikan CD tersebut tidaklah rusak,, Sekarang Restart Komputermu saat di awal Komputer Menyala Tekan Tombol F2 untuk melakukan Setup di Menu Bios,, atau terkadang harus menekan Tombol Del,, dengan tulisan "Del To Setup"..


2. Jika sudah masuk ke Menu Bios akan ada Tampilan seperti di bawah ini mungkin akan berbeda di setiap Komputer, tapi tinggal sesuaikan saja..




3. Di Menu Boot,, Pilih Boot Device Priority,, Pada Menu First Boot pastikan terpilih dengan memakai CDROOM..


Tekan Tombol F10 untuk Menyimpan dan Exit,, Maka Komputer mu akan Merestart..

4. Setelah Restart akan muncul Tulis Pres Any Key To Boot From CD,, Silahkan kamu tekan tombol sembarang..

5. Setelah itu,, Pada tampilan berikut tekan Enter untuk lanjut pada Proses Instal atau R untuk melakukan Reparasi Windows di Recovery Consule atau F3 untuk Mengakhiri Proses Instal..

6. Pada Menu Lisencing Agreement tekan F8 untuk lanjut dan ESC untuk Batalkan Proses..


7. Pada Menu Partisi,, Pada Partisi C: Tekan D untuk Delete Partisi C:,, Kemudian Tekan L untuk menyetujui Proses Delete.. Cara ini dugunakan agar tidak ada tumpang tindih dengan Windows yang lama..


8. Pada Partisi C: yang telah terhapus Tekan Tombol C untuk Create atau membuat Partisi,, Isikan jumlah Kapasitasnya sesuai kebutuhan,, Atau biasanya sudah otomatis dengan jumlah kapasitas maksimumnya..


9. Tekan Enter pada Partisi C: untuk memulai Instal dan Pilih NTFS File System (Quick) atau FAT File System (Quick) lalu tekan Enter..


10. Jika sudah maka Proses Instalasi Windows Xp dimulai seperti gambar dibawah ini :


11. Bila Proses Setup selesai,, Komputer kamu akan Merestart,, Dan jika ada tulisan Pres Any Key To Boot From CD,, Biarkan saja sampai muncul seperti gambar di bawah ini :


12. Setelah itu akan tampil Menu berikut dan kamu Klik Tombol Next..


13. Isikan dengan Nama dan Organisasi Kamu kemudian Tekan Next..


14. Isikan Produk Key atau Serial Number dan Tekan Next..


15. Isikan Nama Komputer dan Password (ataupun dikosongkan untuk password) dan Tekan Next..


16. Set Time Zone pada Posisi (GMT+80:00) atau pilih Hanoi Bangkok,, Jakarta dan Klik Next..


17. Setelah itu akan tampil seperti di bawah ini,, Dan biarkan saja sampai Restart..


18. Berikutnya pada Menu "Welcome To Microsoft Windows" pilih Next..

19. Bagian Menu "Help Protect your PC" pilih Not Right Now..

20. Berikutnya tinggal Next dan pilih Tombol FINISH..



Dan Cara Instal Ulang Windows Xp pun selesai. Semoga dapat bermanfaat..

Thursday, December 6, 2012

Cara Mengganti Background Blog Slideshow Otomatis

✔ Jaringan Share Comment


Jujur saja sob saya belum pernah memakai tips blog yang satu ini, yaitu Cara Mengganti Background Blog Slideshow Otomatis. Kemaren ada salah satu teman blogger yang komen dan bertanya cara mengganti background blog tapi otomatis berubah-rubah bagaimana ?. Buat sobat yang pengen mencoba tips blog ini, silahkan ikuti langkah - langkah dibawah ini :
  •     Login dulu ke Blog / Website anda 
  •     Masuk ke Edit HTML / CSS
  •     Cari kode ini di CSS anda ( tekan CTRL+F biar lebih gampang )  body 
  •     Ganti Semua Bagian Body dengan CSS ini
body{color:black;font:x-small Georgia Serif;font-size:small;text-align:center;margin:0;background:gray url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv9bBAgJ2viTOvmwRR0LOvbDpPREw_QzV43sZ7rjffp4XBQ-D4OGhF18qp2PDFUoyAsBkWO3HFIf1ONWQid06CtRLxWK67RVuy5U5qiXq6ulVjhR3xZD8TRiQiQA344B_5oC5G__Tx-Zk/s1600/backgroundfbdarksanta.jpg) repeat-x fixed top center;padding:0;margin:0;overflow-y:scroll;line-height:1.28;text-align:left;direction:ltr;unicode-bidi:embed;display:block;-moz-background-size:100%;-webkit-background-size:100%;background-size:100%;}html body .region-inner{min-width:0;max-width:100%;width:auto;}
  •     Kemudian Cari Dengan CTRL+F Lagi
</body>
  •     Setelah itu letak kan Script ini diatasnya
<script src='http://template-santa.googlecode.com/files/slideshowseptember.js'/>
<script type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script>
  •     Jika sudah Simpan Template
Demikianlah sob Cara Mengganti Background Blog Slideshow Otomatis. Semoga berhasil mempraktekanya dan jangan lupa di backup dulu template nya buat meminimalisir eror.

Script by : santa-mars.blogspot.com

Tuesday, December 4, 2012

Cara Mudah Membuat Privacy Policy

✔ Jaringan Share Comment

Buat sobat blogger yang ingin membuat Privacy Policy tapi terkendala bahasa inggris, tidak usah khawatir karena ada sebuah situs yang bisa sobat gunakan untuk membuat Privacy Policy secara online dengan cepat dan mudah.

Manfaat Privacy Policy 

Pertama : Sebenarnya tidak diharuskan suatu blog memiliki privacy policy, tapi buat sobat yang khusus memonetize  blog nya dengan google adsense, privacy policy menjadi hal wajib yang harus ada di blog sobat, karena Google adsense mewajibkan hal itu.

Kedua : Alasan supaya terlihat profesional dan menarik. Itu menurut teman-teman s
aya yang juga seorang blogger. Kalau menurut sobat bagaimana ?

Cara Mudah Membuat Privacy Policy

1. Sobat kunjungi situs ini : www.privacypolicyonline.com
2. Silahkan sobat isi data - data sesuai yang diminta di situs tersebut.
3. Setelah itu copy paste artikelnya dan copy di blog sobat. Sangat mudah, cukup copy paste saja tanpa harus regristasi.

Sampai disini sobat sudah berhasil membuat privacy policy dengan mudah.

Terima kasih telah membaca artikel Cara Mudah Membuat Privacy Policy.
Semoga Bermanfaat.




Monday, December 3, 2012

Situs Edit Foto Online Terbaru

✔ Jaringan Share Comment

Pada postingan kali ini yang ingin saya share adalah kumpulan Situs Edit Foto Online Terbaru. Pada postingan saya sebelumnya saya menampilkan 10 situs edit online yang bisa sobat pergunakan. Sobat bisa lihat di postingan saya sebelumnya di cara edit foto secara online. Kali ini ada 5 situs tambahan yang bisa sobat pergunakan untuk keperluan edit foto secara online, apa saja situs-situsnya ?

1. Festisite.com
Anda bermimpi mengenai wajah anda tampil dalam lembaran uang kertas suatu negara? Anda dapat mewujudkannya disini. Dengan situs ini anda dapat membaut foto anda muncul di mata uang berbagai negara. Tentu saja ini palsu dan hanya untuk bersenang-senang saja. Ada banyak mata uang yang dapat dipilih, tergantung mana yang anda sukai. Tentu saja ini dapat menjadi lelucon yang baik bagi anda. Untuk melakukannya, anda dapat mengunjungi situs itu di alamat
www.festisite.com/money

2. Pixenate.com
Situs edit foto online ini cukup disukai banyak orang. Ada banyak fitur yang tersedia dalam situs ini, mulai dari sepia, red eye, resizing, cropping atau zooming. Selain itu ada banyak efek yang menarik untuk membuat tampilan foto anda lebih menawan. Anda bisa berkunjung ke situs ini dan mencoba mengutak-atik foto anda lewat berbagai macam fitur yang ada di dalamnya. Untuk hal ini anda dapat berkunjung ke alamat www.pixenate.com

3. Loonapix.com
Situs edit foto online ini sangat menarik. Ada banyak sekali fitur yang ditawarkan untuk menyulap foto anda menjadi lebih menarik. Foto anda dapat dijadikan seolah sedang dipajang di gedung besar, ditampilkan di kap mobil atau layar kapal. Tampilan latar belakang yang beragam ini sangat menarik dan membuat kita tak henti mengutak-atik. Ada juga beberapa pilihan frame foto yang cantik. Semuanya akan membuat kita berkata, “Wow!”. Kunjungi saja www.loonapix.com

4. Photofunia.com
Situs ini bisa dibilang cukup lengkap diantara yang lain. Ada banyak sekali fitur yang disediakan. Mengolah foto di situs edit foto online ini sangat menyenangkan, banyak fitur yang dapat anda eksplorasi dan gaya yang bisa diaplikasikan pada foto anda. Anda bisa tampil sebagai prajurit ataupun cover majalah. Intinya adalah anda bisa sangat bersenang-senang di situs edit foto online ini.

5. Funphotobox.com
Situs edit ini lebih mirip dengan loonapix dan photofunia, namun tentu saja tidak sama. Memang ada beberapa kemiripan dalam hal efek dan latar belakang. Namun tentu saja ada yang tidak sama di beberapa sisi. Semua menghasilkan foto yang unik dan menarik.

Demikian sob beberapa situs edit foto online yang bisa sobat gunakan secara gratis.
Semoga Bermanfaat.

Cara Merubah Krusor Blog

✔ Jaringan Share Comment

Tips blog kali ini adalah bagaimana cara merubah krusor di blog. Tips ini berguna buat sobat blogger yang bosan melihat tampilan krusor blognya yang itu-itu saja, yaitu berbentuk panah. Sobat bisa merubah krusor  blog nya menggunakan icon-icon yang sangat menarik, sehinga dapat mempercantik penampilan blog sobat.

Cara Merubah Krusor Blog :

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya
<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>
Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin sobat gunakan.

4. Setelah itu, simpan template anda. Selesai

Note : Untuk mengganti icon nya sobat pergi saja ke situs www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa sobat pilih sesuai selera.

Okey, cukup sekian sob tips blog kali ini Cara Merubah Krusor Blog.
Semoga Bermanfaat

Cara Mengetahui Blog Dofollow

✔ Jaringan Share Comment
Tips blog - U Comment I Follow. Sobat pasti sering mendengar dan melihat slogan tersebut ketika melakukan blogwalking, entah itu ditulisan atau di banner. Ini adalah slogan yang digunakan pemilik blog untuk memberitahukan bahwa blog nya bersistem dofollow.Tapi terkadang walaupun sudah dipasang banner bertuliskan u comment i follow, belum tentu juga blog tersebut dofollow. Untuk itu kita perlu mencari tahu apakah benar blog tersebut dofollow. Lalu bagaimana Cara Mengetahui Blog Dofollow ?

Pengertian Dofollow
Dofollow artinya : Link yang di masukkan pada saat berkomentar pada postingan suatu blog, akan ditelusuri lebih lanjut oleh search engine, dalam artian mendapatkan backlink dari blog yang dikomentari tersebut.

Cara Melihat Blog Dofollow:

 1. Instal terlebih hahulu Add-Ons Mozilla disini : Dofollow

2. Restar Browser Mozilla

3. Buka lagi Browser Mozilla, Kunjungi Google, Cari Blog apa saja, Kunjungi Blog tersebut

4. Setelah berada pada halaman home silahkan sahabat klick kanan pada mouse dan pilih "NoDoFollow"


5. Sekarang saatnya melihat apakah Blog yang sobat kunjungi merupakan Blog Dofollow atau bukan?! Lihat warna yang ditampilkan pada setiap link yang ada didalam Blog tersebut, Kalau berwarna Merah berarti Nofollow dan yang berwarna agak biru berarti Dofollow.


Nah sekarang sobat bisa membedakan antara Blog Dofollow dan Blog Nofollow. Sekarang bagaimana cara mengetahui apakah link yang kita masukan melalui kotak komentar Dofollow apa bukan? caranya sama sobat tinggal berkomentar pada blog tersebut dengan menggunakan Name/Url, setelah itu sobat lihat Nofollow nya, kemudian lihat warna biru atau merah.

Nah itulah Cara Mengetahui Blog Dofollow Dan Nofollow Dengan Add-Ons Mozilla.
Semoga bermanfaat.

Image from : www.sundaboy.com

Thursday, November 29, 2012

Cara Membuat Mega Dropdown Menu

✔ Jaringan Share Comment

Sobat blogger bosan dengan tampilan menu yang biasa - biasa saja ? coba pakai menu yang ini saja. Tips blog kali ini, saya ingin berbagi Cara Membuat Mega Dropdown Menu di blog. Menu ini menampilkan banyak sub menu sesuai dengan namanya Mega dropdown, desainya juga keren, sama dengan website-website profesional, dan tidak membuat loading blog berat. Untuk lebih jelasnya silahkan sobat lihat Live Demonya : Mega Dropdown Menu

Bagaimana sob ? Keren bukan ?..Untuk cara membuatnya juga tidak terlalu rumit, ikuti langkah-lngkah berikut ini :

1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
 
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeDROWpIQtKUKtepG1USJEp8TeiAsm7ccfMhMV2Vo5phl9lPsFuvlDvxKeYfbvuhb9mbpxMJFE-J41pNqhoWcJ6TjPw_t99kjg5MITF541ulaM0rQ_lN4BXqhFKcRC-3CmqS9TXGV1D9la/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeDROWpIQtKUKtepG1USJEp8TeiAsm7ccfMhMV2Vo5phl9lPsFuvlDvxKeYfbvuhb9mbpxMJFE-J41pNqhoWcJ6TjPw_t99kjg5MITF541ulaM0rQ_lN4BXqhFKcRC-3CmqS9TXGV1D9la/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}

Simpan.

4. Kembali ke menu Tata Letak > Add Gadget > Pilih HTML/JavaScript > Copy kode di bawah ini.

<div id='menu'>
<li><a class='drop' href='#'>Home</a><!-- Begin Home Item -->
<div class='dropdown_2columns'><!-- Begin 2 columns container -->
<div class='col_2'>
<h2>Welcome !</h2>
</div>
<div class='col_2'>
<p>Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript</p>            
</div>
<div class='col_2'>
<h2>Cross Browser Support</h2>
</div>
<div class='col_1'>
<img alt='' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9zLbHVlzjRSUBo_BiK5Qt_kzmZplUmg-jlQ5LLw8l4hATNpw7eA17nUvIAKcqtBY6iL2nsVePv80QKabKIyOBxeTXKxuWO8btuNHYfSgayMsHzKrfkwEmd7E7lLudjmo3ow8qmR78B0E/s1600/browsers.png' width='125'/>
</div>
<div class='col_1'>
<p>Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a class='drop' href='#'>5 Columns</a><!-- Begin 5 columns Item -->
<div class='dropdown_5columns'><!-- Begin 5 columns container -->
<div class='col_5'>
<h2>Ini adalah contoh untuk kolom 5</h2>
</div>
<div class='col_1'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='italic'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='strong'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_5'>
<h2>Fitur Post Dengan Images</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhp0bKDX03eFFXepivlZHf67q5LNdR4o-55GWDgMRqmw-1EpI2acl9DwoMrKrE-09ae12g0elSwR32lPgqTAnWIi1verK0i0t6Xpzc0lVn3YylQ9uhtqLhA9ud0Tpq8By57Pqvx9mdViTX/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwAtVX3rnFJYEobA09rtIWAAYsap5wzlAQBkBoE3GtPBgaMAO3vWw2gZ_u6k10defhkyf1kU-DV_T2mcANiYD05BAg9-fczeomFEYirIxS9bj9MbeszpOAWp8aIaiAHKzNUB18WkRmZmVs/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
<div class='col_2'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a class='drop' href='#'>4 Columns</a><!-- Begin 4 columns Item -->
<div class='dropdown_4columns'><!-- Begin 4 columns container -->
<div class='col_4'>
<h2>This is a heading title</h2>
</div>
<div class='col_1'>
<h3>Some Links</h3>
<ul>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Useful Links</h3>
<ul>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Other Stuff</h3>
<ul>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Misc</h3>
<ul>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>  
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class='menu_right'><a class='drop' href='#'>1 Column</a>
<div class='dropdown_1column align_right'>
<div class='col_1'>
<ul class='simple'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='http://kimzaqi.blogspot.com/'>Get This Menu</a></li>
</ul>  
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>3 columns</a><!-- Begin 3 columns Item -->
<div class='dropdown_3columns align_right'><!-- Begin 3 columns container -->
<div class='col_3'>
<h2>Lists in Boxes</h2>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>  
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>  
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>  
</div>
<div class='col_3'>
<h2>Here are some image examples</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwAtVX3rnFJYEobA09rtIWAAYsap5wzlAQBkBoE3GtPBgaMAO3vWw2gZ_u6k10defhkyf1kU-DV_T2mcANiYD05BAg9-fczeomFEYirIxS9bj9MbeszpOAWp8aIaiAHKzNUB18WkRmZmVs/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhp0bKDX03eFFXepivlZHf67q5LNdR4o-55GWDgMRqmw-1EpI2acl9DwoMrKrE-09ae12g0elSwR32lPgqTAnWIi1verK0i0t6Xpzc0lVn3YylQ9uhtqLhA9ud0Tpq8By57Pqvx9mdViTX/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>


Selamat sobat sudah mempunyai  Mega Dropdown Menu yang keren.

Cukup sekian tips blog kali ini, Cara Membuat Mega Dropdown Menu. Semoga Bermanfaat.

Script by : blazerracing.blogspot.com

Cara Membuat Receant Post Image Dengan Efek Marquee

✔ Jaringan Share Comment
Tips blog kali ini berguna sobat blogger yang ingin mempercantik tampilan receant post. Tampilan recent post ini lebih mantab, apalagi setiap artikel atau posting yang ada di blog sobat disertai dengan gambar. Selain itu kita bisa menampilkan seluruh artikel atau posting, dari yang masih baru hingga yang sudah lama sekalipun. Lebih cocok lagi bila sobat blogger memiliki  blog yang bergerak dibidang desain inetrior - eksterior, atau gambar dan foto contoh suatu produk, atau apa sajalah sesuai kebutuhan anda, Intinya recent post ini dilengkapi dengan fitur image.



Cara membuat receant post image dengan efek marquee :

Cara nya sangat mudah sob, tinggal copas Kode dibawah ini dan masukkan ke Add Gadget HTML blog :

<div style="float: left;text-align: center;height:253px;padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; ">
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%"  height="214px" border="1">

<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 250;
cellspacing = 10;
borderColor = "#fff";
bgTD = "#ccc";
thumbwidth =200;
thumbheight = 150;
fntsize = 11;
acolor = "#ffffff";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#ffffff";
icon2 = " ";
numposts = 100;
home_page = "GANTI DENGAN ULR BLOG ANDA";
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="250px' +boxwidth+'" border=0 bordercolor="#cccccc" align="left" cellspacing="10px'+cellspacing+'5px" bgcolor="#ffffff'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='yes')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<td><div style="float: left;width:200px;margin-bottom:5px;padding:0px 0px 0px 0px;background-color: rgb(204, 204, 204);border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;"><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></div><br /><div style="float: left;text-align: center;width:190px;height:45px; padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; "><style="font-size: 10px; text-decoration:none; color: #ffffff;><a href="'+posturl+'">'+posttitle+'</a></div>';if(summaryPost==0){trtd='<td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write('<a href="http://www.carabuatwebgratis.com/" target="_blank">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTgJfcDG9fSV3XWiKkCMxUrcIAhwXnV6Sbo2Ghwfn_gvjTZB9M6ooDz7QrRi6XdV23WgoeaPdlzhG4EjTS8zbIAMH_LdM_yzHmha0GeTMpBubR68hsu1PbajQYP3ivzJItD5oezpkxYAr/s104/Tukar+Link.jpg"/></a>');//]]></script></marquee></div>

Catatan :

    numposts = 100; (Jumlah recent post yang akan ditampilkan)
    home_page = "GANTI DENGAN ULR BLOG ANDA";

6. Simpan

Selamat,,sobat sudah mempunyai receant post image yang super keren.

Terima kasih telah membaca artikel Cara Membuat Receant Post Image Dengan Efek Marquee.
Semoga bermanfaat.

Source : www.carabuatwebgratis.com

Cara Membuat Kotak Banner Iklan 125 x 125

✔ Jaringan Share Comment
Tips blog kali ini adalah cara membuat kotak banner iklan 125 x 125. Cara ini berguna buat sobat blogger yang ingin membuat kotak iklan sendiri di blog. Untuk memasang iklan di blog pastinya tidak boleh sembarangan asal memasang nya, karena selain bisa mempengaruhi loading blog, juga bisa membuat pengunjung blog sobat risih melihat susunan iklan yang tidak teratur. Dengan menggunakan tips ini, iklan sobat akan lebih tertata rapi, walaupun ukuranya hanya 125 x 125.
Demonya seperti gambar di bawah ini :

Cara membuat nya Kotak Banner Iklan 125 x 125 :

Masuk ke blogger > Rancangan > add gadget > HTML/Javascript, kemudian masukkan kode di bawah ini;

    <div align="center">
    <table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody><tr>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>
    <tr>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>

    </tbody></table>

    <table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody>
          <tr>
           <td><center><a href="URL/Alamat Blog" rel="nofollow"><img width="265" height="37" border="0" alt="Pasang Iklan Di Sini" src="URL/Alamat Gambar advertise here" /></a></center></td>
          </tr>

        </tbody></table>

    </div>

Pengaturan Kotak Banner Iklan:

1.  Ganti kata URL/Alamat IKLAN dengan alamat website pemasang iklan

2.  Ganti kata URL/Alamat Gambar Iklan dengan link atau alamat gambar iklan di hosting

3.  Ganti kata Deskripsi Iklan dengan informasi dan deskripsi mengenai iklan yang dipasang, deskripsi ini akan muncul pada saat kursor mouse digerakkan ke arah banner iklan.

4.  Ukuran default sidebar adalah 265, jadi pastikan ukuran sidebar blog sobat tidak kurang dari itu.

Jika sobat ingin menambah kotak iklan lagi dibawahnya misalnya menjadi 6 kotak tinggal masukkan kode di bawah ini, di bawahnya kode yang berwarna biru.

    <tr>
    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>

Sampai disini sobat sudah mempunyai banner iklan 125 x 125. Cukup sekian tips blog kali ini  Cara Membuat Kotak Banner Iklan 125 x 125, Semoga bermanfaat.

Monday, November 26, 2012

Cara Memasang TV Online Di Blog

✔ Jaringan Share Comment
Sobat blogger mau memasang TV Online Di blog ?. Nah postingan kali ini saya ingin berbagi buat sobat blogger bagaimana caranya memasang TV Online di blog. Dibawah ini ada dua situs yang bisa sobat pergunakan, tapi yang satu gak bisa kalau di taruk di blog, kita cuma bisa nonton Lewat situs nya saja, tapi hebatnya kita bisa nonton TV luar negeri nih, seperti BBC,ESPN,CNN dll. Oh iya kalau kita pasang TV Online di Blog kan loading nya agak berat tuh, jadi jangan ditaruk di home page ya TV Online nya, supaya loading blog sobat tidak berat. Okey langsung saja cek kedua situs nya dibawah ini :

1. Cara Memasang TV Online Di Blog Melalui Mivo.tv


Sobat pasti sudah sering denger kan tentang mivo.tv. Ini adalah situs terbaik untuk menonton TV Online di Indonesia ( menurut saya ). Load untuk buffering nya tidak terlalu lama, dan program TV nya juga lumayan banyak. Untuk memasang nya di blog, silahkan sobat copy kode HTML dibawah ini, dan paste di add gadget HTML blog sobat :


 <embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="820" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>


Note : Untuk lebar dan tingginya silahkan sobat atur sendiri.

2. Cara Menonton TV Online Melalui www.atdhenet.tv


Khusus buat nonton TV luar negeri. Kalau situs yang ini sob gak bisa kita taruk di blog, jadi sobat harus pergi kesitus nya langsung buat nonton TV Online nya. Tapi apa hebat nya situs ini ? Pertama : situsnya ringan dan sederhana banget, cuma nampilin link aja. Kedua : kita bisa nonton TV Luar negeri seperti CNN,ESPN,BBC dll. Langsung saja sobat pergi ke www.atdhenet.tv.

Okey sob, itulah dua Cara Memasang TV Online Di Blog + menonton TV luar negeri.
Semoga bermanfaat
 

Sunday, November 25, 2012

Cara Membuat Iklan Melayang atau Pop Up Di Tengah Blog

✔ Jaringan Share Comment

Tips blog kali ini saya ingin berbagi bagaimana caranya menampilkan iklan pop up atau melayang ditengah-tengah blog. Tidak hanya iklan, bahkan foto,video dsb bisa sobat masukan di widget ini. Posisi dari widget pop-up ini tepat ditengah tampilan layar blog sobat, kalau pun tidak pas ditengah, dapat disesuaikan letak posisinya. Widget pop-up ini berguna jika sobat ingin memasang teks/pesan penting, iklan, gambar, atau widget fans facebook.

Cara Membuat Iklan Melayang atau Pop Up Di Tengah Blog ini juga sangat mudah, sobat tinggal masukkan kode HTML dibawah ini :

<style type="text/css">
#topbar{
position:absolute;
padding-left:30%;padding-top:5%;
background-color: transparancy;
width: auto;heigth:auto;
visibility: hidden;
z-index: 100;
}
</style> <script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

</script>
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5x16mxEO8RJdZfbf7LcH2i0xvNUqkGI3fgjYvbdqSET17Uzu-YCwYzu_cQPNmjE496SfeylMVocAhmutrf6eBbfzoLyHWownGu2g-T9gott85rDnQK_TaAPBoholiR8tCW4yhyphenhypheneKFc5F/s1600/close3.png" alt="close"/></a></div>
<center><div style="background: #fff;">

*** MASUKAN HTML WIDGET/IKLAN/GAMBAR/DSB DISINI***

</div></center></div>

Untuk keperluan lebar dsb silahkan sobat sesuaikan sendiri ya.
Okey, cukup sekian tips blog cara membuat iklan melayang atau pop up di tengah blog.
Semoga bermanfaat.

Friday, November 23, 2012

Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot

✔ Jaringan Share Comment
Tips blog kali ini masih soal utak-atik image di blogspot. Kalau sebelumnya saya post cara membuat gallery foto di blogspot, sekarang adalah cara membuat efek thumbnail hover preview image di blogspot. Sebutan nya agak ribet ya, intinya image yang menggunakan efek hover ini akan membesar ketika mouse kita sentuhkan ke image tersebut. Untuk lebih jelas nya lihat live previewnya disini : LIVE DEMO HOVER PREVIEW IMAGE

Bagaimana sob, tertarik ingin buat image seperti itu ? . Caranya sangat mudah sobat tingal masukan kode berikut ini kedalam add gadget HTML :

<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje8dFot8x2q_eH8_JomPUwLbot-BYCAIhSPh0qhg4vZeUPUxxFgs0o-F0US1z6JURwoDPra9AateypnIj9UuMpQpE9QQ7fmAgEkkn_O5PxfoztxTb-N5Bs8iI51oUNmM7iZfBE4B748QB/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje8dFot8x2q_eH8_JomPUwLbot-BYCAIhSPh0qhg4vZeUPUxxFgs0o-F0US1z6JURwoDPra9AateypnIj9UuMpQpE9QQ7fmAgEkkn_O5PxfoztxTb-N5Bs8iI51oUNmM7iZfBE4B748QB/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvSxdwDJ-DyyE2i5E896gAWHXAGFx8eV4VLJE-M_HrLtalJ58Mc7vnaqN_t5HQ6fnBYVRd84QGoEpaH9ZkbtOtbvXlTvWCD0st_szeD21FbGourbOXIJfD-kPNws1JAliwxvWF9gSTLJqh/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvSxdwDJ-DyyE2i5E896gAWHXAGFx8eV4VLJE-M_HrLtalJ58Mc7vnaqN_t5HQ6fnBYVRd84QGoEpaH9ZkbtOtbvXlTvWCD0st_szeD21FbGourbOXIJfD-kPNws1JAliwxvWF9gSTLJqh/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Jqaz0mPMrHYcTIw_nsLJgWnohyphenhyphensf9_YuCwElYEQ7IYqLr9mHYq9FQo20anq2Us18PW4MtvFWoD68G7zQ2qsHYI8fHx6DQHODDJ8x0HjC9tKhzwi3nrMxHJ4Q_j97jrtOTXDDWZvcBfcW/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Jqaz0mPMrHYcTIw_nsLJgWnohyphenhyphensf9_YuCwElYEQ7IYqLr9mHYq9FQo20anq2Us18PW4MtvFWoD68G7zQ2qsHYI8fHx6DQHODDJ8x0HjC9tKhzwi3nrMxHJ4Q_j97jrtOTXDDWZvcBfcW/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>

Note :
Yang diberi stabilo warna merah adalah link gambar. Sobat bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri ya sesuai kebutuhan.

Cukup sekian tips blog kali ini Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot.


Selamat mencoba.
Subscribe to: Posts (Atom)