Tutorial Blog Membuat Search Form atau Kotak Pencarian Sederhana untuk Blogspot

Tutorial Blog Membuat Search Form atau Kotak Pencarian Sederhana untuk Blogspot dan menghubungkan link search dengan search form nya.

Terasa janggal memang kalo dalam sebuah blog tidak ada search form atau kotak pencariannya.Selain memberikan kesan profesional juga untuk melengkapi penampilan blog kita.

Saya pernah membaca artikel tentang pembuatan search form seperti ini,dan pertanyaan audiens ttg bagaiman menghubungkan search form dgn link searchnya,tidak ditanggapi dengan serius.

Nah untuk itulah Tutorial saya kali ini adalah membuat search form atau kotak pencarian yg sederhana dan bagaimana menghubungkan search form dengan link searchnya.

Saya mulai dengan membuat kode seperti ini

<form  id='searchblog' method='get'>
<input  name='q' placeholder='Cari Artikel Disini...' type='text'/>
<input id='search-button-top'  type='submit' value='Pencarian'/></form>


Setelah saya save.maka hasilnya adalah sepert ini

Jelas search form tersebut belum bisa berfungsi mencari artikel link blog.

Supaya search form tersebut berfungsi mencari artikel saya masukan deklarasi seperti ini.

<form  action='/search' id='searchblog' method='get'>

Saya save lagi dan hasilnya sudah bisa mencari artikel meski masih standard dan belum seperti yg saya inginkan.

Kemudian saya coba menambahi style pada search form itu dengan deklarasi seperti ini

 <input Style='height:38px;width:250px;margin-top:1px;margin-right:-4px;font-size:18px;font-family:Ubuntu;' name='q' placeholder='Cari Artikel Disini...' type='text'/>
<input id='search-button-top' style='font-family:Ubuntu;width:110px;height:38px;background:#955f2a;color:#fff;font-size:18px;' type='submit' value='Pencarian'/>

Maka hasilnya adalah seperti search form punya saya yg diatas itu.
Jadi lengkapnya deklarasi search form punya saya itu adalah

<form action='/search' id='searchblog' method='get'>
<input Style='height:38px;width:250px;margin-top:1px;margin-right:-4px;font-size:18px;font-family:Ubuntu;' name='q' placeholder='Cari Artikel Disini...' type='text'/>
<input id='search-button-top' style='font-family:Ubuntu;width:110px;height:38px;background:#955f2a;color:#fff;font-size:18px;' type='submit' value='Pencarian'/></form>

Nah buat soblog yg memerlukan search form sederhana seperti punya saya,silahkan di copy dan dipake...
Untuk penempatannya terserah silahkan sesuaikan tinggi dan lebar nya.

Demikian tutorial blog saya kali ini.Selamat berkreasi dan salam sukses.

Selengkapnya

Puisi Diseberang Pelataran

Diseberang pelataran

Kau berdiri angkuh

Tanganmu mengepal nasib

Hampir tak ada senyum dan lagu

Apalagi puisi itu 

Telah kau lempar dalam dalam

Hingga tangisan yg biasa merdu

Kini terdengar seperti derit roda kereta yg lapuk.

Dan senyum kecut sisais.

Menarik beribu beban sayuran .

Kotoran kuda

Kita adalah sama.

Diantara derap langkahnya.

Aku dan gilaku adalah satu.Tak beda.Kau dan angkuhmu.Tak lain

"Meski aku masih dibalut sangsi.

Diapit Riuh derapmu hentakkan pagi

Sumbu yg pudar

Nyala pelita jiwa tercemar

Malamku robek misteri.

Kupagut kau dalam sunyi

Sedang angkuhmu kugauli

Basah lidahku mengecup manismu

Tak sabar ingin kutuntaskan nikmatku

Dan yang kutau

Begitu indahnya rupamu.

Seperti sunyi yg kupuja

Atau puisi yg kueja.

8 april 2016.

Selengkapnya

Tutorial Blog Membuat Template Blogspot Sederhana

Assalamualaikum.
Perkenalkan saya Yusrian ARP.

Disaat waktu luang,saya suka sekali blogging dan memperhatikan bagaimana sebuah template blogspot itu tercipta.

Menurut para pakar yg ahli dlm pembuatan template blogspot.
Template blogspot itu terdiri dari 4 bagian utama yaitu :
1.Header,sebagai tempat judul dan deskripsi sebuah blog.
2.Main,sebagai tempat posting atau artikel.
3.Sidebar,sebagai tempat widget,disamping Posting atau Artikel.
4.footer,biasanya digunakan sebagai tempat copyright atau info tentang template    dan sipembuat template.

Perhatikan gambar diatas.Kira kira begitulah gambaran sebuah template sederhana yg ingin saya buat.

