Mi-Ko-m

Membuat efek bayangan cermin pada gambar atau text dlm blog

noreply@blogger.com (Tmiko) — Sat, 10 Jan 2015 12:55:00 +0000

Efek bayangan seperti cermin pada sebuah gambar atau teks sudah bisa dibuat dengan menggunakan css, lebih tepatnya css3 reflect, bagi kalian yang tidak begitu mahir dalam penggunaan software gambar seperti Adobe Photoshop, css3 reflect bisa menjadi solusi untuk membuat efek cermin untuk gambar, untuk menghasilkan efek cermin atau bayangan tidak membutuhkan kode css yang panjang, tidak seperti membuat efek-efek css3 pada umumnya.

Kode utama dalam membuat efek cermin atau bayangan pada gambar dan teks adalah -webkit-box-reflect: efek cermin ini tidak hanya memantulkan bayangan ke-bawah saja, melainkan bisa ke-atas, kiri dan kanan, coba perhatikan kode reflect css3 ini :

-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

kode tersebut merupakan kode untuk membuat efek cermin dengan bayangan atas, bawah, kiri dan kanan, sebagai contoh perhatikan efek cermin dibawah ini :

untuk menghasilkan efek cermin seperti contoh diatas, penggunaan kode css-nya seperti ini :

-webkit-box-reflect: right 10px;

right menunjukan efek bayangan berada disebelah kanan gambar, sedangkan 10px adalah jarak dari gambar asli dengan efek cermin yang terjadi, seperti dalam contoh menggunkan 10px untuk jaraknya, kalian bisa mengubah jaraknya sesuai dengan keinginan atau menghilangkan jarak efek cermin tersebut.

dalam contoh diatas efek cermin yang tejadi adalah pantulan secara keseluruhan gambar, kalian bisa modifikasi tampilan efek cermin tersebut hanya tampil setengah pantulan gambar, sebagai contoh bisa melihat efek cermin dibawah ini :

efek cermin yang dihasilkan hanya menampilkan sebagian dari pantulan dari gambar, untuk membuat efek cermin seperti itu hanya menambahkan background gradient untuk layar pantulnya, kode gradient yang ditambahkan :

-webkit-box-reflect: right 10px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, transparent), to(white));

Efek cermin ini bisa kalian gunakan pada blog untuk menghias tampilan gambar atau sebuah teks. Sebagai contoh untuk tampilan gambar yang terpasang pada bagian posting (artikel). Untuk menghasilkan efek cermin pada gambar yang ada pada postingan, caranya masuk menu Edit HTML dan cari kode .post-image { dan tambahkan kode efek cermin tersebut, sehingga menjadi seperti ini :

.post-image {
-webkit-box-reflect: right 10px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, transparent), to(white));
...kode css lainnya;
}

-webkit-box-reflect: tidak hanya bisa digunakan pada gambar atau teks pada posting saja, melainkan bisa dipergunakan untuk efek pada bagian-bagian lainnya, untuk hal ini kalian sendiri yang menentukan dipergunakan untuk apa efek -webkit-box-reflect: dipergunakan.

Kalian bisa melihat contoh efek cermin yang dihasilkan dari berbagai arah, seperti dibawah ini :

Efek Cermin Gambar Menggunakan Layar Pantul Gambar (image)
Selain menggunakan layar pantul sebuah background gradient, bisa juga mengunakan layar pantul cermin mengunakan layar gambar, sebagai contoh saya akan menggunakan layar pantul dengan menggunakan gambar seperti dibawah ini :

Efek cermin yang dihasilkan akan mengikuti layar patul gambar tersebut, dan hasilnya seperti ini :

Efek Cermin Pada Sebuah Teks Atau Tulisan
Sebuah teks atau kalimat juga bisa mempunyai efek cermin dengan menggunakan kode diatas, sebagai contoh seperti kaliamat dibawah ini :

Situseo Blog

Semoga bermanfaat,

Header menjadi dua bagian menyamping

noreply@blogger.com (Tmiko) — Sat, 10 Jan 2015 12:32:00 +0000

Cara Membuat Header Menjadi 2 Kolom. pastinya menarik bukan ? dengan ini kita jadi bisa membuat header blog kita menjadi lebih ramai dan menarik. apasih membuat header menjadi dua kolom ? yaitu kita membuat yang tadinya header hanya 1 kolom, dan sekarang menjadi 2 kolom seperti gambar di samping ini. di blog-blog/web-web biasanya elemen yang kanan digunakan memasang Iklan atau gambar. nanti hasil-nya seperti tampilan header kiri di blog saya ini. langsung aja ini dia langkah-langkahnya :

1. Login ke Blogger.

2. Pilih Template

3. Pilih Edit Html (Download template full dahulu).

4. Lalu sobat cari kode di bawah ini.

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

5. Lalu sobat hapus kode berikut dan ganti dengan kode di bawah ini.

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}

6. sekarang sobat cari kode di bawah ini.

<div class='region-inner header-inner'>

7. Dan sobat tambahkan kode di bawah ini persis disebelah kode di atas.

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='4' showaddelement='yes'>

8. Nanti jika di taruh disebelahnya, akan menjadi seperti di bawah ini.

<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='4' showaddelement='yes'>

9. Klik "Save Template" dan Selesai.

Selamat mencoba, bila ada pertanyaan comment di bawah.

memberi keterangan gambar bila disoot mouse

noreply@blogger.com (Tmiko) — Sat, 10 Jan 2015 12:29:00 +0000

Memberi keterangan gambar pada post image akan membantu pembaca untuk mengetahui penjelasan dari gambar yang dimaksud, efek hover yang ditampilkan pada keterangan gambar berbentuk slide dari arah kiri ke arah kanan dan sebagai alternatif pilihan, efek hover ini bisa dari bawah ke atas, dan script yang digunakan menggunakan css level 3.

