19/02/17

Trik Terbaru Manipulasi Foto Dengan CSS3

Trik Terbaru Manipulasi Foto Dengan CSS3 - Pemrograman web kian hari kian meningkat kualitasnya. Semakin banyak Trik dan tutorial yang membahas tentang trik terbaru manipulasi foto dengan CSS3. Dengan adanya teknologi terbaru dari CSS, semakin mempermudah developer web dalam pengerjaan dan design.

Padahal untuk bisa memanipulasi foto tidak harus menggunakan software mahal seperti Adobe Photoshop, cukup dengan CSS3 saja maka Anda sudah bisa memanipulasi foto Anda menjadi lebih menarik dengan memberikan berbagai efek.

Benar sekali, CSS3 bisa untuk memanipulasi foto, Anda tidak salah dengar kok.

Trik Terbaru Manipulasi Foto Dengan CSS3

Trik Terbaru Manipulasi Foto Dengan CSS3
Trik Terbaru Manipulasi Foto Dengan CSS3

CSS3 sekarang memang tidak sama dengan CSS3 beberapa tahun lalu, CSS3 kini lebih powerful, CSS3 memiliki banyak fitur yang jika dipergunakan dengan baik maka bisa untuk memanipulasi foto.

CSS3 memiliki berbagai fitur yang memungkinkan hal tersebut (memanipulasi foto), diantaranya adalah:

Filter, blend, modes, gradients, box-shadow, stoke, rotation, dan lain sebagainya.

Fitur-fitur tersebut membuat tampilan gambar di browser menjadi lebih menarik, tidak perlu lagi menggunakan aplikasi pengolah foto seperti Photoshop jika ingin sekadar memberi efek overlay, multiply, screen, color-dodge, lighten, hue, saturation, gradients dll.

Efek-efek yang biasa kita temukan di Photoshop kini bisa kita lakukan hanya dengan CSS, dan seketika browser akan menampilkan hasilnya.

Berikut sebuah video dari Una Kravets yang berjudul Editing Images di CSS3 yang dia paparkan pada seminar dotCSS 2015 lalu.

Mari kita simak bersama-sama videonya:


Super sekali bukan. Untuk penerapannya anda bisa coba membaca artikel

Membuat Effect Box Circle untuk Gambar Banner dengan CSS3.

4 Trik Membuat Brosur Lebih Interaktif

4 Trik Membuat Brosur Lebih Interaktif
4 Trik Membuat Brosur Lebih Interaktif (image: designspinners.com)

4 Trik Membuat Brosur Lebih Interaktif - Jika membahas masalah design, kita tidak lepas dari pandangan interaktif dari user. Untuk membuat brosur menjadi lebih interaktif, butuh ide yang cemerlang. Untuk itu perlu diadakan survey yang baik terhadap brosur yang lebih interaktif dibuat oleh para designer professional.

Brosur menjadi salah satu media promosi yang praktis. Didalamnya Anda bisa memberikan informasi tertentu pada pembaca, atau mempromosikan apa yang Ingin Anda tawarkan pada konsumen Anda. Dengan demikian,membuat brosur yang menarik menjadi satu keharusan tersendiri. Dengan membuat brosur yang menarik, pembaca tidak hanya tertarik untuk melirik atau membaca pesan Anda, tetapi juga tertarik untuk mengikuti ajakan Anda pada brosur tersebut.

Lalu,bagaimana caranya membuat brosur lebih interaktif bagi pembaca?

Berikut 4 trik membuat brosur lebih interaktif : 

1. Gunakan Aplikasi Komputer Khusus Desain Grafis


Tidak ingin repot pada akhirnya menghasilkan brosur yang terkesan asal. Dengan demikian jangan salahkan konsumen jika mereka juga kurang tertarik meski hanya melirik brosur Anda. Ingatlah bahwa tujuan Anda adalah untuk menarik masyarakat agar membaca kemudian mengikuti ajakan Anda lewat brosur tersebut. Dengan demikian buatlah brosur semaksimal mungkin dengan aplikasi desain grafis yang akan membuat Anda lebih bebas berkreasi.

Anda memang bisa membuat brosur dengan miscrosoft word, namun aplikasi lain yang memang dikhususkan untuk mengedit atau membuat gambar tentu saja akan lebih memberikan hasil yang maksimal.

2. Gunakan Foto Dibagian Depan Brosur


Tips kedua agar bisa membuat brosur yang menarik adalah dengan menggunakan gambar foto pada bagian depan brosur. Anda bisa memperbesar gambar foto tersebut dengan menyertakan apa yang ingin Anda jual. Misalnya memasang foto wanita cantik yang sedang memegang produk pemutih jika yang ingin Anda tawarkan adalah produk pemutih.

