Membuat Tag Comulus

Hallo sobat semua.
Kali ini saya akan berbagi Tutorial lagi nih ..
Sebenarnya Tutorial ini sudah pernah dibahas di Cara Memasang Label Animasi/Tag Cloud. Tapi karena banyak cara membuat Tag/label seperti itu akhirnya saya posting lagi. Memang sebenarnya juga ada perbedaan kode-kode..

Terus terang saya juga tidak tahu betul apa arti dari tag Cloud tapi bila diartikan satu persatu tag artinya label cloud artinya awan jadi bila di gabungkan artinya adalah label awan,kalau betul syukur, kalau salah jangan di protes, kira-kira bentuknya Seperti gambar di samping dan dapat bergerak-gerak jika mouse anda dekatkan:
lebih detailnya coba anda lihat pada kanan bawah blog saya

Untuk membuatnya cukup gampang,langsung saja

1 Login Blogger
2 Masuk ke Rancangan >> Element Halaman3 Tambah Widget >> HTML/Java Script
4 Masukkan code berikut :

<div class='widget-content'>

<script src='http://dhedyfaste.xp3.biz/blog/swfobject.js' type='text/javascript'></script>

<div id='flashcontent'>Blogumulus by <a href='http://dhedyfaste.xp3.biz/'>Guembel ELite</a>

<script type='text/javascript'>

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "160", "200", "7", "#000000");

// uncomment next line to enable transparency

//so.addParam("tcolor", "0x800000");

so.addVariable("tcolor", "0x800000");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "250");

so.addVariable("tagcloud", "<tags><a href='http://unozoneu.co.cc/search/label/All Efek' style='12'>All Efek</a><a href='http://unozoneu.co.cc/search/label/First Blog' style='12'>Trik Blog</a><a href='http://unozoneu.co.cc/search/label/Computer' style='12'>Computer</a><a href='http://unozoneu.co.cc/search/label/Copy Paste' style='12'>Copy Paste</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/Disable' style='12'>Disable</a><a href='http://unozoneu.co.cc/search/label/HTML' style='12'>HTML</a><a href='http://unozoneu.co.cc/search/label/Icon calender' style='12'>Icon calender</a><a href='http://unozoneu.co.cc/search/label/Link' style='12'>Link</a><a href='http://unozoneu.co.cc/search/label/judul address' style='12'>judul address</a></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");</script></div></div>

5. Klik Simpan, dan jadilah Tag Cloud kamu


Perhatian: Ganti teks kode yang berwarna kuning dengan Link yang sobat gunakan.
thanks ...

UnoZoneu™

Read more »

Membuat Elemen Footer Menjadi 3 Kolom

Sebenarnya ini versi lain dari postingan sebelumnya yaitu Membuat 3 Kolom Elemen di Bawah Posting, ya maksud saya supaya sobat-sobat Blogger lebih memahami kode-kode CSS yang sebenarnya begitu-begitu saja. Hanya saja id-nya mungkin yang berbeda.
Yahhh sudahlah langsung saja ke caranya, biar saya ga banyak wekwwekk lagi

Caranya sebagai berikut :

1. Login ke Blogger.
2. Klik Layout -> Edit HTML
3. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.
4. Kalau sudah, cari kode ]]></b:skin>
5. Tambahkan kode di bawah ini :
   

   #footer-column-divide {
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }

   di atas kode ]]></b:skin>
6. Kalau sudah cari kode dibawah ini :
   

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

7. Hapus kode <b:section class='footer' id='footer'/> lalu ganti dengan kode dibawah ini :
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 30%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 40%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer3' style='width: 30%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

8. Kalau sudah klik Save Template. 
9. Lalu klik Page Element.

Semoga Bermanfaat sobat UnoZoneu™

Read more »

Membuat Float Box Dengan Efek Opacity