Menambahkan keterangan gambar pada post, tentu saja akan mempercantik tampilan blog, terutama untuk tampilan post. Script ini sangat cocok digunakan bagi mereka yang mempunyai blog dengan banyak penggunaan gambar sebagai penambah keterangan suatu posting (artikel). Kelebihan script ini karena menggunakan css, tentu saja penggunaannya mudah dan untuk hover keterangan gambar pun akan menyesuaikan ukuran dari gambar yang ditampilkan.
Untuk memperjelas apa yang saya maksudkan, kalian bisa melihat screen shot dibawah ini atau melihat demonya secara langsung.

Untuk menerapkannya pada blog kalian, copy script css dibawah ini dan letakan diatas kode ]]></ b: skin>

CSS

#objek {
float: left; 
margin: 10px; 
overflow: hidden;
position: relative;
}
.ket {
width: 80%; 
height: auto; 
text-align: left;
padding: 5px 10px; 
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px; 
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;  
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px; 
border-radius: 0px 25px 0px 0px;
}
#objek .ket {
position: absolute; 
bottom: 0; 
left: 0;
margin-left: -1000px; 
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out; 
}
#objek:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#objek:hover .ket {
margin-left: 0px;
}

HTML

<div id="objek">
<img src="url gambar" />
<div class="ket">
<b>JUDUL GAMBAR</b><br />
keterangan/penjelasan dari gambar
</div>
</div>

Script tersebut diatas merupakan efek hover dari kiri ke-kanan, untuk 
menghasilkan efek hover dari bawah ke-atas, kalian cukup mengganti 
menjadi seperti :

#objek .ket {
margin-bottom: -300px;
}

dan

#objek:hover .ket {
margin-bottom: 0px;
}

Demo: Hover Keterangan Gambar

Semoga keterangan gambar ini bisa membantu pengunjung untuk lebih memahami artikel yang dimaksud dan bisa mempercantik tampilan blog terutama bagian post.

kode membuat Teks area pada postingan

noreply@blogger.com (Tmiko) — Fri, 09 Jan 2015 16:08:00 +0000



 

isi text areaingin tampilan seperti ini, silakan kembangkan dan modifikasi sendiri hehe

ingin tampilan seperti ini, silakan kembangkan dan modifikasi sendiri hehe

berikut kodenya, (gunakan entri html)pd blog entri baru..

<form name="Dalang Error">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
<textarea name="txt" style="height: 50px; width: 300px;">isi text area</textarea></div>
</form>

semoga bemanfaat...

Contoh Kode sudut lengkung border

noreply@blogger.com (Tmiko) — Fri, 09 Jan 2015 14:49:00 +0000

Contoh Border 1

BORDER-1

.border-1 {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px solid #A89D61;
}

Contoh Border 2

BORDER-2

.border-2 {
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
border: 2px solid #A89D61;
}

Contoh Border 3

CIRCLE

.circle {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
border: 2px solid #A89D61;
background:#D2CCAD;
width: 150px;
height: 150px;
}

Gantilah bagian warna bagian border sesuai dengan keinginan, untuk mempermudah pencarian warna yang sesuai, kalian bisa pergunakan tools warna pada bagian menu diatas.

Membuat garis lengkung pada sudut garis tepi atau border

noreply@blogger.com (Tmiko) — Fri, 09 Jan 2015 14:30:00 +0000

Dengan hadirnya css3 untuk membuat sudut garis border lengkung atau tumpul sudah bisa dilakukan, dengan design tampilan garis lengkung pada border bisa menghasilkan tampilan blog yang elegant, manis dan menarik.

Penggunaan kode css garis border lengkung adalah dengan menggunakan kode border-radius, penggunaan dalam template saya ilustrasikan sebagai berikut :

border-radius: 7px;

border: 2px solid #72C7F8;

border-radius sebesar 7px akan menghasilkan garis lengkung seukuran angka tersebut pada setiap sudut-sudutnya, baik itu sudut kiri atas, kanan atas, kiri bawah dan kanan bawah. Untuk membuat sudut garis border berbeda pada setiap sudutnya, kita harus memberi keterangan perintah tambahan pada kode css nya, sebagai contoh saya akan membuat sudut lengkung pada bagian kanan atas suatu border dengan angka lengkung sebesar 30px, kode css yang di pakai adalah :

border-radius: 30px 0px 0px 0px

border-moz-border-radius: 30px 0px 0px 0px

border-webkit-border-radius: 30px 0px 0px 0px

border-border: 2px solid #72C7F8

Keterangan :
moz = mozila, webkit = chrome dan safari, keterangan moz dan webkit merupakan perintah terhadap browser supaya efek tersebut bisa berjalan jika menggunakan browser tersebut.
border adalah perintah untuk bagian garis sisi-sisinya
radius adalah kode perintah untuk membuat sudut lengkung
30px = bagian atas 0px = kanan 0px = bawah 0px = kiri, angka kelengkungan dari sudut border
border: 2px solid #72C7F8 keterangan garis border setebal 2px dengan jenis garis solid dan warna garis #72C7F8.

Dalam keterangan diatas mengunakan jenis garis border solid, masih banyak jenis garis yangbisa kita pergunakan untuk kesesuian dari border-border yang kita pergunakan, untuk mengetahui jenis-jenis garis border bisa mengetahui melalui link tersebut.

Hasil dari kode tersebut seperti ini :

GARIS LENGKUNG KIRI ATAS 30PX

Untuk menentukan kelengkungan garis border yang 30px dengan garis border dengan ruang border yang berbeda akan menghasilkan garis lengkung yang berbeda, untuk menyesuaikan garis lengkung border sesuaikan dengan lebar ruang border yang akan diberi garis lengkung pada sisinya.

beberpa contoh dapat dilihat disini SUMBER POSTING

Membuat Header 3 elemen

noreply@blogger.com (Tmiko) — Fri, 09 Jan 2015 11:22:00 +0000

Membagi header menjadi 3 elemen langsung saja pesiapkan kode css berikut untuk dicopy pastekan:

Kode CSS-1:

