Cara melihat Bug suatu injek

Setelah kemarin saya membuat postingan bagaimana cara membuat injek dengan delphi sekarang saya akan membuat postingan tentang bagaimana cara melihat bug suatu injek karena dalam membuat injek kita perlu memasukan suatu bug atau payload yang mana payload ini yang merequest ke server dan tentunya bug tersebut yang open alias yang bisa digunakan dalam artian bisa konek ke server tanpa kita harus punya pulsa atau kuota.

Tetapi akan lebih baik apabila kita sendiri yang menemukan bugs tersebut tanpa harus melihat dari suatu injekan hasil orang lain.

Tujuan dari postingan ini yang mana melihat dari suatu injek yang sudah jalan diharapkan kita bisa mempelajari bagaimana suatu injek bisa bekerja dan kita bisa membuat nya sendiri dengan tampilan yang kita mau.

Langkah cara melihat Bug

Untuk melihat suatu proses injek bagaimana cara merequest ke server maka yang harus kita siapkan adalah

1. Injek yang tentunya yang masih work.
2. Tunnel atau bitvise.
3. SmartSniff bisa dicari lewat google.

Setelah kita mempunyai ketiga aplikasi tersebut sekarang ke cara melakukan snifing nya,pertama kita buka semua applikasi tersebut kemudian konekan modem sesuai dengan operator,setelah modem konek start injek terlebih dulu kemudian start smartsniff nya dengan cara klik tombol yang berbentuk segitiga yang seperti tombol player yang berwarna hijau dan biarkan on kemudian pada bitvise klik tombol login,setelah itu coba lihat di smartsniff maka akan tampil log request dan itulah yang dinamakan bug atau payload yang lagi open.

Setelah kita dapatkan bugs tersebut silahkan gunakan di injek yang kita buat  yang telah saya posting kemarin tentang cara membuat injek.

Masukan bug tersebut kedalam payload,dan silahkan coba dengan menambahkan user-agent dll.

Begitulah kira-kira cara melihat bugs atau payload dari suatu injek.Semoga postingan ini menjadikan sebuah pembelajaran bagi kita.

Salam Blogger. 

Cara Membuat Injek dengan Delphi Plus Source Code

Untuk hari ini saya akan mencoba membuat postingan tentang bagaimana cara membuat injek yang mana sekarang banyak kita temui yang sharing membagi-bagikan suatu injek,ini adalah dasar dari injekan untuk semua operator,jadi dengan tutorial ini apabila kita ingin membuat injekan suatu operator  dengan tutorial ini bisa dijadikan suatu panduan.Dan tentunya kita akan merasa lebih puas apabila kita bisa membuatnya sendiri.

Langkah Pembuatan Injek

Baiklah sekarang langsung ke cara pembuatan injek tentunya pada PC sudah terinstall delphinya dan tentunya untuk membuat injek bukan hanya dengan Delphi tapi juga bisa dengan Visual Basic atau dengan Bahasa pemograman yang lain.
Tapi disini untuk sekarang saya akan coba membuatnya dengan Delphi dan mungkin lain waktu akan saya coba buat tutorial membuat injek dengan Bahasa pemograman yang lain.
Sekarang kita buka aplikasi delphinya dan pada Form kita tambahkan komponen:
1.    2 Buah Memo.
2.    1 Buah Label.
3.    1 Buah Edit
4.    2 Buah Button.
5.    2 Buah Shape yang berada pada tab Additional.
6.    1 Buah IdMappedPortTCP yang berada pada tab Indy Servers.
7.    1 Buah XPManifest yang berada pada tab Win32.

Saya coba menempatkan komponen-komponen tersebut pada Form seperti pada gambar dibawah ini

Penempatan komponen pada form

Setelah kita tempatkan komponen-komponen tersebut sesuai dengan keinginan kita sekarang lanjut ke pemogramannya.

Langkah Pembuatan Kode

1.Yang pertama saya akan membuat kode untuk  indikator lampu kedap-kedip/Blink yang dibuat dengan komponen shape,jadi komponen ini akan kedap-kedip pada saat proses baik itu request atau respon yang mana diwakili dengan masing-masing komponen shape.
Misal untuk request kita wakili dengan shape1 dan lampunya berwarna merah,dan untuk respond kita gunakan Shape2 dan lampunya berwarna Hijau.
Untuk kodenya masing-masing shape sebagai berikut
1.    Kita buat procedure dahulu dan tempatkan pada private
       a. Untuk lampu request kita buat procedure LampuRequest;
       b. Dan untuk lampu respond kita buat procedure LampuRespond;

Membuat procedure untuk indikator

Setelah itu kita deklarasikan masing-masing procedure tersebut
Untuk procedure LampuRequest adalah sebagai berikut:

procedure TForm1.LampuRequest;
begin
  if Shape1.Brush.Color = clWhite then
    Shape1.Brush.Color := clRed
    else
    Shape1.Brush.Color := clWhite;
end;

Dan untuk procedure LampuRespond adalah sebagai berikut:

