think smart: September 2013

Thursday, September 26, 2013

Cara Membuat Menu Vertical Sederhana

Cara membuat menu vertical sederhana di blog. Berbeda dengan menu horizontal yang memanjang kesamping.

Menu vertical akan memanjang atau menurun kebawah. Biasanya menu vertical ditempatkan dibagian kanan atau kiri sidebar blog. Silakan lihat contoh gambar disamping, atau contoh menu dibawah ini.

Beranda

Profil

Contact

Untuk lebih jelasnya tentang cara membuat menu vertical diblog. Ikuti langkah² dibawah ini.

Login ke blogger, dan pilih pengaturan template.
Lalu klik tambahkan gadget, dan pilih HTML/Javascript.
Selanjutnya copy kode dibawah ini.

Dan Pastekan di gadget HTML/Javascript tadi.
Terakhir, save gadget. Dan pindahkan gadget ke tempat yang kalian inginkan. Selesai.

Keterangan kode langkah 3:

<a href='http://fandrajuani.blogspot.com/'> dan <a href=''> Isi dengan URL yang kamu inginkan.
Jumlah menu diatas ada 3. Untuk menambahkan jumlah menu?
Tambahkan kode <li><a href=''><span>Nama Menu kamu</span></a></li>
Dibawah kode <li><a href=''><span>Twitter</span></a></li>
background: #aaaaaa; warna background
border:1px solid #1780dd; warna garis biru yang memisahkan antar menu.
text-transform: uppercase; kode ini membuat Menu menggunakan huruf besar semua.
Jika tidak ingin menggunakan huruf besar, hapus kodenya.
padding:0px 0px 0px 10px; spasi tulisan menu sebelah kiri.

Silakan dibaca juga artikel tentang menu yang lainnya. Seperti membuat menu dengan gambar disampingnya, cara membuat menu dropdown di blog atau jika masih bingung dengan cara membuat menu di blog, silakan baca cara membuat dan mengisi menu blog.

Itulah sedikit cara desain blog dan tips trik tentang cara membuat menu vertical sederhana di blog. Semoga Bermanfaat.

Wednesday, September 25, 2013

Cara Membuat Artikel Berjalan di Blog

Cara Membuat Artikel Berjalan di Blog. Sebelumnya saya sudah membagikan tentang cara membuat entri populer bergerak ke bawah ataupun keatas. Dan kali ini adalah lanjutannya entri populer akan bergerak ke arah kanan ataupun kiri. Jadinya seperti artikel berjalan. Ketika di sentuh mouse, maka artikel akan berhenti, dan ketika di klik maka akan terbuka halaman baru, sesuai dengan judul artikel yang dibuka. Dan pada saat tidak disentuh mouse, maka artikel akan berjalan kembali.

Contoh artikel berjalan, bisa dilihat DISINI, di blog saya satunya. Untuk lebih jelasnya tentang cara membuat artikel berjalan di blog. Ikuti langkah-langkah dibawah ini.

Pasanglah widget entri populer di blog.
Lalu atur entri populer tanpa gambar dan cupilkan, dan save widget.
Selanjutnya memasang kode berjalan, baca di cara membuat entri populer bergerak.
Setelah selesai membuat entri populer bergerak. Ke pengaturan Template > klik Edit HTML dan cari kode ]]></b:skin>
Setelah itu copi kode berikut, dan pastekan diatas ]]></b:skin>

.popular-posts {

width: 100%;

min-width: 960px;

position: fixed;

top: 0px;

left: 0px;

right: 0px;

height: 30px;

font-size: 12px;

z-index: 99;

white-space: nowrap;

background-color: #336699;

background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);

box-shadow: 0px 2px 0px rgb(14, 90, 140);

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.widget .popular-posts ul {list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceiTCHNLohV0EWA6SBDTRbd0DUKidpo27KAqBpKXnCdHg-fLV9No3sQ6r61gNOiqnk_3b73pxSvJsMIvG1nv88Daehw50dW7YuRv1nLDK3nBybANSoaPEg0Igt825oOQo63sfveUVJd5Q/s1600/Desain+Blog.JPG)

}

.popular-posts ul li{
float:left;
}

