Sesuai dengan judul diatas, kali ini saya akan menulis artikel tentang bagaimana cara untuk membuat sidebar menjadi 2 kolom. Membagi  sidebar 2 kolom sebenarnya bukan merupakan keharusan tiap blog. tapi mengingat untuk mempercantik blog juga dapat mempersempit ruangan blog kita. dengan maksud pengunjung tidak merasa bosan dengan blog kita. 


Baiklah, kita langsung saja pada langkah-langkah pembuatannya :
1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode
#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

Tips Membagi Sidebar Menjadi 2 Kolom di Blogspot

Baca Selengkapnya →

Lagi-lagi mengenai gambar slide di bawah header, yah soalnya ini lagi ngetrend di kalangan blogger untuk memperindah blog. Kali ini saya akan memberikan tutorial cara memasang gambar slide ala Drakon template. Pada dasarnya fungsi dari gambar slide ini sama dengan Zinmag Primus, perbedaannya jika pada Zinmag Primus gambar itu ditampilkan satu persatu secara otomatis, maka di Drakon template ini gambar yang ditampilkan ada beberapa sesuai dengan lebar template yang kita pakai, dan kita harus meng-klik tombol previous atau next untuk menampilkan gambar selanjutnya. Untuk lebih jelasnya temen-temen bisa lihat disini atau langsung saja pada Drakon template yang ada di situs template gratis.


slider gambar

Oke, langsung saja pada langkah-langkah pembuatannya :

PERTAMA

Login ke blogger dengan akun anda >> klik Tata Letak >> pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5V1sAdtgEMGMCxp6q_oxcMv_fiImCVX192Pk8-1WqAonJU36WkLQgcLbEQ40i5083wxScZrq6_PM-tnwKKMG4YslPbnvQb5NmVet116k3XLkdKIwLv_1CrWP1v9y9PdysOhy0p-UGAuk/s0/header-background.png) repeat-x;
border:5px ridge #052844;
}
#gallerycover{
overflow:hidden;
margin:9px 20px 0 32px;
width:920px;
}
.mygallery{
overflow:hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4;
}
.inpost{
position:absolute;
top:0;
left:0;
width:250px;
background:#fff;
}
.mytext {
padding:5px 0;
color:#000;
width:170px;
font-size:12px;
font-weight:bold;
}
.mytext h4 a:link,.mytext h4 a:visited{
color:#000;
text-shadow: 0px 1px 0px #efefef;
}
.mytext p{
padding:0 0;
color:#555;
font-size:12px;
line-height:20px;
width:170px;
text-shadow:1px 1px 0 #f6f6f6;
}
.prevb{
float:left;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGb8XfUgV8SZkSKPn6gczGt-JuKNPFrW_OcuYvyrAkNFS-nRlWWtNtrlbXw5sehWKky-6CgCXEej6wq_S95A3AOeCB2OEQTM9Qh7_Vens37De6Cs-44yGktExlFX0PFmbyaWRiRtkzYvw/s1600/back+demomaskolis.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0chrjAe2cudMdVM30mEygKWYhNFz9b4nKxxZ6N8jCck7VsIlpFhvqRCMSi0vccRSCj84BsZf2-vMQOc3b2X_42OfmSSwJw102EehISNek6FL5wlxR2wyI8jkSDqnah8IHiGOvSMSBJ7U/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}


Tips / Cara Memasang Slider Gambar di Blog

Baca Selengkapnya →

Pada intinya pemasangan tombol share on facebok dan pemasangan plugin like facebook adalah sama. Hanya berbeda pada scriptnya saja. Semua penempatannya tergantung anda sebagai admin blog. hehe... sang admin kan berkuasa.
Tidak perlu lama-lama saya bercerita (ntar malah dikira di"nina-bobokan",^_^) langsung saja ikuti langkah-langkah di bawah ini.
1. Login ke blogger.com sesuai dengan akun anda, tahukan kenapa harus sesuai? Kalo akun lain keenakan yang punya akun donk udah dipasangin plugin like facebook. hehe...
2. Klik Tata Letak kemudian klik Edit HTML, setelah itu download lengkap template anda.
3. Beri tanda centang pada expand widget template.
4. Cari kode seperti berikut.

<data:post.body/>
atau
<p><data:post.body/></p>

Tips / Cara Memasang Plugins Like Facebook

Baca Selengkapnya →

Postingan ini tentang bagaimana cara membuat menu drop down pada navigasi. Perhatikan image di samping. Sebelumnya saya minta maaf kepada paman Helman, karena baru sempet posting, akhir-akhir ini saya disibukkan oleh aktifitas saya di dunia nyata ^^. Kembali ke topik, pada navigasi di atas saya menggunakan CSS dan HTML. Dikarenakan menggunakan kode CSS maka kodenya pun lumayan ribet, kurang lebih seperti ini.

Trik Membuat Menu Drop Down Pada Navigasi

Baca Selengkapnya →

Kemarin seorang sahabat blogger menanyakan bagaimana membuat daftar isi otomatis secara sederhana. Saya sempat berpikir bentuk daftar isi otomatis yang sederhana itu bagaimana? dan fungsinya apa saja, akhirnya saya pikir buat aja yang sederhana dan gak ribet. Dan hasilnya lumayan juga heheheee....ok ini nih scriptnya

1. Log in ke blog anda
2. Klik Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukkan kode berikut ke dalamnya dan simpan template

<div style="width: 100%; height: 300px; overflow: auto;">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-daftarisi.js"></script>
<script src="http://www.fauziewisudawan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

height: 300px adalah tinggi tampilan widget. ganti angka 300px dengan keinginan anda
http://www.fauziewisudawan.co.cc/ ganti dengan alamat blog atau web anda. 
Selesai dan lihat hasilnya
Ok gan selamat mencoba dan sukses selalu.

sumber : blogonol.blogspot.com

Tips Memasang Daftar Isi Otomatis Sederhana

Baca Selengkapnya →

Kali Ini Kita akan membuat label cloud tanpa edit html.
langsung saja silahkan baca tutorial dibawah ini
Seperti Biasa :
1. login ke akun Blogger anda
2. Masuk Ke Rancangan Elemen Laman
3. Kemudian Tambah Gadget
4. Pilih HTML/Javascript
5. Kemudian copy code dibawah ini


<embed quality="high" allowscriptaccess="always" flashvars="tcolor=0x003483&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

&lt;a href='http://www.arjermania.co.cc/search/label/Artikel'style='12'&gt;Top Artikel&lt;/a&gt;

&lt;a href='http://www.arjermania.co.cc/search/label/Tips%20Trik'style='12'&gt;Tips Trik&lt;/a&gt;

&lt;/tags&gt;" type="application/x-shockwave-flash" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" id="tagcloud" bgcolor="#ffffff" name="tagcloud" height="230" width="250"></embed>

Ket :
  • Ganti Kode : http://www.arjermania.co.cc/search/label/Artikel dengan link tujuan kamu
  • Lalu ganti “Top Artikel” dengan judul yang ingin ditampilkan.
  • Untuk Menambahkan Link tujuan Lainnya tinggal di Copy aja kode &lt;a href='http://www.arjermania.co.cc/search/label/Artikel'style='12'&gt;Top Artikel&lt;/a&gt; dibawahnya.

6. Save dan lihat blog anda

sumber : arjermania.co.cc

Tips Membuat Label Cloud Tanpa Edit HTML

Baca Selengkapnya →

Copyright © F For Fauzie | Designed With By Blogger Templates
Scroll To Top