procedure TForm1.LampuRespond;
begin
  if Shape2.Brush.Color = clWhite then
    Shape2.Brush.Color := clLime
    else
    Shape2.Brush.Color := clWhite;
end;

Penampakan dengan gambar

Procedure indikator komponen shape

2. Selanjutnya klik pada komponen IdMappedPortTCP dan pada object inspector pada MappedHost kita isi proxy opsel yang akan di buat contoh kita isi dari salah satu dari proxy opsel yang ada misalnya 10.19.19.19 dan pada MappedPort isi dengan 8080

Isi proxy operator pada IdMappedportTCP

Kemudian pada tab events dan pada OnExecute  klik 2 kali dimana kita akan buat kodenya untuk request dan kodenya seperti ini

procedure TForm1.IdMappedPortTCP1Execute(AThread: TIdMappedPortThread);
var
  payload: String;
begin
  LampuRequest;
  Memo1.Lines.Add(AThread.NetData);
  payload := 'GET http://bugs yang masih bisa/ HTTP/1.1'#13#10 +
              'Host: bugs yang masih bisa'#13#10 +
              'Connection: Keep-Alive'#13#10#13#10#13#10;
  if Pos('CONNECT', AThread.NetData) <> 0 then
  begin
  AThread.NetData := AThread.NetData + payload;
  end;
end;

Kemudian untuk respond pada OnOutbondData kita klik 2 kali dan kita buat kodenya seperti ini

procedure TForm1.IdMappedPortTCP1OutboundData(
  AThread: TIdMappedPortThread);
begin
  LampuRespond;
  Memo2.Lines.Add(AThread.NetData);
  if Pos('302 Found', AThread.NetData) <> 0 then
    begin
    AThread.NetData := StringReplace(AThread.NetData, '302 Found', '200 OK', [rfReplaceAll]);
    end;
end;

Gambar penampakan

Procedure Events IdmappedportTCP

3. Sekarang kita buat kode untuk tombol start klik 2 kali tombol start dan buat kodenya seperti ini

procedure TForm1.Button1Click(Sender: TObject);
begin
  IdMappedPortTCP1.Bindings.Add.IP := '127.0.0.1';
  IdMappedPortTCP1.Bindings.Add.Port := StrToInt(Edit1.Text);
  IdMappedPortTCP1.Active := True;
  Button1.Enabled := False;
  Button2.Enabled := True;
end;

4.    Dan sekarang kita buat kode untuk tombol stop dan kodenya kita buat seperti ini

procedure TForm1.Button2Click(Sender: TObject);
begin
  IdMappedPortTCP1.Active := False;
  IdMappedPortTCP1.Bindings.Clear;
  Button1.Enabled := True;
  Button2.Enabled := False;
end;

Begitulah kira-kira cara membuat injekan yang simple,bagi yang mau source nya dan tinggal di load bisa di ambil di Sini Source code Injek dan silahkan kembangkan mungkin nanti bisa akan jauh lebih baik,untuk password rar silahkan gunakan m4m3ns.
Salam Blogger.

Membuat Tombol Glyph Pada Delphi

Tombol glyph adalah sama halnya dengan tombol biasa namun disini tombol tersebut bisa disisipkan dengan gambar,jadi tidak hanya mempunyai caption saja jadi akan kelihatan cantik projek yang dibuat kita.

Dibawah ini contoh gambar tombol yang berupa glyph.

Tombol Glyph

 Langkah Pembuatan Tombol Glyph

Untuk membuat tombol glyph kita harus mempersiapkan dulu gambar yang akan disisipkan kedalam tombol,gambar yang bisa disisipkan berupa gambar bmp dan ico jadi kita harus mempunyai salah satu type gambar atau image tersebut, untuk gambar kita bisa cari dengan browsing.

Setelah kita mepunyai gambar tentunya kita buka aplikasi delphinya,kemudian atur ukuran form yang akan kita buat seperti contoh gambar diatas yang mana ukuran formnya telah diperkecil.Setelah itu pada form kita tambahkan  

1. 2 buah tombol Bitbtn yang mana berada di tab additional.
2. 1 buah ImageList yang berada pada tab win32.
3. 1 buah ActionList yang berada pada tab standard.
4. 1 buah Label yang berada pada tab standard.

Tab Bar Komponen

Selanjutnya kita akan memasukan gambar yang telah disiapkan tadi caranya kita pilih ImageList yang berada di form kemudian klik 2x kemudian klik tombol add dan masukan gambar yang telah disiapkan.

Kemudian pada form kita pilih ActionList dan klik 2x kemudian pada menu pilih New Action maka akan muncul Action1 dan buat sebanyak 2 Action menjadi Action1 dan Action2.Setelah dibuat Action nya coba klik Action1 dan pada object ispector pada ImageIndex nya pilih mana image yang akan digunakan buat Action1,begitu juga untuk Action2 lakukan sama seperti pada Action1.

Menambahkan Action pada ActionList

