Selasa, 21 Mei 2013

TPLMWSN #1c.Mengenal Apa Itu Server dan Macam-Macamnya

Apa Itu Definisi Server Komputer?

1.TPLMWSN #1.Mengenal Domain,Hosting dan Server2.TPLMWSN #2.Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan)
3.TPLMWSN #3.Cara Setting Domain dari sebuah Hosting
4.TPLMWSN #4.Panduan Bahasa Php,Database dan MySql untuk Pemula
5.TPLMWSN #5.Beberapa Script Php untuk Membangun sebuah Website

Bismillah - secara garis besar,definisi server adalah sebuah 'pelayan' yang mana berasal dari kata 'service' yakni 'melayani'.
Jadi dalam kasus ini server adalah sebuah sistem komputer yang menyediakan jenis layanan tertentu dalam sebuah jaringan komputer.

Dari sumber terpercaya kami http://www.mic.ac.id/,dijelaskan bahwa sebuah server didukung dengan prosesor yang bersifat scalable dan RAM yang besar, juga dilengkapi dengan sistem operasi khusus, yang disebut sebagai sistem operasi jaringan atau network operating system.Server juga menjalankan perangkat lunak administratif yang mengontrol akses terhadap jaringan dan sumber daya yang terdapat di dalamnya,seperti halnya berkas atau alat pencetak (printer),dan memberikan akses kepada workstation anggota jaringan.

Macam-Macam Server

Umumnya,diatas system operasi server terdapat aplikasi-aplikasi yang menggunakan arsitektur klien/server.
Contoh dari aplikasi ini adalah DHCP Server,Mail Server,HTTP Server,FTP Server,DNS Server dan lain sebagainya (untuk definisi masing-masing server sobat bisa googling aja ya pent-).Setiap system operasi server umumnya membundel layanan-layanan tersebut atau layanan tersebut juga dapat diperoleh dari pihak ketiga.

Setiap layanan tersebut akan merespons terhadap request dari client.Sebagai contoh, client DHCP akan memberikan request kepada server yang menjalankan server DHCP;

Ketika sebuah klien membutuhkan alamat IP, klien akan memberikan perintah/request kepada server, dengan bahasa yang dipahami oleh server DHCP, yakni protokol DHCP itu sendiri.
Contoh sistem operasi server adalah Windows NT 3.51, dan dilanjutkan dengan Windows NT 4.0. Saat ini sistem yang cukup populer adalah Windows 2000 Server dan Windows Server 2003,kemudian Sun Solaris,Unix, dan GNU/Linux.

Server biasanya terhubung dengan client dengan kabel UTP dan sebuah Network Card. Kartu jaringan ini biasanya berupa kartu PCI atau ISA.Fungsi server sangat banyak, misalnya untuk situs internet,ilmu pengetahuan atau sekedar penyimpanan data.Namun yang paling umum adalah untuk meng-koneksikan komputer client ke Internet.

Sedangkan klien-server atau client-server merupakan sebuah paradigma dalam teknologi informasi yang merujuk kepada cara untuk mendistribusikan aplikasi ke dalam dua pihak: pihak klien dan pihak server.Dalam model klien/server, sebuah aplikasi dibagi menjadi dua bagian yang terpisah, tapi masih merupakan sebuah kesatuan yakni komponen klien dan komponen server.

Komponen klien juga sering disebut sebagai front-end, sementara komponen server disebut sebagai back-end.Komponen klien dari aplikasi tersebut dijalankan dalam sebuah workstation dan menerima masukan data dari pengguna.

Komponen klien tersebut akan menyiapkan data yang dimasukkan oleh pengguna dengan menggunakan teknologi pemrosesan tertentu dan mengirimkannya kepada komponen server yang dijalankan di atas mesin server, umumnya dalam bentuk request terhadap beberapa layanan yang dimiliki oleh server.

