SYA'iRi Blog

Ebook Dasar-Dasar HTML

2016-08-03T21:20:00.000-07:00

More Info & Download

Cara Download Via Google Drive

Ebook Tutorial fundamental dalam mempelajari HTML & CSS

2016-08-03T21:14:00.001-07:00

More Info & Download

Cara Download Via Google Drive

Ebook Tutorial Object Oriented Programming dengan Java

2016-08-03T21:04:00.000-07:00

More Info & Download

Cara Download Via Google Drive

Ebook Algoritma Pemrograman 2 Menggunakan Visual Basic 6.0

2016-08-03T20:42:00.002-07:00

More Info & Download

Cara Download Via Google Drive

Kumpulan Efek Hover 2D Keren Menggunakan CSS

2016-07-31T18:23:00.002-07:00

Assalamualaikum wr wb

Kumpulan Efek Hover 2D Keren Menggunakan CSS

Pada postingan kali ini, saya akan membahas tentang berbagai macam efek hover menggunakan CSS. Efek ini bisa anda terapkan diberbagai macam objek seperti gambar, tombol, dan lainnya. Tidak perlu berlama-lama langsung contoh efek dibawah ini.

Arahkan atau dekatkan kursor ke kotak

2D Transitions || By : Moh. Syairi

GROW

SHRINK

Bounce In

Bounce Out

Rotate

Grow Rotate

Float

Sink

Lalu begaimana cara membuatnya.?? Kita langsung saja.

Efek Grow (Membesar)

GROW

<style>
#grow{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#grow:hover, .grow:focus, .grow:active {-webkit-transform: scale(1.1);transform: scale(1.1);background-color:#28CADA;}
</style>
<div id="grow" style="float:left">GROW</div>

Efek Shrink (Mengecil)

SHRINK

<style>
#shrink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#shrink:hover, .shrink:focus, .shrink:active {-webkit-transform: scale(0.9);transform: scale(0.9);background-color:#28CADA;}
</style>
<div id="shrink" style="float:left">SHRINK</div>

Efek Bounce In (Memantul Masuk)

BOUNCE IN

<style>
#Bounce_In{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_In:hover, .Bounce_In:focus, .Bounce_In:active {-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_In" style="float:left">BOUNCE IN</div>

Efek Bounce Out (Memantul keluar)

BOUNCE OUT

<style>
#Bounce_Out{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_Out:hover, .Bounce_Out:focus, .Bounce_Out:active {  -webkit-transform: scale(0.8);transform: scale(0.8);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_Out" style="float:left">BOUNCE OUT</div>

Efek Rotate (Memutar)

ROTATE

<style>
#Rotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#Rotate:hover, .Rotate:focus, .Rotate:active {-webkit-transform: rotate(4deg);transform: rotate(4deg);background-color:#28CADA;}
</style>
<div id="Rotate" style="float:left">ROTATE</div>

Efek Grow Rotate (Membesar Memutar)

GROW ROTATE

<style>
#GrowRotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#GrowRotate:hover, .GrowRotate:focus, .GrowRotate:active {  -webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);background-color:#28CADA;}
</style>
<div id="GrowRotate" style="float:left">GROW ROTATE</div>

Efek Float (Keatas)

FLOAT

<style>
#float{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#float:hover, .float:focus, .float:active {-webkit-transform: translateY(-8px);transform: translateY(-8px);background-color:#28CADA;}
</style>
<div id="float" style="float:left">FLOAT</div>

Efek Sink (kebawah)

SINK

<style>
#sink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#sink:hover, .sink:focus, .sink:active {  -webkit-transform: translateY(8px);transform: translateY(8px);background-color:#28CADA;}
</style>
<div id="sink" style="float:left">SINK</div>

Sekian pembahasan mengenai efek hover 2D dan semoga bisa bermanfaat.

Program Koreksi Nilai Mahasiswa dan Cara Koneksi Database MySQL Ke Visual Basic 06

2015-12-04T15:26:00.002-08:00

Note : Sebelumnya
- Aktifkan xampp, Start ~> Aphace dan MySQL
- Buat databasenya. Jika belum baca : 
 http://syairiblog.blogspot.co.id/2015/12/membuat-database-koreksi-nilai.html
- Setting konektor untuk menghubungkan database dengan Visual Basic 6. Silahkan baca : 
 http://syairiblog.blogspot.co.id/2015/12/download-dan-setting-konektor-mysql-odbc.html
- Silahkan Ikuti langkah-langkah di bawah pada artikel ini.
- 3KA10 Semangat Ngerjainnya :)

Ikuti langkah-langkahnya sebagai berikut :

1. Siapkan software Visual Basic 06, jika belum install anda bisa DOWNLOAD

2. Buka aplikasinya, pilih NewProject ~> StandartEXE ~> Open

3. Klik Project pada menubar ~> Components.. (Ctrl + T)

4. Muncul tampilan seperti gambar dibawah, cari dan ceklis Microsoft ADO Data Control 6.0 (OLEDB) dan Microsoft DataGrid Control 6.0 (OLEDB) ~> Apply ~> Ok

5. Desain tampilannya seperti gambar dibawah ini

6. Klik kanan pada Adodc1 ~> ADODC Properties ~> Build ~> Provider ~> Microsoft OLE DB Provider for ODBC Driver ~> Next ~> Use data source name : DBLatSyairi ~> Test Connection ~> Ok ~> RecordSource ~> Command Type : 2-adCmdTable ~> Table or Stored : sim ~> Apply ~> Ok

Ikuti langkah-langkahnya seperti gambar dibawah ini, agar lebih paham

7. Copy-paste Adodc1 ~> Klik kanan ~> ADODC Properties ~> RecordSource ~> Ubah Table or Stored : Kunci ~> Apply ~> Ok

8. Seleksi semua Text1 sampai Text9 kemudian ganti Properties ~> DataSource : Adodc1

9. Hilangkan seleksi dan ganti satu-persatu DataField pada kotak Prperties, lihat gambar

10. Ganti juga Text10 (kotak kunci jawab) DataSource dan DataFieldnya

11. Klik DataGrid1 dan ganti properties DataSource : Adodc1

12. Klik View pada menubar ~> Code, ketikkan atau Copy-paste kodenya berikut ini