.GRnewHeader .widget h2.title, .GRnewHeader .widget h2{
       font-size:14px;
       text-transform:uppercase;
       font-weight:600;
       margin:10px;
}
.GRnewHeader .widget{
       padding:10px;
       font-size:12px;
       background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(153,151,151,0.1) 100%);
       background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a999797',GradientType=0 );
       margin:5px;
}

Kode CSS-2:

#header{
        float:right;
        width:50%;
        margin:0;
        padding:0;
}
#GR_headerRight{
        float: right;
        width: 25%;
        margin:0;
        padding:0; 
}
#GR_headerLeft{
        float: left;
        width: 25%;
        margin:0;
        padding:0;
}

xHTML

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
<b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
<b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='CSS3 Blogger Tutorial (Header)' type='Header'/>
      </b:section>
<div style='clear:both;'/>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>

Cara Membuat Header 3 Elemen

Login ke Blogger.
Setelah login dan halaman Dasbor (Dasboard) terbuka, cari dan klik Rancangan (Design).
Lanjutkan klik Edit HTML.
Lakukan Backup Template. Panduanya bisa dibuka di Special Tutorials yang ada di deret vertical menu sebelah kiri halaman blog.
Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode. Buka panduan mencari kode HTML di Special Tutorials
Copy dan pastekan Kode CSS-1 di atas kode ]]></b:skin>
Cari kode
```
]]>
</b:template-skin>
```
Kode ini letaknya beberapa kode di atas kode </head>
Copy dan pastekan Kode CSS-2 di atas kode
```
]]>
</b:template-skin>
```
Cari kode:
<div class='region-inner header-inner'>

Tambahkan kode xHTML baru hingga menjadi seperti kode xHTML di atas. Kode yang perlu di tambahkan adalah :

<b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
<b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
       .......
       .......
<div style='clear:both;'/>

Klik Simpan Template (Save Template)
Klik Elemen Laman (Page Elements)
Coba gunakan elemen baru untuk menambah gadget!
Buka blog dan lihat hasilnya.
Selesai dan monggo silahkan bungkus widget-widget tercantik sampeyan di tempat baru yang indah ini.

Catatan/Keterangan:

Pada Kode CSS-1 menggunakan background rgba. Background bisa diganti sesuai selera seperti misalnya background transparent atau yang lain.
Untuk merubah lebar elemen header, lakukan perubahan pada persentase lebar header kiri, header (default) dan header kanan. Jumlah lebar ke-3 elemen header sebesar 100%.
Membuat elemen baru di header blogger template designer tidak dibatasi untuk 1, 2 atau tiga elemen saja. Jika dikehendaki kita dapat membuat sesuai jumlah yang diinginkan. Di bawah ini ada sebuah link yang di dalamnya berisi panduan untuk membuat header blogger dengan 2 elemen. Silahkan klik untuk mengikuti panduannya sekaligus lihat sumber asli postingan ini:

Cara membuat header blogger dengan 2 elemen

Menambahkan elemen diatas header blog

noreply@blogger.com (Tmiko) — Fri, 09 Jan 2015 10:33:00 +0000

langsung aje: copas juga hehe

Login ke Blogger
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Backup template. Buka panduan backup template di sini !.
Cari kode <header>. Panuduan cara mencari kode html di template dapat anda buka di sini !.

Copy dan paste-kan kode HTML berikut tepat di atas kode <header>. Kode HTML dan tag <header> akan berbentuk seperti ini:

Kode HTML Elemen Baru

<div class='tabs-outer'>
    <div class='tabs-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left tabs-fauxborder-left'>
    <div class='fauxborder-right tabs-fauxborder-right'/>
    <div class='region-inner tabs-inner'>
      <b:section class='tabs' id='GRaboveheader' maxwidgets='2' showaddelement='yes'/>
      <b:section class='tabs' id='GRaboveheader-overflow' showaddelement='no'/>
    </div>
    </div>
    <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>


<header>

Klik Simpan Template (Save Template).
Klik Elemen Laman (Page Elemen).
lihat "Elemen Baru di atas Elemen Header.
Silahkan gunakan untuk membuat Widget baru yang berupa horizontal tab menu. dengan Klik Add a Gadget.
Selesai.

Catatan/Keterangan:

Buatlah menu horizontal menggunakan gadget blogger Link List atau Blog List.
Jika anda membuat halaman blog statis, setiap judul akan ditampilkan sebagai "Pages" gadget dan membentuk tab menu horizontal di bawah header. Drag ke atas elemen header agar bisa ditampilkan di atas header blog.
Anda bisa memanfaatkan elemen baru ini untuk penambahan gadget/widget lainnya.
Semoga bermanfaat dan menambah kekayaan modifikasi serta semangat untuk terus menuangkan semua kreatifitas anda melalui blog!

Membagi kolom header menjadi 2 kolom

noreply@blogger.com (Tmiko) — Fri, 09 Jan 2015 09:31:00 +0000

Oke langsung aja, caranya seperti berikut:

Login pada pada Blogger menggunakan id blog sobat
Template
Edit HTML lalu Lanjutkan
pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini
#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1bPwh0Tu7G2H7c2xfd2_1rxhq0wH4AxyiPqwyTagN4MbJ8fPmWvYGPlnbMiBNDmBQtyboa-3QAwrHODHEJYrndbG2uxD9fVLWHQn0EbUXjoV00heUPRJNwqvobxx1clHR9p__7xZvFQh/s1600/line.gif) repeat-x scroll left bottom;
height:119px;
width:900px;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}
hapus dan ganti kode tersebut dengan kode dibawah ini:
#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1bPwh0Tu7G2H7c2xfd2_1rxhq0wH4AxyiPqwyTagN4MbJ8fPmWvYGPlnbMiBNDmBQtyboa-3QAwrHODHEJYrndbG2uxD9fVLWHQn0EbUXjoV00heUPRJNwqvobxx1clHR9p__7xZvFQh/s1600/line.gif) repeat-x scroll left bottom;
height:100px;
width:900px;
}
#header-inner {
width:428px;
margin:0 auto;
padding-top:6px;float:left;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:468px;
float:right;
padding-top:6px;
}
selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
</b:section>
</div>
hapus kode di atas dan ganti dengan kode di bawah ini

