Tempatnya Belajar dan Berbagi

Written By Unknown on Rabu, 17 Juli 2013 | Rabu, Juli 17, 2013

Tempatnya Belajar dan Berbagi

Cara Membagi Header Menjadi Dua Kolom di Blog

Posted: 16 Jul 2013 04:05 AM PDT


Tidak terasa postingan kali ini adalah artikel saya yang ke-200. Semoga artikel-artikel yang saya tulis selama ini dapat bermanfaat bagi temen-temen semua. Pada tutorial kali ini saya akan membahas bagaimana membagi header dua bagian, yang nantinya dapat kita gunakan sebagai penempatan widget search engine, gambar, iklan atau apa saja yang membuat elemen baru itu terisi. Memang secara default header template sebuah blog biasanya hanya satu kolom untuk membaginya menjadi dua kita hanya sedikit memasukkan kode HTML ke dalam template.

maskolis header dua kolom
Saya sering menemukan blog dengan header yang sudah dibagi dua. Nampaknya hal ini sudah menjadi suatu kewajiban dan keharusan pada template blogger yang dipakai. Barangkali anda juga tertarik seperti saya, untuk memodifikasi header blogger. Gambar di atas sudah bisa menjelaskan kira-kira hasilnya akan seperti itu nantinya. Oke langsung saja ke cara pembuatan. Berikut langkah-langkahnya :

Membagi header menjadi dua kolom
  1. Login ke blogger dengan id anda
  2. Tuju menu Tata Letak
  3. Pada tab menu, klik Edit HTML
  4. Backup template anda, klik Download Template Lengkap
  5. Sekarang cari kode CSS seperti ini :
    #header-wrapper {
    width:660px;
    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;
    }
    Hapus dan ganti semua kode tersebut dengan kode CSS ini :
    #header-wrapper {
    width:930px;
    margin:0 auto 0px;
    background:#38610B url(http://i33.tinypic.com/sw6cfo.jpg) no-repeat top center;
    height:180px;
    }

    #head-inner {
    width:500px;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }

    #header {
    margin: 0px;
    text-align: left;
    color:#ffcc66;
    }

    #r_head{
    width:430px;
    float:left;
    padding-top:10px;
    }
  6. Sekarang cari kode seperti ini :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
    Hapus kode itu dan ganti dengan kode ini :
    <div id='header-wrapper'>
    <div id='head-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='r_head'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>
  7. Klik tombol SIMPAN TEMPLATE
  8. Selesai

Jadi, jika anda ingin melakukan perubahan dari kode CSS di atas, fokuslah hanya pada bagian yang berwarna hijau saja. Kode CSS yang lain bisa anda sesuaikan. Untuk melihat hasilnya, silahkan masuk ke Elemen Halaman. Jika langkah-langkahnya benar maka di sana sudah ada dua header. Artinya, header default sudah terbagi menjadi dua kolom header sebelah kiri dan kolom header sebelah kanan. 

Selamat mencoba dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Modifikasi Blockquote Di Blogspot

Posted: 16 Jul 2013 04:06 AM PDT


Blockquote adalah tag HTML yang digunakan untuk menampilkan quote/kutipan pada artikel. Tujuannya adalah untuk mempertegas isi tulisan ataupun teks yang dianggap penting yang berada di area blocquote. Untuk template tertentu, pada bagian blockquote akan diberi warna agar tampilan template terlihat lebih unik dan menarik namun jika temen-temen tidak suka dengan warna yang diberikan. Anda bisa mengganti warna background blockquote dengan warna lain yang anda inginkan hanya sedikit modifikasi pada kode css template anda.

Ada dua cara untuk membuat blockquote, setidaknya sampai saat ini yang saya ketahui. Pertama adalah dengan menambahkan sedikit kode CSS pada .post blockquote { dengan kata lain sedikit memodifikasinya. Cara yang kedua menambahkan kode CSS blockquote di atas kode ]]></b:skin> sebagai atribut tag baru untuk blockquote.

