Tampilkan postingan dengan label Tips and Trick. Tampilkan semua postingan

+



Tips-tricks Blogger kembali lagi dengan urusan coding.nih, bermain-main lagi dengan b if cond, b else dan b include. 
Terkadang akan sangat lama dan menjemukan apabila kita membuka halaman label atau arsip blog yang jumlah postingnya sudah banyak. Bahkan, semakin tidak efisien lagi jikamembuka halaman lain untuk melihat daftar/list posting yang lebih lama. So, menampilkan judul posting saja pada bagian label dan arsip dapat membuat loading halaman lebih cepat dan visitor dapat lebih cepat melihat daftar semua judul posting yang ingin dibaca. Contohnya kaya gini:
show only post titles

Siap mengubah tampilan halaman label dan arsip blog anda dengan cara tersebut?
Oke, kalo begitu lanjuuut ke cara menampilkan judul posting saja di label dan arsip Blogspot:
1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.
2. Cari kode: <b:include data='post' name='post'/> (Ctrl+F)
3. Ganti dengan script ini:
<!--Judul post saja di label dan arsip-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Buka-rahasia.blogspot.com-->
4. Save template HTML.
5. Done! (done itu artinya Yang terjadi maka Terjadilah! olret..)
6. Coba dicek hasilnya pada halaman label dan archive blog.

Update (04-05-11):  
Kemarin ada yang bertanya lewat Contact Form: "Gimana cara menampilkan judul di label saja atau di arsip saja? Thanks."
Oke, saya jawab sekaligus update disini sekalian:

*Jika ingin menampilkan judul posting saja khusus di label, ambil perintah pada b if cond label dan b include posting saja:
<!--Judul posting saja di label-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
 <!--Buka-rahasia.blogspot.com-->
*Jika ingin menampilkan judul posting saja khusus di arsip, ambil perintah pada b if cond archive dan b include posting saja:
 <!--Judul posting saja di arsip-->
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Buka-rahasia.blogspot.com-->
-Cara memasukkan scriptnya sama dengan cara yang telah disebutkan di atas.

Jika ada permasalahan atau ada hal yang ingin ditanyakan tentang "merias" tampilan judul tersebut (CSS styling), bapak ibu sekalian bisa sampaikan melalui komentar, karena setiap template blog tidak sama aturan dasar pada tampilan, font, link, margin, dan lain-lain. Feel free to use the comment form, I will be ready to help and do the best I can. 
Cheers!

Cara Menampilkan Judul Posting Saja Pada Label dan Arsip Blog

Posted by Fitrah pujangga
0 Comments
Kamis, 20 Februari 2014
+

Gambar di dalam posting blog memiliki arti penting. Gambar/image (photo or picture) bukan hanya sebagai penghias semata. Jika dipilih secara matang, gambar dapat menjadi ilustrasi isi posting blog, memperkuat nuansa, serta memberikan kesan dan dramatisasi atas tema yg diusung di dalam artikel. Selain itu, gambar juga dibutuhkan bagi halaman web/blog sebagai petunjuk/indikator navigasi, background, header, dan masih banyak lagi. Oleh karenanya, gambar tidak bisa disepelekan begitu saja oleh blogger.
Memproduksi gambar sendiri sesuai keinginan bagi kebanyakan blogger bukanlah hal mudah. Apalagi bagi blogger yg tidak menekuni bidang desain grafis atau memiliki stock gambar pribadi yg banyak. Solusinya adalah dengan mencari gambar melalui internet. Tapi tahukah bahwa tidak semua gambar dapat secara bebas dipakai? Ada beberapa kasus yg menyebutkan penuntutan/pelanggaran hak cipta atas blog yg memuat gambar tanpa credit atau seijin pemilik asli. Tentu ini bukan hal yg kita kehendaki. Sebagian besar blogger memang lebih sering mencari gambar melalui Google Image Search yg lebih praktis sesuai dengan keyword yg diinginkan. Tapi hal ini berbahaya.

