-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet
Tampilkan postingan dengan label header. Tampilkan semua postingan
Tampilkan postingan dengan label header. Tampilkan semua postingan

Customize Your Favicon Blog

Today, we're pleased to announce that Blogger in Draft users can now add a customized favicon to their blog. Penjelasan singkat tentang cara baru dalam cara memasang Favicon di blog melalui Blogger In Draft. Untuk pengertian favicon sobat pastinya sudah banyak mengerti, seperti pada postingan saya sebelumnya, Cara mengganti/memasang Favicon, pada tread Kumpulan Trik/Hack Blogger, Favicon custom (gambar kecil yang ditampilkan di jendela browser atau tab) dan tentunya ini akan lebih mudah cara pemasangannya, cukup dengan melakukan langkah-langkah berikut:

1. dalam posisi Login di blogger sobat, langsung masuk ke http://draft.blogger.com.
lalu beri ceklis/centang (lihat gambar)


2. klik Design/Rancangan


3. Lalu lik Edit pada bagian Favicon (lihat gambar diatas)
4. Klik Browse dan Pilihlah gambar berekstensi .ico yang sobat punya dari komputer Sobat.
5. Terakhir Klik Save, dan lihat hasilnya.


Tambahan:
Peluncuran awal ini hanya mendukung file ico,. tapi Sobat dapat dengan mudah mengkonversi ke dalam file JPEG, PNG, atau berkas non-ico gambar dengan menggunakan software gambar Sobat sendiri. Ada juga banyak alat konversi online, dan Google Search cepat membawa beberapa pilihan seperti http://www.icoconverter.com/.

Nah, mudah kan, jadi kita tidak perlu repot-repot mengUpload gambar, memaang kode script'nya, cukup dengan langkah diatas, sobat sudah bisa mengganti Favicon Blog Sobat.
Untuk lebih jelasnya silahkan melihat langsung sumbernya di http://bloggerindraft.blogspot.com/

Sekian dari saya semoga bermanfaat, dan tinggalkan komentar bila mengalamai kesulitan. Thanks
Read More Kamis, 01 Maret 2012 0 komentar

Menghilangkan Judul Blog Di Header

Judul blog berguna untuk memberi informasi tentang blog kita dan sangat penting dalam search engine.. tapi jika di blogger judul blog tampak di header dan jika kita membuat background header yang kita buat sedemikian unik, bagus dan keren menurut kita akan mengganggu pemandangan background header kita...

Nah pada pembicaraan kali ini lutfi oXside akan membuat suatu tuorial sederhana untuk menghilangkan judul blog di header namun tidak hilang judul blog kita sebenarnya hanya saja tidak tampak pada header. Yupzz kemaren lutfi oXside udah pernah buat tutorial sederhana mengenai cara menghilangkan Tanggal posting tapi sekarang lutfi oXside akan membuat tutorial cara menghilangkan Judul Blog di header... oke langsung saja

Masuk menu Layout kemudian masuk Edit HTML kemudian cari Code di blog Anda yang mirip seperti dibawah


#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

nahh seperti halnya menghilangkan tanggal posting kita tambahkan Code Css visibility:hidden; Kedalam Css Diatas Sehingga kurang lebih menjadi seperti dibawah

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}
 Jika Sudah Simpan pengaturanya....

sekian semoga bermanfaat.. jangan lupa isi komentar key

 

Read More Minggu, 18 Desember 2011 0 komentar

Merubah Tampilan Headings Blog

Heading yang mempunyai arti kepala, pasti kepala tempatnya diatas.. ya iyalah masa di bawah.. he.. he.. Seperti halnya juga headings di blog yang tempatnya diatas tapi jangan salah Saya kali ini tidak membahas tentang header blog tapi melainkan headings yang biasa ditulis dalam code HTML dan CSS adalah seperti h2, h3, h4 dan sebagainya, Contoh headings di blog adalah seperti judul posting, judul sidebar, tanggal posting dan judul blog.

Seperti biasa tutorial kali ini saya akan coba membahas tentang cara memodifikasi CSSnya, untuk merubah tampilan headings di blog kita hal yang harus kita lakukan adalah mengotak-atik CSS (cascading style sheets) dari yang standar ke bentuk yang kita inginkan.