Setelah itu kita buat procedure buat  Bitbtn1 caranya pada form klik 2x Bitbtn1 dan masukan kode dibawah ini diantara begin dan end

Label1.Caption := 'Hello Mamen';

Begitu juga procedure untuk Bitbtn2 caranya sama pada form pilih Bitbtn2 klik 2x dan masukan kode ini

Label1.Caption := 'Goodbye Mamen';

Jadi akan tampak seperti ini

Procedure Untuk Bitbtn 1 dan 2

Kalau sudah melakukan semua coba di Run atau tekan F9,maka jadilah seperti gambar dibawah ini

Pada Saat tombol Start di Tekan

Pada Saat Tombol Stop di Tekan

 

Begitulah untuk membuat tombol glyph sesuai dengan tema kali ini.

Catatan: Akan lebih mudah lagi apabila membuat nya dengan komponen Apha Control dan juga tampilannya akan lebih cantik,ini dibawah contoh tampilannya

Glyph memakai Alpha Control

Oke Happy Koding dan Salam Blogger...Good Luck.
        

Membuat ON-OFF Satu Tombol Pada Delphi

Bagi yang baru memulai belajar delphi seperti saya yang ingin membuat tombol ON-OFF dengan menggunakan satu tombol mari kita pelajari bersama-sama.Yang biasa menggunakan tombol button untuk membuat ON dan OFF dengan dua tombol button coba sekarang buat dengan hanya satu tombol button biar bisa menghemat atau memperkecil tampilan form yang akan kita buat,dengan memperkecil form kita bisa merasakan penggunaan memori akan sangat ringan pada saat projek yang kita buat di eksekusi.

On-Off Dengan Satu Tombol

Langkah Pembuatan

Untuk memulainya pertama kita buka program delphinya kemudian kita coba tambahkan pada form yang baru sebagai contoh kita tambahkan satu buah Button dan satu Label,kemudian kita atur ukuran formnya  menjadi kecil,buat ukurannya sesuai ukuran yang telah ditambahkan kedua komponen tadi yaitu tombol Button dan Label,kira-kira jadi seperti gambar ini :

Menambahkan Button dan Label

Setting Properti Button dan Label

Setelah kita coba melakukan perubahan ukuran form selanjutnya kita coba untuk merubah properti Button dan properti Label.Pada layar sebelah kiri ada yang namanya Object Inspector ini fungsinya untuk merubah properti suatu objek atau komponen yang akan kita gunakan.Disini pada contoh form telah kita tambahkan komponen Button dan Label,pertama kita akan coba untuk merubah properti button yang mana pada saat pertama ditambahkan ke form maka button tersebut mempunyai properti caption atau  bertuliskan Button1 apabila ingin diganti menjadi ON coba klik satu kali Button pada form kemudian pada object inspector bagian Caption coba ganti dengan ON.
Yang kedua coba ganti komponen Label captionnya di delet atau dihilangkan caranya sama seperti tadi.
Sekarang pada komponen button klik 2x untuk membuat procedurnya,Sesuai dengan tema kali ini yaitu membuat ON-OFF dengan satu tombol maka coba tambahkan pada procedure diantara begin dan end; kode dibawah ini

if Button1.Caption = 'ON' then begin
    Label1.Caption := 'Hello Mamen';
    Button1.Caption := 'OFF';
    end
      else begin
        Label1.Caption := '';
        Button1.Caption := 'ON';
        end;

Jadinya akan tampak seperti ini

Procedure untuk Button

Setelah itu coba di Run atau tekan F9,dan inilah gambarnya setelah di run

Penampakan setelah di Run

Dan yang ini gambar dimana ditambahkan skin biar kelihatan cantik,apabila ingin tampilannya cantik seperti tampilan gambar dibawah ini coba pelajari Cara install Alpha Skin atau Alpha Control dan cara menggunakannya. 

Memakai Alpha Skin

Demikian tutorial untuk tema kali ini semoga bermanfaat.

Happy coding dan salam Blogger.

Cara Install Alpha Skin Atau Alpha Control di Delphi 7

Sekarang saya akan mencoba untuk membuat artikel tentang cara install Alpha Skin atau Alpha Control,tentunya yang biasa suka main programming delphi yang suka membuat aplikasi tentu dengan komponen ini akan sedikit membawa sentuhan pada skin form yang menarik alias banyak pilihan ,biar para develop aplikasi tidak bosan dengan skin form bawaan delphi itu sendiri.
Dibawah ini saya kasih capture sebagian tampilan form yang sudah di kasih komponen Alpha Skin.

Contoh Form dengan Alpha Skin

Dimana Alpha Skin ini banyak sekali pilihan skin nya yang diberikan,dan juga dengan disediakannya Skin Editor kita bisa membuat sendiri skinnya.

Cara Install Alpha Skin/Alpha Control