Okk..
Yg pertama kita lakukan adalah login pd http://draft.blogger.com/home.Tentunya dengan akun gmail.Sudah punya akun gmail belum?...Kalo belum,bikin dulu di Gmail.
Kemudian pilih menu template,klik edit html.

Wooow....Banyak sekali deklarasi atau kode kode html yg ada di dlm sebuah template blogspot bukan?..Saya waktu pertama kali, memperhatikan koding koding tersebut,juga bingung.Dan tak tahu apa arti dari deklarasi deklarasi tersebut.

Kalo sobat blogger sudah yakin dan pengen membuat template sendiri seperti template sederhana saya ini,yuuk ikutin langkah langkahnya lagi

Sebaiknya sobat blogger copy dulu templatenya yg sedang digunakan,di paste kan ke notepad atau microsoft word.

Hapus semua kode html template yg ada dan mulailah mengetikkan kode kode ini ...

<html>
<head>
<title><data:blog.title/></title>

</head>
<body>

</body>
</html>

Nah...Kalo kode kode diatas itu di save,maka akan muncul eror skin.
Artinya bahwa setiap template blogspot itu harus punya skin.
Maka letakkan kode ini di bawah  </title>

<b:skin><![CDATA[/*
===================
Nama template : Blablala.
Yang Buat         : Nama anda.
tgl hari ini jam sekarang,
perhatian : tolong jgn dihapus
ini bikinan sendiri.
=====================

*//* disini tempat css */
#header-wrapper{}

#outer-wrapper{}
#main-wrapper{}

#sidebar-wrapper{}

#footer{}

]]></b:skin>

Kalo sobat blogger save lagi,maka akan muncul eror section,artinya bahwa template kita belum ada section nya,Buatlah kode seperti ini dan taruh di bawah kode <body>

<b:section class='header' id='header' maxwidget='1' preferred='no'>
<b:widget id='Header1' locked='true' title='Puisi Yusrian (Header)' type='Header' visible='true'/>
</b:section>

Kemudian disave dan....
Taraaa..... Templatenya masih acak acakan,karena belum ada kode css dan html nya..

Untuk selanjutnya sobat blogger bisa lihat tutorial saya yg lain seperti Membuat header blog 2 kolom atau tutorial blog membuat navigasi menu di atas header.

Sekian dari saya dan saya berharap tutorial ini bermanfaat.Selamat berkreasi dan salam sukses.

Selengkapnya

Puisi Malam Ini Langitku Merah

Malam ini berjuta juta setan tertawa dilangit merah
Dalam balutan warna warni darah.
Lalu hinggap kelangit jiwa
Lalu merubah  nalarmu menjadi durja.
Bergandeng egoisme dan penonjolan diri.
Tak peduli diri ini milik siapa.
Tak peduli lunturnya iman didada.

Apakah matamu buta tak melihat cahaya.
Atau langit sudah tak bermakna.
Diburamkan oleh buruknya prasangka.

Malam ini langitku merah.
Gumpalan warna warni darah.
Bukan sebuah hal yg lumrah.
Malah itu keburukan yg paling salah.
Letupan membahana membakar angkasa.
Hanguskan duit dengan percuma.
Dan yg kau dapat ialah sia sia.

Blkppn 1-1-2017

Selengkapnya

Tutorial Blog Membuat navigasi menu sederhana diatas header

Membuat menu Navigasi di atas Header.

Sebelum mengedit template,ada baiknya anda backup dulu template anda,caranya copy seluruh isi kode template kemudian buat berkas baru pada notepad ++,untuk instal notepad ++ disini.Download Notepad++

Okk kita mulai ya,bagaimana cara membuat menu navigasi.