.popular-posts ul li a{

float:left;

width:auto;

font-weight:Bold;

color:#FFFFFF;

text-align:justify;

padding:0px 10px 0px 0px;

}

Save template, selesai.

Keterangan kode langkah 5:

.widget .popular-posts ul {list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceiTCHNLohV0EWA6SBDTRbd0DUKidpo27KAqBpKXnCdHg-fLV9No3sQ6r61gNOiqnk_3b73pxSvJsMIvG1nv88Daehw50dW7YuRv1nLDK3nBybANSoaPEg0Igt825oOQo63sfveUVJd5Q/s1600/Desain+Blog.JPG)} kode ini gunanya untuk menambahkan gambar disamping tulisan artikel² yang berjalan, silakan ganti kode Biru dengan url dari gambar yang kalian inginkan.
Jika tidak ingin menggunakan gambar, ganti kode list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceiTCHNLohV0EWA6SBDTRbd0DUKidpo27KAqBpKXnCdHg-fLV9No3sQ6r61gNOiqnk_3b73pxSvJsMIvG1nv88Daehw50dW7YuRv1nLDK3nBybANSoaPEg0Igt825oOQo63sfveUVJd5Q/s1600/Desain+Blog.JPG)} dengan kode list-style:none;
top: 0px; mengatur letak posisi diatas, jika ingin ditempatkan dibawah ganti top dengan bottom.

Update:

Jika warna tulisannya hitam, tambahkan kode .widget .popular-posts ul li a:link, .widget .popular-posts ul li a:visited{color:white;} diatas ]]></b:skin>.
Untuk menghilangkan judulnya, tambahkan kode #PopularPosts1 h2{display:none} diatas ]]></b:skin>.
Jika masih ada background yg tertinggal, tambahkan kode #PopularPosts1 {background:transparent; box-shadow:none;}

Ganti kode color:white; dengan warna yang kalian inginkan. Selesai sudah cara membuat artikel berjalan di blog, silakan dibaca juga artikel lainnya seperti tentang cara cara membuat icon untuk website yang bisa digunakan untuk gambar disamping tulisan artikel berjalan pada artikel diatas. Semoga bermanfaat.

Cara Membuat Icon Untuk Website

Cara buat Icon web atau juga blogger. Icon biasanya digukan untuk memperjelas judul menu, seperti home, profil, sitemap dan lain². Dan letaknya berada disamping kanan atau kiri dari tulisan. Icon berguna agar pengunjung lebih mudah untuk melihat menu yang ada diwebsite kita.

Disini saya akan beri contoh mudah membuat icon web menggunakan foto kita sendiri diphotoshop.

Untuk lebih jelasnya. Ikuti langkah-langkah dibawah ini.

1. Buka Photoshop.
2. Buka Foto yang akan dijadikan Icon.

3. Setelah itu klik tanda Crop yang berada disebelah kiri.

4. Dan isi colom width:128 dan height 128. Ini bertujuan agar ukuran tinggi dan lebar crop gambar sama. Dan memudahkan kita nantinya untuk merubah ukuran image ke ukuran yang lebih kecil, tanpa merubah bentuk gambar.

5. Selanjutnya Crop gambar, dan ratakan kotak crop untuk gambar yang akan diambil. Seperti gambar dibawah ini. Dan tekan tanda centang hijau diatas bar, untuk menyelesaikan crop/pemotongan.

6. Setelah itu klik tanda image yang ada diatas bar dan klik image size.

Maka akan terbuka halaman baru pengaturan Pixel Dimensions dan Document Size.

7. Selanjutnya, ganti ukuran Pixel Dimensions menjadi 32 x 32, ukuran standar Icon yang biasa digunakan untuk website.

Document size tidak perlu diganti, karena document size mengikuti perubahan dari ukuran pixel dimensions. Perhatikan juga Constrain Proportions tidak perlu dicentang.

8. Terakhir Klik Ok, Lalu Save Gambar. Selesai.

Contoh icon yang sudah jadi dengan ukuran 32 x 32 Pixels.
Gambar tetap sama, hanya saja ukurannya yang berbeda. Saran saya, jika ingin menggunakan icon di website anda, gunakanlah icon dengan ukuran yang sama, agar blog terlihat lebih rapi. Dibawah ini adalah beberapa ukuran Icon yang biasa digunakan diwebsite.