Panduan BloGGeR dan Tutorial BloGGeR yang sangat spesial untuk membangun dan membuat blog di BlogSPOT sampeyan semua semakin cantik dan pastinya akan membuat banyak pengunjung blog penasaran. Floating Transpaerent Box di desain dengan hanya sedikit javascript tapi mampu memberikan sebuah penampilan berbeda. Sampeyan bisa tambahkan foto ganteng sampeyan atau foto cantik sampeyan biar pada "dlongap-dlongop" dan tak beranjak ke blog lain. Atau mungkin sampeyan mau tawarkan iklan di sini. Iklan pabrik songkel gigi misalnya ... Ha ..... Hooo ... jangan ketawa .... wong aku sendiri jadi ketawa kok .... he ....ha ....ha .... Onde ... Lihat saja demonya dulu, baru nanti pikir mo buat apa.

 Demonya bisa anda lihat pada kanan atas Blog saya ini, terdapat gambar headphone. Anda klik saja gambar itu maka akan terlihat contoh Box dengan Opacitynya.

Langkah pembuatan Floating Box with Opacity Effect :

1. Login : Login ke Blogger dengan tuliskan User Name atau alamat email, kemudian tulis juga nomor rahasia simpanan sampeyan.
2. Tata Letak : KLIK link "Tata Letak".
3. Edit HTML : KLIK link "Edit HTML".
4. ]]></b:skin> : Cari KODE "]]></b:skin>".
5. KODE CSS - Javascript : Letakkan KODE CSS di atasnya dan Javascript di sebelah bawahnya.

KODE CSS

#topbar {
       position:absolute;
       border:4px double #ffcc00;
       padding:10px;
       background:#000;
       width:885px;
       visibility:hidden;
       z-index:100;
       text-align:justify;
       font-size:12px;
       font-family:cursive;
       font-weight:800;
       color:#66ccff;
       margin:0 20px;
       opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=40);
       }
#topbar:hover {
       opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
       }

 Javascript

<script type="text/javascript">
//<[CDATA[
/* Floatingbox.js -- bloggerstars -- gubhugreyot */
var persistclose=0
var startX = 30
var startY = 5
var verticalpos="fromtop" //"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").offsetHeightvar 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>

6. Setelah periksa dengan teliti, simpan CSS dan javascript dengan cara KLIK Simpan Template. Tunggu beberapa saat hingga proses penyimpanan selesai.
7. Gunakan KODE HTML berikut di bagian body di bawah tag <body> .

    Kode HTML :

<div id="topbar"><img src="image.jpg" width="100" height="85" style="border:4px solid #fff; float:left; margin: 0 10px;" />
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!
Tulis Teks di sini! Tulis Teks di sini!<a href="" onclick="closebar(); return false"><img src="http://lh3.ggpht.com/_O1QXT0it8EE/TNal8VEL4fI/AAAAAAAAAOY/LHjkQaDHTyg/icon.gif" border="0" width="50" height="30" style="float:right; margin:8px;" /></a>
</div>

Download Javascript Floating Box With Opacity Effect

 Kamu bisa juga membuatnya dengan download javascript yang tinggal pasang (berbentuk link dan telah di upload di javascipt hosting). Javascript juga telah disertai kode css dan contoh pemasangan teks dan gambar (link gambar), sehingga tinggal di coba kemudian ganti teks dan URL gambarnya dan lanjutkan buka blog untuk nikmati hasilnya.

Download

Read more »

Hack Photo Private Facebook

Tidak ada kerjaankah Anda ? Bosen buka facebook mau ngapainlagi? Yuk mari kita intip private profile yang di facebook.

Pertama-tama kita persiapkan script & addon mozilla dulu:

1. Java Script Untuk Melihat Facebook: http://userscripts.org/scripts/source/9580.user.js
2. Greasmonkey Addon Firefox: https://addons.mozilla.org/en-US/firefox/addon/748

Setelah selesai mempersiapkan:

1. Install Greasmonkey Addon
2. Install Java Script
3. Restart Firefox

Tools hack ini akan menambahkan link di atas foto tersebut dengan link “See this Photo in its Album” di album nya.  Nah tinggal di klik ajah

 

Selamat mencoba, semoga berhasil & Selamat Berpuasa All..