<div id='header-wrapper'>
<div id='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
</b:section>
</div>
<div id='header-kanan'>
<b:section class='header2' id='header2'/>
</b:section>
</div>
</div>
Simpan Template

Selesai deh, jika semua langkah sudah sobat lakukan seperti di atas, tampilan kolom sesudah diedit akan menjadi seperti pada gambar di bawah ini

Bagaimana sob ? susah apa mudah ? oh iya, kang reggy baru ingat, jika sobat ingin mengubah ukuran setiap kolom, tinggal utak - atik kode yang berwarna merah dengan ukuran yang sesuai dengan kebutuhan sobat.

Berikut Cara lain Membuat Header Blog Menjadi Dua Kolom :
Untuk membuat header blog menjadi 2 kolom ini, saya tidak memberikan ketentuan khusus karena setiap kode header yang ada di template blog memiliki perbedaan. Namun secara dasar setiap template memiliki id header dengan kode #header dan id #header ini ditempatkan dalam satu element #header-wrapper atau lebih sederhananya sebagai berikut;

#header-wrapper {
#header {

Element #header memiliki lebar sesuai dengan lebar terluar dari element #header-wrapper, sehingga untuk membagi header blog menjadi 2 kolom, cukup membagi id #header menjadi 2 dan mengganti namanya menjadi nama yang berbeda, dan contohnya seperti berikut ini

#header-wrapper {
#header {
#header-right {

Lalu bagaimana untuk mengatur lebar dan jarak tepi (baca: margin padding) untuk dua kolom header ini? Karena id #header ini berada dalam element element #header-wrapper maka untuk mengatur lebar jangan sesuaikan dengan lebar element #header-wrapper tapi bagilah menjadi 2 bagian yang memiliki jarak antar tepinya


#header-wrapper {width:980px;}
#header {float:left;width:450px;text-align:left;}
#header-right {float:right;width:510px;text-align:left;}

Dari kode sederhana diatas, saya belum memberikan jarak tepi (margin padding) dari 2 kolom header tersebut. Hanya membagi lebar dan letak dari kolom tersebut yaitu float dan width. Float untuk kolom header kiri adalah left dan lebar untuk kolom kiri adalah 450. Untuk mengatur margin padding (jarak tepi) silahkan baca caranya di Margin Padding Blog
Jadi saya tidak akan memasangkan margin atau padding dalam kode diatas karena itu harus menyesuaikan antar kode di id #header dan #header-right. Namun sebagai acuan agar tampilan 2 kolom header ini sama, coba pasangkan kode margin di id #header-right seperti berikut ini


#header-wrapper {width:980px;}
#header {float:left;width:450px;text-align:left;}
#header-right {float:right;width:510px;text-align:left;margin:5px 0px;}

Ingat, margin pada id #header-right ini hanya sebagai acuan, silahkan diganti untuk menyesuaikan agar tampilannya sama atau sejajar dengan id #header. Kenapa saya tidak menetapkannya sebagai kode utama? Selain tiap kode template berbeda, hal ini juga menyesuaikan dengan id-id yang lain yang ada didalam id #header. Di id #header masih ada beberapa id lagi yaitu #header h1, #header a, #header p, #header .description dan #header img

Setelah mengganti kode CSS header blog diatas, tambahkan juga kode HTML id #header-right tersebut, seperti contoh berikut ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Info Template Blogger (Header)' type='Header'>
<b:includable id='main'>
Disini ada kode header h1, header a, header p, header .description, header img
</b:includable>
</b:widget>
</b:section>
<div id='header-right'>
<b:section class='header' id='header2' preferred='yes'/>
</div><div class='clear'/>
</div>

Jadi, sesuaikan dengan kode header yang ada di template blog karena artikel blog ini hanya sebatas penjelasan umum saja bukan secara khusus untuk mengganti header blog. Dan jika masih bingung atau kode header berbeda coba dengan ini Bikin Header 3 kolom
kalo masih bingung juga kaya ane sendiri silakan brosing hehe atau ke link asal post ini dibawah
sumber: http://www.panduantemplateblog.com/

Membuat Headline Post pada blog dengan Feedburner

noreply@blogger.com (Tmiko) — Thu, 08 Jan 2015 03:04:00 +0000

Menambahkan headline news ke blog dan mywapblog, membuat headline news di blog dan mywapblog, memasang headline news blog dan mywapblog, headline news feed untuk blog dan mywapblog
Untuk membuat headline news atau juga di sebut random post yang akan menampilkan judul postingan secara random atau acak di blog kita. Widget yang akan di buat ini kita menggunakan animator headline dari feedburner.com aplikasi dari google.
Jika kalian belum memiliki akun google gmail silahkan buat terlebih dahulu, jika sudah memiliki bisa langsung ke feedburner.google.com

1. Buat akun feedburner ( gratis / free ) isi form yang di sediakan. Untuk nama feed terserah kalian dan untuk url masukan alamat blog kalian.

2. Bila sudah selesai mendaftar, klik di bagian " publicize ".

3. Buat tampilan headline news yang ingin di tampilakan mulai dari ukuran, warna dan style image.
setelah itu klik kanan pada hasil gambar (gif)..copy link image, Pastekan ganti kode berwarna biru diakhir
postingan ini.

4. Jika sudah selesai mengedit atau membuat gambar tampilan headline, kalian pilih widget kan di pasang dimana lalu klik " next " .

4. Terakhir kalian klik " add widget " maka memasang headline telah selesai dan coba cek halamn blog kalian.

Membuat dan memasang headline news di mywapblog sama dengan blogger blog

Tahap pembuatannya sama kaya di atas hanya dalam pemasangannya hampir sama dengan memasang widget alexa, pada step " add widget " kalian klik di bagian gambar animator headline yang kalian buat lalu copy url gambar widget animatornya lalu masukan kode html berikut :
<*a href="http://URL FEDDBURNER KALIAN"><*img src="http://URL GAMBAR HEADLINE ANIMATOR"><*/a>
Kemudian paste ( hapus tanda * ) di menu navigasi.

