Memasang Efek Floating Social Bookmark Di Blog

19:30
Malam guest ini postingan pertama saya mengenai tutorial blog di blog ini maklum baru buka toko xixixi. dan saya disini mengucapkan terima kasih kepada maskolis.com yang sudah share tutorial ini pun juga bersumber dari blog beliau yaitu mengenai efek floating social bookmark yang ada di blog saya efek ini menggunakan jquery.ui.min jadi ketika kursor anda arahkan ke efek floating nya nanti akn muncul pelan". nah kali ini saya akan share ilmu nya kepada agan" pengunjung blog saya ini,,langsung menuju tempat penjelasannya.

1. Buka blogger.com

2. Masuk Ke Menu Template (backup terlebih dahulu template anda) jika sudah selesai membackup >> Edit HTML

3. Letakkan kode CSS ini di atas  ]]></b:skin>
.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
4. Lalu kita masukkan Jquery dan javascript nya. copy kode dibawah ini dan letakkan sebelum kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
Untuk Jquery warna biru diatas apabila sudah ada di template anda di tinggalkan saja gak usah di copy

5. Selanjutnya kita akan menaruh kode html nya untuk memanggil widget social bookmark nya. copy kode di bawah ini dan letakkan sebelum kata </body>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
Ganti yang berwarna biru dengan ID anda 

6. Save Template anda dan lihat hasilnya di blog anda

Nah itu tadi cara memasang efek floating di blog bagi yang merasa bingung silahkan bertanya di kotak komentar di bawah ini. Semoga Tutorial tadi dapat membantu anda ^_^
Malam guest ini postingan pertama saya mengenai tutorial blog di blog ini maklum baru buka toko xixixi. dan saya disini mengucapkan terima kasih kepada maskolis.com yang sudah share tutorial ini pun juga bersumber dari blog beliau yaitu mengenai efek floating social bookmark yang ada di blog saya efek ini menggunakan jquery.ui.min jadi ketika kursor anda arahkan ke efek floating nya nanti akn muncul pelan". nah kali ini saya akan share ilmu nya kepada agan" pengunjung blog saya ini,,langsung menuju tempat penjelasannya.

1. Buka blogger.com

2. Masuk Ke Menu Template (backup terlebih dahulu template anda) jika sudah selesai membackup >> Edit HTML

3. Letakkan kode CSS ini di atas  ]]></b:skin>
.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
4. Lalu kita masukkan Jquery dan javascript nya. copy kode dibawah ini dan letakkan sebelum kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
Untuk Jquery warna biru diatas apabila sudah ada di template anda di tinggalkan saja gak usah di copy

5. Selanjutnya kita akan menaruh kode html nya untuk memanggil widget social bookmark nya. copy kode di bawah ini dan letakkan sebelum kata </body>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
Ganti yang berwarna biru dengan ID anda 

6. Save Template anda dan lihat hasilnya di blog anda

Nah itu tadi cara memasang efek floating di blog bagi yang merasa bingung silahkan bertanya di kotak komentar di bawah ini. Semoga Tutorial tadi dapat membantu anda ^_^

Cara Ngeblock situs di windows 7

14:32
Untuk apa memblokir situs web, yang di maksud disini adalah memblokir dalam satu computer saja, untuk tujuan tertentu, seperti untuk melindungi agar seseorang tidak dapat membuka situs yang kita sudah blokir tersebut, atau untuk pengamanan ketika anak-anak akan menjelajah ke dunia internet. Untuk memblokir situs web disini hanya cukup menambahkan website-website yang kita akan blokir. oce langsung aja ke TKP . . .

1. Buka windows explore
2. Setelah itu buka C:\Windows\System32\drivers\etc
3. Lalu cari file hosts dan buka menggunakan notepad
4. setelah itu masukkan Tambahi isi file tersebut setelah “127.0.0.1 localhost” (tanpa kutip) dengan alamat website yang akan Anda blokir misalnya : wahyupoher.blogspot.com

5.  jika ingin mengeblock situs facebook, google maka tambahkan  www.facebook.com, www.google.com, maka anda tinggal menambahkan di bawah local host:
7. Setelah selesai simpanlah perubahan yang telah Anda lakukan dengan pilih menu file pada notepad kemudian save
8. Sekarang bukalah alamat-alamat yang telah diblokir tadi, maka alamat-alamat tadi tidak akan bisa diakses, hasilnya seperti di bawah ini :

