Follow my Blog

Kamis, 25 Oktober 2012

Membuat Icon Smadav

1. Buat dulu dokumen baru (Ctrl+N)
Membuat Icon Smadav web desain grafis
2. Klik Pen Tool, lalu buat shape seperti ini
Membuat Icon Smadav web desain grafis
3. Klik 2 kali kotak seperti yang ada di gambar, lalu ganti warnanya dengan #01fa09
Membuat Icon Smadav web desain grafis
4. Tekan Ctrl+Shift+N untuk membuat layer baru. Buat lagi shape seperti ini (Merah), lalu warnai
Membuat Icon Smadav web desain grafis
5. Buat Lagi layer baru, buat shape (merah), lalu warnai lagi. Jarak antar shape nggak terlalu rapat juga gpp, nanti tertutupi garis.
Membuat Icon Smadav web desain grafis
Maap ya.. bentuknya gak rata (lg malas) ^_*
Wah udah mulai keren neh….
6. Sekarang kita buat garis-garisnya. Pilih Pen Tool, lalu atur kaya gini. Buat garis dengan Pen tool seperti di bawah (merah)
Membuat Icon Smadav web desain grafis
7. Lalu kita warnai. Klik Brush Tool, klik kanan di area kerja, atur seperti di bawah ini. Klik Foreground color atur juga warnanya.
Membuat Icon Smadav web desain grafis
8. Klik kembali Pen Tool, klik kanan di Path yang tadi telah dibuat, klik Stroke Path, lalu atur kaya gini
Membuat Icon Smadav web desain grafis
Lalu Klik kanan-Delete Path pada Path tadi.
9. Lakukan juga pada garis yang lain (tidak perlu buat layer baru)
Nah….. Hasil sementara…
Membuat Icon Smadav web desain grafis
Lanju…..t.. yu……k
10. Select semua layer kecuali layer background dengan cara Ctrl+klik pada nama layer, lalu drag (klik sambil tarik) ke icon group dibawah.
Membuat Icon Smadav web desain grafis
11. Klik kanan-Duplicate Group buat nama grup: Shadow karena nanti fungsinya sebagai bayangan
12. Klik Transform-Flip Vertical, lalu tarik ke bawah sambil tekan dan tahan Shift supaya tetap lurus ke bawah
Jadi kaya gini..
Membuat Icon Smadav web desain grafis
13. Klik icon Add Layer Mask (di dekat icon group) dengan posisi Grup Shadow ter-select
Membuat Icon Smadav web desain grafis
14. Klik Gradient Tool (di bawah Paint Bucket tool)
15. Drag dari atas sampai kira-kira setengah, Ubah opacity menjadi 65 %
Membuat Icon Smadav web desain grafis
16. Tinggal tambahin Text
Membuat Icon Smadav web desain grafis
Bisa juga di kreasiin kaya gini
Membuat Icon Smadav web desain grafis
Berhasil belum?? Kalo belum, berusaha terus ya.. Pasti bisa kok, yang penting ada kemauan karena Dimana ada Kemauan, Disitu ada Jalan

Sedikit Penjelasan Hardware Jaringan

Router : Router, digunakan untuk menyambung 2 jaringan yang berbeda. Sebagai contohnya, untuk menyambungkan antara LAN dengan Internet diperlukan adanya router sebagai jembatan dari 2 jaringan tersebut.
Kedudukan router biasanya diletakkan sesudah modem, kira-kira gambarannya adalah seperti ini.
??? ? ___________???? ___________???? ___________???? ___________
???? |??? ????? |??? |????????? |??? |????????? |??? |????????? |
???? | Internet |—-|? Modem?? |—-|? Router? |—-|?? LAN??? |
???? |__________|??? |__________|??? |__________|??? |__________|

??? ??? Sedikit Penjelasan Hardware Jaringan web desain grafis
Router yang digambarkan diatas berfungsi sebagai gateway, sekaligus firewall.
Gateway : Gerbang penantian menuju internet. Masing-masing client/workstation dalam jaringan melewati gateway terlebih dahulu untuk menuju internet. Bisa digambarkan seperti ini :
??? ???? ___________???? __________________???? ___________???
??? ???? |??? ????? |??? |???????????????? |??? |????????? |?
??? ???? | Internet |—-| WS1 as Gateway1 |—-| WS Lain? |
??? ???? |__________|??? |_________________|??? |__________|??
??? ??? ??? ??? ?? ??? ??? ??? ?? |
??? ??? ??? ??? ????????????????? |
???????????????????????????? _____|____
??? ??? ??? ??? ? ??? ??? ? |????????? |
??? ??? ??? ??? ? ??? ????? | WS Lain? |
??? ??? ??? ??? ??????????? |__________|