16x16

32x32

48x48

64x64

128x128

Setelah membuat icon, silakan baca artikel cara membuat menu dengan gambar dan juga mengganti tulisan beranda, posting lama baru dengan gambar atau icon, untuk mulai mencoba memasang icon gambar anda ke menu blog. Itulah sedikit tips trik yang dapat saya bagikan kali ini yaitu tentang cara membuat icon untuk website, blogger dan juga web lainnya. Semoga Bermanfaat.

Monday, September 23, 2013

Cara Membuat Gambar Tutorial

Tips dan Trik kali ini tentang cara membuat gambar tutorial. Biasanya digunakan sebagai penambah penjelasan dari artikel yang kita buat. Gambar bisa kita ambil dari halaman web atau dari layar komputer kita sendiri. Untuk lebih jelasnya tentang cara mudah mengambil serta memotong gambar yang akan digunakan sebagai gambar tutorial. Ikuti langkah² dibawah ini.

Bukalah layar yang akan dijadikan gambar.
Selanjutnya tekan Ctrl lalu tekan Printscreen/PrtscrSysrq yang ada dikeyboard.
Lalu buka program Paint yang ada dikomputer kita.
Di program Paint kita klik edit di menu atas, dan pilih Paste.
Setelah itu beri tanda kotak menggunakan Select pada gambar yang akan diambil, lalu Cut gambar tersebut.
Langkah selanjutnya, buka New di paint, lalu Pastekan gambar yang di Cut tadi.
Lalu Save gambar dengan Save As Type JPG. Seperti gambar dibawah ini.

Selesai.

Contoh : Gambar Tutorial.

Jika gambar yang ingin kita gunakan lebih kecil lagi dari gambar diatas. Kita bisa memotong/mengambil gambar menggunakan program Microsoft Office Windows Manager. Jika dikomputer yang kamu gunakan telah terinstal microsoft office, maka program diatas juga pasti ada. Berikut cara menggunakannya:

Klik Kanan pada gambar yang akan dipotong.
Lalu pilih Open With > Microsoft Office Windows Manager.

Selanjutnya klik Picture pada menu atas. Dan klik Crop.
Setelah itu Crop gambar dengan ukuran yang kita inginkan.
Terakhir save. Selesai.

Contoh: Gambar Tutorial yang sudah dipotong.

Itulah sedikit tips dan trik tentang cara membuat gambar tutorial. Silakan baca juga artikel lainnya yang berhubungan dengan gambar, seperti cara membuat icon untuk blog. Semoga Bermanfaat.

Saturday, September 21, 2013

Cara Membuat Menu yang Menempel Di Dinding Blog

Cara membuat menu yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, menu masih pada posisi yang sama. Silakan lihat contoh menu hijau dibagian bawah.

Untuk lebih jelasnya tentang cara membuat menu menempel diatas atau dibawah dinding blog. Ikuti langkah² dibawah ini.

Buatlah menu terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, lalu tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
Selanjutnya copy kode dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.

Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
Setelah itu pengaturan template, klik edit HTML dan cari kode Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. seperti dibawah ini.

Sekarang Copy id dari menu tempel yang bergaris bawah HTML2, seperti gambar diatas.
Lalu Pastekan di Notepad. Selanjutnya tambahkan kode css dibawah ini.

#HTML2 {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 30px;
font-size: 12px;
z-index: 99;
white-space: nowrap;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

Copy kode diatas, dan pastekan diatas ]]></b:skin> .
Dan Save Template.
Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi, lalu hapus judulnya, biarkan gadget tidak berjudul.
Terakhir Save Gadget, Selesai.

Keterangan Kode Langkah 6:

top:0px ini fungsinya menempatkan menu dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
background-color: #336699; dan #336699 100%); untuk warna background

Keterangan Kode Langkah 2:

http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
Dan juga https://twitter.com/fandrajuani adalah url yang jika diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.

Itulah sedikit cara membuat menu yang menempel di dinding atas atau bawah blog yang bisa saya bagikan. Semoga Bermanfaat.

Fungsi Margin Dan Padding di Blog

