Owlie Blog

Menu Dropdown di Blog

Nah sobat D-Owlie Blog , kali ini saya akan bahas mengenai cara praktis, mudah dan cepat untuk membuat menu dropdown di blog blogspot. fungsinya apa ? jelas saja fungsinya untuk menghemat tempat di blog kita. jangan kawati , caranya sangat gampang , bagi anda yang pemula atau newbie pasti bisa melakukan ini ,heheehe.
berikut cara membuat dropdown sub menu di blog :

Pertama, log in ke akun blogger sobat .

Kedua, pilih design .

Ketiga, pilih add gadget.

Keempat,pilih html javascript .

Kelima, copas kode dibawah ini ke kotak tersebut , seterah mau pake judul atau tidak.

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>Link</option>
<option value="www.d-owlie.blogspot.com">D Owlie </option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select></form>

yang tanda merah bisa sobat ganti dengan yang sobat inginkan , dan tempat letaknya bisa sobat letak juga di bagian edit html , seterah sobat mau berkreasi seperti apa, kalau yang ini cara mudahnya :) . hasilnya nanti seperti ini :

Edit Tag Heading Agar SEO Friendly

Edit Tag Heading Agar Lebih SEO Friendly Ampuh - Dulu Pernah Menulis menjadikan template blogspot seo friendly Mengedit Tag Heading Title Agar lebih SEO, Merubah Tag Heading Title menjadi H1, merupakan kata kunci yang paling sering dicari dalam kegiatan blogging, tentunya dengan tujuan untuk meningkatkan SEO dalam sebuah blog yang ingin bersaing di mesin pencari, tetapi banyak juga yang sudah menggunakan teknik yang satu ini dan hasilnnya tidak ada alias blank, tetapi Anda jangan khawatir dengan masalah ini, dengan seringnya mengupdate artikel dan menggunakan teknik ini, 100% artikel Anda akan bersaing serps di mesin perncari. Amin. Nah jika sekarang Anda ingin menggunakan teknik ini kedalam template Anda, tanpa panjang lebar berbicara kita mulai dengan langkah-langkah di bawah ini.

Langkah Pertama,

Silahkan kalian login dengan email dan password Anda ke blogger,

Selanjutnya, pada dasboard blog Anda silahkan pilih Template,

Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
Silahkan Anda cari kode yang mirip seperti di bawah ini,

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Ganti kode tersebut dengan kode di bawah ini,

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

Selanjutnya cari kode yang mirip seperti di bawah ini,

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

Ganti kode di atas dengan kode di bawah ini,

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Selanjutnya, cari lagi kode seperti di bawah ini,

<h1 class='title'>
<b:include name='title'/>
</h1>

Ganti kode di atas dengan kode di bawah ini,

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='font-size:30px; font-weight:bold;letter-spacing:-1px;line-height:normal;margin:5px 5px 0;padding:15px 20px 3px 0;'>
<b:include name='title'/>
</p>
</b:if>

Note : Agar tampilannya sesuai dengan template Anda, mari kita mulai dengan mengedit Css pada template Anda.

Silahkan Anda cari kode Css di bawah ini,

.post h3 {
.......................
.......................
.......................
.......................
}
.post h3 a, #content h1 a:visited {
.......................
.......................
.......................
}
.post h3 a:hover {
.......................
}

Ganti kode Css di atas dengan kode css di bawah ini,

.post h1, .post h2 {
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color: #333333;
}

Selanjutnya, cari kode css di bawah ini,

#header h1 {
.......................
.......................
.......................
}

Ganti kode tersebut dengan kode di bawah ini

#header h1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Berikutnya, merubah tampilan Title Heading pada judul widget Anda dengan H3,

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

Note : Yang berwarna merah Anda ganti dengan h3,

Atau dengan melihat contohnya di bawah ini,

<b:if cond='data:title != ""'>
<h3 class='title'><data:title/></h3> <-- Title Heading Widget yang sudah dirubah menjadi h3.
</b:if>

Agar tampilan judul widget Anda sesuai dengan Title Heading Widget yang sudah dirubah menjadi h3, silahkan cari kode css di bawah ini,

.sidebar h2

Silahkan ganti h2 menjadi h3,
Terakhir, Simpan Template.

Sekian sudah tutorial SEO pada kesempatan kali ini dengan judul "Edit Tag Heading Agar Lebih SEO Friendly Ampuh" semoga artikel ini dapat bermanfaat atau hanya sekedar info.

