Posting By Gallerydunia.com

Google Code bermasalah Drive Google Solusinya





Drive Google Solusi Menyimpan File JS

Setelah Google code saya tidak bisa di akses yang membuat tampilan blog berantakan entah mungkin kesamber petir atau memang lagi ngambek saya juga ga tau ..hehehe

Trus saya mencoba lagi membuat account google yang baru so pasti bisa di akses..huft lagi-lagi kayak kesamber petir deh...mana menu donwload untuk mengunggah file nya..hadeuhhh capek dech...jadi yaaa lumayan repot belum unggah file lagi terus masukin kode-kode yang ga bekerja trus update lagi postingan bersangkutan ...trus saya coba cari solusi nya dengan broswer di internet akhirnya saya ketemu danSetelah saya coba ternyata sukses dan tampilan blog saya kembali seperti semula yang saya kutip DISINI

Mari kita lihat tutorial nya...

Beberapa waktu Yang lalu saat membuka code.google.com ada pemberitahuan bahwa code.google.com akan ditutup dan pada halaman code google diberikan link yang mengarah ke drive.google.com sebagai solusi untuk menyimpan File JS maupun File-File Lainnya Untuk keperluan Blogging, Bahkan Lebih Lengkap, Untuk keperluan kantor juga ada di sana (Drive Google), yang pastinya sama, Hosting Gratis Donk...
Langsung saya tes Upload sebuah File JS untuk Nyoba, setelah sukses ada kebingungan saat saya ingin berbagi pakai dan bisa digunakan seperti File JS yang saya simpan di Code Google, Saya kesulitan untuk Mendapatkan Link yang bisa saya gunakan untuk menghias Blog saya, Pada biasanya, Link yang saya dapat di code google adalah seperti ini :
http://dj-123-javascript.googlecode.com/files/X-Quadratzig.js 
Sehingga kalo dipasang pada Blog dengan Javascript akan terlihat Seperti ini


<script src='http://dj-123-javascript.googlecode.com/files/X-Quadratzig.js' type='text/javascript'/>
</script>
 
Namun Berbeda Dengan Drive Google, Untuk file yang sama, dengan file diatas, saya mendapatkan Link seperti Ini :
https://googledrive.com/host/0B1xHV8JisQ9VbkZVUVBaQkZwUk0
Dan kalo dipasang pada Blog dengan Javascript akan terlihat Seperti ini :

<script src='https://googledrive.com/host/0B1xHV8JisQ9VbkZVUVBaQkZwUk0' type='text/javascript'/></script>
 
 
Bagaimana Cara Hosting File JS di Drive Google? Dan Mendapatkan Link untuk berbagi dari File yang kita Upload di Drive Google? Ikuti langkah-Langkahnya berikut Ini

1. Silahkan Buka https://drive.google.com dan masuk dengan akun anda
2. Upload File anda dengan Meng Klik tab Unggah, Pilih file JS yang akan di Unggah


3. Setelah berhasil mengupload File beri centang pada file tadi .

Berbagi pakai Link File di Google Drive
Link File Js


4. Silahkan lakukan sesuai gambar di atas, pada Gambar diatas anda akan mendapatkan Link seperti ini
https://docs.google.com/file/d/0B1xHV8JisQ9VbkZVUVBaQkZwUk0/edit?usp=sharing
Dari link diatas yang saya beri warna merah adalah Code dari file yang kita upload, Copy codenya dan susun menjadi seperti ini :
https://googledrive.com/host/0B1xHV8JisQ9VbkZVUVBaQkZwUk0
Link inilah yang akan kita pakai untuk memasang javascript untuk keperluan Blog kita, Susunanya jadi Seperti berikut ini :
<script src='https://googledrive.com/host/0B1xHV8JisQ9VbkZVUVBaQkZwUk0' type='text/javascript'/></script>
Nah itulah Drive Google solusi Upload File JS selain Di Code.Google.Com, Kurang lebih saya minta maaf lahir dan bathin, Selamat mencoba. 

Semoga artikel dari sobat saya ini bisa memberikan solusi nya..yupsss...met berjuang

Postingan yang cantik dengan Komentar Facebook ( Terbaru )