Komponen server akan menerima request dari klien, dan langsung memprosesnya dan mengembalikan hasil pemrosesan tersebut kepada klien. Klien pun menerima informasi hasil pemrosesan data yang dilakukan server dan menampilkannya kepada pengguna, dengan menggunakan aplikasi yang berinteraksi dengan pengguna.

Sebuah contoh dari aplikasi client/server sederhana adalah aplikasi web yang didesain dengan menggunakan Active Server Pages (ASP) atau PHP.Skrip PHP atau ASP akan dijalankan di dalam web server (Apache atau Internet Information Services), sementara skrip yang berjalan di pihak klien akan dijalankan oleh web browser pada komputer klien.

Klien-server merupakan penyelesaian masalah pada software yang menggunakan database sehingga setiap komputer tidak perlu diinstall database, dengan metode klien-server database dapat diinstal pada suatu komputer sebagai server dan aplikasinya diinstal pada client.

Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan)

Nah,untuk kedepan nanti,kami Pelajaran Blog berusaha untuk mengulas masalah Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan) ini murni dari tulisan kami (ga copas seperti artikel ini pent-).Kita akan kupas tuntas sampai kita bisa memiliki website sendiri langkah demi langkah.Insya Allah.

Minggu, 12 Mei 2013

TPLMWSN #1b.Mengenal Apa Itu Hosting?

1.TPLMWSN #1.Mengenal Domain,Hosting dan Server2.TPLMWSN #2.Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan)
3.TPLMWSN #3.Cara Setting Domain dari sebuah Hosting
4.TPLMWSN #4.Panduan Bahasa Php,Database dan MySql untuk Pemula
5.TPLMWSN #5.Beberapa Script Php untuk Membangun sebuah Website

Apa itu Definisi Hosting / WebHosting?

Secara garis besar definisi hosting adalah sebuah ruang / tempat penyimpanan dari data atau file dari sebuah situs atau website.

Data dan file seperti apa? yup,tidak lain adalah file-file pendukung sehingga sebuah website bisa kita ciptakan.Disamping itu,sebuah hosting juga dapat menyimpan file layaknya sebuah piranti penyimpanan data yang ingin dupublikasikan maupun yang hanya sekedar untuk disimpan.
Tentu saja,biasanya semakin besar kapasitas sebuah hosting akan semakin mahal biayanya.

File-file dan data seperti apa yang bisa kita simpan dalam sebuah hosting? ya,seperti file javascript (*.js),(*.php),(*.txt),dan lain-lain.

Apa bedanya hosting gratis dan berbayar? jelas beda gan,biasanya hosting gratis akan membatasi fitur-fitur yang seharusnya ada seperti;Ftp,MySql,WebMail dan lain sebagainya.
Tidak seperti hosting berbayar yang akan menawarkan fitur lebih lengkap,segi keamanan dan kenyamanan seperti tanpa adanya iklan dan sebagainya.

Bagaimana kinerja sebuah hosting? Nah,pada kesempatan yang akan datang,kaitannya dengan hosting ini kita akan menggunakan webhosting gratisan di 000webhost.com sebagai sumber pembelajaran kita dalam mengenal bagaimana sebuah hosting bekerja.

Oke gan,sampai disini kita sudah tahu ya definisi dari apa itu hosting,untuk tutorial bagaimana kita Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan) akan segera kami (Pelajaran Blog)publikasikan secara detail tentu setelah posting TPLMWSN #1b.Mengenal Apa Itu Hosting? artikel kita mendatang.

Semoga bermanfaat.

Selasa, 23 April 2013

TPLMWSN #1a.Mengenal Apa Itu Domain?

Apa Itu Domain?

Bismillah - seperti janji minggu lalu sob,Pelajaran Blog bakal share seputar Tutorial Panduan Lengkap Membuat Website Sendiri dari Nol (TPLMWSN)

1.TPLMWSN #1.Mengenal Domain,Hosting dan Server2.TPLMWSN #2.Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan)
3.TPLMWSN #3.Cara Setting Domain dari sebuah Hosting
4.TPLMWSN #4.Panduan Bahasa Php,Database dan MySql untuk Pemula
5.TPLMWSN #5.Beberapa Script Php untuk Membangun sebuah Website
Dan seperti janji minggu lalu juga,pada sesi postingan ini kita bagi dalam beberapa bagian,diantaranya adalah TPLMWSN #1a.Mengenal Apa Itu Domain?.