Sebelum komponen alpha skin di install tentunya kita harus punya dulu komponennya,bagi yang belum punya coba download dulu Alpha Skinnya,karena tema nya untuk delphi 7 maka carilah buat yang delphi 7,buat yang menggunakan selain delphi 7 coba cari Alpha Skinnya sesuai dengan dephi yang digunakan.
Apabila sudah di download coba di exctract dulu karena file yang didownload berupa zip file.Setelah di extract disana ada banyak folder-folder.
1.    Untuk folder Skins coba pindahkan/copykan ke direktori C:
2.    Untuk folder D7 coba pindahkan/copykan ke C:\Program Files (x86)\Borland\Delphi7\Source ini buat yang menggunakan windows 64 bit,untuk yang menggunakan windows 32 bit coba folder D7 nya pindahkan/copykannya  ke C:\Program Files\Borland\Delphi7\Source.
Untuk folder D7 yang sudah di copykan ke folder source tadi sebaiknya direname supaya lebih gampang nanti pemilihannya pada library.Setelah itu coba buka aplikasi delphi 7 nya,kemudian coba pada menu bar delphi   pilih Tools --> Environment Options --> Library.

Form Dialog Library Delphi 7

 Kemudian pada Library Path disebelah kanannya ada tombol kotak kecil yang isi nya ... coba diklik,

Tombol Menuju Library Delphi

Kemudian pada Greyed items denote invalid path klik tombol kotak kecil sebelah kanannya untuk pemilihan lokasi folder Alpha Skin berada,karena kita tadi coba merename D7 yang dicocpykan misalnya menjadi Alpha Skin maka pilihlah folder tersebut dan kemudian klik tombol add.

Menambahkan Komponen Alpha Skin

Setelah itu balik ke menu bar delphi pilih File --> Open,pilih pada folder Alpha Skin dan pilih file acntD7_R dan pilih compile.Kemudian pilih lagi File --> Open masih pada folder Alpha Skin tapi pilih yang acntD7 seteleh itu klik install.Kalau sudah coba lihat pada komponen bar di delphi apakah sudah tampil komponen Alpha Skinnya.

Tampilan Komponen Alpha Control pada Bar

Begitulah cara install Alpha Skin/Alpha Control pada delphi 7,untuk cara install selain di delphi 7 untuk langkahnya sama saja.Semoga artikel ini bermanfaat bagi teman-teman.

Tutorial Video

Apabila penjelasan di atas kurang jelas teman-teman bisa  lihat lewat video nya Cara Install Alpha Skin semoga dengan video ini akan lebih jelas. 

Oke Hepi Coding salam Blogger

Cara Membuat Breadcrumbs

Untuk tema kali ini saya akan coba membuat yang namanya breadcrumbs.Pada saat saya memulai mengenal blog dan mungkin bukan saya saja yang tidak tau tapi semua blogger yang baru memulai terjun menggeluti blog pasti pertama kali mendengar breadcrumbs akan merasa asing,apa itu breadcrumbs.

Setelah saya coba jalan-jalan didunia maya tentunya untuk mencari tahu informasi tentang breadcrumbs ternyata menurut saya breadcrumbs itu adalah untuk menampilkan atau menginformasikan suatu artikel yang dibuat dimana /masuk di katagori mana artikel tersebut berada.
Ini yang dmaksud breadcrumbs

Jadi apabila suatu blog isi artikelnya mempunyai banyak label/katagori,disini peran breadcrumbs akan menginformasikan artikel kita yang dibaca berada pada katagori apa.Sebagai contoh kita lihat pada gambar diatas bahwa artikel yang sekarang dibaca berada pada katagori Blogspot,jadi bisa juga tujuannya untuk memudahkan para pembaca untuk mengetahui atau mencari semua isi artikel dari katagori blogspot suatu blog yang mana isinya pembahasan seputar blogspot.

Cara pembuatan Breadcrumbs 

Dengan sedikit penjelasan dari saya diatas mengenai breadcrumbs semoga teman-teman yang baru memulai terjun menggeluti blog bisa mengerti apa itu breadcrumbs.

Breadcrumbs biasanya berada dibawah menutab seperti pada contoh gambar diatas,langkah pertama untuk membuatnya masuk ke Edit HTML kemudian cari kode

]]></b:skin>

Setelah ketemu kode diatas coba tambahkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs {
padding:0 5px 5px 0;
margin:0 0 5px;
font-size:11px;
border-bottom:1px dotted #ccc;
font-weight:normal;
}

Kemudian coba cari kode 

<b:includable id='main' var='top'>

Dan coba ganti kode tersebut dengan kode dibawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Setelah itu disave,dan cobalah test dengan membuka salah satu artikel apakah sudah muncul breadcrumbs tersebut.Demikian lah dari saya tutorial cara membuat breadcrumbs,semoga bermanfaat bagi  semua khususnya buat pemula yang memulai menggeluti blog.

Oke salam Blogger.

Cara Membuat Halaman Kontak

Pada Blog akan lebih baik jika dibuatkan halaman khusus buat Kontak,siapa tahu mungkin ada pembaca yang ingin menanyakan sesuatu yang bersifat privat kepada yang punya blog.