Setelah masuk pada edit html silahkan copy css dibawah ini dan letakkan di dibawah <![CDATA[

#nav{width:100%;height:40px;background:#787777;color:#efefef;font-family:"Ubuntu";font-size:19px;}

#nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #787777;}

#nav li {float: left;}

#nav li a {display: block;color: white;text-align: center;padding: 8px 10px;text-decoration: none;}

#nav li a:hover {background: #646362;text-shadow:1px 0px 2px #fa881e;color:white;}

Okk gimna...Sudah belum..
Kalau sudah,kita masuk pada tahap berikutnya yaitu memanggil kode tersebut...Ingat !!! gk perlu teriak teriak manggilnya yaa...

Masukkan kode ini di atas <div id='header'>,itu kalau mau mengikuti lebar header,
kalau pengen membuat selebar layar,masukkan diatas kode <div id='outer-wrapper'>,

Ini kodenya:

<div id='nav'>

<left><nav><ul>

  <li><a href='/' title='Beranda'>Beranda</a></li>

  <li><a href='/p/isi-blog.html' title='Isi Blog'>Isi Blog</a></li>

  <li><a href='/search/label/Puisiku' title='Puisiku'>Puisiku</a></li>

  <li><a href='/p/blog-page.html' title='Template Ini'>Template Ini</a></li>

  </ul></nav></left>

<right>

<form action=' ' id='searchblog' method='get'>

<input Style='height:38px;width:250px;margin-top:1px;margin-right:-4px;font-size:18px;' name='q' placeholder='Cari Artikel Disini...' type='text'/>

<input id='search-button-top' style='width:110px;height:38px;background:#fcc38d;color:#fff;font-size:18px;' type='submit' value='Pencarian'/></form>

  </right>

  </div>

  <div style='clear'/>

Saya membuat navigasi menu itu setinggi 40px dan diatas header.Lebarnya mengikuti header.Seperti menu navigasi yg saya punya. Silahkan baca tutorial membuat header 2 kolom punya saya.

Sederhana sekali bukan??.
Itulah yg bisa saya suguhkan buat anda sekedar berbagi apa yg saya bisa buat dan saya berharap bisa bermanfaat.

Saya bukan seorang pakar pembuat template,saya hanya suka mencoba dan mempraktekkan  pengetahuan tentang blog dan koding.

Selamat mencoba dan salam sukses.

Selengkapnya

Tutorial Blog Membuat header blog 2 kolom

TUTORIAL BLOG
Membuat Header blog dua kolom.

Seperti kita ketahui,diantara element sebuah blog atau web diantaranya adalah HEADER.
Header tempatnya diatas Main atau Posting Blog.
Header sebuah Blog atau Web bervariasi,tergantung kesukaan blogger itu sendiri.Ada yg satu header,dua,atau tiga.

Disini saya akan membuat Header dengan dua kolom,dimana fungsinya sebagai judul blog dan adsense.

Okk...
Yg pertama dilakukan adalah login ke blog kita sendiri.kemudian setelah login kita masuk pada menu template sebelah kiri.
Klik menu template lalu masuk pada menu edit html.

Sesudah kita masuk pada edit html masukkan kode kode ini di bawah
<![CDATA[

#header-wrapper{width:100%;display:block;border-bottom:2px solid#787777;height:160px;}

#header{margin:10px auto;padding:10px;float:left;width:400px;}

#header h1 {font-size:40px;font-family:"Rye";color:#787777;text-shadow: 1px 0 2px #fa881e;margin-top:-5px;}

#header h1:hover{text-shadow:1px 0 2px #787777;}

#header .description{font-family:"Lemon";font-size:14px;color:#787777;}

#header2{width:500px;height:130px;float:right;display:block;border:1px solid#3b5998;margin-right:10px;}

#header2 .widget-content{margin-top:-20px;}

#header2 .title{font-size:18px;font-family:"Pattaya";color:#78777;text-decoration:underline;display:inline-block;padding:0 0 5px 5px}]]>

Kalau sudah, lanjut ke deklarasi dibawah <body> ,
untuk yg pengen headernya seluruh kolom mengikuti ukuran layar monitor,atau bisa juga dibawah <div id='outer-wrapper'>  untuk yg pengen mengikuti ukuran lebar template.

Masukkan deklarasi ini,

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget='1' preferred='no'>

  <b:widget id='Header1' locked='true' title='Puisi Yusrian (Header)' type='Header' visible='true'/></b:section>                

<b:section class='header' id='header2' preferred='yes'>

  <b:widget id='HTML5' locked='true' title='Advertise' type='HTML' visible='true'/></b:section></div>

Kemudian save template.

Taraaa.... Jadilah header dengan dua kolom,satu berfungsi sebagai judul blog dan satunya sebagai tempat menaruh adsense atau iklan....

Nah sobat blogger,semoga tutorial ini bermanfaat.
Selamat berkreasi dan salam sukses.
Terimakasih

Selengkapnya

Puisi Diatas sepotong hati.

Ini tubuhku sayang,dari tulang dan daging,
Yg bisa patah dan busuk.

Mengapa kau masih menatap baju itu?.
Hanya sebentar kupake.
Tak lama dan akan lapuk dirayapi waktu.
Ingatlah.
Itu hanya buat penampilan luar saja yg bisa menipu matamu.
Jangan terpukau rayunya sayang.

Indahnya pelangi di senja itu bukan karena warna nya.

Inilah jiwaku sayang.
Terdiri dari nafas dan nafsu.
Terbangun dari kun dan kullu.

Sudah laah....
Jangan terpukau kicau kenari.
Tapi rasakan siapa yg menyanyi.

30102016.balikpapan YE

Selengkapnya