Wednesday, 8 August 2012

Cara Memasukkan Foto Dalam Text

Posted by Dika Nurohim 0 comments
Pada tutorial ini kita akan belajar cara memasukkan sebuah foto / gambar kedalam tulisan ataupun obyek lain.

Langkah 1
Buatlah sebuah file baru. Ukuran file bisa disesuaikan dengan keinginan kalian.


Tujuan langkah ini adalah agar kita mempunyai sebuah file yang digunakan untuk mengetik.

Langkah 2
Pada file tersebut (langkah ke-1), buatlah sebuah tulisan dengan menggunakan Type Tools. Usahakan untuk memilih jenis huruf yang ber-font tebal. Misalnya Arial Black, Impact.


Langkah 3
Bukalah file foto / gambar yang akan dimasukkan ke dalam tulisan. Jika file tersebut sudah dibuka, geserlah file tersebut kedalam file tulisan dengan menggunakan Move tool.


Langkah 4
Pastikan urutan layer seperti gambar berikut ini:


Layer foto diatas sendiri, kemudian layer tulisan dibawahnya.
Jika posisi layer sudah benar, pastikan layer yang aktif adalah layer foto.

Sekarang:
Tekan tombol Ctrl + Alt + G , atau
Pilih menu Layer > Create Clipping Mask.
Foto sudah masuk kedalam tulisan.

Berikut ini adalah gambar dari tutorial photoshop ini yang sudah jadi. Ini saya memakai software Photoshop CS 5.

Selamat mencoba! :)
Continue reading →

Membuat Tombol Like Facebook Di Setiap Postingan Blog

Posted by Dika Nurohim 0 comments
Apa gunanya tombol like FB dipasang di blog ?
Berhubung zaman sekarang Facebook udah termasuk sebagai salah satu situs jejaring sosial yang terpopuler di dunia maya, semua orang mulai melirik halaman facebook yang setiap hari diakses oleh milyaran orang di dunia sebagai media promosi. Salah satunya promosi link dan artikel di blog supaya blog kita bisa dikunjungi milyaran orang di dunia.


Tombol like ini mempunya fungsi yang jika di klik, maka link artikel blog kita bisa nampil di dinding FB di pengeklik. Dengan tampilnya link blog kita di dinding FB nya, so pasti ada kemungkinan juga blog kita dilihat sama teman FB di pengeklik tombol like tadi.

1. Untuk membuatnya, masuk dulu ke menu Perancangan > Edit HTML
2. Centang checklist Expand Template Widget
3. Cari kode <data:post.body/>
4. Letakkan kode berikut diatas kode <data:post.body/> tadi jika kamu ingin menampilkannya diatas postingan. Atau letakkan dibawahnya jika ingin menampilkannya di bawah postingan.

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/><br/>

dan lihat hasilnya. Semoga bermanfaat :)
Continue reading →

Cara Membuat Loading Blog

Posted by Dika Nurohim 0 comments
Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css.

Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat. lumayan menarik bukan? ok mari kita bahas cara pembuatannya.

Demo tampilan STATUS LOADING:


Memuat halaman…


Berikut ini langkah-langkah Cara Membuat Loading Blog :
- Buka Blog sobat
- Pada Dashboard pilih Rancangan atau Design
- Edit HTML dan centrang Expand Widget Template
- Cari kode </head>  kemudian copy - paste kode di bawah ini sebelum kode tersebut

<script src='https://sites.google.com/site/indolaron/file-js/preloadpage.js' type='text/javascript'/>

- Cari kode <body>  , ganti dengan kode dibawah ini:

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>

refresh blog sobat dan lihat hasilnya. semoga bermanfaat! :)
Continue reading →

Script Widget Al-Quran Untuk Blog/Website

Posted by Dika Nurohim 0 comments
Sobat blogger ingin memasang widget Islami semisal memasang widget Al-Qur'an Digital Online pada blog sobat? Kalo iya, maka postingan ini semoga dapat membantu sobat yang ingin memasang widget Al-Qur'an digital online pada blog sobat. Kelebihan dari script widget ini, terdapat terjemahan ayat berbahasa Indonesia dan juga disertai audio yang menambah lengkap fitur widget Al-Qur'an digital online ini.


Caranya:
Sobat hanya perlu mengcopy kan seluruh script dibawah ini:

<iframe frameborder="0" src="http://m.alquran-indonesia.com/mquran/index.php/quran" style="border: 0px; height: 600px; width: 570px;"></iframe>
<span style="font-size: x-small;"> Mau Script Al-Quran seperti ini? <a href="http://dhyck4-tutorial.blogspot.com/2012/08/script-widget-al-quran-untuk-blogwebsite.html">Klik Disini!</a></span>

Keterangan: Script height dan width dapat sobat sesuaikan besaran dan lebarannya.

Kemudian paste-kan script ini bisa dipostingan blog atau menambah elemen html/javascript blog sobat.

Continue reading →

Dhycka Portal Template