Selamat mencoba dan terima kasih.

menjadikan template blogspot seo friendly

Menjadikan Blog SEO Friendly ? Tentu saja , kali ini kita akan mengubah template blog sobat menjadi lebih SEO friendly dan di sukai google, ini juga berguna apabila sobat mengikuti kontes seo atau ingin blognya masuk page one terus,hehehhe. akhir akhir ini banyak juga lo kontes seo , seperti : Ultrabook Notebook Tipis Harga Murah Terbaik , Software Akuntansi Laporan Keuangan Terbaik dan lain-lain.

berikut cara mudah agar template blog sobat menjadi SEO friendly di blogger blogspot :
Masuk ke design, edit html lalu centang expand template widget dan cari kode seperti di bawah ini :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

ganti tag heading h3 menjadi h1 .

sobat juga perlu mengganti ukuran dari font Posting dengan menambahkan kode ini sebelum ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

nah ,ukurannya bisa sobat ganti sesuai keinginan, baik demikian artikel cara menjadikan template blogspot seo friendly dari D Owlie Blog , semoga bermanfaat

Menjadikan Header Dua Bagian

cara Membuat Header Menjadi Dua Bagian, Header blog sangat penting agar blog terlihat bagus maka headerpun diperlukan,jika blog tanpa header layaknya manusia tanpa kepala. he he..

Disamping untuk mempercantik blog, header biasanya berisi tentang judul blog serta deskripsi blog, dan bahkan header bisa berfungsi untuk menempatkan iklan juga.

Nah,D Owlie Blog kali ini akan memberikan tips tentang cara membagi header menjadi dua bagian.Ikuti langkah-langkah dibawah ini:

Seperti biasa dalam keadaan log in pada account sobat
Klik rancangan
Klik Edit HTML
Bisa Download Template Lengkap jika khawatir gagal
Sekarang cari kode CSS seperti yang mirip beikut:
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Ganti kode diatas dengan kode dibawah ini:
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}
Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template sobat.
Sekarang cari kode seperti berikut:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
Klik Simpan Template
Selesai

Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti kamu berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.

Demikian sedikit tips tentang cara membuat header menjadi dua bagian.semoga berguna.
Baca Juga artikel dibawah ini ya.

Pasang Banner Iklan dengan Css

Pasang Banner Iklan dengan Style CSS BuySellAds - Merubah tampilan iklan dengan size/ukuran 125 x 125 dan 486 x 60 kesannya akan semakin professional dan menarik apabila diterapkan pada blog berlabel bisnis dan jasa. Tampilan tersebut didesign seunik mungkin oleh authornya sehingga memikat hati para pengunjung yang datang akan semakin sempurna dan semakin berlama-lama di blog yang telah menerapkan iklan dengan style css yang satu ini. Jika Anda penasaran bagaimana bentuk dan tampilan dari iklan dengan style ini, Anda dapat melihatnya dengan mengklik Demonya. Setelah melihat demonya bagaimana pendapat Anda, apakah menarik, biasa saja, keren, jelek silahkan menilai sendiri. Sudah, tidak usah panjang lebar berbicara mari kita mulai pemasangannya.