Oke langsung saja Saya akan jelaskan satu persatu dan cara memodifikasinya...
Masuk menu Layout kemudian masuk Edit HTML untuk mengota-atik CSSnya

Merubah tampilan Judul Posting

Jika Anda ingin merubah tampilan judul posting Anda maka code CSS yang harus Anda cari adalah seperti dibawah ini

.post h3 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Sidebar

Cari code CSS dibawah ini

.sidebar h2{
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Blog di Header

Cari CSS dibawah ini

#header h1 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Tanggal Posting

Cari CSS dibawah

h2.date-header {
------------
-------------
-------------
-------------
}

Perhatikan Code CSS yang berwarna merah saja karena yang lainya adalah definisinya.
Nah sekarang kita lanjut ke cara otal-atik CSSnya biar tampilanya oke punya.

Ganti garis putus-putus dari code CSS diatas dengan definisi dibawah ini

margin:5px;
padding:5px;
border:1px dotted #000000;

font-size:140%;
untuk menentukan besarnya huruf , bisa kamu ubah sesuai selera kamu misalnya kamu ubah menjadi 100% atau 150% dan juga satuanya bisa kamu ganti dengan px (pixels) misalnya 14px.

font-weight:bold;
Untuk menentukan ketebalan huruf, Bold adalah jika kamu ingin hurufnya tebal apabila kamu ingin merubah hurufnya biasa ganti bold dengan normal, dan apabila kamu ingin mengganti hurufnya menjadi miring kamu ganti saja dengan code italic.

text-align:right;
Untuk menempatkan posisi text jika kamu isi dengan right maka text akan berada di kanan dan apabila kamu isikan left text akan berada di kiri dan juga center maka textnya akan berada di tengah.

color:#FFFFFF;
Untuk memberi warna huruf, #FFFFFF adalah code warna untuk warna putih carilah code warna yang sesuai dengan keinginan kamu di http://colorschemer.com/online.

Background:#000000;
untuk memberi warna background. silahkan ganti code warna sesuai keinginan kamu di http://colorschemer.com/online untuk mencari code warna.

text-transform:uppercase;
uppercase untuk menampilkan hurufnya dengan huruf besar semua meski dalam pengaturan anda menuliskan huruf kecil. jika Anda ingin mengubah dengan huruf kecil semua ganti dengan lowercase dan jika ingin huruf depanya saja yang besar maka ganti dengan capitalize.

Nah jika di blog Anda pasti CSSnya sudah ada definisinya tinggal mengedit dan menambahi yang kurang-kurang saja.

Sekian dulu artikel ini Saya rangkum dari berbagai sumber salah satunya dengan sistem browsing dan baca artikel dari kang rohman.
Semoga bermanfaat bagi Anda....
 
 
 
Read More 0 komentar

Tambahan Icon Pada Post Footer


Terinspirasi dari blognya pencuri code yang bernuansa Seo Contest sapa lagi kalau bukan blognya kang noval, dalam blog kang noval tersebut post-footernya menarik karena ada tambahan Iconya, jadi post footer akan kelihatan sedikit lebih expressif.
Jika belum tau apa itu post footer area lihat aja gambar diatas, Nah post footer adalah informasi dari postingan yang kita tulis di blogger yang tempatnya dibawah postingan kita, dalam post footer area terdapat infromasi-informasi tentang postingan yang ada diatasnya, misalnya siapa penulisnya, jam berapa dipublikasikan, sudah ada berapa komentar, artikel tersebut masuk dalam kategori apa dan juga yang lainya.

Gimana apakah Anda ingin membuat post footer area Anda lebih expressif dengan tambahan Icon?
Ikuti petualangan saya dibawah ini.

Seperti biasa yaitu masuk menu Layout (tata letak) lalu masuk meni Edit HTML.

taruh code CSS dibawah ini diatas code ]]></b:skin>
 