Yang mana halaman kontak ini biasanya para blogger kebanyakan menggunakan alamat e-mail daripada menggunakan Handphone termasuk saya sendiri.

Halaman kontak ini biasanya dibuat pada halaman terpisah maksudnya dibuat pada halaman statis,yang mana biasanya berada di bagian / dimasukan kedalam Menutab,contohnya seperti pada blog saya ini.

Langkah Pembuatan Halaman Kontak

Cerita sedikit mengenai halaman kontak ini sebelum ke cara pembuatannya,sebenarnya halaman kontak ini sudah disediakan oleh blogger sendiri,pihak blogger menyediakan di widget jadi untuk membuat nya hanya menambahkan widget disana kita pilih ada yang namanya Contact Form.

Nah disini kita hanya memindahkan dari widget ke halaman statis/Halaman Page,jadi kita bisa menempatkan halaman kontak pada menutab.

Baiklah sekarang ke cara pembuatannya,pertama pada dashboard blog kita pilih layout/tataletak,kemudian pilih add gadget,dibawah ini saya captur mungkin akan lebih jelas

Gambar diatas merupakan langkah-langkah penambahan untuk kontak form,setelah kita pilih Contact Formnya pasti akan muncul pada sidebar,lebih baik kita test dulu berfungsi atau tidaknya kontak form,coba test isi kontak form kemudian submit/send,kemudian kita cek pada email apakah ada masuk hasil test kita,kalau berhasil masuk kita lanjut ke langkah selanjutnya.

Untuk langkah selanjutnya kita coba sembunyikan kontak form nya dari sidebar caranya kita kembali ke halaman Edit HTML,kita cari kode 

]]></b:skin>

Kemudian kita tambahkan kode dibawah ini diatasnya kode ]]></b:skin>

#ContactForm1 {
  display: none;
} 

Fungsi kode tersebut adalah supaya widget contact form yang ditambahkan tadi untuk tidak tampilkan,karena kita akan memindahkan kontak tersebut ke halaman statis/halaman page.

Selanjutnya kita tambahkan halaman baru pada dashboard setelah kita buat halaman baru coba masukan kode ini

<div class="form">
<h2 class="title">
CONTACT</h2>
<form name="contact-form">
Name :
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail* ( Wajib untuk di isi ) :
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message* ( Wajib untuk di isi ) :
<textarea cols="30" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div> 

Setelah dimasukan kode diatas coba klik tombol preview/pratinjau,kalau sudah tampil persis dengan contact form pada waktu penambahan di widget sebelum disembunyikan lanjut klik tombol publish.Selanjutnya pada dashboard pilih Layout,kemudian pada Pages coba klik edit dan tambahkan Kontak form tadi dengan menceklist dan di save/disimpan.

Terakhir cobalah test lagi apakah terkirim pesan ke email.

Demikianlah cara membuat kontak form,semoga berhasil.

Salam Blogger.

Cara Membuat Auto Readmore Tanpa Java Script

Pada tema kali ini tujuannya sama dengan tema yang sebelumnya yaitu membuat Auto Readmore.Tetapi untuk kali ini tentu sedikit berbeda cara pembuatannya,dimana kalau yang sebelummya menggunakan Java Script,dan untuk yang sekarang tanpa Java Script.
Tentu dengan kedua cara tersebut masing-masing mempunyai kelebihan dan kekurangannya.

Perbandingan 

Sebelum menuju ke langkah pembuatan Auto Readmore tanpa Java Script,Disini saya akan coba membandingkan dulu kelebihan dan kekurangan antara kedua cara pembuatan Auto Readmore.
Berikut inilah yang saya tahu mengenai kekurangan dan kelebihan:

Tanpa Script	Menggunakan Script
Loading Cepat	Loading Kurang Cepat
Jumlah Karakter tidak bisa di set	Jumlah karakter bisa di set
Thumb Image Kurang jelas	Thumb Image Jelas walaupun size kita perbesar

Dengan ini mungkin diantara teman-teman bisa memilih dulu jika suatu nanti mau membuat Auto Readmore mana yang cocok dengan selera.

Langkah Pembuatan

Baiklah karena saya sudah ulas sedikit perbandingan antara kekurangan dan kelebihannya masing-masing karena cara pembuatan Auto Readmore dengan Java Script artikelnya sudah saya buat kemarin maka kali ini sesuai tema akan membuat Auto Readmore tanpa Java Script.

Berikut langkah-langkah pembuatannya

Pertama biasa kita masuk pada Edit HTML lalu cari kode ini 

]]></b:skin>

Setelah ketemu coba tambahkan kode ini diatas kode tadi

.thumbnail-post {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}

Fungsi dari kode diatas adalah untuk mensetting ukuran Thumb Image besar kecilnya,silahkan seting sesuai dengan selera anda.
Langkah selanjutnya kemudian cari kode

<data:post.body/>

Kemungkinan akan didapat lebih dari satu kode tadi,cari yang kedua kode tadi dan ganti dengan kode ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='rm-button-wrap'>
      <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    </div>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>