Salam hangat untuk seluruh BinusHacker Family Khususnya.

Read more »

Cara Membuat Page Number

Page Number atau Navigasi Halaman dengan menggunakan nomor atau angka adalah sebagai alat navigasi yang berfungsi selain dapat mempercantik tampilan halaman utama juga dapat memudahkan pengunjung dalam menjelajahi content sebuah website atau blog. Lihat contohnya pada halaman utama blog saya ini, kira-kira tampilan seperti pada gambar di bawah :

Apakah Anda ingin mencobanya? Jika iya, maka berikut ini adalah langkah-langkah Cara Membuat Page Number-Navigasi Halaman Blog khususnya blogspot.com :

1. Masuk dahulu ke Dashboard blogspot Anda, selanjutnya pilih Rancangan (Layout) dan pilih Edit HTML, seperti biasa contreng option Expand Widget Templates, selanjutnya cari kode berikut: ]]></b:skin>;
2. Setelah ketemu, di atas kode ]]></b:skin> letakkan kode di bawah ini :
   .showpageArea a {
   text-decoration:underline;
   }
   .showpageNum a {
   text-decoration:none;
   border: 1px solid #cccccc;
   margin:0 3px;
   padding:3px;
   }
   .showpageNum a:hover {
   border: 1px solid #cccccc;
   
   }
   .showpagePoint {
   color:#333;
   text-decoration:none;
   border: 1px solid #cccccc;
   
   margin:0 3px;
   padding:3px;
   }
   .showpageOf {
   text-decoration:none;
   padding:3px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:none;
   border: 1px solid #cccccc;
   padding:3px;
   }
   .showpage a:hover {
   text-decoration:none;
   }
   .showpageNum a:link,.showpage a:link {
   text-decoration:none;
   color:#333333;
   }
3. Lalu cari lagi kode seperti ini: </body>;
4. Jika sudah ketemu, di atas kode </body> letakkan script di bawah ini:
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <script type='text/javascript'>
   var pageCount=5;
   var displayPageNum=5;
   var upPageWord =&#39;Previous&#39;;
   var downPageWord =&#39;Next&#39;;
   </script>
   <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
   </b:if>
5. Selanjutnya carilah kode berikut ini : 'data:label.url';
6. Hapus kode ini : 'data:label.url' dan gantilah dengan kode di bawah ini:
   'data:label.url + &quot;?&amp;max-results=5&quot;'
7. Terakhir Simpan Templates dan lihat hasilnya.

Read more »

Text Shadow Animation

Salam persahabatan

Akhirnya bisa posting lagi nih, sekarang pembahasannya tentang text-shadow tapi yang satu ini di terapkan di dalam Jquery. Kalu yang terdahulu saya pernah mempostingnya tentang text-shadow yang ada dalam css3 akan tetapi kalu yang diartikel ini agak berbeda. Penasaran kan?Okeh, sebelumnya saya pernah melihat ada satu blog yang mempunyai animasi di judul blog tersebut seperti tulisan yang terbakar, setelah saya lihat mereka banyak menggunakan tolls online padahal kalau kita cermati kita bisa membuatnya sendiri. Nah... diartikel ini kita akan membahas bagaimana cara membuatnya. Ada dua cara membuat text-shadow seperti itu yang pertama sobat bisa menerapkan di postingan dan yang kedua sobat bisa menerapkan di dalam template seperti di judul blog atau yang lainnya.Apabila sobat ingin menerapkannya dalam postingan sobat hanya perlu memasukan kode di bawah dalam postingan sobat di edit html.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">(function ($){$.fn.ignite = function (burn){$(this).each(function (){var letters = $(this).text().split('');$(this).html('<span>' + letters.join('</span><span>') +'</span>');$spans = $(this).find('span');setInterval(function () {$spans.each(burn);}, 100);});}})(jQuery);function gasFlame(){var colors = ['#FFF', '#99f', '#CC0066', '#CC0033'];if (Math.random() > 0.90){colors.push('#3333CC');}var hv = 0.04;var textShadows = [];var c = 0;var h = 0;var s = 0;while (c < colors.length){s = 2 + Math.round(Math.random() * 2);while (s--){shadow = '0 ' + h + 'em ' + -h + 'em ' + colors[c];textShadows.push(shadow);h -= hv;}c++;}$(this).css({color: colors[0], textShadow: textShadows.join(', ')});}$(begin);function begin(){$('#mandra').ignite(gasFlame);}</script><style type="text/css">#mandra{font-size: 2em;line-height:2.50em;text-shadow:4px 2px 6px blue;color:#000;}
</style><div id="mandra">
Ini adalah contoh text-shadow yang mengunakan Jquery 1.4.2
</div>