/* post fotter
---------------------------*/
.post-author {
background: url(http://i296.photobucket.com/albums/mm169/anasku/profile.gif) no-repeat;
padding-left: 20px;
color: #c70823;}
.post-timestamp {
background: url(http://i296.photobucket.com/albums/mm169/anasku/jam.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-labels {
background: url(http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png) no-repeat;
padding-left: 25px; margin-left: 10px;
}
.comment-link {
background: url(http://i296.photobucket.com/albums/mm169/anasku/comment-icon.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-backlinks {
background: url(http://i296.photobucket.com/albums/mm169/anasku/favorit.gif) no-repeat;
padding-left: 15px;
}

Kalau sudah tinggal Save dan jadi deh...

Nah code yang berwarna merah diatas adalah URL gambar... bisa kamu ganti dengan gambar sendiri, ingat sesuaikan ukuranya..

Nah gimana caranya gampang kan??

jika ada pertanyaan silahkan tanya aja gak usah malu-malu okey.
Read More 0 komentar

Jquery Navigation Color Fading Hover




    Cara membuatnya ikuti langkah-langkah berikut :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :


/*----------------
Jquery Color Fading Hover
-------------------------------*/
#pageBody {
    width:500px;
}

.hoverBtn {
    position:relative;
    float:left;
    background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-dSLdMZiyUeACShAfyR-Yf7kE5U3Yya-Zdakug-YWFi0gGaqAYGOQ0EYisLq1foroIPsq83TibSCG6Pk3tH4Q0c8OzsMg27nhojgN5igziac8t72oigfRoHCGe2WL5HhpZuoqtkTng4/s1600/navBG.png) repeat-x 0 0 scroll;
}
.hoverBtn a {
    position: relative;
    z-index:2;
    display: block;
    width:100px;
    height:30px;
    line-height:30px;
    text-align: center;
    font-size:1.1em;
    text-decoration:none;
    color:#000;
    background:transparent none repeat-x 0 0 scroll;
}
.hoverBtn div {
    display:none;
    position:absolute;
    z-index:1;
    top:0px;
    background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVevbNsoCPn4RzwB4gurgY0ID5-yJvmhoWPN83lqlz9c9fxErz1couYMSueEdJFCLJPSC3KPFfm8a1w27s_qKJ_SO8uyR4KpSttBbZmvSnquWX1EeY5cSUrHzsV0A657d5uYTC2Bw3E0/s1600/navHover.png) repeat-x 0 0 scroll;
}

4. Simpan script berikut diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jquery.color.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/main.js' type='text/javascript'/>

5. Untuk pemanggilannya, kalau saya disimpan dibawah tag Head-nav (seuaikan dengan template sobat tata letak nya):
<div id='pageBody'>
<a class='hoverBtn' href='#'>Home</a>
<a class='hoverBtn' href='#'>Mobile</a>
<a class='hoverBtn' href='#'>Tutorial</a>
<a class='hoverBtn' href='#'>About</a>
<a class='hoverBtn' href='#'>Contact</a>
</div>

Simpan template dan selesai......
Read More Sabtu, 03 Desember 2011 0 komentar

Multi Level Drop-Down Menu Dengan CSS dan JQuery

Multi level drop-down menuMulti level drop-down menu
View Demo
Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini
Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery pada template blogger
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan script JQuery berikut sebelum tag </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja
3. Tambahkan juga script berikut setelah script JQuery yadi
<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" /> <!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>
4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
        <ul>
            <li><a href="#">Sub Item 3.1.1.1</a></li>
            <li><a href="#">Sub Item 3.1.1.2</a></li>
            <li><a href="#">Sub Item 3.1.1.3</a></li>
            <li><a href="#">Sub Item 3.1.1.4</a></li>
            <li><a href="#">Sub Item 3.1.1.5</a></li>
        </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
6. Simpan template Hasilnya seperti screenshot berikut atau live demo lihat disini
 image_thumb13[1] 
Multi level drop-down menu  Semoga bermanfaat!
Read More 0 komentar

Menambahkan Gadget di Header

Menambahkan Gadget di Header
Kita bisa menambahkan elemen gadget di sidebar kiri atau kanan, dan post area. Kadang kita ingin menambahkan gadget di area header, tapi tidak bisa. Kita bisa menambahkan banner di header atau tulisan berjalan. Sekarang kita akan belajar untuk mengedit template blog sehingga bisa menambahkan elemen gadget di bawah atau atas judul blog.

Cara Menambahkan Gadget di Header
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut;

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=Verdienen (Header)' type='Header'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>

6. Hapus kode maxwidgets='1' dan ganti showaddelement='no' dengan showaddelement='yes'
7. Simpan template jika suda selesai.

Sekarang di halaman Rancangan > Elemen Laman, kita sudah bisa menambahkan gadget.
Read More 0 komentar