Setelah itu coba preview apabila tidak ada error baru di save template.
Mungkin beginilah cara membuat Auto Readmore tanpa Java Script,semoga catatan ini bermanfaat bagi yang lain.

Oke salam Blogger.

Cara Membuat Auto Readmore

Pada saat membuat suatu artikel / postingan pada blog maka pada halaman home apabila sebuah artikel tersebut telah kita publish disanalah akan tampil seluruhnya isi dari yang telah di buat tadi,apabila dalam blog tersebut baru cuma satu artikel yang di buat  kelihatannya mungkin ga ada masalah buat para pembaca walaupun isi dari artikel tersebut panjang bahasannya.
Tetapi kalau didalam blog tersebut artikel nya sudah banyak yang dibuat maka keseluruhan dari artikel akan muncul pada halaman home,dan tentunya apabila isi dari tiap-tiap artikel tersebut panjang-panjang bahasannya maka pada halaman home akan memanjang ke bawah dan kemungkinan para pembaca tidak tahu akan semua artikel apa saja yang telah dibuat pada suatu blog tersebut karena mungkin para pembaca enggan membaca keseluruhan dari halaman home tersebut dibaca sampai ke bawah.

Jump Break

Untuk mengatasi hal tersebut diatas kita buat setiap artikel yang dibuat kita ringkas untuk tampil dihalaman home,jadi buat para pembaca akan tahu semua artikel yang telah dibuat oleh si pemilik blog.

Sebenarnya pada bawaanya blogger sudah diberikan untuk melakukan jump break tersebut,namun kemungkinan apabila kita lakukan secara manual jump break tersebut disetiap artikel hasilnya tidak akan sama pada setiap artikel panjang karakternya,dan akan kelihatan kurang rapi tampil pada halaman home.

Untuk itu kita buat cara supaya bisa meringkas isi dari setiap artikel sama panjang isi karakternya dan akan kelihatan rapi tampil pada halaman home,inilah yang dimaksud membuat Auto Readmore sesuai dengan tema kali ini.

Cara pembuatan auto readmore 

Langkah pembuatan auto readmore pertama kita cari kode

</head>

gunakan bantuan ctrl+f biar cepet dalam pencarian,setelah ketemu coba tambahkan kode ini diatasnya:

<script type='text/javascript'>
 // ganti angka dibawah untuk mengatur jumlah karakter
 summary_noimg = 350;
 summary_img = 280;
 // ganti angka dibawah untuk merubah ukuran thumbnail/image
 img_thumb_height = 200;
 img_thumb_width = 200;
 // ganti dengan gambar sesuai selera anda,ini yang akan tampil pada saat suatu postingan tidak ada image
img_thumb_nosrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2EFt-lyASLBeE4Y_cLOtlyc51MtisC9VMEuDrZEMGGkGTMRj9Fs9uZ-ay5w-tIHoaaALZWjRkoxmsL9A7CYM0e17matKJr374PIEyqmRE8zu7SYaqnf0hsFjcEUkmoolSSwK1N5wBmbmH/s1600/default.png";
</script>
<script type='text/javascript'>
 //<![CDATA[
 function removeHtmlTag(strx,chop){
  if(strx.indexOf("<")!=-1)
  {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
     s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
   }
   strx =  s.join("");
  }
  chop = (chop < strx.length-1) ? chop : strx.length-2;
  while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
  strx = strx.substring(0,chop-1);
  return strx+'...';
 }
 function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);
  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = summary_noimg;
  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   summ = summary_noimg;
  }
  if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
  }
  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  div.innerHTML = summary;
 }
 //]]>
</script>

Setelah itu lanjut cari kode

<data:post.body/>

Kemudian coba ganti kode tadi dengan yang ini

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>  
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;margin-top:10px'>  
<a expr:href='data:post.url'> Read More &#187;</a></span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Apabila sudah diganti coba di simpan atau di save template,apabila tidak ada kesalahan dalam penyimpanan maka sudah selesai lah pembuatan auto readmore,dan coba lihat pada halaman home gimana sudah berhasilkah.
Sekarang postingan sudah bisa auto readmore,jadi tidak usah melakukan jump break lagi secara manual.

Oke Happy Blogger. 

Cara Membuat Blog Full Width

Pada dasarnya apabila kita menggunakan template bawaan dari blogger mempunyai ukuran tampilan standar lebar(width) 960 px,dengan ukuran ini apabila kita lihat dengan menggunakan layar monitor yang model kotak / persegi akan terlihat pada sisi kiri maupun sisi kanan dari layar monitor masih ada space atau ruang yang kosong,nah disini dengan tema sesuai judul akan saya coba template yang ukuran standar ini saya sulap jadikan full width dengan ukuran 1000 px.

Dan mungkin apabila kita buat template dengan ukuran full width kita bisa lebih leluasa untuk membuat tulisan kita bisa lebih banyak dari yang ukuran standar,begitu juga untuk kolom widget / gadget bisa kita perlebar lagi ukurannya dari yang ukuran standar apabila dirasa ukuran yang standar kurang lebar.Baiklah sekarang menuju langkah pembuatan template sesuai tema yaitu template standar blogger untuk dijadikan full width.