Margin dan Padding merupakan kode CSS yang digunakan untuk membuat jarak atau spasi. Perbedaanya adalah margin digunakan pada bagian luar, dan padding pada bagian dalam. Dengan kode margin kita dapat merubah posisi dari widget yang kita inginkan, sedangkan padding, kita dapat menggunakannya untuk bagian dalam, seperti spasi antar text tulisan, jarak antara text dengan batas garis widget atas-bawah. Untuk lebih jelasnya lihat gambar dibawah ini.

Adapun kode-kode Css Dari Margin dan Padding yang dapat kita gunakan diblog adalah sebagai berikut:

Margin

margin: 10px; (10px Spasi atas-kanan-bawah-kiri).
margin: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
margin: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
margin: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)
Khusus untuk margin dengan kode 4, bisa kita tambahkan kode - untuk merubah posisi dengan arah berlawanan, contoh: margin: margin:-55px -50px 0 0

Padding

padding: 10px; (10px Spasi atas-kanan-bawah-kiri).
padding: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
padding: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
padding: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)

Dari kode-kode diatas sudah terlihat, yang membedakan Margin dan Padding hanyalah nama awalnya saja sedangkan yang lainnya sama.

Langsung saja, dibawah ini adalah contoh penggunaan margin pada bagian Header blog. Tampilan awal Header blog pertama.

Susunan elemen dari gambar diatas adalah seperti dibawah ini.

Sekarang ke pengaturan template. Dan klik edit HTML.
Lalu cari satu persatu kode dari susunan elemen dari langkah 1.

Pertama cari kode Header, disini yang berjudul Fandra Juani. Gunakan Ctrl F untuk mempermudah pencarian. seperti dibawah ini.
Setelah ketemu, copy kode bertanda merah diatas, lalu pastekan di notepad, dan lanjutkan mencari kode Laman Dan HTML/javascipt.
Setelah semuanya ketemu, tambahkan kode margin untuk merubah posisi yang kita inginkan. seperti dibawah ini.

#Header{float:left}
#HTML1{float:right; margin:-115px -195px 0 0}
#PageList1{float:right; margin:-55px -50px 0 0}

Letakan kode diatas ]]></b:skin>
Save template, selesai.
Tampillan Blog setelah diberi kode margin.

Sudah terlihat jelas perbedaan tampilan blog, dari yg awalnya datar kebawah, sekarang datar kesamping. Karena ditambahkan kode margin. kenapa saya beri judul fungsi margin dan padding di blog, karena padding dan margin bisa digunakan pada semua bagian-bagian blog, jadi tidak hanya seperti yang saya contohkan. Yang terpenting adalah kita cari dulu kode dari bagian yang akan kita edit atau kita ubah posisinya.

Keterangan kode float
float digunakan agar posisi widget menjadi teratur, seperti contoh diatas, header float:left berarti header pada posisi kiri, dan laman(Pagelist1) dan HTML1 pada bagian kanan.

Silahkan berkreasi, maaf jika tutorial dari saya ini kurang jelas. Jika ada pertanyaan silakan masukan komentar dibawah, semoga bermanfaat.

Tuesday, September 3, 2013

Cara Membuat Entri Populer Bergerak

Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.

Ikuti langkah-langkah dibawah ini.

Login ke blog, dari halaman dasbor pilih pengaturan Template.
Klik Edit HTML, lalu cari kode <div class='widget-content popular-posts'>
Selanjutnya Copy kode berikut dan tempatkan di Sebelahnya.

Langkah selanjutnya, masukan kode </marquee> di akhir rangkaian kode. Jadinya seperti ini.

</ul>
<b:include name='quickedit'/></marquee>
</div>
</b:includable>
</b:widget>

Susunan Kode lengkapnya.

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
    <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    </marquee>
</div>
</b:includable>
</b:widget>

Save Template Selesai.

Keterangan kode:

marquee direction='down' arah gerakan, bisa diganti dengan up, left, atau right.
height='200' tinggi dan width='auto' untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.
scrollamount='2' scrolldelay='100' Waktu gerakan.
Silakan ganti sesuai dengan yang kalian ingnkan.

Silakan baca juga artikel tentang cara membuat artikel berjalan di blog. Lanjutan kombinasi dari entri populer bergerak ini. Contohnya bisa dilihat DISINI, diblog saya satunya.

Semoga Bermanfaat.