Salam Blogger...
Sambil menikmati secangkir kopi hangat dan di malem yang sunyi ini dengan di temani bunyi jangkrik yang begitu merdu di selingi dengan suara kodok yang mungkin belum bisa tidur he he..Maaf bercanda gan..!! kali ini saya coba membuat suatu tulisan tentang komentar facebook.. yang mungkin artikel ini sudah telat ya alias basi kalau kita cari di search engine dengan kata kunci " Komentar FB " maka banyak muncul web dengan tutorial membuat komentar FB...ya itung-itung buat koleksi catatan kalo sewaktu di di butuhkan bisa langsung di buka..he he dan sekalian berbagi sama sahabat lain nya yang mungkin mau mencoba artikel sederhana ini...

Catatan Pengalaman ..
Sebelum nya saya telah mencoba beberapa kali tutorial yang saya dapat dari mesin pencari banyak sekali tutorial nya ..ada yang harus melalui dan membuat aplikasi FB nya lah atau lain nya dan harus melewati beberapa langkah yang rumit ..ada juga yang simpel dan mudah namun saat kita mencoba komentar..komentar kita muncul setiap postingan he he jadi bikin pusing 8 keliling neh....yaa akhir nya sempet bosen juga nyari nya ampe blog saya ga pake koment-koment fb dah..

So...dah lama ga ngotak ngatik script FB nya saya mencoba kembali eh...akhirnya berhasil juga..!! masih tetap penasaran saya coba dengan berbagai templete alhamdullillah bekerja sesuai harapan...he he OK..buat sobat yang ini melihat DEMO nya silahkan klik DISINI di salah satu blog saya yang saya pasang Komentar FB nya...

Gimana Udah di lihat Demo nya?? kira-kira begitulah bentuk nya...Ya dah...dari pada panjang lebar mari kita lihat tutorial nya di bawah ini...

1.Silahkan Login terlebih dahulu.


2. Lalu klik Templete lalu klik Edit templete dan centang Expand Widget Templates yang terlihat seperti gambar di bawah ini.

Gambar draf baru blogger


3.CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) 

   <div class='post-footer-line post-footer-line-3'/>


KODE COMMENT FB

<div style='text-align: center;'>
<img border='0' src='http://3.bp.blogspot.com/-GTBA-XO3Jpw/Tk__rlAnUiI/AAAAAAAADGQ/4SHkWC2ndDE/s1600/fb+comment.png'/></div><br/><br/>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=270063829687061&amp;xfbml=1'/><fb:like action='like' font='' href='http://www.facebook.com/gallerydunia.web' send='false' show_faces='true' width='auto'/>
<div style='padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'/>
<br/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/></script></div>



4.Copy Paste KODE COMMENT FB di bawah Kode <div class='post-footer-line post-footer-line-3'/> untuk jelasnya lihat gambar Shoot Screen di bawah ini..!!!

Contoh Gambar Peletakan KODE SCRIPT



5. Simpan dan Lihat Hasil nya

******FINISH ******

Kode Coment FB di atas bisa di letakan di bawah postingan yang gunakan sangat banyak dan sangat membantu trafik blog kita...bayangin aja jika banyak yang komentar di setiap artikel di blog kita dengan Coment FB ini maka  komentar tadi masuk di dinding yang mengomentari dan beranda sahabat FB bersangkutan dan tidak menutup kemungkinan untuk di baca sahabat FB nya ya secara otomatiskan bisa menambah pengunjung ..

Sebelum nya saya pernah mencoba beberapa kali mencari tutorial Coment FB ini di internet dan setiap kali saya mencoba ada aja kesalahan dan kerumitan yang bikin otak sedikit Hang he he dan ada juga dengan tutorial lengkap dan detail namun susah untuk di mengerti apalagi di terapkan..memang lantaran udah penasaran kayak lagu Bang Rhoma Irama..he he kayak gini...lirik nya..:

Sungguh mati aku jadi penasaran..
Sampai mati akan terus ku erjuangkan..
Memang dia ..yang paling cantikk..he he opsss..kok malah berdendang wkkwk
he he maaf gan bercanda .cuma buat menghibur diri ...

Mari kembali ke topik semula,akhirnya dengan terus semangat untuk mencari coment FB yang saya ibarat kan wanita cantik ini...ketemu juga yang lebih simple dan sederhana..namun sangat anggun hihi..cukup dengan memasukan Kode Coment FB di Rancangan HTML maka Coment FB langsung bisa di pasang dan nikmati tanpa susah payah membuat aplikasi maupun tetek bengek lain nya...