Lalu bagaimana menerapkannya di dalam header atau template? Seperti tehnik dasar menaruh javascript, kalu sobat teliti sebenarnya ini hanya penempatan di head dan body tapi perintah dokumen jquery harus juga di tempatkan. Gambaran penempatan javascript di template blogspot agak berbeda, yang perlu di perhatikan adalah/*<![CDATA[*/ di awal script dan /*]]>*/  di akhir script. Oke..mari sekarang kita buat, saya akan memberikan di judul blog/header.

1. Masuk ke edit html template.
2. Jangan centong, eh salah maksudna centang Expand Widget Templates.
3. Lalu masukan kode dibawah tepat diatas</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'> </script>
4. Kemudian masukan kode dibawah tepat di atas</body>
<script type='text/javascript'>/*<![CDATA[*/ (function ($){$.fn.ignite = function (burn){$(this).each(function (){ var letters = $(this).text().split('');$(this).html('<span>' + letters.join('</span><span>') +'</span>');$spans = $(this).find('span');setInterval(function () {$spans.each(burn);}, 100);});}})(jQuery);function gasFlame(){var colors = ['#FFF', '#99f', '#CC0066', '#CC0033'];if (Math.random() > 0.90){colors.push('#3333CC');}var hv = 0.04;var textShadows = [];var c = 0;var h = 0;var s = 0;while (c < colors.length){s = 2 + Math.round(Math.random() * 2);while (s--){shadow = '0 ' + h + 'em ' + -h + 'em ' + colors[c];textShadows.push(shadow);h -= hv;}c++;}$(this).css({color: colors[0], textShadow: textShadows.join(', ')});}$(begin);function begin(){$('h1').ignite(gasFlame);}/*]]>*/ </script>
5. SAVE DAN LIHAT HASILNYA

Cara memodifikasi text-shadow

Nah..sekarang kita akan belajar cara memodifikasinya dengan mengenali sintaks yang ada dalam Jquery tersebut. Jadi sobat bisa merubahnya sesuai keinginan. Silahkan temukan kode di bawah dan modifikasi sendiri.