Dim benar, skorS, rasioS As Integer
Private Sub Command1_Click()
'jumlah soal silahkan ganti sendiri
'atau modifikasi program sesuai keinginan
jumlahsoal = 30
Text7 = jumlahsoal
N = 1
benar = 0
While N <= jumlahsoal
x = Val(Mid(Text5, N, 1))
y = Val(Mid(Text10, N, 1))
If x = y Then
benar = benar + 1
End If
N = N + 1
Wend
skorS = benar
Text6 = skorS
rasioS = (Text6 / Val(jumlahsoal)) * 100
Text8 = rasioS
If (rasioS > 80 And rasioS <= 100) Then
grade = "A"
ElseIf (rasioS > 60 And rasioS <= 80) Then
grade = "B"
ElseIf (rasioS > 50 And rasioS <= 60) Then
grade = "C"
ElseIf (rasioS > 40 And rasioS <= 50) Then
grade = "D"
Else
grade = "E"
End If
Text9 = grade
Adodc1.Recordset.Update
'by Moh. Syairi
'Blog : www.syairiblog.blogspot.co.id
End Sub

12. Hasil Run (F5)

13. Selesai

Sekian Pembahasan mengenai bagaimana cara membuat Program Koreksi Nilai Mahasiswa dan Cara Koneksi Database MySQL Ke Visual Basic 06 semoga bisa bermanfaat buat teman-teman.

Catatan : Program yang saya buat adalah program dasar bagaimana cara membuat dan mengkoneksikan database ke Visual Basic 06. Untuk copy-paste silahkan dan cantumkan sumber linknya, jika tidak anda melanggar Etika dan Profesionalisme Teknologi Sistem Informasi.

Download dan Setting Konektor MySQL ODBC

2015-12-04T14:50:00.001-08:00

Note : 
Aktifkan XAMPP, Start Apache dan MySQL

1. Pertama download konektornya terlebih dahulu mysql-connector-odbc-3.51.28-win32

Download

2. Start ~ search : ODBC ~ pilih Data Souces ODBC

3. Maka muncul tampilan pada gambar berikut, pilih User DSN ~ Add

4. Muncul tampilan seperti gambar, pilih MySQL ODBC 3.51 Driver ~Finish

5. Isi data pada tampilan yang muncul. Data source Name (nama terserah anda), Server : localhost, User : root, Database : LatSyairi (nama database yang sudah kita buat sebelumnya) ~ Test ~ Ok

6. Maka muncul nama konektor yang sudah kita buat tadi yaitu DBLatSyairi

7. Selesai

Sekian pembahasan mengenai Download dan Setting Konektor MySQL ODBC dan semoga bermanfaat.

Membuat Database Koreksi Nilai Mahasiswa, MySQL

2015-12-04T13:31:00.000-08:00

1. Aktifkan terlebih dahulu xampp Start Apache dan MySQL

2. Buka Comand Prompt dan masuk ke

C:\xampp\mysql\bin, dan ketikkan mysql –uroot

Jika berhasil, maka kita tinggal membuat databasenya dengan memgetikkan perintah SQL

3. Buat database dengan nama LatSyairi (nama terserah sesuai keinginan anda) dengan mengetikkan perintah

CREATE DATABASE LatSyairi;

4. Untuk menampilkan database ketikkan

SHOW DATABASES;

5. Untuk manipulasi kita harus membuka databasenya, ketikkan perintah

USE LatSyairi;

6. Buatlah tabel dengan ketentuan sebagai berikut :

Tabel SIM :

NPM	Varchar (8)
NAMA	Varchar (30)
KELAS	Varchar (5)
KDMK	Varchar (8)
JAWAB	Varchar (40)

Ketikkan perintah :

CREATE TABLE SIM(Npm varchar(8) NOT NULL PRIMARY KEY, nama varchar(30), kelas varchar(5), kdmk varchar(8), jawab varchar(40));

Tabel KUNCI:

JAWABAN

Varchar(40)

Ketikkan perintah :

CREATE TABLE Kunci(jawaban varchar(40));

7. Tabel yang sudah dibuat adalah tabel SIM dan tabel Kunci, namun masih dalam keadaan kosong (tidak ada isi record). Jika anda ingin menambahkan isinya perintah yang dipakai adalah INSERT, tapi disini saya akan menambah isi atau record sekalaigus dengan perintah LOAD dengan delimiter atau pemisah tanda koma (,).

Sebelumnya anda ketikkan atau copy-paste data berikut kedalam NotePad dan simpan dengan nama SIM.txt kemudian simpan di hardisk D:/SIM.txt (terserah keinginan)

50414827,ALFONSIUS KRISNANDA, 2IA01,IT045215,224414344221113322323434423431
50414925,ALZA ICHSAN KURNIAWAN, 2IA01,IT045215,224414144221113322323434423431

copy paste juga data berikut kedalam NotePad (file baru) dan berikan nama Kunci.txt dihardiks kemudian simpan di hardisk D:/Kunci.txt (terserah keinginan)

144411143234113322243434411111

8. Kembali lagi ke CMD Ketikkan perintah dan enter. Digunakan untuk menginsert isi pada tabel SIM

LOAD DATA LOCAL INFILE 'D:/SIM.txt' INTO TABLE SIM FIELDS TERMINATED BY ',';

9. Ketikkan lagi perintah dan enter. Digunakan untuk menginsert isi pada tabel Kunci

LOAD DATA LOCAL INFILE 'D:/Kunci.txt' INTO TABLE Kunci FIELDS TERMINATED BY ',';

10. Tampilkan record pada tabel SIM dengan mengetik

SELECT * FROM SIM;

11. Kemudian tampilkan juga record pada tabel Kunci

SELECT * FROM Kunci;

Ubah struktur table SIM dengan menambahkan atribut :

SKORE	Smallint(3)
JML_SOAL	Smallint(3)
RASIO	Smallint(3)
GRADE	Varchar(1)

Ketikkan perintah :

ALTER TABLE SIM ADD(skore smallint(3), jml_soal smallint(3), rasio smallint(3), grade varchar(1));

12. Selesai

Demikian pembahasan mengenai bagaimana cara Membuat Database Koreksi Nilai Mahasiswa Menggunakan MySQL dan semoga bermanfaat.

Contoh Program Array Pada Bahasa Pemrograman Java

2015-12-01T16:07:00.002-08:00

Pada bahasa pemrograman Java maupun di bahasa pemrograman yang lain, terdapat sebuah kemampuan untuk menggunakan satu variabel yang dapat menyimpan beberapa data dan memanipulasinya dengan lebih efektif. Tipe variabel inilah yang disebut sebagai array.

Array adalah sebuah variabel/sebuah lokasi tertentu yang memiliki satu nama sebagai identifier, namun identifier ini dapat menyimpan lebih dari sebuah nilai.

Pendeklarasian Array

int [ ]ages; Atau int ages[ ];

berikut ini ada beberapa contoh program penggunaan array pada bahasa pemrograman java

Contoh Program Array1