TIPS LOADING BLOG AGAR TIDAK BERAT/LAMA

noreply@blogger.com (Tmiko) — Wed, 07 Jan 2015 16:19:00 +0000

Pengunjung blog akan malas mengunnjungi blog kita lagi jika loading blog kita manjadi berat. Nahh , berikut Tipsnya:

Kurangi Widget yang tidak penting
Menurut saya pakailah widget yang menurut anda penting , seperti Alexa, G+1 dan yang lainnya. Nahh , apa saja widget yang tidak penting tersebut ? Widget tersebut seperti peta pengunjung, jumlah pengunjug dan lagu atau video.

Template
Gunakanlah template yang simple, padat dan tidak berat . Karena , kebanyak template sekarang sudah banyak yang ditambah-tambahkan kode tertentu dan itu juga dapat membuat loading blog menjadi berat

Cek kembali Link keluar dan Masuk yang terdapat di Artikel dan Blogroll
Ceklah kembali link keluar dan masuk , siapa tau link tersebut sudah tidak berfungsi . Karena , jika link yang tidak berfungsi tersebut tidak dihapus , itu dapat memperberat loading blog kita.

Perkecil format gambar Blog
Gambar yang terdapat di blog saran saya menggunakan format jpg, png, dan gif saja. Karena , ketiga format tersebut tidak berat.

Sumber : BLOG KANG MOEZHA

MENGETAHUI KECEPATAN Loading BLOG

noreply@blogger.com (Tmiko) — Wed, 07 Jan 2015 16:13:00 +0000

Kunjungi Google Developer Page Speed Insight
https://developers.google.com/

Tulis URL Blog kalian di kotak bawah ini :

Lalu Klik ANALYZE
Tunggu beberapa detik...
Dan akan muncul seperti ini

Angka 95 adalah kecepatan loading Blog kita. kecepatan loading ini maksimal sampai angka 100
Jadi , usahakan agar loading Blog anda Normal yaitu mencapai angka 90 keatas

NB : Saya memberitau bahwa kecepatan loading Blog saya adalah 85 dari 100
SUMBER "Kopi Manis" : Blog Kang MOZHA hehe..

Cara daftar WEBSITE/BLOG di mesin telusur google, yahoo,bing, Ask,Baidu

noreply@blogger.com (Tmiko) — Wed, 07 Jan 2015 11:37:00 +0000

Sebelum kita menerapkan teknik seo model apapun, misal seo onpage dan seo offpage, sebaiknya kita harus menerapkan teknik seo dasar yang disediakan oleh mesin pencari atau mesin telusur. Tujuannya adalah agar mesin pencari tahu bahwa anda mempunyai blog/website. Sehingga mesin pencari akan mudah menampilkan artikel postingan blog kita di halaman pertama hasil pencarian atau penelusuran.
Apabila kita keburu menerapkan teknik seo yang lain tanpa memberitahukan terlebih dahulu ke mesin pencari, maka hasil penelusuran tidak akan sempurna karena mesin pencari tidak diberitahu kalau anda punya blog, sehingga artikel postingan anda tetap akan jauh dari halaman pertama. Mengapa? Karena blog anda tidak mau berkenalan dengan mesin telusur.

Disini saya coba share cara daftar blog ke Google, Yahoo, Bing, Baidu dan Ask dengan cepat.

1. Daftar ke Google
~ Silahkan masuk ke, https://google.com/webmasters/tools/submit-url
~ Masukkan URL Blog anda.
~ Masukkan kode/angka yang diberikan Google
~ Klik Kirim Permintaan
2. Daftar ke Yahoo
3. Daftar ke Bing
Bing adalah salah satu situs yang dimiliki oleh Microsoft dan berkolaborasi dengan Yahoo, maka anda cukup daftar ke Bing saja, otomatis terdaftar ke Yahoo,
~ Silahkan masuk ke, http://bing.com/toolbox/submit-site-url
~ Masukkan URL Blog anda.
~ Masukkan kode yang diberikan.
~ Klik Submit
4. Daftar ke Baidu
~ Silahkan masuk ke http://zhanzhang.baidu.com/sitesubmit/index
~ Masukkan URL Blog anda.
~ Masukkan kode yang diberikan.
~ Klik 提交
5. Daftar ke Ask
Cara daftar blog ke Ask saya sudah membahasnya, silahkan baca post sebelumnya, Cara daftar blog ke ask.com
Setelah mendaftar blog kita ke 5 mesin engine yang terbesar dan terpopuler saat ini, mudah-mudahan blog anda pun akan ikut populer. Semoga..

Sumber: http://ahmad-whydoerie.yu.tl/

Memasang tombol FOLLOW dan DASHBOARD di blog

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 03:35:00 +0000

Cara Memasang / Membuat Tombol Follow dan Dashboard di Blog - Bila sobat melihat pada bagian atas sebelah kanan blog ini, maka sobat akan melihat tampilan 2 tombol dengan fungsinya masing masing. Tombol dashboard yang sebenarnya sudah ada pada navbar blogger berfungsi sebagai jalan pintas bagi sang admin untuk menuju dashboard nya dan tombol follow yang berfungsi memudahkan orang / blogger untuk men - follow blog kita.

Bagi sobat yang tertarik untuk memasang tombol follow dan dashboard di blog silahkan ikuti tutorial berikut:
1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript
3. Masukkan kode berikut pada kotak yang sudah tersedia.

4. Ganti tulisan kode yang berwarna biru dengan id blog sobat. untuk mengetahui Id sobat, lihat gambat berikut.

untuk mengubah posisinya jadi, silahkan sobat ubah tulisan yang berwarna merah.

5. Klik Simpan.

Demikianlah Cara Memasang Tombol Follow dan Dashboard di Blog dan semoga membantu...

Pasang TV Online pada Blog

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 03:29:00 +0000