Untuk pengertian domain dari wikipedia indonesia domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet. Fungsi Domain adalah untuk mempermudah pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai IP address. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contohnya "wikipedia.org". Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat website.

Sedangkan..

Menurut Pelajaran Blog,Domain tak ubahnya seperti huruf alphabet maupun angka juga simbol yang fungsinya untuk menampilkan alamat url sebuah website alias IP Address client server hosting dari file sebuah website.
Misal : alamat IP server tempat file website kita disimpan adalah 192.168.1.118. Pada dasarnya kita bisa saja menuliskan 192.168.1.118 pada browser untuk mengakses website yang kita miliki,tapi hal ini tentunya membutuhkan tenaga ekstra untuk mengingat deretan angka hanya untuk membuka sebuah halaman website.Nah, fungsi domain inilah yang akan mempermudah pengakses tanpa harus 'njlimet' mengingat deretan angka ip address suatu web.

Jadi jelas ya bro,bahwa dengan adanya domain ini kita bisa mengakses sebuah halaman situs tanpa harus mengingat deretan angka dari ip addres.
Banyak domain yang telah kita kenal seperti;(*.tk),(*.info),(*.web.id),(*.com),(*.org),(*.net),(*.co.cc),(*.or.id),dll.

Oke gan,untuk selanjutnya kita akan membahas TPLMWSN #1b.Mengenal Apa Itu Hosting?,jadi tunggu postingan kami selanjutnya ya.Insya Allah.

Selasa, 09 April 2013

Tutorial Panduan Lengkap Membuat Website Sendiri dari Nol (TPLMWSN)

Langkah demi Langkah Cara Membuat Website Sendiri

Tutorial Panduan Lengkap Membuat Website Sendiri dari Nol.

Pengantar:
Bismillah - hi sobat blogger,pa kabar?
Seperti yang bisa sobat lihat,sesi kali ini dan untuk beberapa tutorial kedepannya nanti,Insya Allah Pelajaran Blog akan mmpublikasikan Tutorial Panduan Lengkap Membuat Website Sendiri dari Nol,atau dalam judul selanjutnya nanti kami akan singkat dalam judul TPLMWSN.

Apa Saja Yang Menjadi Bahan Pembahasan:

Mengingat penulis sendiri yang tidak begitu aktif dalam dunia online,pembahasan kaitan dengan Tutorial Panduan Lengkap Membuat Website Sendiri dari Nol ini akan kami bagi dalam beberapa sesi yakni:

1.TPLMWSN #1.Mengenal Domain,Hosting dan Server2.TPLMWSN #2.Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan)
3.TPLMWSN #3.Cara Setting Domain dari sebuah Hosting
4.TPLMWSN #4.Panduan Bahasa Php,Database dan MySql untuk Pemula
5.TPLMWSN #5.Beberapa Script Php untuk Membangun sebuah Website
Testi:

Beberapa posting diatas akan kami publikasikan Insya Allah dalam waktu dekat ini,yang akan kami kupas secara ringkas namun jelas.
Tujuannya adalah membantu mereka para pemula dalam dunia blogging (karena saya pun dalam tingkat belajar),untuk mempermudah kita dalam menyampaikan sebuah pesan kepada dunia (halah!).
Tunggu kami,expect us guys!

Minggu, 31 Maret 2013

Update! Membuat Tooltip Kotak Search Box Blogger

Yuk! Menghias Kotak Pencarian Blogger!

Membuat Tooltip Kotak Search Box (Tooltip Kotak Pencarian)
Lain dengan materi posting Pelajaran Blog beberapa waktu lalu yang membahas juga seputar kotak pencarian,kali ini kita hanya sebatas menghiasnya saja (pembaca:yah..ga seru dong!)