Sedikit Penjelasan Hardware Jaringan web desain grafis
Firewall : Biasanya dipasang diantara internet dan router. Firewall berfungsi sebagai tembok keamanan untuk jaringan dalam [ LAN ]. Didalamnya biasanya terdapat fasilitas, firewall, logging, snort. etc.

Contoh router phisik multifungsi seperti itu adalah Cisco Router.
Tetapi saya lebih cenderung memakai alternatif router yaitu menggunakan Smoothwall. Karena smoothwall hanya memerlukan komputer butut yang sudah lama tidak terpakai dengan harddisk sekitar 300 mb, dan tentunya 2 lan card.
Smoothwall adalah distro linux khusus yang didesain untuk menangani masalah router, firewall, dan gateway. Selain itu Router pun digunakan untuk menyambungkan 2 LAN, yang berbeda subnet masknya. Lebih kearah Intranet.
Switch : Biasanya switch banyak digunakan untuk jaringan LAN token star.

Dan switch ini digunakan sebagai repeater/penguat. Berfungsi untuk menghubungkan
kabel-kabel UTP ( Kategori 5/5e ) komputer yang satu dengan komputer yang lain. Dalam switch biasanya terdapat routing, routing sendiri berfungsi untuk batu loncat untuk melakukan koneksi dengan komputer lain dalam LAN.
????????????
??? ??? ??? ?
Gambarannya adalah seperti ini :?? ??

Sedikit Penjelasan Hardware Jaringan web desain grafis

Hub??? : Sama seperti switch, tetapi perbedaannya adalah hub tidak memiliki faslitas routing. Sehingga semua informasi yang datang akan dikirimkan ke semua komputer (broadcast)

Rabu, 24 Oktober 2012

Linkback Auto dengan Tynt Insight

Linkback Auto dengan Tynt Insight

Bagi sebagian blogger ada yang tidak menginginkan atau tidak memperbolehkan artikel yang ada diblognya di copy paste tanpa ijin atau tanpa memberikan link back ke sumber artikel yang di copy. Barangkali jika si pelaku copy paste memberikan link back ke sumbernya tidak akan ada masalah. Namun ya namanya juga manusia, tidak mau kalau dianggap plagiat, jadinya ketika melakukan copy paste artikel tidak disertakan link back ke sumbernya.
Ada banyak cara untuk memproteksi artikel dari para pencuri aka plagiat, diantaranya adalah dengan menggunakan proteksi klik kanan atau juga dengan menggunakan tambahan script agar setiap artikel yang di copy akan secara otomatis memberikan link back.
Silahkan daftarkan URL blog kita ke http://www.tynt.com/ setelah itu copy script yang diberikan di template blog kita.
Begitu ada yang mengcopy artikel kita maka secara otomatis akan ada link yang mengarah ke blog kita.
Caranya :
- Silahkan kunjungi www.tynt.com
- Klik Tombol Get Started
New Picture (13)
- Isikan data pendaftaran
New Picture (14)
- Setelah Anda selesai registrasi, maka Anda bisa mengambil script di bagian kanan bawah.

New Picture (15)
- Letakkan script tersebut di atas </body>

<script type="text/javascript">
if(document.location.protocol=='http:'){
var Tynt=Tynt||[];Tynt.push('dsX9AQ4E4r3402adbi-bnq');
(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>

Menambah Kolom di Area Footer

Cara untuk memodifikasi template blog yang ingin di tambahkan kolom tambahan di bagian footer.. sebelumnya kita tau, yang di butuhkan adalah adanya kolom "add Gadget" seperti gambar itu.. jadi LETS DO IT..
  1. Masuk ke area DESIGN
  2. Edit HTML
  3. centang EXPAND WIDGET
  4. cari kode <b:section class='footer' id='footer'/>
  5. ganti scrip tersebut dengan scrip di bawah ini
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
.....
<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/> </p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
  • Tulisan yang bewarna biru urutkan sesuai jumlahnya nanti
  • Tulisan yang bewarna merah persentase ini harus memiliki total 100% dan nilainya boleh bervariasi.. persentase ini menunjukkan ukuran perbedaan lebar dari setiap kolomnya
Titik2 yang ada di tengah menunjukkan banyak kolom yang ingin tamen2 buat.. scrip yang di copas adalah scrip:
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
Jadi, teman2 sudah bisa menampilkan widget2 di area footer dengan jumlah kolom yang teman2 inginkan..

Memasang Menu Pop Up Melayang


* Login ke Blogger
* Masuk ke Tata Letak --> Edit HTML
* Copy Dan Paste kode di bawah ini tepat di atas kode ]]></b:skin>
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}