Cara Memasang Tv Online Streaming di Blog - Selalu ada yang baru di dunia blog, setelah bisa memasang animasi di blog, memasang lagu di blog, kini dengan kecanggihan teknologi sobat bisa memasang TV online di blog ( nonton sambil ngeblog ) entah itu RCTI, SCTV, TRANS TV, TRANS 7, GLOBAL TV, MNC TV, KOMPAS TV, INDOSIAR, ANTV, TV ONE, dan lain - lain. Tutorial yang seperti ini bisa dengan mudah sobat temukan di google dengan kata kunci "cara pasang tv ( televisi ) di blogspot". Berikut tutorial cara pasang TV di blog bagi sobat yang berminat.

A. Untuk memasang TV Online di sidebar blog, sobat ikuti tutorial berikut.

1. Log in ke akun blog sobat
2. Klik Rancangan --> Elemen laman --> Tambah gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan.

<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. klik save

B. Untuk cara pemasangan di halaman postingan berikut tutorialnya .

1. Login ke akun blog sobat
2. Klik Entri baru kemudian beri judul sesuai keinginan. Misalnya Nonton TV Online
3. Masukkan kode berikut di Edit HTML di postingan dan jangan di Compose

4. Klik Terbitkan Entri dan lihat hasilnya..

Tambahan :
Atur ukuran width ( lebar ) dan Height ( tinggi ) TV online sesuai keinginan.

Sumber seperti biasa masih copas hehe :

Cara Memasang TV di Blog

Membuat Menu Herisontal

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 03:23:00 +0000

Silahkan ikuti tutorial singkat berikut untuk membuat menu animasi mendatar dengan CSS3.
berikut
DEMO
dari sumber artikel yang saya dapat
1. Login ke akun blogger sobat
2. Klik Rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin>

.Hansuperanima{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden;
        margin:0;
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{

width:599px;

        margin:10px 0 20px;
        padding:0;
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0;
        padding:0;
        overflow:hidden;
        float:left;
        height:40px;
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10px Arial;
        float:left;
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px;
        background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out;
        -ms-transition:all 1.2s ease-in-out;
        font-weight:bold;
        border:1px solid #999;
}
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}
ul#superAnima li a.anima span{
        padding:10px 9px;
        color:transparent;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out;
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out;
        -ms-transition:all 1.6s ease-out;
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}
ul#superAnima li a.anima span:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px;
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0;
        border:2px solid #000;
        background:#555;
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px;
}
ul#superAnima li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}
ul#superAnima li:hover{
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
        border:1px solid #777;
}

Catatan:
Sesuaikan kode angka yang berwarna biru dengan ukuran template.

4. Klik save dan lanjut ke tahap ke 2.
5. Klik Rancangan --> Elemen laman
6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript..

7. Masukkan kode berikut kedalam kotak HTML/Javascript.

<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://christiantatelu.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://christiantatelu.blogspot.com/feeds/comments/default">Comment<br /><br /><span>Comment</span></a></li>
<li><a class="anima" href="http://christiantatelu.blogspot.com">Christian Tatelu<br /><br /><span>Christian Tatelu</span></a></li>
<li><a class="anima" href="http://facebook.com/csnice">My Facebook<br /><br /><span>My Facebook</span></a></li>
<li><a class="anima" href="http://twitter.com/deactivatednumi">My Twitter<br /><br /><span>My Twitter</span></a></li>
<li><a class="anima" href="http://christiantatelu.blogspot.com/feeds/posts/default">Feed Blog<br /><br /><span>Feed Blog</span></a></li>
</ul>
</div>

Silahkan ubahsuaikan semua kode yang bercetak tebal ( bold ) sesuai keinginan.
Sumber: Cara Membuat Menu Navigasi Horisontal CSS3

Mempercepat Loading Blog

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 03:07:00 +0000

Loading blog yang lemot memang kadang kala sering membuat kita kesal, bayangkan saja jika kita harus menunggu bermenit - menit untuk membuka 1 halaman saja.. huh pasti membosankan tu... Sekedar info, sebenarnya selain faktor perangkat, faktor utama mengapa loading blog kita itu bisa sampai lambat yaitu karna jumlah widget yang terlalu banyak. Untuk memperindah tampilan blog, biasanya kita memasang jam, kalender, dan berbagai macam animasi yang sebenarnya tidak terlalu berguna bahkan hanya akan membuat pengunjung blog bosan dengan tampilan blog yang terlalu norak plus loading blog yang lemot.
Setelah sebelumnya memposting artikel tentang cara memasang emoticon onion di kotak komentar blog, kali ini saya akan kasih beberapa tips singkat untuk mempercepat loading blog. Simak tutorialnya berikut.

1. Yang Terutama dan Paling Utama yaitu dengan Mengurangi Jumlah Widget yang tidak terlalu perting seperti jam, animasi, kalender dan lain - lain apa lagi yang berbentuk flash.
2. Mengkompres css template blog sobat di CSS Compresor, caranya :

Silahkan Menuju KESINI!
Kemudian sobat akan menjumpai beberapa pilihan seperti gambar berikut

Seper pada gambar, sobat pilih Normal pada Compression Mode dan Don't strip any comment pada Comment handling
Masukkan kode CSS template blog sobat yaitu kode antara kode <b:skin> dan ]]></b:skin> pada kotak yang di sediakan
kemudian Klik Compress - it.

3. Jika kedua cara di atas belum juga membuat template blog menjadi ringan, mungkin banyak kode CSS yang eror di template blog sobat. Silahkan cek di http://jigsaw.w3.org/css-validator/ . Caranya

Silahkan menuju KESINI!
Kemudian Masukkan URL blog sobat di kotak yang di sediakan dan Klik Check

Setelah itu akan dimunculkan kode CSS yang eror atau tak berfungsi di blog sobat.

Silahkan tinjau ulang kode - kode yang dimunculkan di template blog sobat, atau kalau perlu dihapus saja..

Sumber copas : Tips dan Trik Mempercepat Loading Blog

Cara pasang fibox untuk chat pada blog

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 02:52:00 +0000