Membuat Blockquote Cara Pertama
Nah, mari kita coba cara yang pertama dengan memodifikasi default blockquote blogger. Template default blogger telah menyediakan fitur blockquote ini pada kode CSS berikut :
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
Inilah yang perlu dimodifikasi sedikit saja. Bagi yang sudah biasa dengan kode CSS, tentu hal ini sangat mudah dilakukan. Bagi teman-teman lain yang masih belajar seperti saya, dapat mengikuti cara berikut. Silahkan masuk ke blog dengan ID blogger anda � tuju Layout dan � klik Edit HTML � jangan lupa untuk mencentang kotak kecil Edit Template Widget. Oke, saya ambil beberapa contoh modifikasi blockquote.

Contoh pertama seperti gambar di bawah ini.

blockquote-blue
Untuk membuat blockquote seperti gambar di atas, maka kode yang ditambahkan adalah perintah untuk latar belakang, warna dan ketebalan garis tepi. Untuk membuat blockquote seperti gambar di atas, maka kode default blogger harus diganti menjadi seperti ini :
.post blockquote {
background:url(http://i34.tinypic.com/11j7yvk.jpg) no-repeat;
padding:10px;
margin:1em 20px;
background-position:10px 10px;
border:2px #000000 solid;
text-align: justify;
}
.post blockquote p {
margin:.75em 0;
}
Perhatikan kode apa saja yang ditambahkan pada default blockquote blogger. Anda dapat mengganti latar belakang gambar dengan gambar anda. Untuk border dan jarak tepi serta posisi teks, bisa anda sesuaikan dengan template blog anda.

Berikutnya contoh yang kedua modifikasi blockquote seperti ditunjukkan gambar berikut ini :

blockquote-blue-close
Di sana ada dua tanda quotation pembuka dan penutup. Cara membuatnya sama dengan cara pertama. Anda hanya perlu memodifikasi blockquote penutupnya saja. Artinya, tambahkan beberapa perintah blockquote pada kode default blogger yang kedua atau biar mudah, ganti semua kode default blockquote blogger menjadi seperti berikut :
.post blockquote {
background:url(http://i34.tinypic.com/11j7yvk.jpg) no-repeat;
padding:10px;
margin:1em 20px;
background-position:10px 10px;
border:2px #000000 solid;
text-align: justify;
}
.post blockquote p {
margin:.75em 5;
background:url(http://i37.tinypic.com/211qd03.jpg) no-repeat;
padding:20px;
background-position:bottom right;
}
Sama seperti yang saya katakan tadi, anda masih dapat mengganti background dengan gambar anda sendiri. Demikian juga dengan garis tepi serta perintah kode CSS lainnya.

Penerapan blockquote pada posting blog perlu anda perhatikan sebagai berikut. Agar blockquote dapat berfungsi di posting blog, maka anda harus menambahkan kode </blockquote><p> di awal teks yang dipertegas dan tutup dengan kode </p></blockquote>. Misalnya seperti ini :
<blockquote><p>Tulis di sini teks yang akan di blockquote</p></blockquote>

Membuat Blockquote Cara Kedua
Oke, sekarang kita coba cara yang kedua dengan menambahkan kode CSS blockquote pada template anda.
  1. Login ke blogger dengan ID anda
  2. Tuju Layout
  3. Pada tab menu pilih Edit HTML
  4. Centang kotak kecil Expand Template Widget
  5. Cari kode ]]></b:skin>
  6. Tambahkan kode berikut di atas kode ]]></b:skin>
    blockquote {
    margin: 10px 10px 10px 20px;
    padding: 10px 15px 10px 15px;
    line-height: 1.6em;
    color: #000000;
    background: #e0ffff;
    border: 2px solid #4aa02c;
    border-left: 20px solid #4aa02c
    }
  7. Klik tombol Save Template
  8. Selesai
Hasilnya akan seperti gambar di bawah ini :