9. jangan lupa untuk mengembalikan seperti semula ya,,, :)

nb : jika ingin menambahkan situs yang di blokir tambah kan di bawah local host dengan ip yang urut misal nya 127.0.0.2 , 127.0.0.3 dst...
Untuk apa memblokir situs web, yang di maksud disini adalah memblokir dalam satu computer saja, untuk tujuan tertentu, seperti untuk melindungi agar seseorang tidak dapat membuka situs yang kita sudah blokir tersebut, atau untuk pengamanan ketika anak-anak akan menjelajah ke dunia internet. Untuk memblokir situs web disini hanya cukup menambahkan website-website yang kita akan blokir. oce langsung aja ke TKP . . .

1. Buka windows explore
2. Setelah itu buka C:\Windows\System32\drivers\etc
3. Lalu cari file hosts dan buka menggunakan notepad
4. setelah itu masukkan Tambahi isi file tersebut setelah “127.0.0.1 localhost” (tanpa kutip) dengan alamat website yang akan Anda blokir misalnya : wahyupoher.blogspot.com

5.  jika ingin mengeblock situs facebook, google maka tambahkan  www.facebook.com, www.google.com, maka anda tinggal menambahkan di bawah local host:
7. Setelah selesai simpanlah perubahan yang telah Anda lakukan dengan pilih menu file pada notepad kemudian save
8. Sekarang bukalah alamat-alamat yang telah diblokir tadi, maka alamat-alamat tadi tidak akan bisa diakses, hasilnya seperti di bawah ini :

9. jangan lupa untuk mengembalikan seperti semula ya,,, :)

nb : jika ingin menambahkan situs yang di blokir tambah kan di bawah local host dengan ip yang urut misal nya 127.0.0.2 , 127.0.0.3 dst...


Cara mudah membuat kalkulator menggunkan Notepad

08:37
Setelah saya browsing sana-sini untuk memcari source kode Kalkulator dengan pemrograman Vb eh ternyata kecantol cara membuat kalkulator menggunakan Notepad.  Kalkulator ini sangat simpel tapi menurut saya sudah agak lengkap karena sudah ada pipolondo (Ping , Poro lan Sudo ) tambahan lagi ada Penjumlahan na. Pemrograman itu sulit tapi menyenangkan ^_^  oce langsung aja ke TKP............

1. Buka Notepad atau Notepad ++
2. Copy kan source kode di bawah ini dan paste di notepad anda

@echo off
title Kalkulator by : WahyuPoer
:ulang
echo Mari berhitung Dengan WahyuPoer...!!
set /p A=Masukkan Angka Pertama =
set /p B=Masukkan Angka Kedua =
set /p o=Pilih pengoperasian anda (*, +, -, /) =
set /a "jumlah" = A%o%B
echo Jumlah = %jumlah%
pause>null
goto ulang
3. Setelah itu simpan dengan kalkulator.bat dan Type file di ubah menjadi All files
4. kemudian buka kalkulator.bat lalu di coba , punya saya sudah berhasil nih gambar nya,, ^_^


5. Selamat Mencoba ^_^


Sumber: semuthacker.blogspot.com
Setelah saya browsing sana-sini untuk memcari source kode Kalkulator dengan pemrograman Vb eh ternyata kecantol cara membuat kalkulator menggunakan Notepad.  Kalkulator ini sangat simpel tapi menurut saya sudah agak lengkap karena sudah ada pipolondo (Ping , Poro lan Sudo ) tambahan lagi ada Penjumlahan na. Pemrograman itu sulit tapi menyenangkan ^_^  oce langsung aja ke TKP............

1. Buka Notepad atau Notepad ++
2. Copy kan source kode di bawah ini dan paste di notepad anda

@echo off
title Kalkulator by : WahyuPoer
:ulang
echo Mari berhitung Dengan WahyuPoer...!!
set /p A=Masukkan Angka Pertama =
set /p B=Masukkan Angka Kedua =
set /p o=Pilih pengoperasian anda (*, +, -, /) =
set /a "jumlah" = A%o%B
echo Jumlah = %jumlah%
pause>null
goto ulang
3. Setelah itu simpan dengan kalkulator.bat dan Type file di ubah menjadi All files
4. kemudian buka kalkulator.bat lalu di coba , punya saya sudah berhasil nih gambar nya,, ^_^


5. Selamat Mencoba ^_^


Sumber: semuthacker.blogspot.com

Mempercantik tampilan terminal Ubuntu