Bagi sobat yang tertarik memasangnya, ikuti langkah - langkah berikut :
1. Buka situs www.fibox.ws, kemudian klik Sign Up

2. Masukkan alamat email dan password sobat kemudian centang kotak kecil pada term of service kemudian klik continue

3. Akan terlihat tampilan berikut. kemudian buka email yang sobat daftarkan tadi .

4. Buka email dan klik pada link yang diberi seperti yang tampil di bawah ini.

5. Akan muncul tampilan berikut yang menyatakan bahwa akun sobat telah aktif.

kemudian log in dengan email dan password sobat tadi.

6. Buat nama Shuotbox kesukaan sobat, Klik Continue dan sobat akan otomatis di arahkan ke dashboard baru sobat.

7. Pada dashboard, atur tampilan shuotbox sesuka hati sobat.

8. Copy code yang diberi dan paste ke dalam HTML/javascript blog sobat.

Dengan Cara :
Klik Rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript --> masukkan kode di atas kedalam kotak -->

9. Simpan dan lihat hasilnya.:)

Semoga Cara Memasang Fibox di Blog ini bisa berguna untuk sobat blogger..

salam!!

Membuat ChatBox Buku Tamu auto hide

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 02:40:00 +0000

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

<div id="cboxdiv" style="text-align: center; line-height: 0">

</div>

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

Caranya :

Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan kodenya di kotak yang di sediakan.
Klik Save

Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.
Ganti kode yang berwarna hijau dengan URL gambar lain seperti dibawah ini
Contoh:

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu3.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu5-2.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png

http://i1089.photobucket.com/albums/i353/illankjie/BukuTamu8-1.png

http://i1089.photobucket.com/albums/i353/illankjie/gustbook02-1.png

Sumber : http://ramadhanlmzero.blogspot.com/2012/12/cara-membuat-buku-tamu-keren-di-blog.html#ixzz3OAKykfxQ

Sumber:
Cara Membuat Buku Tamu Auto Hide di Blog
Cara Membuat Buku Tamu Keren

Memasang menu Accordion Vertikal pada blog

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 02:31:00 +0000

Cara Memasang Menu Accordion di Blog - Cara Memasang, Membuat atau Membikin Menu Accordion di Blogspot ini adalah re-post dari posting lawas saya yang berjudul cara membuat menu accordion blogger yang nggak masuk ke hatinya om gugel. Karna itu diharapkan mudah - mudahan dengan Re-post ( posting ulang ) ini, artikel saya yang telah saya hapus tersebut bisa terindeks lagi meskipun dengan URL yang berbeda.

Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal ( baca : cara membuat menu horisontal di blog )yang biasa sobat jumpai, mungkin ini adalah salah satu solusi menyembunyikan widget yang terlalu banyak di halaman blog sobat. Sobat yang tertarik pasang menu accordion di blogger, silahkan ikuti tutorial berikut.
1. Logi ke akun blog sobat.
2. Klik rancangan --> Edit HTML
3. Kemudian letakkan kode berikut di atas kode ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

4. Klik save template dan kita akan menuju ke penambahan gadget.
5. Klik Rancangan --> Elemen laman--> Tambah gadget--> Pilih HTML/Javascript
6. Masukkan kode berikut ke dalam kotak yang di sediakan.

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
</div>

7. Klik save dan lihat hasilnya... Gimana?? sederhana dan mudah bukan??

Sumber: Cara Memasang Menu Accordion di Blog

Bikin Blog Jadi Dofollow

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 02:10:00 +0000

Cara Bikin Blog Menjadi Dofollow

Cara Bikin Blog Menjadi Dofollow - Inilah postingan yang sudah lama ingin ane pos namun selalu saja kelupaan. kali ini saya akan kasih tutorial bagaimana cara bikin blog nofollow menjadi dofollow, cukup dengan merubah beberapa kode maka blog sobat akan langsung beruba menjadi dofollow, namun sebelumnya silahkan cek dulu apakah blog sobat dofollow atau nofollow ( baca : cara mengetahui blog dofollow atau nofollow ). Sobat yang tertarik mengubah blognya dari nofollow menjadi dofollow silahkan ikuti tutorial tips dan trik berikut.Cara Bikin Blog Menjadi Dofollow
1. Login ke akun blog sobat
2. Klik Rancangan --> Edit HTML --> centang kotak kecil di samping tulisan Expand Template Widget
3. Cari 2 kode berikut dengan menggunakan CTRL + F.

Hapus kode yang berwarna biru sehingga menjadi seperti berikut

<b><a expr:href='data:comment.authorUrl'><data:comment.author/></a> </b>

5. Kemudian cari kode berikut

Hapus kode yang berwarna biru sehingga menjadi seperti berikut

<a expr:href='data:backlink.url'><data:backlink.title/></a>

6. Klik save dan lihat hasilnya.
Nah setelah menjadi dofollow, silahkan gabung di komunitas blog dofollow Indonesia

Cara Bikin Blog Menjadi Dofollow

Cara Menampilkan Judul Postingan saja pada blog homepage

noreply@blogger.com (Tmiko) — Tue, 06 Jan 2015 02:02:00 +0000

Menampilkan Judul Artikel / Posting Saja di Homepage - Apa kabar sobat blogger? pada kesempatan kali ini kita akan coba membahas tentang bagaimana cara membuat judul artikel saja yang tampil di halaman depan blog. Tutorial kali ini sebenarnya berfungsi hampir sama dengan readmore ( baca : cara memasang readmore di blog ) namun jika readmore menampilkan judul artikel berserta ringkasan artikel, maka yang ini hanya akan menampilkan judul artikel ( posting ) saja. Bagi sobat yang tertarik, silahkan ikuti tutorial berikut.1. Login ke akun blogger sobat.
2. Klik rancangan --> edit HTML
3. Letakkan kode berikut di bawah kode ]]</b:skin>

4. Simpan dan lihat hasilnya.

Tambahan :
Jika setelah menggunakan kode di atas dan masih menyisahkan elemen - elemn seperti tanggal posting, jumlah komentar dll, silahkan gunakan kode berikut menggantikan kode no 3.