Posted by Dika Nurohim 0 comments
Yaa , sesuai namanya template ini saya share kepada sobat-sobat blogger yang sedang mencari template portal. Karena banyak juga yang ingin tahu jadi saya share saja . Sebenarnya makna template portal itu sendiri di google sangat minim atau bahkan gak ada seperti yang di-artikan. Memang sebenarnya template portal itu gak penting atau dengan kata lain cuma buat senang-senang saja. Lalu apakah sebenarnya template portal itu?? Template portal menurut rincian singkat saya adalah template yang menghubungkan ke konten blog kita yang sebenarnya. Jadi memang dah jelas bahwa template portal itu tidak bisa buat ngepost, seperti yang diatas tadi cuman buat senang-senang saja plus bisa kreatif-kreatif saja ngeditnya. Cukup basa-basinya, bagi yang mau download template portal ini silahkan langsung sedot dibawah.


Sedikit Tutorial.

Efek Shadow Pada Border
Jika ingin menambah efek bayangan seperti pada view kedua diatas, maka cari dulu kode dibawah ini pada edit html, biar lebih mudah klik Ctrl+F. (disini saya pakai border paling luar)

#footer {
width:550px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:lowercase;
letter-spacing:.1em;
text-align: center;
padding: 5px;
background-color:#000000;
border:1px double #0000FF;
-moz-border-radius:10px;
-webkit-border-radius:10px;

Lalu tambahkan kode berikut tepat dibawahnya::

box-shadow: 0 0 40px 4px #A03FFA;
-moz-box-shadow: 0 0 40px 4px #A03FFA;
-webkit-box-shadow: 0 0 40px 4px #A03FFA
border-radius:3px;
-moz-border-radius:3px;

NB:
  • Anda dapat menambahkan efek shadow pada border yang lainnya tinggal muter otak dikitlah.
  • Kode warna html yang berwarna hijau diatas dapat anda ganti sendiri dengan kode warna yang lain. (Kalau kode diatas saya gunakan warna ungu).

Mengganti Lagu/Music
Cukup cari kode ini :

<object data="http://divine-music.info/musicfiles/01 Moves Like Jagger (feat. Christin.swf" height="0" type="application/x-shockwave-flash" width="0"><param name="movie"><param name="bgcolor"><param name="FlashVars"></object>

lalu ganti tulisan yang berwarna hijau diatas dengan URL lagu pilihanmu, perlu diingat lagu yang dipilih biar lebih minimalis pilih ekstensi .swf... Anda bisa cari di search google, indowebster, devine-music, 4shared, dan lain sebagainya.

Mungkin itu saja, yang lain saya rasa sudah bisa sendiri.. Cukup sekian tentang Dhycka Portal Template. Semoga dapat bermanfaat, apabila ada pertanyaan, silahkan tinggalkan komentar dibawah.
Continue reading →
Tuesday, 7 August 2012

Cyber4rt Template

Posted by Dika Nurohim 0 comments
tau blog Cyber4rt ? pasti sudah tau lah ya. kalo belum tau ya bisa di liat gambar di bawah ini ! yg mau donwload templatenya ya monggo !


Ini readmorenya masih manual, edit2 aja sendiri ya :)
Continue reading →
Monday, 6 August 2012

Membuat Permalink di Bawah Artikel Agar Blog Lebih Seo

Posted by Dika Nurohim 0 comments
Hai, ada sobat blogger. yang nanya bagaimana Cara Buat Kotak Permalink di Bawah Artikel seperti yang ada di blog ini? kalau belum jelas apa itu permalink, lihat gambar berikut sob:


Nah udah tau kan? yuk saya ajarin Cara Buat Kotak Permalink di Bawah Artikel, check this on:
1. Masuk ke Blogger > Edit HTML > centang Expand Template Widget
2. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah, lalu paste kode dibawah ini tepat diatas kode ]]></b:skin> tadi

.permalink {border: 1px dotted #00bfff; padding: 5px; background: #000;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

3. Cari kode  <data:post.body/> (bila kamu menggunakan read more di blog kamu akan muncul kode seperti itu lebih dari satu, gunakan kode yang kedua)
4. Letakkan / paste kode dibawah ini tepat di bawah kode <data:post.body/> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><small>Anda Sekarang Sedang Baca Artikel Tentang <strong><u><data:blog.pageName/></u></strong> Anda Bisa Menemukan Artikel <data:blog.pageName/>Saya Ini, dengan url <strong><data:post.url/></strong>, Kamu Juga Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel <strong><data:blog.pageName/></strong> ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> Sumbernya. Thank's <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/></small></center></div></b:if>

keterangan : ganti kata-kata yang berwarna hijau dengan kata-kata kamu sendiri jika mau

5. Klik Simpan / Save

Sekarang lihat dibawah artikel kamu sob, pasti sudah ada kotak permalinknya
sekian Tutorial Membuat Permalink di Bawah Artikel Agar Blog Lebih Seo dari Andi-Techno, semoga bermanfaat.
Continue reading →
Monday, 8 August 2011

Al-Quran Online

Posted by Dika Nurohim 0 comments

Mau Script Al-Quran seperti ini? Klik Disini!
Continue reading →