Oh ya..untuk mematangkan dan memantapkan Kode ini saya udah nyoba untuk beberapa templete yang berbeda dan berfungsi dengan optimal ...terus jika sobat ingin mempercantik komentar FB nya silahkan di modifikasi kode nya agar lebih menarik...so saya tunggu modifikasi nya siapa tau saya mau nyoba hasil jerih payah sobat sekalian yang penting gratiss he he ( red: mau nya)

Kayak ini aja dulu..jika ada yang kurang mohon maklum ya gan saya masih tahap belajar dan ingin berbagi ama para juragan semua nya..dan semoga awal percobaan saya bisa menjadi dasar percobaan para juragan sekalian...terimakasih


by: syafrizal





Widget Sederhana Headline news berjalan




Sebelum saya menjelaskan maksud gambar di atas untuk lebih memahami pembahasan yang akan saya tuliskan silahkan sobat lihat terlebih dahulu demo widget di atas ..silahkan klik button di bawah.!!





Ehm..
Gimana Udah lihat belum??
Pada Demo link di atas merupakan sebuah daftar artikel terbaru yang akan muncul setiap kita update,,...berapa banyak list yang bisa tampil?? yaa..tergantung sobat jika ingin menampilkan 30 atau 50 artikel atau lebih bisa aja..tapi saya saran kan jangan terlalu banyak nanti malah membuat loading blog makin berat...oh ya demo di atas terdiri dari tiga list blog yang sudah saya modifikasi...nanti saya akan jelaskan cara memodifikasi widget otomatis update postingan terbaru ini...

Untuk mempermudah maksud di atas mari kita simak artikel nya di bawah ini..!!

1. Silahkan login terlebih dahulu jika sudah langsung ke layout ( rancangan )





2.klik Layout ,Tambah gadget dan klik HTML / Java script (red: kayak gambar di atas) dan Copy paste kode di bawah ini terserah di bagian gadget mana yang mau anda letakan dan di letak kan di postingan juga bisa...

Kode nya

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="auto" height="auto" align="center">
<script src="http://gallerydunia.googlecode.com/files/post-terakhir.js"></script>
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://www.gallerydunia.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
</marquee>
</div>

catatan :

Mari kita otak-atik tanda tulisan berwarna dari atas dahulu...

  • width:320px @ ini untuk ukuran lebar kotak nya bisa sobat ganti sesuai kebutuhan.

  • height:250px @ ini buat tinggi kotak silahkan di ganti sesuai dengan selera
  •  numposts = 15 @ maksud dari angka 15 adalah daftar artikel terbaru yang akan di tampilkan pada widget ini sejumlah 15 artikel/postingan terbaru..sobat bisa ganti angka nya sesuai selera...

  • www.gallerydunia.com @ silahkan di ganti dengan alamat atau URL blog sobat.

Nah dengan ada nya kode widget di atas kita bisa membuat widget sederhana yang dapat menampilkan artikel atau postingan terbaru dari blog yang sobat sukai bisa juga blog para sahabat atau blog favorite kita atau kreasi lain nya..ehm,untuk wordpress saya belum coba dengan kode ini tetapi untuk blogger saya udah coba berbagai macam url blog lain dan widget ini berfungsi dengan baik...

Untuk pemasangan widget di atas bisa sobat letakan di HTML/Java scritp atau di taroh di postingan..

Karena kode di atas tampilan nya sangat sederhana maka sobat bisa membuat kreasi yang lebih menarik dari demo link yang saya berikan dan di tunggu kreasi info nya di kotak komentar..


semoga bermanfaat



Membuat translate blog yang sederhana




Salam Blogger...
Maaf yaa..dah lama sekali ga mengotak ngatik atau menulis suatu kreasi baru tentang dunia web desain so pasti banyak banyak yang ketinggalan neh..he he maklum selama ini saya sering mengupdate blog satu nya di gallerydunia.com dan buat teman-teman yang telah berkomentar mohon maaf jika belum di balas...

Langsung aja ya...mungkin banyak sekali tutorial tentang memasang Penerjemah bahasa di blog...mungkin tutorial saya ini telat dan kuno kali ya ...he he dari pada tidak sama sekali mungkin teman-teman berminat untuk memasang Translate bahasa sederhana ini yang tidak banyak memakan tempat serta ringan loading nya...yuk mari kita simak langsung aja..cara nya gampang dan simpel kok...

1. Silahkan login terlebih dahulu jika sudah langsung ke layout ( rancangan )




2.klik Layout ,Tambah gadget dan klik HTML / Java script (red: kayak gambar di atas) dan Copy paste kode di bawah ini terserah di bagian gadget mana yang mau anda letakan..