public class Array1
{
 public static void main( String[] args )
 {
  int[] ages = {30,70,50,100,30};
  for( int i=0; i<5; i++ )
  {
   System.out.println("Ages yang ke " + i + " " + ages[i]);
                        
  }
                //Author Moh. Syairi
                System.out.println("Author : Moh. Syairi");
  }
        

}

Output

Contoh program Array2 dengan input nilai

import javax.swing.JOptionPane;
public class Array2 {

public static void main( String[] args )
{
        int [] ages=new int[4];
 
 for( int i=0; i<ages.length; i++ )
 {
                ages[i]=Integer.parseInt(JOptionPane.showInputDialog("Input ages ke " + i));
  System.out.println("Ages yang ke " + i + " "+ ages[i] );
}
        //Author Moh. Syairi
        System.out.println("Author : Moh. Syairi");
}
  
}

Output

Contoh program Array3 MULTIDIMENSI

public class Array3
{
public static void main (String[] args)
{
int[][] angka = new int[5][3];
for (int i=0; i<angka.length; i++)
 for (int j=0; j<angka[i].length; j++)
  angka[i][j] = (int)(Math.random()*100);
  System.out.println("Data array dua dimensi:\n");
  for (int i=0; i<angka.length; i++)
  {
   for (int j=0; j<angka[i].length; j++)
   System.out.print("angka yg ke (" + i + "," + j + ")" + " " + angka[i][j] + " ");
   System.out.println();
}
                //Author Moh. Syairi
                System.out.println("Author : Moh. Syairi");
}}

Output

Sekian pembahasan mengenai contoh program penggunaan array pada bahasa pemrograman Java, semoga bisa membantu dan bermanfaat.

Video Youtube

Program Pertama “Hello World” Pada Bahasa Pemrograman Java

2015-11-28T19:37:00.000-08:00

Java adalah bahasa pemrograman berorientasi objek murni yang dibuat berdasarkan kemampuan-kemampuan terbaik bahasa pemrograman objek sebelumnya (C++, Ada, Simula). Java diciptakan oleh James Gosling, developer dari Sun Microsystems pada tahun 1991.

Jika anda menggunakan Notepad dan Command Prompt

Kompilasi

javac <namafile.java>

Contoh: javac helloworld.java

Eksekusi

java <namafile hasil kompilasi> [<argumen baris perintah>]

Contoh: java helloworld

Jika anda menggunakan NetBeans IDE

Program Pertama HelloWorld.Java

/**
* Program Java untuk menuliskan kata Hello, world!
* HelloWorld.java
*/
// Deklarasi kelas
 class helloworld 
 {
// Deklarasi fungsi yang mewakili program utama
 public static void main(String [] args) 
  {
  System.out.println("Hello, world!");
  }
 }

Download Kumpulan Ebook Hadist Islam Dan Doa Gratis

2015-08-31T11:37:00.001-07:00

Tentang Hari Kiamat, Surga Dan Neraka

Download PDF (234 KB)

Hadist Tentang Adab

Download PDF (146 KB)

Hadist Tentang Budi Pekerti

Download PDF (108 KB)

Hadist Tentang Fitnah Dan Tanda Kiamat

Download PDF (182 KB)

Hadist Tentang Keimanan

Download PDF (386 KB)

Hadist Tentang Keselamatan

Download PDF (216 KB)

Hadist Keutamaan Beberapa Perkara

Download PDF (836 KB)

Hadist Tentang Mimpi

Download PDF (149 KB)

Hadist Tentang Puasa

Download PDF (173 KB)

Hadist Tentang Shalat Sunnah

Download PDF (164 KB)

Hadist Tentang Takdir

Download PDF (100 KB)

Hadist Tentang Thaharah

Download PDF (357 KB)

Hadist Zuhud Dan Kelembutan Hati

Download PDF (469 KB)

Kumpulan Doa

Download PDF (236 KB)

Cara Pasang Menubar Dropdown (Submenu) Elegant di Blogger

2015-08-24T11:28:00.004-07:00

Fungsi menubar menurut pendapat saya :

Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
dll.

Berikut langkah-langkahnya :

Masuk ke www.blogger.com

Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F

Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin>

#navigation {
background-color : #111;
width : 100%;
height : 39px;
margin:0 auto;
border-bottom : 3px solid #e80595;
border-radius:2px;}

#navigation ul {
padding:0;
margin:0;
list-style-type:none;}
 
#navigation ul li {
float:left;
position : relative;}
 
#navigation ul li a {
display:block;
padding:10px 20px;
color:#fff;
text-decoration:none;
font-family: calibri;}
 
#navigation ul li a:hover {
background-color:#e80595;}
 
/* Menu Dropdown */
#navigation ul li ul {
display: none;}
 
#navigation ul li:hover ul {
display:block;
position: absolute;}

#navigation ul li:hover ul li a {
display:block;
background-color : black;
color : #fff;
width : 150px;
border-bottom : 1px solid #ccc;}

#navigation ul li:hover ul li a:hover {
background-color : #e80595;}

#navigation ul li:hover > a {background: #e80595;}

Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau

Terserah anda, dimana anda ingin meletakkan menubarnya

Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Visi dan Misi</a></li>
</ul>
</li>
<li><a href="#">Service</a>
<ul>
<li><a href="#">Software Development</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Interior Design</a></li>
<li><a href="#">Multimedia Interactive</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Kontak Kami</a></li>
</ul>
</div>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar Dropdown (Submenu) Keren Ringan di Blogger

2015-08-24T11:21:00.003-07:00

Fungsi menubar menurut pendapat saya :

Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
dll.

Berikut langkah-langkahnya :

Masuk ke www.blogger.com

Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F

Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin>

#SB_menu{border-bottom:3px solid #fe5400;width:100%;height:31px;background:#343434;margin:0px auto;margin-bottom:3px;}
#SB_menu ul{float:left;margin:0;padding:0;}
#SB_menu li{float:left;list-style:none;margin:0;padding:0;}
#SB_menu li a, #SB_menu li a:link{float:left;padding:8px 11px;color:#fff;text-decoration:none;font:bold 12px Arial;text-transform:capitalize;}
#SB_menu li a:hover, #SB_menu li a:active, #SB_menu .current_page_item a  {background: #343434;color: #fff;text-decoration:none;}
#SB_menu li li a, #SB_menu li li a:link, #SB_menu li li a:visited{font-size: 12px;background: #424242;color: #fff;text-decoration:none;width: 150px;padding: 0px 10px;line-height:30px;}
#SB_menu li li a:hover, #SB_menu li li a:active {background: #fe5400;color: #ffffff;}
#SB_menu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin-top:31px;border:1px solid ##999;}
#SB_menu li:hover ul, #SB_menu li li:hover ul, #SB_menu li li li:hover ul, #SB_menu li.sfhover ul, #SB_menu li li.sfhover ul, #SB_menu li li li.sfhover ul{left:auto}
#SB_menu li:hover, #SB_menu li.sfhover{position:static}

Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau

Terserah anda, dimana anda ingin meletakkan menubarnya

Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<div id='SB_menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a class='prett' href='#'>Blogger</a>
<ul>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>Widget</a></li>
</ul></li>
<li><a href='#'>About Me</a></li>
<li><a class='prett' href='#'>Contact Me</a>
<ul>
<li><a href='#'>Google +</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
</ul></li>
</ul>
</div>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar tanpa dropdown (submenu) di Blogger

2015-08-24T11:14:00.001-07:00

Fungsi menubar menurut pendapat saya :

Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
dll.

Berikut langkah-langkahnya :

Masuk ke www.blogger.com

Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F

Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin>

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background:#333;}

Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau

Terserah anda, dimana anda ingin meletakkan menubarnya

Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<nav id="menu">
<input type="checkbox">
<label>≡<span>Navigation</span></label>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Tips Triks</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Musik</a></li>
<li><a href="#">Penelitian</a></li>
<li><a href="#">Islami</a></li>
</ul>
</nav>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar Berwarna-warni Cantik di Blogger

2015-08-24T11:02:00.002-07:00

Fungsi menubar menurut pendapat saya :

Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
dll.

Berikut langkah-langkahnya :

Masuk ke www.blogger.com
Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F
Copy-paste kode CSS di bawah Sebelum tag ]]> </ b: skin>

#syairiblog{background:#333;color:#eee;width:100%;height:35px;margin: 0 auto;border-bottom:3px solid #a6a6a6;}
#syairiblog ul,#syairiblog li{margin:0 0;padding:0 0;list-style:none}
#syairiblog ul{height:35px}
#syairiblog li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#syairiblog li:first-child{border-left: none}
#syairiblog a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#syairiblog li:hover > a,#syairiblog li a:hover{background:#111}
#syairiblog input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#syairiblog label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#syairiblog label span{font-size:12px;position:absolute;left:35px}
#syairiblog ul.syairiblogs{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#syairiblog ul.syairiblogs li{display:block;width:100%;font:12px Arial;text-transform:none;}
#syairiblog li:hover ul.syairiblogs{display:block}
#syairiblog a.prett{padding:0 27px 0 14px}
#syairiblog a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#syairiblog ul.syairiblogs a:hover{background:#333;}
.wrn1{background-color:#fe5400 !important;} .wrn1:hover{background-color:#42fd01 !important;}
.wrn2{background-color:#db05e8 !important;} .wrn2:hover{background-color:#fff003 !important;}
.wrn3{background-color:#a0e805 !important;} .wrn3:hover{background-color:#ff0303 !important;}
.wrn4{background-color:#02baca !important;} .wrn4:hover{background-color:#D580FE !important;}
.wrn5{background-color:#f5068d !important;} .wrn5:hover{background-color:#80C8FE !important;}

Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau

Terserah anda, dimana anda ingin meletakkan menubarnya

Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<nav id="syairiblog" style="position: relative; top: 0px; z-index: 9999;">
<input type="checkbox">
<label>≡<span>Navigation</span></label>
<ul>
<li><a class="wrn3" href="#">Home</a></li>
<li><a class="wrn4" href="#" title="Tentang Blog Ini">SBMenu 1</a></li>
<li><a class="wrn5" href="#" title="Daftar Isi Blog">SBMenu 2</a></li>
<li><a class="wrn2" href="#">SBMenu 3</a></li>
<li><a class="wrn1" href="#" title="Kontak Kami">SBMenu 4</a></li>
</ul>
</nav>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar Dropdown (Submenu) Simple di Blogger

2015-08-24T10:49:00.000-07:00

Fungsi menubar menurut pendapat saya :

Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
dll.

Berikut langkah-langkahnya :

Masuk ke www.blogger.com

Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F

Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin>

#SB_menu {
    background: #656870;
    width: 100%;
    margin: 0 auto;
    height: 40px;
    padding: 0px;
    font-size: 13px;
 border-radius:3px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: normal;
    word-spacing: 2;
    -webkit-font-smoothing: antialiased;}
#SB_menu li.home a {
    padding: 0px 30px;}
#SB_menu li.home img {
    vertical-align: middle;}
#SB_menu ul {
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0px;}
#SB_menu li {
    float: left;
    padding: 0px;}
#SB_menu li a {
    background: #656870;
    color: #CCC;
    display: block;
    font-weight: bold;
    line-height: 40px;
 border-radius:3px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);}
#SB_menu li a:hover, #SB_menu ul li:hover a {
    background: #46484E;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);}
#SB_menu li ul {
    background: #46484E;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/;}
#SB_menu li:hover ul {
    display: block;}
#SB_menu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 225px;}
#SB_menu li:hover li a {
    background: none;
    color: #979EAF;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;}
#SB_menu li ul a {
    display: block;
    height: 40px;
    font-size: 13px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;}
#SB_menu> ul > li ul li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-transition: color ease 0.3s;
    -moz-transition: color ease 0.3s;
    -ms-transition: color ease 0.3s;
    -o-transition: color ease 0.3s;}
#SB_menu li ul a:hover, #SB_menu li ul li:hover a {
    background: #46484E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #FFF;
    text-decoration: none;
    padding: 0px 10px 0px 15px;}

Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau

Terserah anda, dimana anda ingin meletakkan menubarnya

Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<div id="SB_menu">
<ul><li class="home"><a href="http://nama blog anda/" title="Home Page">Home</a></li>
<li class="sub "><a href="#"><span>Blogger &#187</span></a><ul>
<li><a href="#"><span>SEO</span></a></li>
<li><a href="#"><span>Template</span></a></li>
<li><a href="#"><span>Widgets</span></a></li></ul></li>
<li><a href="#"><span>Software &#187</span></a>
<ul><li><a href="#"><span>Al-Qur'an</span></a></li>
<li><a href="#"><span>Antivirus</span></a></li>
<li><a href="#"><span>Utility</span></a></li></ul></li>
<li><a href="#"><span>Tools &#187</span></a>
<ul><li><a href="#"><span>Online HTML Editor</span></a></li>
<li><a href="#"><span>Color Code</span></a></li>
<li><a href="#"><span>Page Rank Checker</span></a></li></ul></li>
<li><a href="#"><span>Ebook</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li></ul>
 </div>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Memasang Sytax Higlighter Black Color (Tag Pre Menarik) Pada Blogger

2015-08-19T14:30:00.001-07:00