blockquote-green
Catan yang perlu anda ketahui pada warna dan border:
  • color: #000000; � warna teks di dalam kotak blockquote. Ganti #000000 dengan kode warna yang anda inginkan.
  • background: #e0ffff; � warna latar belakang (background) kotak blockquote. Ganti #e0ffff dengan kode warna yang diinginkan.
  • border: 2px solid #4aa02c; � warna garis tepi (border) kotak blockquote. Ganti #4aa02c dengan kode warna sesuai selera anda.
Contoh berikutnya, modifikasi blockquote seperti gambar di bawah ini :

blockquote-stars
Untuk membuatnya, langkah-langkanya sama dengan cara di atas. Nah, kode yang perlu ditambahkan di atas ]]></b:skin> adalah seperti ini :
blockquote {
background: transparent url(http://i33.tinypic.com/bg7ixd.jpg) repeat-x $startSide top;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}
Silahkan ganti gambar latar belakang dan apa saja yang ada di kode itu. Yang jelas perintahnya sama dengankode di atas seperti warna latar belakang dan gari tepi. Jika tidak keberatan, anda dapat menggunakan gambar-gambar background milik saya yang telah dihosting di tinypic. Atau kalau memang tidak memuaskan, silahkan diganti. Nah, bagaimana dengan penerapannya pada posting blog. Oke, untuk mengaplikasikannya pada posting blog, agak sedikit berbeda dengan cara yang pertama. Yaitu dengan menambahkan atribut <blockquote> di awal teks yang dianggap penting dan ditutup dengan atribut </blockquote>. Agar mudah, anda bisa melihat contoh berikut ini :
<blockquote><p>Tulis di sini teks yang akan di blockquote</p></blockquote>
Bagaimana, kira-kira ada kesulitan tidak? Mudah-mudahan semuanya bisa ya.. Selamat berkreasi dengan blockquote. Yang jelas, semua cara di atas masih bisa dimodifikasi lagi. Untuk menganti warna silahkan menggunakan kode warna saya dan untuk mempelajari lebih jauh tentang background dan border silahkan baca artikel tentang menggunakan border dan background pada template blogger. 

Diatas tadi adalah sedikit gambaran dari saya mengenai cara modifikasi blockquote, jika ada teman-teman yang lain punya ide untuk memodifikasi blocquote, mari berbagi di sini. Terimakasih dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Cara Memasang Tombol "Save as PDF" Di Blogger

Posted: 16 Jul 2013 04:06 AM PDT


Mungkin ketika temen-temen berjalan-jalan sebagai blogwalker menemukan blog-blog tertentu yang memasang tombol atau badges �Save Page As PDF�. Fungsinya adalah mengkonversi halaman artikel kita menjadi format PDF. Save as PDF ini dapat membantu pengunjung yang ingin menyimpan file untuk dibaca kemudian dalam format PDF. Barangkali pada waktu itu dia tidak punya waktu untuk membaca. Nah, inilah gunanya fitur Save as PDF ditambahkan. Pembaca dapat mengubah file HTML dan halaman web secara online menjadi file PDF kemudian menyimpannya di komputer. File tersebut bisa diprint dan dibaca kemudian pada waktu yang lebih santai. Sama halnya dengan membaca buku dalam bentuk digital atau e-book. Web2PDF Online adalah situs yang menyediakan jasa ini kepada para blogger dan web publisher secara gratis.

Mungkin anda tertarik menambahkan Save as PDF pada blog anda. Secara default tombolnya seperti gambar berikut :

save_as_pdf
Namun sebenarnya tombol Save as PDF ini masih dapat diganti dengan icon yang lebih minimalis atau menghilangkan tombol dan menggantinya dengan teks.

Mendaftar Di Web2PDF Online

Untuk menggunakan layanan gratis ini, anda harus mendaftar dan membuat akun di Web2PDF Online. Tidak pakai lama, cuma sebentar. Kalau sudah mendaftar, anda kan diberikan "User ID" khusus yang disesuaikan dengan blog yang anda daftarkan tentunya. Untuk membuat account, silahkan kunjungi halaman Web2PDF Online Widget dan isi semua form yang diminta. Masukkan URL blog yang akan ditambahkan tombol Web2PDF-nya. Hal ini berguna agar proses convert web page ke PDF tidak bermasalah, sebab terkadang jika kita menggunakan script dari user ID yang berbeda, maka hasilnya tidak akan sempurna. Jangan lupa untuk menyimpan user name dan password anda.

Berikutnya, anda tinggal membuat kode JavaScript dengan mengklik tombol "Generate the JavaScript" dan kode JavaScript Web2PDF generator akan diberikan pada form di bawahnya. Copy kode script tersebut pada teks editor dan paste di mana saja anda ingin menempatkannya pada blog yang sudah didaftarkan tadi. Jika anda pasang kode tersebut pada template blog, maka tombolnya akan seperti gambar di atas yang merupakan tombol default dari mereka.

pdf-online-generator-blogger
Pasang Tombol Web2PDF Online Di Bawah Posting

Nah, seperti yang saya katakan di atas, tombol save as pdf ini bisa di pasang di mana saja termasuk di akhir setiap postingan blog anda. Berikut langkah-langkahnya :
  1. Login ke blog dengan ID anda
  2. Pilih Layout
  3. Pada tab menu pilih Edit HTML
  4. Centang kotak Expand Template Widget
  5. Pasang script dari Web2PDF Online anda tepat di bawah kode <data:post.body/>. Jika anda telah memasang widget "read more", maka biasanya ada dua kode seperti itu. Oleh karena itu, paste-lah kode script Web2PDF Online anda di bawah kode yang pertama dari <data:post.body/>. Misalnya kode script Web2PDF Online saya seperti ini:
    <!-- START: PDF Online Script -->
    <script type="text/javascript">
    var authorId = "FC4DA3F4-6AC7-4GAE-937A-99AG3B5ED2CB";
    var pageOrientation = "0";
    var topMargin = "0.5";
    var bottomMargin = "0.5";
    var leftMargin = "0.5";
    var rightMargin = "0.5";
    </script>
    <script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
    </script>
    <!-- END: PDF Online Script -->
  6. Klik tombol Save
  7. Selesai
Jika tidak ada masalah maka tombol "Save as PDF" akan berada di akhir setiap postingan anda. Nah, pembaca dapat mengklik tombol tersebut dan seluruh halaman yang ditampilkan akan di ubah ke bentuk file PDF dan bisa disimpan untuk dibaca kemudian.

tombol-default-pdf
Alternatif lainnya adalah memasang tombol "Save as PDF" pada sidebar blog atau tempat lain dengan menambahkan widget HTML/Javascript yang disediakan blogger. Caranya, masuk ke Layout dan klik Ad a widget, pilih HTML/JavaScript dan paste kode script Web2PDF Online anda di sana. 

Semoga bermanfaat, terimakasih.
jangan lupa untuk berlangganan dan follow blog ini.

Membuat Dock Menu di Blog

Posted: 16 Jul 2013 04:06 AM PDT


Selamat siang temen-temen semua, gimana nih kabarnya? Pada siang hari ini saya akan berikan spesial menu untuk tutorial blog, yaitu Dock Menu. Apa itu dock menu? saya sendiri kurang paham tapi jika temen-temen yang biasa memakai windows Vista pasti tahu. Itu lho, menu yang terdapat di halaman depan, letaknya diatas yang jika kursor kita letakkan di salah satu icon tersebut maka ikon itu akan mendekat. Lebih jelasnya seperti gambar di bawah ini.

Cara kerja dock menu seperti ini, jika anda arahkan kursor mouse ke icon dock menu maka akan terjadi perubahan ukuran icon. CSS Dock Menu bisa anda dapatkan dengan mudah di internet. Ada banyak varian dari Dock Menu ini. Salah satunya yang dibuat oleh Ndesign-studio.com. Mungkin anda pernah melihat gambar di diatas pada Windows, Macintosh dan beberapa OS lainnya.  

Ndesign-studio.com sudah menjelaskan tutorial membuat dock menu. Namun terus terang saya merasa kesulitan untuk mengikutinya. Demikian juga dengan banyak tutorial yang sudah saya coba, ternyata ada yang cacat pada kode CSS-nya. Nah, setelah membandingkan beberapa cara membuat dock menu, ternyata belum ada satu pun yang memuaskan (saya kebingungan). Akhirnya saya coba memadukan dan membuang beberapa kode CSS yang tidak perlu, menambahkan kode CSS dan membuat versi sendiri. Baik, akan saya bagikan kepada temen-temen semua. Berikut langkah-langkah pembuatannya :

PERTAMA
Download file CSS dock menu zip package. Lalu unzip file-nya. Lihat di dalam folder JS ada 2 file javacript yaitu interface.js dan jquery.js. Sedangkan di folder images ada file gambar. Silahkan upload file interface.js dan jquery.js ke javascript hosting anda dan upload file gambar ke image hosting anda. Kalau saya biasanya memakai Google Sites untuk hosting JavaScript dan pakai tinypic.com untuk hosting gambar. Nah, silahkan mau dihosting di mana, yang pasti host directory bisa anda akses dengan mudah. Untuk kemudahan dan kelancaran, silahkan menggunakan semua alamat JS dan alamat gambar yang sudah saya siapkan pada tutorial ini.

KEDUA
  1. Login ke blogger dengan id Anda. 
  2. Silahkan tuju Tata Letak.
  3. Pilih Edit HTML.
  4. Backup template dengan klik Download Template Lengkap.
  5. Cari kode <head> kemudian letakkan kode javascript di bawahnya sehingga menjadi:
<head>
<script src='http://sites.google.com/site/hostingfreesite/javascript/jquery.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/hostingfreesite/javascript/interface.js' type='text/javascript'></script>

KETIGA
Masih di Edit HTML, sekarang cari kode ]]></b:skin> dan letakkan kode berikut di atasnya, sehingga menjadi :
/* CSS Dock Menu
------------------------ */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
]]></b:skin>