Posting ini sekaligus juga menjadi tanggapan saya dalam komentar di posting pencurian konten yg menyatakan bahwa gambar yg saya gunakan dipertanyakan. Sebenarnya tidak demikian. Saya selalu menggunakan gambar-gambar free license, bahkan gambar-gambar tersebut juga memiliki lisensi gratis untuk diedit ulang bagi keperluan desain blog/web, komersil, dan desain grafis. Apakah benar ada situs download gambar gratis demikian? Ada banyak! Ratusan! Kualitas gambar-gambarnya pun tidak perlu dipertanyakan lagi. Very high quality images for free! Mulai dari photo, vector, ordinary images, icons, sampai very artistic images are ready for free use, sodara-sodara! Dengan menggunakan gambar-gambar demikian, kualitas posting dan originalitasnya pun semakin tinggi. So, lebih baik hentikan pencarian gambar dari Google; gunakan/download gambar sebebas-bebasnya dari situs-situs berikut (short url digunakan semata-mata untuk menghindari link juice):
Situs hosting dan penyedia gambar terbesar. Ratusan foto/gambar berkualitas diupload setiap detiknya. Untuk memudahkan pencarian gambar sesuai tema, Photobucket menyediakan fitur search yg punya akurasi tinggi. Jika ingin melakukan hosting sekaligus, buat akun gratis. Bahkan foto yg diupload pun bisa dibuat private, sehingga tidak muncul di pencarian. Tempat favorit saya untuk berburu gambar bertema apapun!
Ratusan ribu icon web/blog atau komputer siap digunakan untuk memperindah blog. Icon set dapat memperkuat themes/templates blog karena memiliki keselarasan desain dan warna. Iconarchive juga menghosting gmabar-gambar icon tersebut. Jadi jika malas download dan upload lagi, langsung saja gunakan diret url gambarnya!
Foto-foto berkualitas dan beresolusi tinggi serta memiliki kekuatan artistik disediakan oleh situs ini. Salah satu situs favorit saya untuk mendapatkan gambar sebagai penguat tema artikel. Fngsi search nya dapat digunakan untuk mencari gambar lintas situs penyedia gambar gratis.
Situs pecinta foto dengan komunitas besar. Menyediakan banyak foto artistik yg siap dipakai untuk background maupun ilustrasi artikel. Situs ini kini di-handle penuh oleh Getty Images, sebuah perusahaan besar yg me-manage banyak situs image/gambar berkualitas.
5. Flickr
Situs gambar gratis milik Yahoo! yg menjadi favorit para blogger dan interneter untuk mencari gambar-gambar gratis berkualitas tinggi. Sebagian memiliki lisensi. khusus. Namun cukup banyak gambar yg dapat dipakai secara bebas tanpa batasan.
Ribuan foto yg dapat digunakan sebagai inspirasi dan referensi desain grafis. Dapat digunakan secara bebas untuk keperluan desain, baik yg pribadi maumpun komersial.
Freepixels menawarkan banyak foto beresolusi tinggi baik untuk keperluan personal maupun bisnis (komersial). Memiliki kategori yg sangat banyak untuk memudahkan naviugasi serta terdapat fungsi search untuk langsung mencari foto dengan tema tertentu.
Situs penyedia foto/gambar gratis dengan koleksi yg sangat banyak; sekitar 9 juta gambar/foto siap didownload dan digunakan. Terdapat dua jenis foto sebenarnya, yg gratis dan dijual. Url di atas langsung saya arahkan untuk gambar gratis.
Salah satu situs besar favorit saya. Situs ini adalah tempat berkumpul para artis desain grafis dan fotografer untuk bertukar ide dan gambar karya mereka. Gambar/foto yg menjadi koleksi luar biasa besar jumlah, kualitas, resolusi, serta nilai artistiknya. Download gambar tanpa perlu registratis terlebih dahulu. Link di atas langsung saya arahkan ke bagian resources stock image.
10. Picfndr
Yg terakhir ini sebenarnya buka(n) situs penyedia image gratis. Namun situs untuk mencari gambar gratis yg bebas license, baik untuk keperluan pribadi atau komersil. So, ga perlu lagi Google Image Search yg riskan itu! Pencarian dilakukan berdasarkan setting tertentu; terdapat menu setting di sebelah kiri untuk mendapatkan akurasi pencarian, baik setting keyword, jenis lisensi, pembatasan untuk gambar yg butuh atribusi (credits) atau tidak, dll. Gambar-gambar yg dimunculkan di hasil pencarian berasal dari ratusan situs penyedia gambar gratis yg terjamin lisensi gratisnya. Situs ini yg paling sering saya gunakan untuk mencari gambar ilustrasi posting. 
Masih ada banyak lagi situs-situs semacam di atas. Sebagian lain memiliki koleksi yg tidak begitu banyak meskipun tidak kalah kualitas gambarnya. Dalam kesempatan lain, bila memungkinkan, akan ditambah situs-situs lain untuk memperkaya resource kita untuk mendapatkan gambar gratis berkualitas tinggi bagi blog/web, desain, maupun kepentingan lain.
Have a nice blogging, mates!