Langkah pembuatannya 

Pertama pakai salah satu template yang simple bawaan dari blogger setelah itu pada dasboard blogger pilih Template dan pilih Edit HTML.Setelah tampil halaman HTML nya coba cari kata body,untuk memudahkan pencarian karena begitu banyak serangkaian kode pada halaman ini dan tentunya pihak blogger sudah jauh-jauh menyiapkan shortcut untuk pencarian yaitu dengan menekan tombol ctrl + f,untuk cara penggunaanya coba klik dimana saja asal didalam area kode-kode html kemudian tekan pada keyboard tombol ctrl + f maka akan muncul kotak pencarian yang posisinya berada di pojok kanan atas didalam area kode html,sekarang coba masukan kata

body

pada kotak pencarian kemudian tekan enter.
Pada body tersebut nanti yang akan dicari yang terlihat seperti ini tampilannya kira-kira

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Kemudian pada bagian

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

coba ganti dengan ini

padding: 0px;

Kemudian cari lagi kode ini

.content-inner

carilah kode tersebut yang terlihat seperti ini

.content-inner { padding: $(content.padding) $(content.padding.horizontal); }

apabila sudah ketemu coba ganti dengan ini

.content-inner { padding: 10px 0px; }

Selanjutnya cari lagi kode

.content-outer, .content-fauxcolumn-outer, .region-inner

ini biasanya berada diantara <b:template-skin> dan </b:template-skin>dan akan tampak seperti ini

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

coba pada bagian max-width: $(content.width); ganti dengan

max-width: 100%;

Kemudian cari lagi kode ini

]]> </b:template-skin>

dan tambahkan diatasnya kode ini

.main-outer { max-width: 1000px; margin: 0 auto; }

yang terakhir coba cari


]]> </b:skin>

kemudian letakan kode ini diatasnya

.tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }

coba di simpan / save template.
Dan coba view blog... Hmmm jadilah Full witdh.
Begitulah kira-kira cara pembuatan  template full width,selamat berkreasi bagi yang suka Otak Atik.

Oke salam blogger.

Tag Kondisional Dalam Blog

Suatu blog itu sama halnya dengan penyimpanan file seperti di dalam PC / Komputer ,yang terdiri dari beberapa folder,dalam blog apabila kita menuliskan artikel dan kita buat berbagai macam kategori atau kalau dalam blog kita beri label itu bisa diartikan label tersebut adalah folder.
Jadi apabila suatu artikel kita beri label maka artikel itu merupakan bagian dari label tersebut,ketika blog kita sudah banyak memiliki artikel ada baiknya kita kelompokan sesuai dengan label yang berhubungan.

Kondisional

Ketika artikel telah dubuat atau dikategorikan ke label masing-masing,contoh pada saat kita memilih satu label,maka halaman blog tersebut akan tampil seluruh artikel sesuai dengan  label yang dipilih tadi,beda halnya pada halaman home akan tampil semua mewakili label label sesuai dengan artikel yang telah di posting,inilah pada blog dinamakan suatu kondisi.
Dan dalam blog tersebut telah dibuat atau dirancang sedemikian rupa maka akan ada beberapa macam kondisi yang perlu kita ketahui,mungkin ini belum semua yang saya tau kondisi apasaja yang ada didalam blog,ini hanya sebagian saja yang saya akan coba tuliskan.

Tag Tag Kondisional

Dalam blog kode kondisional biasanya diawali dengan <b:if cond='...'>

Dan inilah tag tag kondisional yang saya tahu:

1.Tag Kondisional Halamanmuka(HOMEPAGE) dimana untuk kode nya kira-kira seperti ini

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan untuk kebalikannya atau selain halamanmuka(homepage) kodenya

<b:if cond='data:blog.url != data:blog.homepageUrl'>

2.Tag Kondisional Halaman Postingan

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

dan untuk kebalikannya atau selain halaman posting adalah

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

3.Tag Kondisional Halaman Statis

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

Halaman statis contohnya seperti halaman contac,About.
dan untuk kebalikannya atau selain halaman statis adalah

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

4.Tag Kondisional Halaman Indeks

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

Mungkin yang dimaksud halaman indeks adalah semua halaman kecuali halaman postingan dan halaman statis
5.Tag Kondisional Halaman Label

<b:if cond='data:blog.searchLabel'>

6.Tag Kondisional Error Page 404

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

7.Tag Kondisional Halaman Arsip

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

8.Tag Kondisional Halaman Tertentu

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>

Itulah tag tag kondisional yang saya tahu,kemungkinan masih banyak  yang belum saya ketahui seluruhnya kondisional yang berada di blog.

Contoh Penggunaan Tag