Kemudian Copy Dan Paste kode dibawah ini tepat diatas kode </head> 
<script src="http://s2.sigmirror.com/files/52659_xu57s/js_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
Dan Yang Terakhir Copy Dan Paste kode di bawah ini tepat di atas kode </body>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><img src="http://mortgage-education.com/Images/Close.png" /></a></div>
Masukan Isi Dari Menu Pop Up Melayang Kalian Disini
</div>
Atau Pakai Cara Yang Lebih Gampang Di Bawah Ini
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Kemudian Copy Paste kode dibawah ini :

<style type="text/css">
    #gb{
    position:fixed;
    top:10px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbcontent{
    float:right;
    border:2px solid #000000;
    background:#ffffff;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">
    <div style="text-align:right">
    <a href="http://www.bunghasta.co.cc/2010/04/memasang-menu-pop-up-melayang-di-blog.html" target="_blank">
    [Widget By hasta]
    </a>
    <a href="javascript:showHideGB()">
    .:[Close][Klik 2x]:.
    </a>
    </div>
    <center>
Masukan Code Iklan Sobat Disini
    </center>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.center = (30-gb.offsetWidth).toString() + "px";
    </script></div></div>
Keterangan :
* Untuk memasukan iklannya sobat ganti saja  Masukan Code Iklan Sobat Disini *Untuk mengatur tingginya top up saat di close pada 10px

Menyembunyikan Widget Magazine Template

Konsep dari template bergaya magazine adalah membuat tampilan yang berbeda pada homepage dan content page. Pada postingan kali ini saya akan berbagi dasar membuat tampilan blog ala magazine style dengan menyembunyikan element pada homepage atau content page agar blog kita terlihat semi-magazine style. Fungsi menyembunyikan widget selain membuat tampilan blog kita lebih hidup, cara ini juga bisa digunakan untuk mengoptimalisasi widget mana saja yang terpakai di homepage dan content page. Sebagai contohnya dapat teman-teman lihat di sidebar blog ini pada widget "Random Post" yang hanya saya tampilkan di content page menggantikan widget "Stay Connect With KBM". Selain itu cara ini juga sangat berguna untuk teman-teman yang bermain di jual-beli link karena banyak sekali pengiklan yang hanya menginginkan linknya dipasang di homepage.
Untuk menyembunyikan widget/element, tahap pertama yang harus kita lakukan adalah mengetahui widget id element yang akan kita sembunyikan. Caranya silahkan masuk halaman "Edit HTML" blogger:
Layout >> Edit HTML >> kemudian klik "Expand Widget Templates"
Sekarang cari widget id dari element yang akan kita sembunyikan, widget id biasanya diawali dengan kode seperti berikut ini :

<b:widget id='

Sebagai contohnya silahkan liat widget "Stay Connect with KBM" pada blog ini:
(Untuk lebih mempermudah teman-teman bisa langsung mencari title dari widget yang akan kita sembunyikan)

<b:widget id='HTML15' locked='false' title='Stay Connect With KBM' type='HTML'>
<b:includable id='main'>
<!-- 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:include name='quickedit'/>
</b:includable>
</b:widget>


Setelah menemukan widget id maka kita cukup menambahkan beberapa kode HTML seperti dibawah ini untuk menyembunyikan widget tersebut di home page atau di content page:

Menampilkan widget hanya pada Home Page

Untuk menampilkan widget hanya pada halaman depan (home page) silahkan tambahkan kode yang berwarna merah dibawah ini pada kode HTML widget yang telah kita cari pada tahap sebelumnya :

<b:widget id='HTML15' locked='false' title='Stay Connect With KBM' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Menampilkan widget hanya pada Content Page

Sedangkan untuk menampilkan widget hanya pada halaman postingan (content page), kita cukup menambahkan kode berwarna merah berikut ini :

<b:widget id='HTML15' locked='false' title='Stay Connect With KBM' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Kedua kode di atas hanya contoh untuk menyembunyikan widget, kode di atas juga bisa digunakan untuk menyembunyikan seluruh sidebar, footer dan sebagainya. Teman-teman bisa berkreasi sepuasnya untuk membuat tampilan lebih bergaya magazine template. Selamat berkreasi :)