10 Situs Download Gambar Gratis Buat Blog/Web & Desain

Posted by Fitrah pujangga
0 Comments
+



social profil widget keren Alhamdulillah setelah sebelumnya saya posting tutorial membuat modifikasi pada widget profil blogger, kali ini saya ingin mengetengahkan cara membuat widget profil sosial networking menarik dengan colored style. Widget ini dinamai Metro UI oleh designernya Vinay Prajapati.

Fitur

  • Meliputi 7 jejaring social yang paling sering digunakan
  • Efek hover dan desain yang elegan,
  • Sangat rapi dan bersih
  • Tidak ada JavaScript, No Jquery, murni dengan CSS

Cara menambahkan widget ini ke blog

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger
  • Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
  • Copy dan paste kode berikut pada kolom konten: 
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/amatullahsyukur></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href=http://pinterest.com/amatullahsyukur rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/amatullahsyukur rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/amatullahsyukur></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/amatullahsyukur rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Kustomisasi: Ganti link profil saya dengan link profil milik anda.
  • Simpan dan lihat hasilnya diblog anda.
Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat.

Membuat Social Profile Widget Keren: Metro UI

Posted by Fitrah pujangga
0 Comments
Selasa, 14 Januari 2014
+






Sekarang saya akan mengshare tutorial tentang cara memodifikasi scroll bar blog dengan sentuhan css. ini saya dapat yonda. Tampilan scroll bar kalian bisa diubah sesuai keinginan kita dengan css. 
Namun, untuk saat ini css ini belum didukung oleh browser Mozila Firefox, dan hanya didukung oleh Google Chrome milik Google. Padahal pengguna browser seperti Mozila Firefox masih banyak di dunia.
Seperti scroll bar di blog saya ini, jika kalian membuka dengan browser selain Google Chrome, maka akan terlihat biasa biasa saja. Tapi tidak ada salahnya jika kalian menggunakan css scrollbar ini untuk mempercantik tampilannya scroll bar blog kalian, walupun hanya bisa terlihat berbeda pada browser chrome saja. Langsung saja,berikut ini adalah caranya :

  • Pertama, masuk dulu ke dasboard blog kalian
  • Masuk ke Template, pilih Edit HTML
  • Masukkan kode di bawah ini tepat di bawah kode <b:skin><![CDATA[
::-webkit-scrollbar { width: 10px; background: #cc3000;}
::-webkit-scrollbar-thumb { background: #000000; border: 1px #00ff00; }

  •  Terakhir tinggal disimpan
Keterangan :
Ganti kode yang berwarna MERAH dengan kode lebar scroll bar yang kalian inginkan
Ganti kode yang berwarna ORANGE dengan kode warna scroll bar yang kalian inginkan
Ganti kode yang berwarna KUNING dengan kode warna batang scroll bar yang kalian inginkan
Ganti kode yang berwarna AQUA dengan kode ketebalan border scroll bar yang kalian inginkan
Ganti kode yang berwarna BIRU dengan kode warna border  scroll bar yang kalian inginkan
Jika tidak tahu kode warna yang kalian inginkan, kalian bisa cari disini Tool Kode Warna
Nah itu dia caranya. Kalian bisa memodifikasinya sesuka kalian. Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan kalian tanyakan di komentar.

Cara Memodifikasi Tampilan ScrollBar Keren Di Blog Dengan Css

Posted by Fitrah pujangga
0 Comments
Sabtu, 28 Desember 2013
+

 kali ini saya hanya sedikit share dari postingan blog sahabat yaitu tentang cara mencegah copy paste pada blog, kalau menurut saya sih hal ini tidak terlalu penting, merupakan satu keuntungan tersendiri bila artikel kita di copas (copy paste), apa lagi bila sobat yang copas mau mencantumkan sumber dari artikel tersebut, bisa menambah back link kan, merupakan keuntungan tersendirikan.

Namun bagi sobat yang merasa bahwa artikel sobat sangat penting dan tidak rela untuk di copy paste, mungkin hal ini cukup berguna untuk dilakukan. akan tetapi cara tersebut tidak melindungi content blog sobat sepenuhnya, stidaknya cukup membuat orang yang berniat copas sedikit bingung apabila dia seorang newbie, karena sebenarnya ada jalan lain untuk bisa meng-copas artikel blog sekalipun sudah dilindungi dengan script anti copas.

Tanpa panjang lebar, kali ini untuk melindungi blog di blogger (blogspot) dari dari copy paste adalah dengan mendisable right click, atau lebih dikenal dengan mematikan klik kanan. Berikut tutorial cara mematikan klik kanan pada blogspot.

  • Login terlebih dahulu ke Blogger.com
  • Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
  • Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
  • Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)

Jika sudah, Simpan Template blog Sobat.

 DEMO.

Selamat mencoba dan semoga berhasil sobat.
Sumber: http://www.nova13.com

Cara Mecegah Copy Paste Pada Blog

Posted by Fitrah pujangga
0 Comments
+

Loading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan membanjiri blog sobat. Cara agar loading blog kita cepat (tidak lemoet) adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.
Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>



5. Letakkan kode dibawah ini diatas kode </head>



6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript



Setelah itu simpan dan lihat hasilnya.
sekian artikel kali ini klo ada yg urang jelas silahkan tanyakan di komentar. jgn lupa "JOIN" Me
Sumber: http://cwiter.blogspot.com

Cara Membuat Widget Menu TAB View Pada Blog

Posted by Fitrah pujangga
0 Comments
+




Share kumpulan efek blog yang telah di posting oleh sobat CHRISTIAN TATELU  kumpulan efek-efek blog baik dari yang ringan hingga yang berat, untuk diterapka pada blog sobat sekalian, singkat cerita saja silakan simak keterangan berikut.
Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan

2. Efek hati bertaburan

3. Efek bintang bertaburan

4. Efek kembang api


5. Efek Gelembung


Cara pemasangan :
  1. Klik rancangan --> Edit html
  2. Letakkan script efek di atas kode </body>
  3. Klik Save

B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh



2. Banjir



3. Bunga Mekar



4. Bom Atom



5. Ufo



6. Graffity



7. Shaver



8. Gun



9.Bloody gun



10. Paint ball



11. Chainsaw



12. Dinosaur



13. Lebah



14. Lalat



15. Semut



16. Siput



17. Cacing



18. Mold



19. Bayi merangkak



20. Telur mata sapi



21. Kopi tumpah



22. Terbakar



23. Tomat



24. Creampie



25. Murka



26. Sapi Jorok



27. Anjing Jorok



28. Kencing Sembarangan


Cara pemasangan :
  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan script efek di dalam kotak yang di sediakan
  3. Klik save dan lihat hasilnya.

Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ).  so, pilih mana yang terbaik menurut sobat.. salam..

Sumber: http://christiantatelu.blogspot.com

Kumpulan Efek - Efek Blog: Dari Yang Ringan Hingga Yang Berat

Posted by Fitrah pujangga
0 Comments
+


Kali ini saya sedikit share Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload yang saya dapat dari salah satu blog / website dengan alamat url www.ozanhacker.com.

Tips dan trick ini sudah saya peragakan di blog saya. singkat cerita mari kita simak saja Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun berikut ini.
Cara Memasang Tombol Back to Top
Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYx-CiwvBDBt1iMRG5N_nf3xcqoQnFd0n468Hox1QS7FvLQodwT5pNmMQBStTVYu9bT5iGAndX7Er8q5TyJnFny9kHABEhFEetMvyne_HkXPuKKQE97LQ8jgqFQ9EYwuTPhHxLOoPJo__w/s1600/Untitled-2.png'/></a>



Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYx-CiwvBDBt1iMRG5N_nf3xcqoQnFd0n468Hox1QS7FvLQodwT5pNmMQBStTVYu9bT5iGAndX7Er8q5TyJnFny9kHABEhFEetMvyne_HkXPuKKQE97LQ8jgqFQ9EYwuTPhHxLOoPJo__w/s1600/Untitled-2.png'/></a>



5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:
  • Kode warna kuning adalah posisi tombol berada
  • Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)


Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1.      Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}