(* Bagaimana cara memasangnya ?

(* Mari kita simak tutorial yang akan lewat di bawah ini.

Langkah Pertama,

Silahkan kalian login dengan email dan password Anda ke blogger,

Selanjutnya, pada dasboard blog Anda silahkan pilih Template,

Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
Gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

Setekah itu, letakan kode css di bawah ini sebelum kode di atas,

/* Ads
---------------------------------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}

Selanjutnya, pilih Save Template.

Langkah Kedua,

Silahkan kalian masuk ke Elemen Laman > Tambah Gadget > HTML/JavaScript,
Masukan kode-kode berikut,

Kode iklan dengan ukuran 125 x 125

<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="Link Iklan 1" class="ad1" title="Judul Iklan 1" id="bsa_1451626" target="_blank"><img src="Kode Gambar Iklan 1" alt="Judul Iklan 1" height="125" width="125" /></a>
<a href="Link Iklan 2" class="ad2 even" title="Judul Iklan 2" target="_blank"><img src="Kode Gambar Iklan 2" alt="Judul Iklan 2" height="125" width="125" /></a>
<a href="Link Iklan 1" class="ad3" title="Judul Iklan 3" target="_blank"><img src="Kode Gambar Iklan 3" alt="Judul Iklan 3" height="125" width="125" /></a>
<a href="#" title="Advertise Here" class="adhere ad4 even" target="_blank">Advertise Here</a>
</div>
</center>

Kode iklan dengan ukuran 468 x 60

<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"><a href="#" title="Advertise Here" class="adhere ad1" target="_blank">Advertise Here</a></span>
</div>

Keterangan,

Warna Hijau Link Bener Iklan,
Warna Oranye Judul Bener Iklan,
Warna Biru Link Bener Iklan Gambar,
Warna Kuning Link Pemasangan Iklan,
Warna Ungu Judul Pemasangan.

Langkah terakhir pilih Simpan .

Sekian postingan saya mengenai "Pasang Banner Iklan dengan Style CSS BuySellAds".

Semoga artikel ini dapat bermanfaat atau hanya sekedar info dan hiburan.

Sekali lagi saya ucapkan terima kasih sukses selalu.

Membuat Kotak Iklan atau Banner Ads

Cara Membuat Kotak Iklan (Banner Ads) - Tutorial blogger kali ini saya akan membahas mengenai cara memasang kotak iklan atau banner ads pada blog. Sebelumnya saya juga pernah membahas artikel mengenai Banner Iklan Ala BuySellAds, tetapi saya membahas lagi artikel mengenai cara membuat kotak iklan dengan tampilan yang sederhana/biasa. Perlu diketahui bahwa sebuah blog yang kaya akan konten dan memiliki pengunjung yang banyak akan menyulap blog tersebut menjadi blog bisnis. Memanfaatkan pengunjung yang banyak sebuah blog sangat cocok untuk membuka layanan iklan pada blognya dengan harga tinggi, karena disesuaikan dengan statistik blog. Tampilan dari iklan ini memiliki ukuran 125x125. Nah tetapi tidak salahnya jika Anda memiliki blog yang minim pengunjung atau sedikit untuk memasang kotak iklan ini dan tidak ada yang melarang. Nah mari kita mulai dengan langkah-langkahnya.

Caranya,

Silahkan kalian login dengan email dan password Anda ke blogger,

Selanjutnya, pada dasboard blog Anda silahkan pilih Template,

Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
Gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

Setekah itu, letakan kode css di bawah ini sebelum kode di atas,

#Box-Banner-ads{text-align:center;margin:0;padding:5px}
#Box-Banner-ads img{text-align:center;border:1px solid silver;margin:0 4px 4px 0;padding:3px}
#Box-Banner-ads img:hover{text-align:center;border:1px solid #333;margin:0 4px 4px 0;padding:3px}

Simpan Template.

Langkah Selanjutnya.

Pilih Tata Letak » Tambah Widget,
Lalu » Pilih HTML/Javascript,
Selanjutnya » Masukan masukan (copy paste) kode di bawah ini

<div id="Box-Banner-ads">
<a target="_blank" href="http://d-owlie.blogspot.com/"><img
border="0" alt="ads" src="http://mydolwlieblog.googlecode.com/files/Banner2.gif"/></img
border="0"></a>
<a target="_blank" href="http://d-owlie.blogspot.com/"><img
border="0" alt="ads" src="http://mydolwlieblog.googlecode.com/files/Banner2.gif"/></img
border="0"></a>
<a target="_blank" href="http://d-owlie.blogspot.com/"><img
border="0" alt="ads" src="http://mydolwlieblog.googlecode.com/files/Banner2.gif"/></img
border="0"></a>
<a target="_blank" href="http://d-owlie.blogspot.com/"><img
border="0" alt="ads" src="http://mydolwlieblog.googlecode.com/files/Banner2.gif"/></img
border="0"></a>
</div>

Simpan.

Anda perlu mengganti tulisan yang berwarna merah.

• http:/it-scriptsyndicate.blogspot.com - Ganti dan masukan alamat url yang dituju.

• http://mydolwlieblog.googlecode.com/files/Banner2.gif- Ganti dan masukan alamat utl gambar.

Tampilanya seperti gambar di bawah ini

Sekian artikel mengenai mengenai "Cara Membuat Kotak Iklan (Banner Ads)" pada kesempatan kali ini. Semoga artikel ini dapat bermanfaat atau hanya sekedar info dan hiburan.

Terima kasih.