Sekian...

Menampilkan Judul Artikel Saja di Homepage

Mendaftarkan Blog Ke Search Engine Google:

noreply@blogger.com (Tmiko) — Mon, 05 Jan 2015 16:26:00 +0000

Cara nya:

1. Pertama login dahulu ke akun Google Sobat

2. Kemudian unjungi link ini https://www.google.com/webmasters/tools/submit-url

3. Masukkan url blog sobat dan tuliskan kode captha yang terlihat di layar

Cara Mendaftarkan Blog ke Google

4. Kemudian klik kirim permintaan

5. Selesai deh cara mendaftarkan blog ke google tersebut

Blog sobat kemudian akan di proses dan di indeks dalam waktu kurang lebih 48 jam. Nah saat ini yang perlu sobat lakukan ialah posting artikel minimal seminggu 2 sampai 3 postingan cukup yang penting tetap upto date. Buatlah postingan yang cukup berkualitas dan bukan hanya hasil copy paste dari blog milik orang lain. Semoga tips cara mendaftarkan blog ke search engine google ini bisa bermanfaat yah, jangan lupa untuk berkomantar.

Recent box berjalan otomatis

noreply@blogger.com (Tmiko) — Mon, 05 Jan 2015 15:51:00 +0000

Cara Membuat Recent Post Berjalan di Blog - Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

4. Klik save dan lihat hasilnya.

sumber

Cara Membuat Recent Post Berjalan di Blog

Belajar Pemograman Delphi dengan Delphi 7

noreply@blogger.com (Tmiko) — Mon, 05 Jan 2015 12:59:00 +0000

Buku ni ditulis oleh bapak Edi Nugroho M.Kom. berisi seperti tersebut dalam daftar isi dibawah ini. Ane juga dapat download, tapi udah lupa sumbernya dari mane, ni ane sekalian ajar, ane bagi bagi lagi ane upload siapa tau bermanfaat, sekalian simpen arsip sendiri..hehe..sebelumnya trimakasih buat penulis buku ini pak Edi Nugroho M kom,maaf ane sharing gak ijin2.

yang mau 5 Mb silahkan download disini : DOWNLOAD
pasword rar: "mikomplit" tanpa tanda kutip

DAFTAR ISI

KATA PENGANTAR

DAFTAR ISI

BAB 2 DELPHI

Apa itu Delphi ?                1

Lingkungan Delphi.          1

Code Editor        2

Form     3

Component Pallete         4

Object Inspector              5

Watch List           6

Tombol-tombol ShortCut             6

Bekerja dengan Delphi 6

Membuat proyek aplikasi baru 6

Menyimpan proyek aplikasi        7

Memasukkan komponen ke dalam form               8

Mengubah isi properti komponen di Form           8

Mengubah lokasi komponen di Form      11

Mengubah ukuran komponen di Form   11

Membuat event handler              12

MEMBUAT APLIKASI KASIR TOKO BUAH                14

BAB 3 ARSITEKTUR APLIKASI DATABASE                18

Database             19

Database local versus database remote 21

Transactions       21

Arsitektur Aplikasi Pengolah Database   22

Koneksi database            22

BDE (Borland Database Engine) 22

dbExpress           23

ADO       23

Dataset                23

Data Source        25

User Interface   25

BAB 4 MEMBUAT APLIKASI DATABASE MENGGUNAKAN BDE      27

MENGGUNAKAN BDE    28

Membuat AplikasiBDE1 28

Membuat AplikasiBDE2.                33

BAB 5 MEMBUAT ALIAS DAN MENGATUR KONFIGURASI BDE     37

Alias       38

Membuat Alias 38

BAB 6 STUDI KASUS : SISTEM INFORMASI PERSONALIA SEDERHANA        42

Diagram UseCase             42

Dokumen Skenario         42

Diagram Kelas    44

Pembahasan      44

BAB 7 MEMBUAT TABEL DAN MENGISI TABEL.   46

Membuat tabel (Create)              47

Membuat tabel secara programming      48

Mengisi Tabel (Insert)    56

Menambahkan sub menu berkas.            56

Mengolah Tabel Golongan           57

Menguji input   61

Menguji input secara program   61

Exceptions          62

Menguji input menggunakan event OnExit          63

Menguji input menggunakan BeforePost             63

Mengolah data Bagian   65

Mengolah data Pegawai               68

Menguji input menggunakan field dari tabel lain.              71

BAB 8 MENCARI RECORD DAN MENYARING RECORD       74

Mencari record 75

FindKey                75

FindNearest       75

Locate   76

Lookup 76

Membuat aplikasi Presensi          77

Menyaring record            79

Relasi Master-Detail       80

Menyaring record menggunakan properti Filter 85

BAB 9 CALCULATED FIELD dan LOOKUP FIELD      91

Calculated Field                92

Lookup Field      92

BAB 10 POSTGRESQL      103

Sejarah PostgreSQL        104

Memperoleh PostgreSQL             105

Instalasi PostgreSQL       105

Memasang PostgreSQL 106

BAB 11 Structured Query Language (SQL)             112

SQL        113

Komponen SQL 113

Data Definition Language (DDL) 113

CREATE TABLE   113

CREATE VIEW     114

ALTER TABLE      115

DROP TABLE dan DROP VIEW      116

Data Manipulation Language (DML)         116

INSERT 116

SELECT 116

UPDATE               117

DELETE 118

BAB 12 MEMBUAT KONEKSI KE REMOTE DATABASE         119

Membuat koneksi ke server       120

Menggunakan BDE          120

Menggunakan ODBC      122

Menggunakan dbExpress             124

Komponen database sesuai dengan metoda koneksi      125

Mengirim query ke server           126

BAB 13 MENGGUNAKAN TQUERY            127

TDatabase           128

TQuery 130

Memasukkan data menggunakan TQuery            131

Query dengan parameter            133

Mengambil record menggunakan TQuery             135

Menggunakan konstanta sebagai query                138

Mengubah isi record      139

Menghapus record         142