Merubah Ukuran dan Posisi Sidebar dengan Main Wrapper

Jika kita sudah mengerti dengan posisi-posisi diatas sebenarnya kita sudah bisa merubah template kita. Sekarang kita mengarah kepada elemen template yang akan kita rubah posisi dan ukurannya.

Dalam sebuah template terdapat beberapa elemen yang bergabung menjadi satu halaman web/blog seperti Header. Sidebar, Main, Outer, dan Footer. Silahkan baca artikel saya tentang Elemen dalam template. Namun untuk kali ini yang akan kita bahas antara sidebar dan main wrapper. untuk kodenya sendiri biasanya seperti ini (kita ambil contoh template 3 kolom):


** main wrapper

#main-wrap1{width:460px;float:left; margin-top:10px}

#main-wrap2{float:left;width:474px;background:#FFF


{display: none !important;}); border:0px solid #323232}


.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}




** Sidebar Wrapper





#sidebar-leftwrap{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;

background:#FFF; border:1px solid #323232}


#sidebarright{width:200px;float:right;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;


background:#FFF; border:1px solid #323232}



(Kode diatas akan terlihat tidak serupa pada setiap template, tapi intinya sama.)

Coba perhatikan tulisan warna merah pada kode diatas. Jika kalian ingin merubah atau bertukar posisi antara main wrapper dengan sidebar kalian tinggal mengCopy kodenya dan menukar tulisan warna merahnya sebagai contoh kita akan menukar posisi sidebar right dengan main wrapper. Hasilnya seperti ini :





#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;

background:#FFF; border:1px solid #323232}


#main-wrap1{width:460px;float:right; margin-top:10px}


#main-wrap2{float:right;width:474px;background:#FFF


{display: none !important;}); border:0px solid #323232}


.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}




Jadi sidebar kanan akan pindah ke kiri dan halaman posting akan pindah dari kiri ke kanan. Jika sudah kita tukar posisinya, sekarang kita tinggal menyisipkan kode tambahan supaya hanya muncul dihalaman tertentu seperti yang telah saya jelaskan DISINI. Untuk kodenya seperti ini :






<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>




Sehingga kalo digabung hasilnya akan seperti ini (jangan lupa menyisipkan kode <style> untuk kode CSSnya :





<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>


#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;


background:#FFF; border:1px solid #323232}


#main-wrap1{width:460px;float:right; margin-top:10px}


#main-wrap2{float:right;width:474px;background:#FFF


{display: none !important;}); border:0px solid #323232}


.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}


</style>


</b:if>





Kode diatas berarti pada halaman single post, posisi sidebar akan pindah ke kiri dan posisi main wrapper pindah ke kanan, namun pada halaman depan posisinya sebaliknya. Simpan kode diatas dibawah kode ]]></b:skin> atau diatas kode </head>


Tunggu bentar ya saya mau bernafas dulu ........


Ok... mari kita lanjutkan. penjelasan diatas adalah menukar posisinya, sekarang kita tinggal merubah ukuran main-wrapper lebih lebar dan menghilangkan satu elemen sidebar yaitu sidebar kiri yang dari tadi belum kita otak-atik. Coba perhatikan tulisan berwarna biru pada kode diatas :


== Main : width:455px;
== Sidebarleft : width:200px;


sebenarnya gampang saja, kalian tinggal membuang sidebar left dan menambahkan angkanya pada main (halaman posting). jadi hasilnya seperti ini :


== Main : width:655px;
== Sidebar left : {display:none;} ---> dihilangkan.




jadi kode keseluruhan akan seperti ini :









<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>


#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;


background:#FFF; border:1px solid #323232}


#sidebar-leftwrap {display:none;}


#main-wrap1{width:460px;float:right; margin-top:10px}


#main-wrap2{float:right;width:474px;background:#FFF


{display: none !important;}); border:0px solid #323232}


.main .widget{margin-top:4px;margin-left:1px;width:655px;padding:0px 5px;}


</style>


</b:if>



** PEMASANGAN PADA TEMPLATE


Pilih Rancangan --> EDIT HTML (centang expand template widget) --> simpan kode modifikasi tadi diatas kode </head> atau dibawah kode ]]></b:skin>


Simpan template.

sekali lagi saya ingatkan, kode diatas hanya contoh pada salah satu template. KODE UNTUK SETIAP TEMPLATE TIDAK SELALU SAMA.