Tunggu dulu sob,ini bisa diterapkan di form apa aja kok,ya salah satunya pada form kotak pencarian yang akan dibahas pada sore hari ini :D

Memang contohnya seperti apa sih?,coba saja sobat lihat kotak pencarian di SINI

Gimana? ingin mencobanya sob? ikuti ya gan.

Langkah Memodifikasi Kotak Pencarian dengan Tooltip jQuery


Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

kotak pencarian popup.
(1)


popup tooltip search box jquery.
(2)


trik cara membuat tooltip serach box.
(3)


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='http://mrpujiajadeh.comze.com/gips.css' rel='stylesheet' type='text/css'/>
<script src='http://mrpujiajadeh.comze.com/gips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&#39;input#purple&#39;).gips({ &#39;theme&#39;: &#39;purple&#39;, autoHide: true, text: &#39;This is purple tooltip, auto hide after pausess time elapses.&#39; });
$(&#39;input#green&#39;).gips({ &#39;theme&#39;: &#39;green&#39;, placement: &#39;left&#39; });
$(&#39;input#yellow&#39;).gips({ &#39;theme&#39;: &#39;yellow&#39;, autoHide: true, placement: &#39;right&#39; });
$(&#39;input#red&#39;).gips({ &#39;theme&#39;: &#39;red&#39;, placement: &#39;bottom&#39; });
});
</script>

Setelah itu simpan templates.

Kemudian,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:

membuat kotak pencarian jquery
(5)


how to create a jquery css popup tooltip for search box blogger
(6)



Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode berikut:
<div id="demo"><form action='pelajaran-blog.blogspot.com/search' id='searchform' method='get'>
<input class="searchinput" id="red" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}" onfocus="if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;;}" type="text" value="Cari artikel disini.." />
</form></div>

Simpan template sobat dan lihat hasilnya :D

Ref:

Senin, 25 Maret 2013

Update! Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter)

Trik Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter) di Blogger

Pernahkah sobat menjumpai sebuah blog dengan menampilkan kode (hal ini berhubungan dengan cara membuat posting kode di blogger post pent-) yang dilengkapi dengan fitur Print button dan View plain seperti gambar dibawah ini?

cara membuat tampilan kode posting blogger dengan fitur print dan view.
Klik di SINI untuk tampilan lebih besar.

Fitur seperti ini sangat membantu,terlebih jika sobat ingin menjadikan kode yang sedang disimak ingin disimpan dalam flashdisk (dalam bentuk *.txt) maupun sekedar untuk di print.

Sangat berbeda dengan tampilan kode biasa,apalagi yang menggunakan text area,hal ini sangat sulit untuk didokumentasikan baik dalam flash disk maupun print.
Tak banyak berpengaruh memang,tapi selain membuat tampilan kode lebih profesional (chie) juga akan tampak menarik.

So,gimana cara kita mendapatkan hasil copy-nya? betul gan,tinggal klik 'View Plain' pada fitur yang disediakan.
Contoh live-nya sobat bisa lihat di postingan di SINI

Nah,gimana gan?

Langkah dan Cara Membuat Tampilan Print & View Kode Posting Syntax Highlighter


Sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

Syntax Highlighter blogger.
(1)

Syntax Highlighter di Blogspot.
(2)

trik cara membuat Syntax Highlighter blogger.
(3)


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
</head>

Setelah sobat ketemukan kode </head> tersebut,tepat BAWAH nya letakkan script berikut:
<script src='http://mrpujiajadeh.comze.com/shCore.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCpp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCSharp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCss.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushDelphi.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJava.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJScript.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushPhp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushRuby.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushVb.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushSql.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushXml.js' type='text/javascript'>
</script>

Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Setelah itu,cari lagi kode berikut:
</body>

Setelah sobat ketemukan,letakkan script berikut tepat di ATAS nya:
<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

Lalu simpan templates sobat.
Sebagai langkah terakhir,kita terapkan dalam posting,ikuti langkah berikut ini:
Pertama,sobat kunjungi dashboard lalu pilih 'New Post'