Sebagai contoh untuk penggunaannya misalkan kita ingin widget comment hanya ditampilkan di halaman posting sedangkan dihalaman home tidak di tampilkan seperti blog saya yang sederhana ini,caranya adalah:
pada halaman edit HTML kita cari

</head>

kemudian letakan kode ini di atasnya

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#HTML4 {
 display: none;
}
</style>
</b:if>

HTML4 yang berada didalam kode diatas merupakan id widget punya blog saya,dan ini kemungkinan akan berbeda-beda id nya di blog teman-teman punya.
Demikianlah bahasannya mengenai tema tag tag kondisonal di dalam blog,semoga bermanfaat.
Salam Blogger

Cara Menambahkan Widget pada Header

Pada Blog kita tahu bahwa ada bagian yang namanya Header,dimana pada header tersebut ada tiga element yaitu element Gambar, element Title dan Description.
Kemudian bagaimana apabila pada header tersebut kita ingin memasukan atau menambahkan berupa navigasi atau sebuah flash animasi yang biasa dipakai buat promosi iklan maka kita harus menambahkan atau menyisipkan widget di area header tersebut,untuk itulah tema hari ini saya buat yaitu bagaimana cara menambahkan satu widget / gadget pada header.

Penambahan Widget Pada Header 

Kita tahu bahwa dengan widget kita bisa menambahkan apa saja termasuk HTML / JavaScript.Disini saya akan coba  pada widget yang telah disisipkan pada header untuk digunakan menampilkan Feed web luar.
Langkah untuk menambahkan widget nya :
Yang pertama saya coba mencari kode pada halaman Edit HTML dengan bantuan ctrl+F biar cepat yaitu kode:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

setelah ketemu kode tersebut kemudian saya coba menambahkan pada class='header' dengan 'header-kiri' jadi kode nya kira-kira akan menjadi seperti ini

<b:section class='header header-kiri' id='header' maxwidgets='1' showaddelement='no'>

dibawah saya coba pakai capture biar lebih jelas

Setelah kita rubah kode diatas itu, dengan bantuan ctrl+F lagi  saya cari lagi kode yang kedua yaitu

<div class='header-cap-bottom cap-bottom'>

dan kemudian setelah ditemukan kode yang dimaksud saya  mencoba menambahkan code ini di atasnya

<b:section class='header-kanan crosscol' id='header-kanan' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both'/>

Saya kasih lagi capturenya di bawah

 

Setelah itu saya coba cari lagi kode

]]></b:skin>

kemudian coba  menambahkan kode ini diatasnya

.header-kiri {
display: inline-block;
float: left;
}
#header-kanan {
display: inline-block;
float: right;
}

Biar lebih jelas lagi ini capturenya

kemudian saya coba save template dan kemudian saya coba lihat pada layout ternyata disana sudah ada penambahan buat widget/gadget baru

Dan saya coba klik add gadgetnya kemudian saya coba masukan contoh kode HTML feed terus saya save dan terakhir saya coba view blog...wow tampil dan sedikit mainkan lagi CSS nya biar kelihatannya catik.

Hmm...cantikan.
Begitulah cara saya bagaimana untuk menambahkan suatu widget / gadget pada header,semoga bermanfaat buat sesama newbi blog seperti saya.

Oke Happy Blogger.

Cara Menyembunyikan Navbar di Blog

NAVBAR.Navbar merupakan salah satu flatform dari blogger sendiri dimana kebanyakan para blogger termasuk saya sendiri suka menyembunyikan element yang satu ini,padahal element ini disediakan oleh blogger untuk memudahkan para blogger apabila ingin mengakses blognya,tapi ya karena suatu alasan buat saya pribadi element ini coba disembunyikan,tapi mungkin bagi para blogger lain punya alasan lain ingin dibiarkan tampil.
Oke saya coba langsung ke langkah cara untuk menyembunyikan navbar,setelah yang saya coba untuk menyembunyikan navbar ini ada 2 cara.

Cara Pertama Menyembunyikan Navbar

Cara yang pertama yang paling mudah menurut saya caranya adalah dengan masuk ke layout kemudian klik edit pada navbar,kemudian akan muncul beberapa pilihan buat navbar tersebut,karena saya mencoba untuk menyembunyikan maka saya pilih di off yang posisinya berada paling bawah.
Saya coba capture dibawah ini tampilan navbar setelah diklik edit pada navbar

Setelah dipilih posisi Off kemudian klik tombol save setelah itu coba buka blog.

Cara Kedua Menyembunyikan Navbar

Cara yang kedua adalah dengan menyisipkan code CSS,untuk cara ini coba masuk ke Template kemudian klik Edit HTML

Setelah itu coba cari kode ini

]]></b:skin>

kalau sudah ketemu coba masukan kode ini diatasnya

#navbar-iframe {display: none;}

Kira-kira tampilannya akan menjadi seperti ini

lalu klik preview kalau navbar sudah hilang baru klik tombol save template.
Demikian lah cara menyembunyikan Navbar ala mamen-blog,semoga bermanfaat bagi teman-teman Blogger

Oke Happy Blogger.