2.      Kemudian sisipkan kode berikut ini setelah atau dibawah kode </body>

    <div id='Enjoy'>
    <a href='#' onClick='window.location.reload()' title='Reload page'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
    <a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
    <a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
    <a href='#footbar' title='Ke bawah halaman'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
    </div>



3.      Lalu simpan tamplate anda, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).

Jangan lupa komentarnya… Untuk artikel ini jika ada yang mau menambahkan cara yang lainnya aku tunggu…

Sumber: http://www.ozanhacker.com

Cara Memasang Tombol Kembali Ke Atas Dan Kembali ke bawah

Posted by Fitrah pujangga
0 Comments
+



Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya (heheheheheee.. ) mari kita menuju ke pokok pembahasan.
Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode </head>
5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>



6. dan sobat klik save / simpan template.
Langkah selanjutnya untuk penenpatan gambar dalam postingan.
1. Sobat harus menambahkan kode  <div id="denzuaz"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:
<div id="denzuaz">
<a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvSdRRVshYI94N3BH31NdF8x1OI51QjLlhnoixJRNYwaRiBeKftnSXGJZyPZzDvMhVbUwU-unmAwZYc0avYEu7EBmVRGXd8lYYgzotPxmu98zSdUWxhYRzjMH5CknuhNCOq61rfCSpAPN/s200/naruto+dont+copy.png" /></a></div>
keterangan:
  1. kode berwarna merah adala kode pembuka dan penutup
  2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
  3. Setelah semuanya selesai klik publikasikan. 