10:04


kali ini saya akan memposting tentang mengedit tampilan terimal ubuntu menjadi menarik tidak jitam putuh saja ^_^ dan tutorial ini saya dapatkan di catatanlinuxku.blogspot.com oke langsung aja ke TKP....

1. Install CowSay dan figlet :

$ sudo apt-get install cowsay figlet

2. Lalu edit konfigurasi terminal nya :

$ sudo gedit /etc/bash.bashrc

3. Tambahkan perintah berikut di baris paling terakhir

# Modification Terminal
cowsay -f cheese “Selamat Datang, Master Ubuntu. What Will You Do ?”
echo
#Figlet Nama
figlet -f smslant “ RIZAL GANTENG ”

nb : Yang saya tandai merah, silahkan kalian ganti dengan tulisan apa saja terserah kalian. Lalu untuk yang saya tandai kuning itu adalah kode bentuk binatang yang akan tampil di terminal kalian nanti. Silahkan meluncur ke Places > Home Folder > File System > usr > share > cowsays > cows , disitu akan ada banyak file berekstensi .cow. Nah, misalnya kalian ingin mencoba dragon.cow, maka kalian tinggal ganti aja kata cheese diatas menjadi dragon. 



4. Sekarang tutup terminal kalian, lalu buka kembali. Taraa! Coba lihat perubahan yang terjadi. 

Selamat Mencoba,,, ^_^


kali ini saya akan memposting tentang mengedit tampilan terimal ubuntu menjadi menarik tidak jitam putuh saja ^_^ dan tutorial ini saya dapatkan di catatanlinuxku.blogspot.com oke langsung aja ke TKP....

1. Install CowSay dan figlet :

$ sudo apt-get install cowsay figlet

2. Lalu edit konfigurasi terminal nya :

$ sudo gedit /etc/bash.bashrc

3. Tambahkan perintah berikut di baris paling terakhir

# Modification Terminal
cowsay -f cheese “Selamat Datang, Master Ubuntu. What Will You Do ?”
echo
#Figlet Nama
figlet -f smslant “ RIZAL GANTENG ”

nb : Yang saya tandai merah, silahkan kalian ganti dengan tulisan apa saja terserah kalian. Lalu untuk yang saya tandai kuning itu adalah kode bentuk binatang yang akan tampil di terminal kalian nanti. Silahkan meluncur ke Places > Home Folder > File System > usr > share > cowsays > cows , disitu akan ada banyak file berekstensi .cow. Nah, misalnya kalian ingin mencoba dragon.cow, maka kalian tinggal ganti aja kata cheese diatas menjadi dragon. 



4. Sekarang tutup terminal kalian, lalu buka kembali. Taraa! Coba lihat perubahan yang terjadi. 

Selamat Mencoba,,, ^_^


Cara memndownload di slide share

20:51






slide share adalah website sejenis scridb. dan jika anda yang new bie kayak aq ^^ masih bingung cara mendownload file di slide share saya akan menjelaskan caranya.

cara nya sebagai berikut :

1. buka alamat slideshare.net

2. ketik nama file / artikel yang ingin anda cari di kotak atas. kemudian klik search

3. jika sudah menemukan artikel yang di cari klik download


4. kemudian anda klik login with facebook -> login menggunakan akun facebook anda


5. setelah login nanti akan muncul menu perizinan. klik izinkan

6. setelah itu slide share akan meminta anda login tetapi anda tidak usah login langsung klik i'dont   lanjutannya lupa, :D yang penting tempatnya di pojok kanan bawah, :D

7. tunggu beberapa menit nanti file akan terdownload secara otomatis






slide share adalah website sejenis scridb. dan jika anda yang new bie kayak aq ^^ masih bingung cara mendownload file di slide share saya akan menjelaskan caranya.

cara nya sebagai berikut :

1. buka alamat slideshare.net

2. ketik nama file / artikel yang ingin anda cari di kotak atas. kemudian klik search

3. jika sudah menemukan artikel yang di cari klik download


4. kemudian anda klik login with facebook -> login menggunakan akun facebook anda


5. setelah login nanti akan muncul menu perizinan. klik izinkan

6. setelah itu slide share akan meminta anda login tetapi anda tidak usah login langsung klik i'dont   lanjutannya lupa, :D yang penting tempatnya di pojok kanan bawah, :D

7. tunggu beberapa menit nanti file akan terdownload secara otomatis

Subscribe to: Posts (Atom)