• var colors = ['#FFF', '#99f', '#CC0066', '#CC0033'] : Kode ini berfungsi untuk warna dan pencahayaan blur dari text-shadow. Seperti yang terlihat ada 4 kode warna css warna pertama(#fff) adalah warna dasar dari teks dan warna berikutnya adalah warna dari blur yang keatas dan kebawah.
• colors.push('#3333CC'); : Kode ini berfungsi untuk efek, seperti sobat lihat text-shadow di atas ada warna biru yang berjalan.
• {$('#mandra') : Ini adalah element yang akan kita buat text-shadow. Sobat bisa menggantinya menjadi h2-h3 sesuai keinginan, kalu h1 otomatis yang akan terlihat text-shadownya adalah bagian judul blog/header. Untuk yang template sudah saya sesuaikan menjadi h1.Sedangkan untuk yang di postingan saya memberi #mandra. Ini bertujuan untuk memanggil div dari css.

Yups!! segitu aja dulu ntar kalu kebanyakan bisa pusing, oke dah kalu begitu selamat mencoba, selamat berkreasi semoga berguna dan bermanfaat tutorial ini.

Read more »

Memasang Google Search Sendiri

Lama tidak menyapa pengunjung dengan suguhan tips tricks blog seputar modifikasi, kini saya akan mencoba untuk memberikan sesuatu yang akan membuat blog anda terlihat sangat profesional. tips tricks yang satu ini akan membuat blog anda semakin di kagumi pengunjung. bagaimana tidak, anda akan memiliki mesin pencari blog layaknya google (karena tools ini juga milik google).

Untuk demonya anda dapat mencoba memasukkan sebuah keyword pada mesin pencari artikel ini pada sidebar kemudian tekan enter. maka anda akan lihat bedanya. jika anda tertarik, mari kita langsung saja melakukan tutorial ini.

1. Pertama kunjungi situs http://www.google.com/cse/
2. Kemudian klik tombol Create Custom Search Engine.

3. Kemudian isi form yang di sediakan seperti di bawah ini.

• Name = isi dengan nama mesin pencari anda. disini saya misalkan phonecompi shearch .
• Description = Isi dengan deskripsi mesin pencari anda.
• Language = pilih bahasa mesin pencari anda.
• Sites to search = masukkan alamat blog anda.
• 
  
  
  
  
  
  
  
  
  
  
  Editions:  = pilih standart edition untuk yang gratis namun akan di pasangi iklan oleh google, namun anda dapat memilih versi Site Search jika anda tidak ingin menampilkan iklan google namun berbayar. klik Next. jangan lupa centang  I have read and agree to the Terms of Service.

  

4. Pilih tema atau tampilan mesin pencari anda. ada 6 pilihan, yaitu: Default,Bubblegum,Green Sky,Espresso,Shiny,dan minimalist

5. untuk memilih klik customize. maka akan tampil pengaturan warna, font, dan lain sebagainya. atur sesuai selera. jika sudah, klik next.

 6. Maka anda akan di berikan kode untuk dipasang pada blog anda. jangan ambil kode itu, tapi lanjutkan step yang saya berikan. klik saja Change the look and feel. 
7. Pada Choose a hosting option, pilih Iframe. 
8. Klik save, kemudian klik lagi get code.

9. jangan langsung ambil kode tersebut, tapi buka dulu tab baru pada browser anda, dan masuk ke akun blogger anda.
10. Buat postingan atau entri baru dengan judul sesuai judul search engine yang anda pilih tadi. biarkan postingan tersebut kosong, dan terbitkan entri tersebut.
11. Klik Lihat entri. copy url atau alamat postingan.

12. Buka kembali tab browser dari google custom search engine tadi.
13. Kemudian pastekan url yang anda copy tadi ke dalam form Specify search results details. pilih juga di mana anda ingin meletakkan iklan dari google. apakah di right, top and right, atau di top and bottom.

14. maka anda akan di berikan dua buah kode yang harus anda pasang pada blog anda. kode pada kolom Search box code anda pasang sebagai widget. dan kode yang kedua (kolom Search results code)
anda pastekan pada postingan yang kosong tadi (step 10). kemudian terbitkan kembali. nah sekarang anda dapat mencobanya. lihat blog anda dan masukkan keyword pada search engine yang anda pasang. maka tampilannya akan muncul di halaman posting anda.

Semoga blog anda akan lebih terlihat profesional dengan adanya tips tricks blog ini.

Read more »

Cara Menghilangkan Garis Bawah Pada Blog

Secara default Blogspot memberikan garis bawah pada setiap link yang terdapat pada blog. Garis bawah itu muncul saat kursor menyentuh link tersebut, seperti terlihat pada gambar ini.

Tetapi jika anda lebih senang link itu dibedakan hanya dengan warna, maka garis bawah itu bisa dihilangkan. Berikut langkah-langkahnya:

1. Masuklah ke halaman Dasbor anda kemudian klik Tata Letak


2. Klik Edit HTML.

3. Kemudian cari kode: a:hover{. Agar mudah mencarinya tekan (ctrl + f) pada keyboard. Lalu ketik kode tersebut pada kotak pencarian dan tekan enter.



4. Kemudian ganti tulisan underline-nya dengan none, seperti gambar di bawah ini. Terakhir jangan lupa mengklik tombol SIMPAN TEMPLATE. Tunggu hingga proses selesai.

5. Jika porses selesai lihatlah blog anda. Sekarang garis bawah pada link sudah tidak ada.

Read more »

Membuat Posting Blog Tampil Otomatis di Facebook

Sesuai janjiku di postingan CARA MEMBUAT TWETS JADI STATUS DI FACEBOOK .
selanjutnya kita akan membuat POSTINGAN di blog kita otomatis  muncul sebagai Twets di twitter sekaligus jadi status di FAcebook kita.

dengan begitu kita bisa sekaligus memperkenalkan postingan-postingan di blog kita dengan teman-teman kita di FACEBOOK dan TWITTER dan juga tentunya menambah pengunjung blog kita.

Sebenarnya cara ini sudah lama ada, jadi bisa di bilang UnoZoneu

Sesuai janjiku di postingan CARA MEMBUAT TWETS JADI STATUS DI FACEBOOK .
selanjutnya kita akan membuat POSTINGAN di blog kita otomatis  muncul sebagai Twets di twitter sekaligus jadi status di FAcebook kita.

dengan begitu kita bisa sekaligus memperkenalkan postingan-postingan di blog kita dengan teman-teman kita di FACEBOOK dan TWITTER dan juga tentunya menambah pengunjung blog kita.

Sebenarnya cara ini sudah lama ada, jadi bisa di bilang UnoZoneu sudah sangat telat postingnya.
jadi caranya begini : kita pertama tama membuat postingan kita muncul dulu di twitter. lalu kita buat lagi agar twets kita muncul jadi status FB


LALU cara membuat postingan kita otomatis menjadi status facebook

register twitterfeed

1. Buka situs http://twitterfeed.com
  lalu daftar / register di sana . daftar seperti biasa lewat email atau bisa juga lebih gampang pakai openID .

2.Setelah itu kita akan langsung masuk.
  langkah pertama kita masukan nama dan alamat feed blog yang postingannya akan kita jadikan twets dan status FB.
(untuk alamat feed blogspot biasanya = http://NAMABLOGKAMU.blogspot.com/feeds/posts/default

keterangan advance setting twitterfeed

dibawahnya ada menu advance setting dan kalau di klik akan muncul pilihan pilihan sebagai berikut .
keterangannya:

- 'update frequency' and 'post up to' = setiap berapa waktu blog kita akan di cek postingannya dan berapa postingan yang akan di munculkan ke twitter ? misalnya kalau kita memilih '1 hour'  dan up to = 2 itu artinya setiap satu jam feed kita akan diupdate , jadi jika dalam jangka satu jam kita membuat 2 postingan, maka postingan tersebut akan muncul di twets kita, tapi kalau kita memilih '2 hour' atau seterusnya maka postingan kita akan muncul dalam jangka 2 jam atau seterusnya . kalau blognya sering update kusarankan pilih yang 30 minutes dan post up to 5, agar lebih banyak postingan kita yang di tampilkan.

- Post content = yang muncul nanti apakah title (judul postingan) dan description (isi postingan) atau hanya salah satunya saja. klik title saja kalau ingin manampilkan cuma judul postingan kita.

-post link = pemendek url yang ingin digunakan sebagai url menuju postingan kita

-Post prefix = Kata yang muncul sebelum twets postingan kita. misalnya: baca ya '.....'

-Post Sufix = kebalikan dari post prefix. kata yang muncul di akhir pot twets

-Keyword Filter = untuk menyaring atau memilih postingan tertentu saja yang akan dimasukkan .
sebaiknya sih tidak usah , agar semu postngan bisa masuk.

3. setelah itu kita tinggal pilih postingan kita itu mau di masukkan kemana , kalu dulu seh cuman bisa otomatis masuk ke TWITTER tapi sekarang pilihannya sudah banyak termasuk juga FACEBOOK.
misal kita pilih Twitter klik authenticate twitter .
kemudian masukan username dan password twiiter sobat, lalu pilih allow.

kalau sudah akan muncul tulisan 'Twitter auth successful' lalu klik create services yang ada di pojok kiri bawah.

dengan begitu setiap kita membuat postingan di blog, maka akan secara otomatis jadi TWETS dan STATUS FACEBOOK kita.


semoga bermanfaat !

Read more »

Membuat 3 Kolom Elemen di Bawah Posting

Footer 3 kolom yang saya maksud adalah kolom yang berada dibawah,jadi jika kamu pengen meletakkan widget anda yang pasti footer ini akan sangat berguna juga,saya juga baru menambahkan footer 3 kolom pada template saya ini, lhatlah keren gak ya ha ha ha.....Footer wraper dari template klasik hanya mempunyai satu widget, begitu pula template - template minima hasil design para master web.

Bagi anda yang ingin mengganti footer - nya menjadi 3,4,atau 5 kolom, anda bisa menggati kodenya dengan kode dibawah ini,caranya :

>>>login ke blog anda
>>>Klik Tata Letak
>>>Edit Html
>>>Cari kode #footer-wrapper atau yang mirip seperti itu, kalo sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini:

---

---

/* ----- FOOTER ----- */

#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

border: 1px solid $bordercolor;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}
#footer h2 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}
#footer1 {width:320px;float:left; padding: 0px;border: 1px solid #cccccc;}
#footer2 {width:320px;float:right;padding: 0px;border: 1px solid #cccccc;}
#footer3 {width:320px;float:left;padding: 0px;border: 1px solid #cccccc;}
#footer1 .widget-content {margin:0 .5em 0 ;}
#footer2 .widget-content {margin:0 .5em 0 ;}
#footer3 .widget-content {margin:0 .5em 0 ;}
#footer a { color: #3D81EE; text-decoration: none; }
#footer a:hover { color: #cc0000; text-decoration: none; }
#footer a:visited { color: #3D81EE; text-decoration: none;}

---

---

>>Kemudian cari kode yang mirip dengan kode diwah ini:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

>>>setalah menemukan code diatas selanjutnya ganti dengan code dibawah ini:

<div id='footer-wrapper'>
<div id='footer'>

<b:section class='footer' id='footer1' preferred='yes'>
</b:section>


<b:section class='footer' id='footer2' preferred='yes'>
</b:section>

<b:section class='footer' id='footer3' preferred='yes'>
</b:section>

</div>
<div style='clear:both;'/>
</div><!-- end footer-wrapper -->

>>>Simpan template
>>>Selesai,Kode di atas untuk membuat footer 3 kolom

NB:agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan, lihat blog saya ini ini juga hasil otakatik aja seperti tutorial ini bagus gak,,he he he...
semoga bermanfaat.

Read more »

Membuat Related Post dengan Scroll

Sobat semua pasti sudah tahu semua tentang "Related Post". Tapi bagi yang belum tahu, related post adalah artikel yang berhubungan atau terkait. Widget ini dibuat agar di blog kita menampilkan artikel-artikel yang masih terkait atau masih berhubungan dengan artikel yang mereka baca. Tapi pada bahasan kali ini, saya tidak akan membahas bagaimana cara membuat "Related Post" yang biasa, tetapi kali ini saya akan berbagi cara membuat related post dengan fungsi scroll. Sobat semua bisa melihat contohnya seperti di setiap postingan blog saya ini.
Kenapa saya tidak membahas cara membuat related post yang biasa, karena kalau dalam satu kategori kita mempunyai banyak sekali artikel, maka kalau tetap menggunakan cara seperti itu akan memenuhi halaman blog kita.

Kalau diantara para Sobat ingin mencobanya, silahkan ikuti langkah-langkah berikut ini :
1. Seperti biasa, Login dulu di akun blogger Sobat
2. Klik "Tata Letak" => "Edit HTML"
3. Centang "Expand Template Widget"
4. Cari kode dibawah ini :

<p><data:post.body/></p>

   atau

<data:post.body/>

 5. Copy kode berikut dan paste di bawah kode no 4

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if> 

 Silahkan ganti tulisan yang berwarna merah sesuai dengan keinginan Sobat. Misalnya : "Related Post" atau "Artikel Yang Berhubungan".

Read more »

Menampilkan Widget di Halaman yang Diinginkan

Sebagaimana Kalian ketahui bahwa, widget itu banyak manfaat-nya, mungkin sebagai penghias blog, sebagai layanan instant di blog kita, dan lain sebagainya. kata orang, yang terpenting dari blog adalah postingannya, itu memang betul, tapi alangkah bagusnya jika postingan itu di selingi oleh sebuah widget? mungkin tanpa widget, blog kita terasa hampa. Tapi ada tanggapan bahwa kalo kebanyakan widget akan membuat blog kita berat, itu pernyataan yang benar, tapi sekarang ada solusinya. Yaitu Dengan Menampilkan Widget Di halaman Yang Diinginan. Keuntungannya adalah agar side bar lebih hemat, tidak memberatkan blog dan masih banyak lagi fungsinya. Contohnya sepert: Widget langganan Muncul Di HompePage saja, tp jika membuka artikel, widget itu hilang. Gimana cara mengaturnya? lihat ayat-ayat di bawah ini:


Masuk ke Blog >> tata letak >> Edit HTML

Lalu cari kode ini:

<b:widget id='HTML1' locked='false' title='Judul Widget' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "index"'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

</b:if>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

ket:-kata yang berwarna merah adalah widget yang ada di blog kalian
-kata yang berwarna biru adalah kode yang harus ditambahkan(halaman depan saja)

Adapun kode kode yang lain:

Untuk halaman depan saja(seperti contoh diatas)

<b:if cond='data:blog.pageType == "index"'>

untuk di halaman artikel saja:

<b:if cond='data:blog.pageType == "item"'>

untuk dihalaman archive saja:

<b:if cond='data:blog.pageType == "archive"'>

Untuk di halaman tertentu:

<b:if cond="[URL halaman anda]" == data:blog.url'>

Begitu aja hal-hal yang bisa saya sampaikan, semoga berhasil. Jika masih bingung, silahkan berkomentar di bawah ini

Read more »

Compress CSS Untuk Mempercepat Loading Blog

Wah padahal saya sedang pusing ketika menulis posting ini, dengan penuh penuh perjuangan melawan kepala saya yang hampir meledak ini saya akhirnya selesai juga postingan ini. Yah, artikel hari ini Insya Allah, sangat di butuhkan oleh beberapa kawan-kawan blogger semua. Amiinnnn.....

Lha kenapa kok sangat di butuhkan? iya, karena kebanyakan blogger sangat senang yang namanya memperhias blog, sehingga membuat blog kita menjadi berat. Betul tidak???

Oke Kita mulai saja ya????

Ada banyak cara agar blog kita tidak berat. Tapi ada 1 cara yang menurut saya paling ampuh.

1. Kompress Kode CSS anda

tips ini saya rasa sebagai tips yang sangat manjur, apalagi jika anda banyak menggunakan CSS, pasti blog anda langsung cepat secepat valentino rossi. hehehehe...

Lha gimana cara kompressnya???

• Login ke blogger
• Masuk ke Tata letak
• Masuk ke Edit HTML
• centang kotak Expand Template Widget
• Jangan lupa back up dulu template anda
  
• Copy semua kode setelah kode <b:skin><![CDATA[/* dan sebelum kode ]]></b:skin> ke dalam notepad
• Masuk ke alamat: http://www.csscompressor.com/
• Dan letakan Kode yang kamu copy tadi di kotak yang telah disediakan
• Klik Compress
• Lalu setelah menunggu, kode yang sudah di kompress tadi keluar
• Masukan Kode Yang sudah kompress tadi, setelah kode <b:skin><![CDATA[/* dan sebelum kode ]]></b:skin>
• Simpan Template anda, dan ukur kecepatan blog anda di sini: http://www.iwebtool.com/speed_test

Read more »