Demikianlah tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".
Semoga bermanfaat Sobat.. 

Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Posted by Fitrah pujangga
0 Comments
+

kli ini saya share salah satu trick blog yang saya dapat dari Black Ravat,yaitu cara membuat Profil Blog Keren Dengan CSS3. oke langsung aja lihat dibawah ini.



Caranya :

- Buka Blogger
- Tata Letak
- Tambahkan Gadget
- HTML / Javascript
- Pastekan Kode Dibawah Ini Tepat Dibawahnya

<style>
#aboutme {
  background-color: none;
  -moz-box-shadow:0 0 3px #2F94BA;
  -webkit-box-shadow:0 0 3px #2F94BA;
  box-shadow:0 0 3px #2F94BA;
  border:1px solid #2F94BA;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:270px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#2F94BA;
  color:#ffffff;
  font-family:Segoe UI;
  font-size:15px;
  font-weight:bold;
  margin:0 0 0 -3px;
  padding:3px 5px 3px 10px;
  width:100%;
  -moz-text-shadow:0 1px 0 black;
  -webkit-text-shadow:0 1px 0 black;
  text-shadow:0 1px 0 black;
}
.name-author h3:after {
  content:" ";
  width:0;
  height:0;
  position:absolute;
  left:100%;
  top:0;
  border-width:13px;
  border-style:solid;
  border-color:transparent transparent transparent #0097BD;
}
@-webkit-keyframes name-author {
  0% {color:#000000}
  20% {color:#FFFFFF}
  40% {color:#000000}
  60% {color:#FFFFFF}
  80% {color:#000000}
  100% {color:#FFFFFF}
}
@-moz-keyframes name-author {
  0% {color:#000000}
  20% {color:#FFFFFF}
  40% {color:#000000}
  60% {color:#FFFFFF}
  80% {color:#000000}
  100% {color:#FFFFFF}
}
@-keyframes name-author {
  0% {color:#000000}
 20% {color:#FFFFFF}
 40% {color:#000000}
 60% {color:#FFFFFF}
 80% {color:#000000}
 100% {color:#FFFFFF}
}
/* Penerapan efek pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
  animation:10s infinite name-author linear;
  -webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
  font-size:12px;
  text-align:left;
  margin:0;
color:#2f94ba;
}
.aboutme-image-container {
  float:left;
  width:70px;
  height:70px;
  margin-right:75px;
        z-index:1;
}
.aboutme-image-container {
  margin:-20px 0 5px 0;
  padding:9px;
  position:relative;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:100%;
  -moz-border-radius-bottomright:100%;
  -moz-border-radius-bottomleft:100%;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #2f94ba;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #2f94ba;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #2f94ba;
  background-color:#2F94BA;
}
.aboutme-image-container:before {
  content:' ';
  position:absolute;
  top:0;
  left:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #2f94ba transparent;
}
.aboutme-image-container:after {
  content:' ';
  position:absolute;
  top:0;
  right:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 0 10px;
  border-color:transparent transparent transparent #2f94ba;
}
.aboutme-image-container img {
  width:100%;
  height:100%;
  border:2px solid black;
  border-radius:100%;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
.aboutme-image-container img:hover {
  border:2px solid black;
  cursor:pointer;
  margin-left:0;
  -moz-transform:scale(1.2) rotate(360deg);
  -webkit-transform:scale(1.2) rotate(360deg);
  -o-transform:scale(1.2) rotate(360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(360deg);
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>
<div class='aboutme-image-container'>
<img src="https://15d2bd74-a-62cb3a1a-s-sites.googlegroups.com/site/kiritoblogs/gif3.gif?attachauth=ANoY7cpn_lhUa9bWz491BOQCUPQLmm3us4EckEhP2If-wdZEoN-K4i45924I9_Q_ENPg36pcsPA3LJBiSxFkv2-mx6LViWZZe6pJbR61ZVY202xmlkpQtKwi5uybkuhaIc5bnbWTjY6bYabpwLZoJKbT4eAkIUSSBo6ksmbcgsA7CkwRtxJhWCqo-GapSJCOkvXLiiIg4Gbc0BGs35_P5CPiSxCVvUoMkQ%3D%3D&attredirects=0" />
</div>
<div class='name-author'>
<h3>Dimas Galang</h3></div>
<div class='aboutme-text'>Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setengah-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe... <a href="https://plus.google.com/u/0/112973298918857690386/posts" style="color: #666;">Lihat Selengkapnya..</a>
</div></div>

Ganti Kode :
- Warna Biru = URL Gambar Kalian
- Warna Merah = Nama Kalian
- Warna Kuning = Text Yang Ingin Ditampilkan
- Warna Pink = URL Google+ Kalian

Membuat Profil Blog Keren Dengan CSS3

Posted by Fitrah pujangga
0 Comments
+


Kali ini saya akan mengshare sebuah tutorial tentang cara memodifikasi tampilan textarea blog supaya menjadi terlihat keren. Sudah tahu apa itu textarea? Textarea adalah tempat atau ruang yang bisa digunakan untuk meletakan teks atau script. Untuk sekarang ini tag <textarea> sudah jarang dipergunakan, tidak tahu apa alasannya, tapi yang pasti jika peletakan dan tampilan textarea sesuai dengan kegunaanya tentu hal ini akan membantu fungsi dan tampilan dari blog bersangkutan. Untuk lebih jelasnya, di bawah ini adalah contoh dari textarea :



Bagaimana cara membuatnya supaya terlihat keren? Kita akan membuatnya keren dengan sentuhan Css. Bagaimana caranya? Langsung saja, berikut ini adalah caranya :
  • Masuk ke dasboard blog kalian
  • Buka Template, pilih Edit HTML
  • Masukkan kode Css di bawah ini tepat di atas kode ]]></b:skin>
textarea { background:#808080; width:400px; height:100px; color:ccc; padding:10px; border-radius:5px; border:2px solid #9c9c9c; } 
textarea:hover { box-shadow:0px 0px 25px #fff; }
  • Kemudian simpan
Keterangan :
Ganti kode yang berwarna MERAH dengan kode warna backgrond textarea yang kalian inginkan
Ganti kode yang berwarna KUNING dengan kode ukuran lebar textarea yang kalian inginkan
Ganti kode yang berwarna UNGU dengan kode ukuran tinggi textarea yang kalian inginkan
Ganti kode yang berwarna ORANGE dengan kode warna text dalam textarea yang kalian inginkan
Ganti kode yang berwarna PINK dengan kode ukuran kelengkungan border textarea yang kalian inginkan
Ganti kode yang berwarna BIRU dengan kode ukuran ketebalan border textarea yang kalian inginkan
Ganti kode yang berwarna AQUA dengan kode warna border textarea yang kalian inginkan
Untuk menggunakannya, kalian letakkan kode di bawah ini pada tempat yang kalian inginkan :
<textarea rows="3" cols="40" name="txt" onclick="this.form.txt.select()">ISI TEXAREA DISINI</textarea>
 Nah itu dia caranya, bagaimana? Kalian bisa memodifikasinya sendiri sesuai keinginan kalian. Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas, silakan kalian tanyakan di komentar

Cara Memodifikasi Tampilan Textarea Blog Dengan Css Keren

Posted by Fitrah pujangga
0 Comments
Kamis, 26 Desember 2013
+



Oke, kali ini saya akan mengshare sebuah tutorial Photoshop. Cara membuat efek kilatan timbul di atas gambar. Jika kalian tahu apa maksud dari efek kilatan tersebut? Jika belum, kalian bisa lihat pada gambar di atas. Lihat bagian atas gambar tersebut. Bagaimana? Sudah tahu? Bagaimana cara membuatnya? Oke langsung saja berikut ini caranya :
  • Pertama, buka dulu gambar yang kalian ingin edit dengan Photohop. (Cs berapa saja, tapi saya menggunakan Cs3)
  • Setelah itu, buat sebuah layer baru (Ctrl+Shift+N) dan letakkan layer tersebut di paling atas.
  • Buatlah sebuah bentuk oval berwarna putih dengan Ellipse Tool pada layer yang tadi kalian buat.
  • Klik kanan pada gambar, kemudian klik Free Transform (Ctrl+T). Atur supaya letak oval seperti di gambar di bawah ini.
  • Ubah opacity layer tersebut menjadi 25 (Sebenarnya terserah kalian mau berapa saja antara 0-100)
  • Selesai.
Bagaimana? Sudah jadikan? Mudah? Mudah sekali. Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan tanyakan di komentar.

Cara Membuat Efek Kilatan Timbul Di Atas Gambar Dengan Photoshop

Posted by Fitrah pujangga
0 Comments
+
bismilah

 Setiap orang yang membacanya akan selalu teringat untuk membaca kalimat basmallah setiap akan melakukan kegiatan supaya kegiatan kita itu dapat diridhoi oleh Allah SWT. Setiap hari kita diberikan kesehatan oleh-NYA .  Alhamdulillah..  Di hari ini saya akan berbagi tentang bagaimana membuat kalimat bismillah dan alhamdulillah pada setiap artikel atau postingan di blog,,

Bismillah diucapkan ketika hendak melakukan sesuatu yang bermanfaat. Dan Alhamdulillah diucapkan setelah kita menyelesaikan sebuah kegiatan atau sesuatu hal. Sekarang kita akan menempatkan kalimat basmalah di atas postingan dan menempatkan alhamdulillah dibawah postingan. Jika anda tertarik dengan tutorial ini. Ikuti step by stepnya.

Pembahasan topik

1. Pertama-tama, masuk akun blogger anda
2. Masuk ke Template > Edit HTML
3. Cari kode <div class='post-body entry-content'> [CTRL+F untuk memudahkan]
4. Letakkan kode di bawah ini tepat setelah kode <div class='post-body entry-content'>
<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><b><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></b></span></span></div>
Jika tidak ditemukan kode <div class='post-body entry-content'> anda dapat menyimpan kodenya diatas <data:post.body/> . Kode tersebut ada banyak, anda harus mengetesnya satu persatu untuk mengetahui mana yang berfungsi.

5. Scroll kebawah, nanti ada kode <data:post.body/>. Simpan kode dibawah ini tepat setelah kode <data:post.body/>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyc0C164ZTQXc8OjEw9-YNXYdUC50evqH0SpTh8Gna0AlL1z2czcVsALIP0_Xe7KnG5eetaJs22tfiezq2gjLERjGffXBClnn_ktVDVE9x9Epf-wmadTNfZkufRdCW95RzKuLIwyvq7ug/s1600/Alhamdulillah101111.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyc0C164ZTQXc8OjEw9-YNXYdUC50evqH0SpTh8Gna0AlL1z2czcVsALIP0_Xe7KnG5eetaJs22tfiezq2gjLERjGffXBClnn_ktVDVE9x9Epf-wmadTNfZkufRdCW95RzKuLIwyvq7ug/s1600/Alhamdulillah101111.jpg" /></span></a></div>

Answer & Question

Kenapa kalimat basmallah juga muncul di home page?
  • Untuk mengatasi hal ini, anda harus menyisipkan beberapa kode.
  • Lihat kode dibawah : (yang harus ditambahkan adalah kode berwarna merah)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><b><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></b></span></span></div></b:if>

Jarak kalimat basmallah dengan isi postingan terlalu dekat, bagaimana mengatasinya?
  • Untuk mengatasi hal ini, anda harus menyisipkan kode <br/>
  • Contoh
<b:if cond='data:blog.pageType == &quot;item&quot;'></br><div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><b><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></b></span></span></div></br></br></b:if>
  • Kode </br> adalah kode enter (garis baru). Dua buah kode </br> berarti berjarak dua garis dari kalimat basmalah diatas.

Menambahkan tulisan bismillah & alhamdulillah di postingan

Posted by Fitrah pujangga
0 Comments

Like This OK !

- Copyright © 2013 RYUDARKNESS -Sao v2- Powered by Blogger - Designed by Johanes Djogan -