3. Sampaikan Informasi Secara Per Point atau per Subjudul


Brosur memang bisa menyampaikan apa yang ingin Anda sampaikan. Namun sampaikanlah dengan singkat, jelas, dan padat. Gunakan point-point yang mencakup seluruh informasi yang ingin Anda sampaikan. Anda juga bisa menyampaikannya per sub judul. Masyarakat biasanya lebih senang membaca dengan teknik demikian dari pada text wall.

Pada tahap ini Anda juga bisa bermain dengan warna dan bentuk tulisan. Namun ingat Anda tidak boleh berlebihan. Cukup gunakan 1-3 warna tulisan, serta 1-3 bentuk tulisan saja.

4. Gunakan Judul yang Menarik


Judul juga bisa menarik pembaca untuk membaca isi lain dari brosur Anda. Dengan demikian buatlah judul yang menarik, seperti menggunakan kata “Wah, Wow, dll” pada awal judul. Anda juga bisa menarik pembaca untuk membeli produk atau mengikuti ajakan lain pada brosur Anda dengan member diskon untuk pembeli dengan jangka waktu tertentu jika yang Anda tawarkan adalah sebuah produk.

Untuk lebih mempercantik brosur Anda, aplikasi desain grafis pada komputer tentu saja menyediakan banyak menu pilihan atau cukup gunakan jasa perusahaan graphic design untuk menciptakan brosur yang menarik. Dengan demikian Anda bisa menggunakan berbagai menu pilihan tersebut namun ingat jangan terlalu berlebihan.

Disamping itu, ide cemerlang tidak lepas dari ide-ide para professional design. Jadi untuk menerapkan 4 trik membuat brosur lebih interaktif ini dibutuhkan survey ke berbagai brosur. Sehingga ide kita bisa lebih melesat maju lagi. Semoga bermanfaat... 💪💪

28/07/16

Cara Menambah Gambar / Image Pada Komentar Blogger

Cara Menambah Gambar Pada Komentar Blogger
Cara Menambah Gambar / Image Pada Komentar Blogger
Salamullah... Wasshalatu wassalamu 'ala rasulillah Muhammad... Curhat dikit ah, bete banget hari ini, banyak kerjaan yang numpuk, belum lagi database yang hilang akibat peningkatan versi server hosting. Gilak gua dibuatnya. tapi ya gimana lagi, tuntutan hidup, pasti banyak masalah ya kan. Baiklah sahabat Tutorial Jitu, sekian lama tidak menyediakan tutorial yang hangat. Kali ini saya akan memberikan tips gampang dan spektakuler :D untuk Cara Menambahkan Gambar / Image pada Komentar Blogger.

Langsung saja, ikuti step by stepnya ya.

Cara Menambah Gambar / Image Pada Komentar Blogger


Langkah 1

Silahkan masuk ke blogger sobat, kemudian masuk ke 'Edit HTML' dan kemudian masukkan script berikut tepat diatas </body> :

<script type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
   $('b[rel^="h"]', this).nextAll().filter('br').remove();
    $('i[rel="pre"]', this).replaceWith(function() {
        return $('<pre></pre>').append($(this).contents());
    });
    $('i[rel="image"]', this).replaceWith(function() {
        return $('<img />').attr('src', $(this).text());
    });
    // Menyisipkan tag `<h3>`
    $('b[rel="h3"]', this).replaceWith(function() {
        return $('<h3></h3>').append($(this).contents());
    });
    $('b[rel="quote"]', this).replaceWith(function() {
        return $('<blockquote></blockquote>').append($(this).contents());
    });
    $('i[rel="code"]', this).contents().unwrap().wrap('<code></code>');
});
//]]>
</script>

Kemudian silahkan anda Simpan.

Langkah 2

Silahkan anda coba posting komentar dengan format seperti berikut :
<i rel="image">Link Gambar Anda</i>
Selesai deh... Jika berhasil komen-komenan lha sob di bawah... hehe... jangna lupa menyebutkan Alhamdulillah...

29/12/14

Lanjutan Percantik Tampilan Login Java Neetbeans Bag. 2

Panjang sekali ya tutorialnya,... sebenarnya tidak terlalu panjang, semua itu agar anda mengerti dengan mudah maka saya sertakan dengan gambar pembuatannya. Langsung saja ikuti tutorial lanjutannya. Bagi anda yang belum membaca artikel sebelumnya, silahkan layari dulu artikelnya dengan mengklik link di bawah:

Percantik Tampilan Login Java Neetbeans dengan Gambar Serta Koneksi Database

Klik gambar untuk lebih jelasnya.

Jika anda sudah membaca artikel di atas, langsung saja, mari lanjut tutorial selanjutnya:

Step 5

Implementasi Coding


Silahkan import dulu data yang diperlukan:
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.swing.JOptionPane;
Cari coding: public class login extends javax.swing.JFrame{ dan kemudian masukkan coding berikut tepat di bawahnya:
private Connection cn;
private Statement st;
private ResultSet rs;
private String sql="";
private String host;
Sehingga akan menjadi seperti ini:
public class login extends javax.swing.JFrame{
private Connection cn;
private Statement st;
private ResultSet rs;
private String sql="";
private String host;
Kemudian cari coding berikut:

public login() {
    initComponents();
}

Tambahkan coding berikut tepat di bawah initComponents();
    koneksi();
    setLocationRelativeTo(null);


Sehingga menjadi:
public login() {
    initComponents();
    koneksi();
    setLocationRelativeTo(null);
}
Merah yaa... tenang... itu karena fungsi koneksi(); masih belum di deklarasikan. Selanjutnya mari kita tambahkan fungsi koneksinya:

public void koneksi(){
    try {
        Class.forName("com.mysql.jdbc.Driver");
        cn=DriverManager.getConnection("jdbc:mysql://localhost/db_testing","root","");
    } catch (Exception e){
        JOptionPane.showMessageDialog(null,"koneksi gagal"+e.getMessage());
    }
}

pastekan tepat di bawah coding public login(), sehingga menjadi seperti ini:

public login() {
    initComponents();
    koneksi();
    setLocationRelativeTo(null);
}

public void koneksi(){
    try {
        Class.forName("com.mysql.jdbc.Driver");
        cn=DriverManager.getConnection("jdbc:mysql://localhost/db_testing","root","");
    } catch (Exception e){
        JOptionPane.showMessageDialog(null,"koneksi gagal"+e.getMessage());
    }
}

Kemudian kita akan menambahkan fungsi keypressed pada textfield password. Caranya klik kanan pada textField password kemudian Events>Key>Key Pressed lihat gambar:

Klik gambar untuk lebih jelasnya.
Kemudian masukkan coding berikut:

int ascii=evt.getKeyCode();
       
        if (ascii==10) {
            try {
                koneksi();
                sql="select * from t_login where username = '"+username.getText()+"'AND password = '"+password.getText()+"'";
                st=cn.createStatement();
                rs=st.executeQuery(sql);
                if(rs.next()) {
                   
                    JOptionPane.showMessageDialog(this, "Welcome To : " + username.getText() + "","Informasi",JOptionPane.INFORMATION_MESSAGE);
                   

                        new MENU().setVisible(true);
                   
                       
                  
                    dispose();
                }else{
                    JOptionPane.showMessageDialog(this, "Identitas : " + username.getText() + " : Tidak diketahui!!!","Informasi",JOptionPane.ERROR_MESSAGE);
                    username.setText("");
                    password.setText("");
                    username.requestFocus();

                }
            } catch (Exception e) {
                JOptionPane.showMessageDialog(null, "gaggal login"+e.getMessage());

            }
    } 

Semua coding akan tampak seperti pada gambar berikut:
Klik gambar untuk lebih jelas

Setelah semuanya selesai.. jangan lupa satu hal... :D silahkan tambahakn dulu library untuk koneksi sqlnya. Lihat gambar:

Klik gambar untuk lebih jelasnya.
tambahkan librarynya di lokasi dimana anda letak. Nama librarynya: mysql-connector-java-5.1.6-bin.jar, Jika belum punya librarynya, bisa anda download dari mbah kita google, atau bisa mendownload program jadi buatan saya di bawah, di dalam folder 'lib' sudah saya sediakan librarynya.

Klik gambar untuk lebih jelasnya.
Oke silahkan simpan... coba kita jalankan... Run:

Klik gambar untuk lebih jelasnya.
Jika anda mengikuti semua yang saya haturkan dari awal dengan benar, maka program login akan berjalan dengan baik. Untuk melihat projek yang saya buat, silahkan download di bawah ini.


Terimakasih sudah membaca dan mempraktekkan artikel ini... semoga bermanfaat buat semuanya. ;)

Percantik Tampilan Login Java Neetbeans dengan Gambar Serta Koneksi Database

Lama tidak posting... Pengen banget share ilmu agar bermanfaat buat semuanya. Biar ilmu saya juga terus berkembang. Untuk para master tolong jangan diketawain ya, karna triknya sangat mudah. Tidak perlu mahir coding untuk design model login seperti yang akan saya buat nanti.

Sebagai Screenshoot dari form login buatan saya, silahkan lihat gambar di bawah ini:


Klik gambar untuk lebih jelas

Simple, tapi sedikit elegan... :D ngarepp...
Mungkin tutorial ini untuk para pemula saja ya. Langsung saja, silahkan ikuti tutorialnya berikut ini.

Percantik Tampilan Login Java Neetbeans Serta Koneksi Database

Step 1: 

Membuat Database


Buatlah database dengan nama: db_testing
dan kemudian buatlah table dengan nama table: t_login

kemudian buat sebuah field berikut:

Field Name Type Width
username Varchar 25
password Varchar 25
CREATE TABLE 'db_testing','t_login'(
'username' VARCHAR(15)NOT NULL,
'password' VARCHAR(30)NOT NULL,
PRIMARY KEY('username')
)
Setelah kita buat databasenya, silahkan diisi tabel t_login dengan username: admin, dan password: 123456.

Step 2:

Membuat Design Form Menu Utama Java

Buka program NetBeans, saya sendiri menggunakan java NetBeans IDE 7.4, dan kemudian buat projek baru dengan nama LoginTesting:

Klik gambar untuk lebih jelas
Klik gambar untuk lebih jelas
Kemudian buat JFrameForm baru. Lihat gambar:

Klik gambar untuk lebih jelas
Akan keluar tampilan new JFrameForm, kemudian ganti class name nya dengan nama: MENU. Lihat gambar:
Klik gambar untuk lebih jelas
Form yang kita buat tadi merupakan form menu utama. Maksudnya, ketika kita selesai proses login, maka kita akan diarahkan ke menu Form MENU tadi.

Step 3:

Membuat Design Form Menu Login Java


Selanjutnya kita buat jFrameForm baru dengan menlihat cara diatas, class name nya diganti dengan nama: login. Lihat gambar:
Klik gambar untuk lebih jelas

Selesai sudah membuat form Menu Login dan Menu Utama. Sebelum kita belajar lebih lanjut lagi, silahkan download dua gambar berikut untuk latihan:

Gambar 1

Gambar 2
Simpan kedua gambar diatas kedalam directory folder projek, .../src/img  (tambahkan folder img di dalam folder src) Lihat gambar untuk lebih jelasnya:

Klik gambar untuk lebih jelas
Kembali ke NetBeans, sekarang kita akan memasukkan gambar yang kita download tadi. Silahkan drag jLabel ke dalam form login. dan kemudian klik kanan, pilih Properties. Lihat gambar:

Klik gambar untuk lebih jelas

Pada form jLabel Properties, silahkan ikuti petunjuk pada gambar berikut:

Klik gambar untuk lebih jelas
Silahkan hapus tulisan jTabel1, dengan cara klik kanan pada jLabel1>Edit Text, dan rapikan tampilan. Lihat gambar:

Klik gambar untuk lebih jelas
Dan kemudian kita masukkan lagi gambar kedua atau gambar logo yang kita download tadi dengan cara men-drag label baru, kemudian klik kanan>properties. Seperti cara menambah gambar di atas. Lihat gambar:

Klik gambar untuk lebih jelas
 Jangan lupa untuk menghapus tulisan jLabel2 nya dengan cara klik kanan>Edit Text. Sekarang mari kita rapikan tampilannya.

Step 4:

Merapikan Tampilan Gambar dengan Navigator


Sebelum kita melangkah lebih jauh, bagi Netbeans anda yang belum menampilkan menu Navigator, silahkan tampilkan dulu menu Navigator dengan menuju menu Window>Navigator, atau bisa juga dengan menekan tombol Ctrl + 7 pada keyboard, lihat gambar:

Klik gambar untuk lebih jelas
Ok, jika sudah... silahkan klik menu Navigator. pada menu Navigator, silahkan klik kanan pada [jFrame]>Set Layout>Absolute Layout. Lihat gambar:

Klik gambar untuk lebih jelas
Jika berhasil, maka Absolute Layout akan tampil pada navigator. Lihat gambar:

Klik gambar untuk lebih jelas
Jika sudah tampil, sekarang tinggal kita rapikan saja. Silahkan tarik jLabel1 dan jLabel2 pada posisi yang anda inginkan. Silahkan rapikan tampilan menu Login anda.

Keterangan:
Absolute Layout ini berfungsi untuk meletakkan gambar yang satu diatas gambar yang lainnya. Atau kalau di microsoft office word absolute layout ini adalah berfungsi sebagai align, (in front of text, behind text, dll).

Selanjutnya silahkan tambah jLabel baru untuk Username dan Passwordnya. Kemudian langsung saja ditambahkan TextField kedalamnya dan rapikan.

jTextField1 ganti variabel dengan username
jTextField2 ganti variabel dengan password

Saya rasa untuk mengganti nama variabel sudah tau semua ya. Jika belum tau, saya kasih dikit bocorannya :D, silahkan klik kanan pada TextField>Change Variable Name.

Penting: Agar background gambar selalu di posisi dasar, silahkan tarik atau pastikan jLabel1 selalu berada pada posisi paling bawah pada Navigator (jLabel1 adalah nama variabel label gambar).

Kemudian silahkan tambah button/tombol untuk Close/Tutup. Silahkan lihat gambar:

Klik gambar untuk lebih jelas
Kemudian kita akan mengganti font TextField untuk password, silahkan klik kanan pada textField password>Properties, dan kemudian ganti jenis fontnya dengan Wingdings, terserah mau jenis wingdings yang mana... Lihat gambar:
Klik gambar untuk lebih jelas
Dan ganti fontnya:
Klik gambar untuk lebih jelas

Dan selanjutnya silahkan tambah kreasi anda sesuka hati anda. Mungkin berikut kreasi punya saya:

Klik gambar untuk lebih jelas

Aktifkan fungsi Close pada Button Close yang kita buat. Caranya klik dua kali pada button close, masukkan coding berikut:
this.dispose();
Lihat Gambar:
Klik gambar untuk lebih jelas
Oke... karna tutorial ini agak panjang, jadi kita bagi artikel ini menjadi dua bagian. Dan kita akhiri dulu smpai disini. Untuk implementasi codingnya, silahkan lanjut ke pada bagian dua:

Lanjutan Percantik Tampilan Login Java Neetbeans Bag. 2


19/06/14

Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next



Banyak widget artikel terbaru yang telah dimodifikasi agar menjadi lebih menarik, salah satunya adalah yang akan kita bahas ini nanti yaitu widget artikel terbaru disertai dengan tombol home, previous dan next.

Berikut langkah cara membuat artikel terbaru disertai tombol home, previous dan next :

1. Login akun blogger Anda.

2. Pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.

3. Cari kode ]]></b:skin> tekan tombol Ctrl + F untuk melakukan pencarian.