cara membuat kode blogger tampil dengan print tombol
Lihat Gambar lebih Besar di SINI


Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'

Syntax Highlighter untuk coding blogger post
Lihat Gambar lebih Besar di SINI


Kemudian cara menerapkannya letakkan script berikut:

<pre name="code" class="JScript">
Saya belajar membuat tampilan kode di Blogger.
Tampilan kode Syntax Highlighter gan!

</pre>

Lalu publikasikan dan lihat hasilnya :D
**kode warna biru adalah kode yang ingin ditampilkan (tentu untuk menampilkan kode di posting blog telah kita share beberapa waktu lalu pent-)

Update! Membuat Foto Slide Blogger!

Cara Memasang Foto Slide dengan Navigasi Dot dan Angka/Update! Membuat Foto Slide Blogger!

Slide Image / Photo with Number & Dot Navigation - masih ingat script dari Nivo beberapa waktu lalu? namun kini sudah menjadi premium sehingga tutorial yang membahas slide widget foto dengan bantuan javascript Nivo sebagian besar sudah tak berfungsi lagi.

Masih menggunakan script yang sama,jadi script 'slider pack nivo' yang kami terapkan di mrpujiajadeh.comze.com tetap menjadi hak cipta mereka ya gan,so jangan diutak-atik hihihi.

Jika beberapa waktu lalu Pelajaran Blog telah berbagi informasi tentang bagaimana membuat / memasang widget slideshow image di blogger,kali ini masih dalam widget yang sama namun dengan tampilan yang berbeda.

Yup! Informasi bagaimana membuat slide image / foto widget di blogger,dengan tampilan lebih menarik dan variatif foto slide widget yang akan kita bahas ini memiliki navigasi 'Previous' dan 'Next' di sebelah kanan dan kiri dari widget slide tersebut.

Sekali lagi betul gan! untuk widget slide show gambar yang akan kita bahas kali ini dibedakan dengan adanya dot atau juga bisa diganti dengan menggunakan angka sebagai navigasi / number navigation slideshow image widget.

Untuk screenshot dari trik Cara Membuat Slide Foto dengan Tombol Prev dan Next-nya yang telah saya terapkan,sobat bisa lihat gambar dibawah ini:

membuat foto slide dengan nomor - number in slide image
Lihat gambar lebih besar klik di SINI

Sedang untuk demo live-nya sobat bisa kunjungi diSINI.

Nah,sudah sangat jelas sekali ya sob,dan saatnya kini mencari tahu bagaimana memasang widget foto slide ini di blogger/blogspot milik sobat.

Langkah dan Cara Membuat Slide Gambar dengan Tombol 'Prev' dan 'Next'

Pertama,sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) kemudian pilih tab Edit HTML (gb3) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb4)

foto slide bergambar dengan navigasi angka.
(1)

membuat slide dengan tombol kanan dan kiri - previous - next.
(2)

trik cara membuat slide foto dengan dot dan angka didalamnya.
(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:
.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpG2x8_3YpmX84B0mV296ueKENaxXRmKFjmBczCFzx6uurglPX4RkMm_BmFCFpNwIoiFG4rm51HCPY7__9J8api4MSLUvlVy3Ko08GrV0jQAKqF3V_OOjr5Ks-qYlQzAD6HS09HB9yYE/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

Kemudian setelah itu cari lagi kode berikut:
</head>

Dan jika sudah ketemu,sobat letakkan barisan script berikut tepat diATASnya ya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mrpujiajadeh.comze.com/mrpujiajadeh-nivo-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Setelah itu simpan templates.

Selanjutnya,kini sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:

membuat foto berubah ubah dengan nomor didalamnya
(5)

how to create a slide show image with number on it
(6)

Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode widget slideshow ini:
<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

Lalu simpan templates sobat dan lihat hasilnya :D
Untuk kode yang berwarna hijau gantilah dengan atribut yang sobat inginkan ya.Selamat ngulik dan moga berhasil :D