KEEMPAT
Masih di Edit HTML, sekarang kita akan menempatkan id untuk css dock menu. Jika anda sudah terbiasa dengan kode HTML template blogger, maka anda pasti bisa menempatkan id css dock menu di mana saja sesuai kebutuhan. Misalnya ditempatkan di atas header, di bawah header, di atas content menu, di bawah content menu atau di atas footer pun bisa. Yang penting, jangan sampai salah meletakkan kode. Biar seragam, saya akan menempatkannya di bawah header.
  • Cari kode :
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
  • Letakkan kode berikut di bawahnya, sehingga menjadi :
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://creatingwebsite-maskolis.blogspot.com'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</span></a>

</div>
</div>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
  • Sekarang klik tombol SIMPAN TEMPLATE 
  • Selesai
Keterangan :
  1. Untuk alamat creatingwebsite-maskolis.blogspot.com, silahkan ganti dengan link yang anda siapkan. 
  2. Untuk alamat link gambar berwarna pink, bisa juga anda ganti dengan gambar yang sudah disiapkan tentunya. 
  3. Ganti dan rubah beberapa kode CSS di atas. Misalnya anda ingin mengubah ukuran itemWidth: 30, proximity: 70, dan lihat efek animasi yang berubah. Demikian juga dengan beberapa kode CSS lainnya. 

Jika anda sudah selesai, kemudian lihat hasilnya. Jika kurang jelas atau Dock menu-nya tidak jalan bisa tanya ke kotak komentar yang ada di bawah. Selamat berkreasi dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

This posting includes an audio/video/photo media file: Download Now

di Rabu, Juli 17, 2013

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)