Memasang Sytax Higlighter Black Color (Tag Pre Menarik) Pada Blogger

Fungsi Syntax Higlighter, Menurut Pendapat Saya :

Membuat tampilan atau postingan blog menjadi lebih menarik
Khususnya blog yang membahas pemrograman atau tidak jauh dari dunia pengkodingan (source code)
Blog lebih rapih, simple dan sistematis.

Langkah-Langkahnya :

Masuk Blogger.com >> Dashboard
Masuk Template >> Edit HTML
Pasang kode CSS berikut diatas ]]></b:skin> gunakan Ctrl + F untuk mencari ]]></b:skin>. Letakkan diatas ]]></b:skin>

pre {
background-color:#464545;
background-image:-webkit-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:-moz-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:-ms-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:-o-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:linear-gradient(top, #464545 50%, #4d4d4d 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position:relative;
padding:0 7px;
margin:10px 5px;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
 }
pre[warna] {
padding:29px 1em 7px 1em;
 }
pre[warna]:before {
content:attr(warna);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[warna]::after {
    content: 'Double click to selection';
    padding: 0px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 0px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}
pre[warna]:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}
pre[warna="1"] {border-color:#fe5400;color:#ffffff;}
pre[warna="1"]:before {background-color:#fe5400;}
pre[warna="2"] {border-color:#db05e8;color:#ffffff;}
pre[warna="2"]:before {background-color:#db05e8;}
pre[warna="3"] {border-color:#a0e805;color:#ffffff;}
pre[warna="3"]:before {background-color:#a0e805;}
pre[warna="4"] {border-color:#02baca;color:#ffffff;}
pre[warna="4"]:before {background-color:#02baca;}
pre[warna="5"] {border-color:#f5068d;color:#ffffff;}
pre[warna="5"]:before {background-color:#f5068d;}
pre[warna="6"] {border-color:#01edb3;color:#ffffff;}
pre[warna="6"]:before {background-color:#01edb3;}
  }

Untuk menggunakannya di postingan, cukup memakai tag <pre> dan kode warna untuk memanggil
Untuk memposting gunakan mode HTML bukan Compose
Gunakan kode warna (1,2,3,4,5,6) kode tersebut menetukan warna, seperti dibawah ini :

<pre warna="1"> Tulisan anda disini atau kode anda </pre>

<pre warna="2"> Tulisan anda disini atau kode anda </pre>

<pre warna="3"> Tulisan anda disini atau kode anda </pre>

<pre warna="4"> Tulisan anda disini atau kode anda </pre>

<pre warna="5"> Tulisan anda disini atau kode anda </pre>

<pre warna="6"> Tulisan anda disini atau kode anda </pre>

Hasilnya akan seperti gambar diatas

Oke selamat mencoba pasti berhasil, sekian postingan bagaimana Memasang Sytax Higlighter Black Color (Tag Pre Menarik) Pada Blogger, semoga bermanfaat.

Cara Memasang Menubar dropdown CSS di Blog

2015-08-17T11:10:00.001-07:00

Fungsi menubar menurut pendapat saya :

Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
Agar blog atau website terlihat lebih simple, rapih dan teratur
dll.

Berikut langkah-langkahnya :

Masuk ke Blogger.com
Dashboard
Masuk ke Template
Edit HTML
Cari script berikut atau tekan Ctrl + F

<div class='main-outer'> atau

<div id='main-wrapper'> atau

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

Setelah Ketemu, Copy-paste source code dibawah ini di ATAS script code yang dicari tadi. di ATAS !!!

Pilih salah satu satu script !!!

<style>
#SBMenu1{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu1 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}
#SBMenu1 a{float: left;height: 25px;padding: 0 20px;color: #999;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}
#SBMenu1 li:hover > a{color: #ffffff;}
*html #SBMenu1 li a:hover /* IE6 */{color: #ffffff;}
#SBMenu1 li:hover > ul{display: block;}
/* Sub-SBMenu1 */
#SBMenu1 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu1 ul ul{top: 0;left: 150px;}
#SBMenu1 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}
#SBMenu1 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu1 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}
*html #SBMenu1 ul a /* IE6 */{height: 10px;}
*:first-child+html #SBMenu1 ul a /* IE7 */{height: 10px;}
#SBMenu1 ul a:hover{background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);}
#SBMenu1 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
#SBMenu1 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu1 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu1 ul li:first-child a:hover:after{border-bottom-color: #04acec;}
#SBMenu1 ul ul li:first-child a:hover:after{border-right-color: #04acec;border-bottom-color: transparent;}
#SBMenu1 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu1:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html #SBMenu1 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu1 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu1">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu2{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#0B7E88, #0B7E88);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu2 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu2 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu2 li:hover > a{color: #ffffff;}*html #SBMenu2 li a:hover /* IE6 */{color: #ffffff;}#SBMenu2 li:hover > ul{display: block;}
/* Sub-SBMenu2 */
#SBMenu2 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu2 ul ul{top: 0;left: 150px;}#SBMenu2 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu2 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu2 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu2 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu2 ul a /* IE7 */{height: 10px;}
#SBMenu2 ul a:hover{background: #0B7E88;background: -moz-linear-gradient(#0B7E88, #0B7E88);background: -webkit-gradient(linear, left top, left bottom, from(#0B7E88), to(#0B7E88));background: -webkit-linear-gradient(#0B7E88, #0B7E88);background: -o-linear-gradient(#0B7E88, #0B7E88);background: -ms-linear-gradient(#0B7E88, #0B7E88);background: linear-gradient(#0B7E88, #0B7E88);}
#SBMenu2 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu2 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu2 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu2 ul li:first-child a:hover:after{border-bottom-color: #0B7E88;}#SBMenu2 ul ul li:first-child a:hover:after{border-right-color: #0B7E88;border-bottom-color: transparent;}#SBMenu2 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu2:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu2 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu2 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu2">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu3{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#0101f9, #0101f9);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu3 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu3 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu3 li:hover > a{color: #ffffff;}*html #SBMenu3 li a:hover /* IE6 */{color: #ffffff;}#SBMenu3 li:hover > ul{display: block;}
/* Sub-SBMenu3 */
#SBMenu3 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu3 ul ul{top: 0;left: 150px;}#SBMenu3 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu3 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu3 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu3 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu3 ul a /* IE7 */{height: 10px;}
#SBMenu3 ul a:hover{background: #0101f9;background: -moz-linear-gradient(#0101f9, #0101f9);background: -webkit-gradient(linear, left top, left bottom, from(#0101f9), to(#0101f9));background: -webkit-linear-gradient(#0101f9, #0101f9);background: -o-linear-gradient(#0101f9, #0101f9);background: -ms-linear-gradient(#0101f9, #0101f9);background: linear-gradient(#0101f9, #0101f9);}
#SBMenu3 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu3 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu3 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu3 ul li:first-child a:hover:after{border-bottom-color: #0101f9;}#SBMenu3 ul ul li:first-child a:hover:after{border-right-color: #0101f9;border-bottom-color: transparent;}#SBMenu3 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu3:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu3 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu3 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu3">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu4{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#7B990C, #7B990C);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu4 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu4 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu4 li:hover > a{color: #ffffff;}*html #SBMenu4 li a:hover /* IE6 */{color: #ffffff;}#SBMenu4 li:hover > ul{display: block;}
/* Sub-SBMenu4 */
#SBMenu4 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu4 ul ul{top: 0;left: 150px;}#SBMenu4 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu4 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu4 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu4 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu4 ul a /* IE7 */{height: 10px;}
#SBMenu4 ul a:hover{background: #7B990C;background: -moz-linear-gradient(#7B990C, #7B990C);background: -webkit-gradient(linear, left top, left bottom, from(#7B990C), to(#7B990C));background: -webkit-linear-gradient(#7B990C, #7B990C);background: -o-linear-gradient(#7B990C, #7B990C);background: -ms-linear-gradient(#7B990C, #7B990C);background: linear-gradient(#7B990C, #7B990C);}
#SBMenu4 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu4 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu4 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu4 ul li:first-child a:hover:after{border-bottom-color: #7B990C;}#SBMenu4 ul ul li:first-child a:hover:after{border-right-color: #7B990C;border-bottom-color: transparent;}#SBMenu4 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu4:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu4 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu4 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu4">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu5{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#395540, #395540);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu5 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu5 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu5 li:hover > a{color: #ffffff;}*html #SBMenu5 li a:hover /* IE6 */{color: #ffffff;}#SBMenu5 li:hover > ul{display: block;}
/* Sub-SBMenu5 */
#SBMenu5 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu5 ul ul{top: 0;left: 150px;}#SBMenu5 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu5 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu5 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu5 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu5 ul a /* IE7 */{height: 10px;}
#SBMenu5 ul a:hover{background: #395540;background: -moz-linear-gradient(#395540, #395540);background: -webkit-gradient(linear, left top, left bottom, from(#395540), to(#395540));background: -webkit-linear-gradient(#395540, #395540);background: -o-linear-gradient(#395540, #395540);background: -ms-linear-gradient(#395540, #395540);background: linear-gradient(#395540, #395540);}
#SBMenu5 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu5 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu5 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu5 ul li:first-child a:hover:after{border-bottom-color: #395540;}#SBMenu5 ul ul li:first-child a:hover:after{border-right-color: #395540;border-bottom-color: transparent;}#SBMenu5 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu5:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu5 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu5 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu5">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu6{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#FF0C39, #FF0C39);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu6 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu6 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu6 li:hover > a{color: #ffffff;}*html #SBMenu6 li a:hover /* IE6 */{color: #ffffff;}#SBMenu6 li:hover > ul{display: block;}
/* Sub-SBMenu6 */
#SBMenu6 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu6 ul ul{top: 0;left: 150px;}#SBMenu6 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu6 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu6 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu6 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu6 ul a /* IE7 */{height: 10px;}
#SBMenu6 ul a:hover{background: #FF0C39;background: -moz-linear-gradient(#FF0C39, #FF0C39);background: -webkit-gradient(linear, left top, left bottom, from(#FF0C39), to(#FF0C39));background: -webkit-linear-gradient(#FF0C39, #FF0C39);background: -o-linear-gradient(#FF0C39, #FF0C39);background: -ms-linear-gradient(#FF0C39, #FF0C39);background: linear-gradient(#FF0C39, #FF0C39);}
#SBMenu6 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu6 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu6 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu6 ul li:first-child a:hover:after{border-bottom-color: #FF0C39;}#SBMenu6 ul ul li:first-child a:hover:after{border-right-color: #FF0C39;border-bottom-color: transparent;}#SBMenu6 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu6:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu6 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu6 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu6">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu7{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#FF9900, #FF9900);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu7 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu7 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu7 li:hover > a{color: #ffffff;}*html #SBMenu7 li a:hover /* IE6 */{color: #ffffff;}#SBMenu7 li:hover > ul{display: block;}
/* Sub-SBMenu7 */
#SBMenu7 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu7 ul ul{top: 0;left: 150px;}#SBMenu7 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu7 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu7 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu7 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu7 ul a /* IE7 */{height: 10px;}
#SBMenu7 ul a:hover{background: #FF9900;background: -moz-linear-gradient(#FF9900, #FF9900);background: -webkit-gradient(linear, left top, left bottom, from(#FF9900), to(#FF9900));background: -webkit-linear-gradient(#FF9900, #FF9900);background: -o-linear-gradient(#FF9900, #FF9900);background: -ms-linear-gradient(#FF9900, #FF9900);background: linear-gradient(#FF9900, #FF9900);}
#SBMenu7 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu7 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu7 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu7 ul li:first-child a:hover:after{border-bottom-color: #FF9900;}#SBMenu7 ul ul li:first-child a:hover:after{border-right-color: #FF9900;border-bottom-color: transparent;}#SBMenu7 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu7:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu7 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu7 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu7">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

Simpan Template

Selamat Mencoba :)

Membuat Setengah Segitiga, Program Sederhana C++

2015-07-22T10:55:00.000-07:00

Mungkin ada yang ingin belajar bahasa pemrograman C++, atau lagi cari-cari artikel mengenai C++ untuk memenuhi tuntutan tugas sekolah atau kuliah, bisa jadi juga karena iseng-iseng terus nyasar ke blog ini, hehe (gak lucu). Langsung aja deh gimana cara buatnya:

Copy-paste source code di bawah ini :

Perhatian : Software / compiler yang digunakan penulis adalah Borland C++ (setiap compiler berbeda)

#include <iostream.h>
#include <conio.h>
int main(){
 int a,b,x;
 clrscr();
   gotoxy(1,3);
   cout<<"---------BUAT SEGITIGA---------"<<endl<<endl;
 cout<<"Silahkan Masukkan Nilai : "; cin>>x;
   cout<<endl;
 for(a=1;a<=x;a++){
 for(b=1;b<=a;b++){
 cout<<b;
 }
 cout<<endl;
 }
getch();
return 0;
}

Tekan Alt + F9 untuk Compile
Tekan Ctrl + F9 untuk Run

Jadi deh, lihat hasilnya !!

Cara Membuat Tombol Ber-Link Yang Terhubung Ke Internet Visual Basic 6

2015-07-22T10:43:00.002-07:00

Tanpa penjelasan panjang, langsung saja berikut langkah-langkahnya :

Buka Visual Basic 6
Pilih CommandButton, dan letakkan pada form, seperti gambar (gambar sudah di modifikasi)

Copy-paste source code berikut :

Private Declare Function ShellExecute Lib "shell32.dll" Alias "ShellExecuteA" (ByVal hwnd As Long, ByVal lpOperation As String, ByVal lpFile As String, ByVal lpParameters As String, ByVal lpDirectory As String, ByVal nShowCmd As Long) As Long
Private Declare Function SetWindowPos Lib "user32" (ByVal h As Long, ByVal hb As Long, ByVal X As Long, _
    ByVal Y As Long, ByVal cx As Long, ByVal cy As Long, ByVal F As Long) As Log
Const SWP_NOMOVE = 2
Const SWP_NOSIZE = 1
Const flags = SWP_NOMOVE Or SWP_NOSIZE
Const HWND_TOPMOST = -1
Const HWND_NOTOPMOST = -2

Private Sub Command1_Click()
ShellExecute Me.hwnd, "Open", "http://syairiblog.blogspot.com", vbNullString, vbNullString, 3
End Sub

Perhatian : Code warna Kuning, ubahlah dengan Link tujuan

seperti itulah bagaimana cara buat tombol ber-link yang terhubung ke internet
SEMOGA BERMANFAAT

Contoh Program Sederhana, Penilaian Mahasiswa Dengan Pemrograman C++

2015-07-22T10:26:00.000-07:00

Contoh program yang saya bahas kali ini adalah contoh program yang sederhana tentang penilaian mahasiswa dengan bahasa pemrograman C++. pas buat yang baru belajar (penulis juga masih belajar), mudah dimengerti.

Buka software/compailer C++ kesayangan anda
Copy-paste source code di bawah ini :

Perhatian : software/compiler yang saya gunakan adalah Borland C++ (setiap compiler berbeda)

#include<constrea.h>
constream c;
main()
{
float x,y,z,a;
char grade;
clrscr();
c<<"-----------------------------"<<endl;
c<<"=====|Nilai Mahasiswa|======="<<endl;
c<<"-----------------------------"<<endl;
c<<endl<<"Nilai UAS   : ";cin>>x;
c<<"Nilai UTS   : ";cin>>y;
c<<"Nilai UTAMA : ";cin>>z;
a=(x+y+z)/3;
c<<endl<<"-----------------------------"<<endl;
c<<endl<<"Nilai anda adalah : "<<a<<endl;
if(a>=85&&a<=100){
grade='A';
}
else if(a<85&&a>=75){
grade='B';
}
else if(a<75&&a>=65){
grade='C';
}
else if(a<65&&a>=55){
grade='D';
}
else{
grade='E';
}
c<<"Grade Anda Adalah : "<<grade;
getch();
return 0;
}

Tekan Alt + F9 untuk Compile
Tekan Ctrl + F9 untuk Run

Maka hasilnya Seperti gambar

Cara Membuat Daftar Isi (Sitemap), Pilih Salah Satu !!

2015-07-21T12:18:00.001-07:00

Langkah-langkahnya

Masuk ke Blogger.com > Dashboard
Masuk ke Laman > Halaman baru
Pilih mode HTML
Copy-paste salah satu source code
Klik Publish

Daftar Isi / Sitemap Super Keren

<style scoped="scoped" type="text/css">/* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc{margin:0 auto;background-color:#333333;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#222222;color:white}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#222222;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #222222;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #222222;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#FFE8E3}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}
@media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://syairiblog.blogspot.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Daftar Isi / Sitemap Berdasarkan Label

<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript"></script>
<script src="http://syairiblog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Daftar Isi / Sitemap Label Tapi Keren

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://syairiblog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Perhatian
code warna biru diganti alamat web / blog anda

Gimana keren-keren kan daftar isi (sitemap)-nya, selamat mencoba

Pasang Random Post Simple dan Clean Gambar Judul Saja di Blog

2015-07-20T14:50:00.003-07:00

Gambar random post simple :

Seperti yang dilihat pada gambar diatas, random post yang simple dan clean. Berikut adalah langkah-langkahnya :

Buka Blogger.com > Dashbord
Buka Tata Letak > Add Widget
Pilih HTML / Java Script
Copy-paste source code dibawah ini :

<style>
#random-posts img{border-radius: 50px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #FFFFF;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 60;
var randomposts_details = 'yes';
randomposts_details2 = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq0yprkwo1kU8El-WnXoUt-hNg9pkKdM-mmLq4lwAvlcBIFCNOKSPm8-zfEgr6nrhde9cWIpz6eGG8Q2ovpGg4P6aC8oTVHwv-GzPq5Klr3K2wmRfHXLjPGoaMsULY_UZfv4z9YJ0Mn8k/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span>' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</span>'
        }
        if (randomposts_details2 == 'yes') {
            document.write('<span class="random-summary">' + randomposts_snippet) + '</span>'
        }
        document.write('<div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

Klik simpan

Selamat mencoba

Membuat Jam dan Tanggal Keren Terbaru Visual Basic 06

2015-07-20T12:47:00.000-07:00

Berikut langkah-langkah membuat jam dan tanggal keren terbaru

Buat Project dengan :

2 buah Label

1 Timer

Seperti gambar dibawah ini:

Ketik / copy-paste source code dibawah ini

Dim Hari As String
Dim JHari

Private Sub Form_Load()
JHari = Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu")
Timer1.Interval = 500
Form1.BackColor = vbBlack
Label1.Alignment = 2
Label1.BackStyle = 0
Label1.BorderStyle = 1
Label1.Font = "Century Schoolbook"
Label1.FontBold = True
Label1.FontSize = 16
Label1.ForeColor = &HFFFF00
Label2.Alignment = 2
Label2.BackStyle = 0
Label2.BorderStyle = 1
Label2.Font = "Century Schoolbook"
Label2.FontBold = True
Label2.FontSize = 16
Label2.ForeColor = &HFFFF00
End Sub

Private Sub Timer1_Timer()
Hari = JHari(Abs(Weekday(Date) - 1))
Label2.Caption = "" & Hari & ", " & Format(Date, "dd mmmm yyyy")
Label1.Caption = Format(Time, "hh:mm:ss")
End Sub

Jika anda mengikuti langkah diatas maka hasilnya seperti gambar pertama diatas

Video 1

Video 1

BACAAN ATAU DO`A DALAM SHOLAT

2015-06-19T01:14:00.000-07:00

Takbiratul Ihram

ALLAHU AKBAR

Artitnya : Allah Maha Besar

Bacaan Do’a Iftitah

ALLAHU AKBAR, KABIERAW WALHAMDULILLAHI KATSIERA. WASUBHANALLAHI BUKRATAW WA-ASHILA.

WAJJAHTU WAJHIA LILLADZIE FATHARAS SAMAWATI WAL ARDLA HANIEFAN MUSLIMAWWAMA ANAMINAL MUSYRIEKIEN. INNA SHALATI WANUSUKI WAMAHYAYA WAMAMATI LILLAHI RABBIL’ALAMIEN. LASYARAKIEKA LAHU WABIDZALIKA UMIRTU WA ANA MINAL MUSLIMIEN.

Artinya: "Allah Maha Besar lagi Sempurna Kebesaran-Nya, segala puji bagi-Nya dan Maha Suci Allah sepanjang pagi dan sore. Ku hadapkan muka hatiku kepada Dzat yang menciptakan langit dan bumi dengan keadaan yang lurus dan menyerahkan diri dan aku bukanlah dari golongan kaum musyrikin. Sesungguhnya shalatku, ibadahku, hidup dan matiku semata hanya untuk Allah, Tuhan seru sekalian alam. Tidak ada sekutu bagi-Nya dan dengan itu aku diperintahkan untuk tidak menyukutukan-Nya. Dan aku dari golonan orang muslimin

Surat Al Fatihah

BISMILLA-HIRRAHMA-NIRRAHIM.
ALHAMDU LILLAHI-ROBBIL ‘ALAMIN. ARRAHMA NIRRAHIM. MALIKI YAUMIDDIN. IYYAKA NA’BUDU WAIYYA-KANASTA’IN IHDINASH-SHIRA-THAL MUSTAQIM, SHIRATHALLADZINA AN’AMTA’ALAIHIM GHAIRIL MAGHDHUBI ‘ALAIHIM. WALADL DLAALLIIN, AMIN

Artinya: Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang. Segala puji bagi Allah, Tuhan seru sekalian alam. Yang Pengasih dan Penyayang.Yang menguasai hari kemudian. Hanya pada-Mu lah aku mengabdi dan kepada-Mu lah aku meminta pertolongan. Tunjukilah kami jalan yang lurus. Yaitu jalannya orang-orang yang telah Engkau beri nikmat. Bukan jalan mereka yang pernah Engkau murkai, atau jalannya orang-orang yang sesat.

Membaca Surat Al-Quran

Artinya: Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang. Katakanlah (hai Muhammad): Allah itu Esa. Allah tempat meminta. Tiada Ia beranak dan tiada pula Ia dilahirkan. Dan tak ada bagi-Nya seorangpun yang menyerupai-Nya kepada Tuhan yang menguasai subuh.

DO`A RUKU`

ALLAHU AKBAR

Artitnya : Allah Maha Besar

SUBHAANA RABBIYAL ADZIIMI WABIHAMDIHII ( 3 kali )

Artinya: ”Maha suci Robb ku yang Maha Agung dan aku memujiNya”

DO`A I`TIDAL

SAMI’ALLAAHU LIMAN HAMIDAH.

Artinya : (semoga Allah mendengar (memperhatikan) orang yang memuji-Nya).

RABBANAA LAKAL HAMDU MIL USSAMAWAATI WAMI UL ARDLI WAMIL UMAA SYI’TA MIN SYAI’IN BA’DU

Artinya : “ Ya Allah Tuhan kami! Bagi-Mu segala puji, sepenuh langit dan bumi, dan sepenuh barang yang Kau kehendaki sesudah itu “.

DO`A SUJUD

ALLAHU AKBAR

Artitnya : Allah Maha Besar

SUBHAANA RABBIYAL A’LAA WABIHAMDIHII ( 3 kali )

Artinya : “ Maha Suci Robb ku Yang Maha Luhur dan aku memuji-Nya ”

Duduk diantara dua sujud

RABBIGHFIRLII WARHAMNII WAJBURNII WARFA’NII WARZUQNII WAHDINII WA’AAFINI WA’FUANNII.

Artinya: Ya Allah, ampunilah dosaku, belas kasihanilah aku, dan cukupkanlah segala kekuranganku, dan angkatlah derajatku, dan berilah rizki kepada ku, dan berilah aku petunjuk, dan berilah kesehatan kepadaku, dan berilah ampunan kepadaku.

Tahiyat awal

ATTAHIYYATUL MUBARAKAATUSH SHOLAWAATUTH THAYYIBATU LILLAAH, ASSALAAMU’ALAIKA AYYUHAN NABIYYU WARAHMATULLAAHI WABARAKAATUH, ASSALAAMU’ALAINA WA’ALAA ‘IBAADILLAAHISH SHOOLIHIIN. ASYHADU ALLAA ILAAHA ILLALLAAH, WAASYHADU ANNA MUHAMMADAN RASUULULLAAH. ALLAHHUMMA SHOLLI ‘ALAA SAIDINA MUHAMMAD WA ‘ALA AALIHI SAIDINA MUHAMMAD.

Tahiyat akhir

Setelah baca seperti tahiyat awal dilanjutkan dengan

...KAMAA SHOLAITA ‘ALA SAIDINA IBRAHIIM WA ‘ALA AALIHI SAIDINA IBRAHIIM, WA BAARIK ‘ALA SAIDINA MUHAMMAD WA ‘ALA AALIHI SAIDINA MUHAMMAD, KAMAA BAARAKTA ‘ALA SAIDINA IBRAHIIM WA ‘ALA AALIHI SAIDINA IBRAHIIM, FIL ALAMINA INNAKA HAMIIDUM MAJIID.

Artinya: Segala kehormatan, keberkahan, kebahagian dan kebaikan bagi Allah. Salam, rahmat dan berkah-Nya kupanjatkan kepadamu wahai Nabi (Muhammad). Salam (keselamatan) semoga tetap untuk kami seluruh hamba yang shaleh. Aku bersaksi bahwa tiada Tuhan selain Allah. Dan aku bersaksi bahwa Nabi Muhammad adalah utusan Allah. Ya Allah! Limpahilah rahmat kepada Nabi Muhammad. Sebagaimana pernah Engkau beri rahmat kepada Nabi Ibrahim dan keluarganya. Dan limpahilah berkah atas Nabi Muhammad beserta para keluarganya. Sebagaimana Engkau memberi berkah kepada Nabi Ibrahim dan keluarganya. Diseluruh alam semesta Engkaulah yang Terpuji, dan Maha Mulia.

Salam

ASSALAAMU’ALAIKUM WARAHMATULLAAHI.

Keselamatan dan rahmat Allah semoga tetap pada kamu sekalian

Semoga bermanfaat