<script language="javascript" src="http://gallerydunia.googlecode.com/files/google_translate_2.js">
</script>

ATAU

<script language="javascript" src="http://gallerydunia.googlecode.com/files/google_translate.js">
</script>

catatan: pilih salah satu aja..

Gimana mudah dan simpel kan dan bahasa yang di tampilkan juga banyak,,,semoga artikel sederhana ini dapat memberi solusi buat temen-temen sekalian,,wr wb..

Spoiler cantik icon menu show hidden (JQuery )





Mungkin sobat  bingung dengan maksud gambar di atas? saya pun juga bingung bagaimana bagus nya memberi judul pada artikel ini he he  gambar di atas adalah gambar icon spoiler yang menyimpan data-data gambar,kode chat atau lain nya secara tersembunyi dan akan timbul jika icon nya di klik atau kalo ga begini maksud nya:



" Icon spoiler di atas jika di klik akan menampilkan data yang tersimpan di balik icon nya yang terlihat seperti efek Jquery ( apa lagi neh...)..waduh pokok nya kayak spoiler deh...!! "


Bingung ya maksud nya??? nanti jika sobat sudah mencoba akan ngerti sendiri maksud nya he he ...kelebihan kode spoiler ini sangat menarik untuk di tempat kan di blog kita karena bisa membuat blog kita makin cantik dan menarik ..dan posisi icon spoiler ini pada blog bersifat melayang di sebelah kanan atas halaman blog dengan lebar kotak nya yang otomatis menyesuaikan gambar ,tulisan maupun kode script serta di lengkapi dengan scroll  ....

Ok..dari pada banyak basa basi yuk kita coba belajar membuat nya .....


1. Silahkan login terlebih dahulu jika sudah langsung ke layout ( rancangan )



2.klik Layout ,Tambah gadget dan klik HTML / Java script (red: kayak gambar di atas) dan Copy paste kode di bawah ini terserah di bagian gadget mana yang mau anda letakan.. 

Kode Icon Spoiler nya
<style type="text/css">
.gb_fixed{
position:fixed;
top:30px; right:10px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
background:  white;
)repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style=" background:-moz-linear-gradient(top, #051547, #999, #051547); color:#6cec17;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;"> TUTUP CHAT FACEBOOK </b></a></div>
<br/>

DISINI KODE CHAT,SCRIPT,GAMBAR MAUPUN TULISAN

</td></tr></table>
</div>
<script src="http://gallerydunia.googlecode.com/files/shouteffect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="http://2.bp.blogspot.com/-PA23C9W8muM/TjV4-Qpqx2I/AAAAAAAACuM/Fu-2hriqRHc/s1600/facebook+coment.png" />
</a>
</div>

Catatan modifikasi nya:

Saya akan mencoba menjelaskan tulisan-tulisan berwarna pada kode diatas agar sobat bisa lebih mudah mengobok-obok dan memodifikasi ..kita mulai dari tanda tulisan berwarna paling atas ya:
  • angka 30px @ Angka di atas untuk mengatur tinggi rendah nya icon gambar bisa anda ganti dengan angka 40px,50px dll sesuai keinginan juragan sekalian.
  • angka 10 px @ angka ini untuk mengatur jarak samping icon gambar dengan batas halaman.
  •  Tulisan White; @ ini adalah kode warna dasar atau background kotak spoiler ..untuk merubah nya silahkan anda pilih-pilih warna nya bisa warna red; blue; atau kode warna lain nya yang bisa anda lihat  di sini . warna dasar spoiler ini bisa anda ganti dengan link background gambar nah untuk background nya yang bergambar anda coba modifikasi sendiri ya he he he
  • Tulisan TUTUP CHAT FACEBOOK @ tulisan ini bisa di ganti dengan gaya sesuka anda kayak contoh : Close Disini,Klik Tutup atau apa aja deh yang penting artinya buat nutup kotak chat he he
  • Tulisan DISINI KODE CHAT,SCRIPT,GAMBAR MAUPUN TULISAN @ nah ini isi dari spoiler nya ...disini anda bisa berkreasi bisa anda masukan gambar,tulisan,URL,kode chat Shoutmix,kode pinkbox yahoo,iklan-iklan atau apa aja yang anda ingin kan yang penting jangan ayam goreng ya..wkwkw ( red : bercanda )
  • link http://2.bp.blogspot.com/-PA23C9W8muM/TjV4-Qpqx2I/AAAAAAAACuM/Fu-2hriqRHc/s1600/facebook+coment.png @ URL link ini adalah inti icon spoiler nya...anda bisa mengganti URL link gambar nya sesuai selera terkecuali di larang memasang foto tetangga nya...he he maksud nya kita bisa mengganti icon nya dengan gambar apa aja bisa kartun,tokoh masyarakat atau artis idola dan menurut saya bagus nya gambar yang di pasang format nya.PNG karena hasil nya lebih bagus dari pada .jpeg untuk berkreasi coba anda ganti URL link nya di bawah ini..:


 