4. Letakkan kode berikut diatas kode ]]></b:skin>
 
#pemula-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.pemula-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.pemula-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.pemula-elemen h6,.pemula-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.pemula-elemen:hover{background-color:#c3c3c3}
.pemula-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#pemula-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#pemula-navigasifeed:hover{background-color:#c3c3c3}
#pemula-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#pemula-navigasifeed span{padding:5px 10px}
#pemula-navigasifeed .next{float:right}
#pemula-navigasifeed .previous{float:left}
#pemula-navigasifeed .home{text-align:center}
#pemula-navigasifeed a:hover,#pemula-navigasifeed span.noactived{color:transparant!important} 
Keterangan:
Tulisan yang berwarna biru adalah ukuran lebar dan tinggi gambar/thumbnail.

5. Kemudian cari kode </head>, letakkan kode berikut diatas kode </head>
 
<script type='text/javascript'>
//<![CDATA[
var numfeed = 3;
var startfeed = 0;
var urlblog = "http://id-pemula.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function pemulakolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='pemula-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + pemulakolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("pemula-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='pemula-loading'></div>";
document.getElementById("pemula-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'pemulaLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("pemulaLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script> 
Keterangan:
var numfeed=3; yaitu jumlah artikel yang akan ditampilkan.
var charac=100; yaitu jumlah karakter atau huruf pada artikel yang ditampilkan.
varurlblog=”URL BLOG ANDA” ganti dengan URL blog Anda.

6. Simpan template.

Setelah selesai menambahkan kode diatas pada template blog Anda, berikutnya memasang pada widget blog Anda :

1. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
2. Letakkan kode berikut pada HTML/JavaScript.
<div id="terbaru"></div>
<div id="pemula-navigasifeed"></div>
3. Terakhir Simpan.

Nah, sekian cara membuat artikel terbaru disertai dengan tombol home, previous dan next. Semoga dapat membantu!

03/01/14

Cara Menghilangkan Diberdayakan Oleh Blogger


  1. Login ke blogger. Dari halaman dasbor ke pengaturan template.
  2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
  3. #Attribution1 { height:0px; visibility:hidden; display:none }
  4. Save Template, Selesai.

Simple Kan silahkan di praktekkan.....

23/12/13

Cara Membuat Widget Komunitas Di Blogger Menggunakan Widget Generator


Halo sobat blogger semua. Pada postingan kali ini, saya menyiapkan sobat blogger sebuah tool atau generator yang dapat membuat sebuah widget komunitas. Widget komunitas adalah sebuah widget yang
 menampilkan FaceBook Like dan Follow Twitter yang muncul di bagian sisi bawah blog. Widget komunitas ini muncul ketika Scroll Bar media browser di tarik ke bawah. Untuk melihat demo-nya, klik tombol di bawah ini!



stock-photo-demo-icon-96251081

Bagaimana? Cantik bukan tampilan widget komunitas ini? Untuk memasangnya, sobat blogger tidak perlu edit template. Yang perlu sobat blogger lakukan hanya, membuat kode menggunakan alat atau generator yang ada di bawah ini.

kUNJUNGI DISINI 

komunitas-widget

Cara menggunakan Generator Widget Komunitas
  1. Pilih Warna Widget : Tentukan warna widget komunitas dengan cara meng-klik tombol yang terdapat disampingnya.
  2. Kostumisasi : Kolom pertama diisi dengan nama akun FB dan kolom kedua dengan nama akun Twitter. Untuk posisi widget, gunakan arah panah yang tersedia untuk merubahnya (Left = Kiri dan Right = Kanan).
  3. Aplikasi Tombol : Untuk mendapatkan kode widget komunitas klik tombol "Dapatkan kode". Untuk membuat ulang widget komunitas, tekan tombol "Reset"
  4. Kode Widget : Ketika sobat blogger meng-klik tombol "Dapatkan Kode", secara otomatis kode akan muncul di kolom yang tersedia. Sobat tinggal copy paste kode yang di peroleh ke blog sobat.



Cara memasukkan kode Widget Komunitas ke Blogger
  1. Masuk ke blogger.com
  2. Pada menu drop down, pilih Layout (Tata Letak)
  3. html-javascript
  4. Klik Add a Gadget (Tambahkan gadget)
  5. Pilih HTML/JavaScript
  6. tambahkan-gadget
  7. Masukkan kode yang diperoleh lalu klik tombol Save

14/12/13

Membuat Form Menu Login Pada Java NetBeen

Tutorial kita hari ini sangat simple sekali sebenarnya ya, tidak diperlukan keahlian khusus dalam membangun (emang tukang bangunan....) sebuah desktop aplikasi untuk java. Namun anda tidak hanya sekedar copy codingnya, terus jadi deh... tidak sobat... Disini anda dituntut juga untuk membuat sendiri formnya / desain menu sesuai dengan kreasi anda sendiri.

Dengan demikian, kami disini hanya memberikan kodingnya saja, sehingga akan lebih mudah bagi anda untuk membuatnya. Silahkan anda ikuti tutorial step by step Membuat Form Menu Login Pada Java NetBeen berikut ini.

Buat Pemula aja yaa.... hehe...

Langkah awal : Klik file pilih New Project
Lihat Gambar








Akan tampil






Kemudian, silahkan anda design form tersebut dengan kreasi anda, sehingga menjadi tampilan untuk login, kami memberi contoh utamanya saja, lihat gambar berikut:


Silahkan ganti variable name dengan melihat gambar berikut ini:


Jika sudah selesai, Silahkan anda pilih menu "Source", lihat gambar:


Silahkan Anda Cari Code berikut:


public class login extends javax.swing.JFrame {

    /**
     * Creates new form login
     */
    public login() {
        initComponents();
    }


Hapus Kode yang berwarna Merah, ganti dengan kode berikut:



private java.sql;
Statement st; 
private Connection cn;
private ResultSet rs;
private String sql;
 /** Creates new form login */
public login() { 
initComponents();
setLocationRelativeTo(null); 
tusername.requestFocus(); 
}
private void tusernameKeyPressed(java.awt.event.KeyEvent evt) {
// TODO add your handling code here:

int ascii=evt.getKeyCode(); if (ascii==10)

if(tusername.getText().equals("ADMIN"))
{
tpass.requestFocus();
 }else{

JOptionPane.showMessageDialog(null, "Nama Pengguna SALAH!!!","Error",JOptionPane.ERROR_MESSAGE);
tusername.setText("");
 tpass.setText("");
 tusername.requestFocus(); 


}
private void tpassKeyPressed(java.awt.event.KeyEvent evt) {
// TODO add your handling code here:
int ascii=evt.getKeyCode();
if (ascii==10) {
String pass=tpass.getText();
String user=tusername.getText();
 if((user.equals("ADMIN")) & (pass.equals("123456"))) {
new MENU().show();
dispose();
}else{ JOptionPane.showMessageDialog(null, "Password SALAH!!!","Error",JOptionPane.ERROR_MESSAGE);
tusername.setText("");
tpass.setText("");
tpass.requestFocus();
}
}
}
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
this.dispose();


Keterangan:
User Name : ADMIN
Password: 123456

Jika sudah selesai, silahkan anda jalankan dengan menekan tombol Run, jika belum berhasil, mari kita pecahkan bersama-sama pada kotak komentar dibawah...

Tampilan Menu

Semoga bermanfaat...

13/12/13

15 Trik Untuk Blog Terlihat Lebih Profesional

15 Trik Untuk Blog Terlihat Lebih Profesional

Penambahan widgets dan aksesoris pada halaman blog memang menyenangkan dan membuat halaman blog akan terlihat sangat cantik. Tapi tahukah anda ada beberapa hal yang harus dihindari pada halaman blog anda agar terlihat lebih profesional. Kenapa tampilan halaman harus Profesional? untuk menjawab hal ini sangatlah bervariatif yang jelas jawaban abstrak dari saya adalah masalah tampilan, anda tahu kan penampilan halaman dengan user interface yang baik adalah hal yang utama, apapun didunia ini pertama kali yang dilihat adalah penampilan jika kesan pertama sudah tidak baik jelas akan berpengaruh buruk terhadap pengunjung blog anda. secara realita memang penilaian setiap orang bervariasi dan relatif tetapi tidak salah kan kita mencoba menuju ke kearah kesempurnaan.

Masih ingat beberapa bulan yang lalu ketika saya baru pertama kali membuat blog. Banyak sekali widget dan aksesoris yang saya pasang pada halaman blog saya, setelah saya pikir-pikir untuk apa semua itu jika tidak ada hubungan sama sekali dengan blog saya dan jangan pernah berpikir bahwa tampilan blog saya Profesional karena mencapai tujuan tersebut sangatlah tidak mudah dan butuh waktu. untuk menjawab semua hal diatas saya akan berbagi tips bagaimana menjadikan halaman blog anda terlihat lebih berisi dan terlihat profesional dan apa saja yang harus dihindari pada halaman blog anda .

15 trik agar halaman blog terlihat lebih Profesional :


1. Lakukan pengecekan halaman pada beberapa web browser yang berbeda: Tampilan halaman anda begitu cantik di browser firefox tetapi belum tentu bagus di browser IE atau Opera atau browser yang lain. Ingat pengunjung blog anda tidak hanya menggunakan satu browser saja. untuk itu anda coba lakukan pengecekan dengan browser yang berbeda, misalkan : Firefox, Flock, Mozilla, IE, Opera, Safari.

2. Pilihan warna pada blog: Pemilihan warna memang susah-susah gampang semuanya tergantung selera pemilik blog. Jangan terlalu egois, pilih warna sesuai dengan tema blog anda. coba anda pikir jika blog anda tentang agama dengan pilihan warna hitam, terlihat janggal bukan! kebanyakan warna hitam lebih cenderung ke situs yang bertemakan underground.

3. Hindari Memasang Jam: Tanyakan pada diri anda sendiri apa gunanya memasang jam di blog anda, jika hanya sebagai pengingat waktu atau untuk mempercantik halaman sebaiknya tidak usah digunakan, apa gunanya jam pada taksbar windows. yang jelas bakal bikin load page anda semakin berat.

4. Hindari pasang kalender: Apa gunanya kalender windows? orang butuh informasi dari blog anda bukan ingin melihat kalender. sekedar informasi kalender yang saya maksud adalah kalender umum, beda dengan kalender yang menampilkan sebuah posting (biasanya banyak digunakan pengguna wordpress)

5. Hindari pasang jumlah pengunjung tetap: jika blog anda baru jangan gunakan jumlah pengunjung (counter), ini akan berakibat penilaian yang buruk terhadap blog anda. walaupun untuk beberapa penyedia layanan counter menyediakan fasilitas untuk memanipulasi dan menambah jumlah pengunjung secara manual, coba anda pikir blog yang baru dibuat sudah mencapai 100.000 pengunjung apa itu mungkin?.

6. Jangan memelas untuk meminta mengklik iklan: hindari kata "klik iklan dibawah ini" atau bahasa apapun yang meminta pengunjung anda untuk mengklik iklan. sampai saat ini ada beberapa blog yang melakukan hal tersebut (maaf jika blog anda termasuk dalam hal ini) siapa sih didunia ini yang suka diperintah, Tanpa anda menyuruhpun pengunjung bakal mengklik iklan tersebut jika dirasa berguna gai mereka.

7. Jangan memasang iklan yang berserakan: Iklan yang banyak memang sangat menguntungkan, namun jangan sampai isi halaman anda hanya iklan dan iklan. Pasang iklan sewajarnya saja dan tahukah anda pengunjung sangat risih dengan adanya iklan yang telihat melebihi kapasitas dari isi halaman blog anda.

8. Hindari memasang lagu pada blog: Selain bikin halaman berat blog yang menampilkan lagu agak terkesan tidak profesional dan maaf agak terkesan jaman dulu (jadul). Tidak masalah jika blog anda tentang musik atau blog personal tapi untuk blok bisnis kayanya kurang cocok.

9. Menampilkan status IP pengunjung: Blog anda bukan program spy khan? jadi lebih baik tidak usah dipasang agar pengunjung tidak merasa dimata-matai.

10. Memasang widgets yang tidak ada hubunganganya dengan blog: Menambahkan widgets memang menyenangkan tapi jika tidak ada hubungannya malah blog anda terkesan aneh. pasanglah widget sesuai dengan kebutuhan saja.

11. Perhatikan tanda baca: Perhatikan tulisan anda apakah sudah benar tanda bacanya. Kesalahan dalam titik koma saja akan berakibat mempunyai arti yang berbeda.

12. Jangan gunakan gambar yang besar: Gambar memang mempercantik halaman anda, gambar yang besar justru jadi bumerang buat loading page anda. yang jelas blog anda pasti akan diabaikan untuk sementara waktu ketika loading page sedang berjalan.

13. Periksa Dead link: Link yang telah mati bakal tidak disukai pembaca, jangan kan pembaca search engine pun tidak menyukai hal ini. Lakukan pengecekan dead link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini.

14. Selalu pasang nama sumber artikel: Blog yang profesional selalu menghargai jerih payah orang lain, yang jelas memasang nama sumber tidak merugikan anda sedikitpun sebaliknya penghargaan atas jerih payah orang lain itulah yang membuat anda terlihat lebih profesional.

15. Cara merespon komentar yang baik: Jangan pernah bersikap menggurui, hargai semua komentar dengan bijak walau pun ada beberapa komentar yang menyebalkan. Ingat! blog tempat orang menuangkan semua ide dan pemikiran jadi semua orang pasti mempunyai pendapat yang berbeda.

Sebagian tulisan diatas saya dapatkan dari beberapa sumber terpercaya. Terima kasih pada O-om tentang sebagian tips terbaiknya.

Jika tidak sependapat dengan saya dan anda mempunyai pemikiran yang berbeda dapat menuangkannya pada halaman komentar dibawah.

06/12/13

Modifikasi Widget Artikel Cantik ala Akhbar Islam



Wahh... sudah lama sekali ya blog ini tidak update alias fakum. Sedih terkadnag melihat keadaan blog ini, namun percaya lha... kefakuman ini bukan terjadi karena kesengajaan, namun lebih tepatnya karena banyaknya kegiatan, baik itu kegiatan kerja maupun kegiatan kuliah. Dan kejadian itu terjadi setelah penulisan artikel Mencari luas Persegi panjang pada JAVA di blog yang kita cintai ini.

Baiklah, langsung saja untuk semua pengunjung Akhbar Islam yang budiman, disini Akhbar Islam kembali memberikan Tutorial Jitu yang insyAllah berguna bagi saya dan anda semuanya. Setelah agak lama berfikir untuk memberikan judul apa yang tepat untuk artikel kali ini, Akhbar Islam akhirnya menemukan judul yang menurut admin tepat, artikel ini diberi judul Modifikasi Widget Artikel Cantik ala Akhbar Islam. Silahkan lihat contoh di www.akhbarislam.com, atau bisa lihat gambar di bawah ini:



Silahkan anda ikuti tutorialnya berikut ini:


1. Masuk ke Tata Letak:


2. Kemudian klik pada Tambahkan Gadget:


3. Kemudian pilih menu HTML/JavaScript:



4. Masukkan kode html berikut kedalamnya (kosongkan saja judul):


<h2 style="border:none"><span style="color:#383737;">Al-Qur’an <span style="color: red;">Al ‘Ashr : 1-3</span></span></h2>

<div style="background-color:#383737;">
<span style="font-size: large;color:white;"><div style="padding:9px;margin:0px;">"<b>Demi masa.</b> Sesungguhnya manusia itu benar-benar dalam kerugian,  kecuali orang-orang yang beriman dan mengerjakan amal saleh dan nasehat  menasehati supaya mentaati kebenaran dan nasehat menasehati supaya  menetapi kesabaran"</div></span></div>

Keterangan:
<h2 style="border:none"> ... </h2> adalah judul widget.
<div style="background-color:#383737;"> adalah seting warna background (#383737).

Setingan Warna:
#383737 =              
red          =              

Silahkan ganti judul, artikel dan warnanya sesuka hati anda.

Semoga artikel tutorial Modifikasi Widget Artikel Cantik ala Akhbar Islam ini berguna bagi kita semua. Jika ada pertanyaan ada sebarang kesulitan dalam penerapan tutorial ini, silahkan anda berikan komentar anda dibawah ini, karena bisa jadi pertanyaan anda akan berguna bagi yang lain.
Wassalam...