Kode URL nya: 

http://4.bp.blogspot.com/-LKzKiFV11ns/TjwZTVF3mbI/AAAAAAAACvg/q0gsn83ABbU/s1600/registrasi.png
------------------------------------------------------------------------------------------------------------------------------------

 
 Kode URL nya :

http://1.bp.blogspot.com/-VNeTT5D4b9w/TjwZUKZ8RGI/AAAAAAAACvk/76QM9MqJTZ8/s1600/TabGBcopy.png
------------------------------------------------------------------------------------------------------------------------------------
 
Kode URL nya : 

http://4.bp.blogspot.com/-3ZRz6GTkEMc/TjwZU6Be2_I/AAAAAAAACvo/Q7oc_44gWU8/s1600/Teoringeblog-buku%252Btamu%252B1%252B%252878%252Bx%252B190%2529.png ------------------------------------------------------------------------------------------------------------------------------------
 

Kode URL nya :

http://2.bp.blogspot.com/-CWQBdvu0y5Y/TjwZVevjd1I/AAAAAAAACvs/a3-GDA4P2wU/s1600/th_UpinBukuTamu.png ------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya : 
 http://2.bp.blogspot.com/-6QAAA3maRG8/TjwZWHsRbWI/AAAAAAAACvw/ZK54vaP083U/s1600/buku%25252520tamu.png
------------------------------------------------------------------------------------------------------------------------------------
 
Kode URL nya : 

http://2.bp.blogspot.com/-mAND8P3OfbM/TjwZWxGZ44I/AAAAAAAACv0/zMvEo91A7Bw/s1600/buku_tamu.png
------------------------------------------------------------------------------------------------------------------------------------

Kode URL nya : 

http://2.bp.blogspot.com/-FmCg9gsTalk/TjwZXZ1qkyI/AAAAAAAACv4/85xodraybOI/s1600/coment+fb.png
------------------------------------------------------------------------------------------------------------------------------------
Kode URL nya : 
http://1.bp.blogspot.com/-9vDbI06mhJo/TjwZYCpiolI/AAAAAAAACv8/JEHDvHQnD5g/s1600/contact_chat.png
------------------------------------------------------------------------------------------------------------------------------------
 
Kode URL nya : 

http://1.bp.blogspot.com/-hjZepjL3Nxw/TjwZY1CpuTI/AAAAAAAACwA/MblNTAcQK1k/s1600/facebook+coment.png
------------------------------------------------------------------------------------------------------------------------------------
 
Kode URL nya : 
http://4.bp.blogspot.com/-Xuf37EHxzP4/TjwZZRThHfI/AAAAAAAACwE/Vp4Gb3kkdtQ/s1600/live+chat.png
------------------------------------------------------------------------------------------------------------------------------------

 
Kode URL nya :

http://2.bp.blogspot.com/-omgOApq2mF8/TjwZaOXR5cI/AAAAAAAACwI/j2ZBuOkmL70/s1600/live_chat.png



3. setelah selesai mengobok-obok kode nya silahkan anda simpan dan lihat hasil nya.


Akhir nya rampung juga neh....dan tambah lagi cendol untuk mempercantik blog kita he he walau sempet neh kepala di kelilingi 8 bintang dan semedi selama 3 hari sampai ga mandi-mandi takut ilmu nya luntur ho ho ho  untuk mencari wangsit akhirnya terbalas sudah dengan hadir nya artikel ini...dengan berbagi nya pengalaman ini semoga bisa menambah wawasan kita dan saling belajar tentang dunia blogger tentu nya agar bisa lebih maju dan kreatif dalam mendesain blog...

Jika ada kesulitan silahkan sediakan kopi nya..eh salah komentar nya di bawah ini dan di tunggu hasil kreasi dari para sobat sekalian yang tentunya akan lebih menarik dari pada ini...wassalam

Di tulis,05-08-2011 by; syafrizal