Mengatur posisi video di dalam posting Blogger

Ketika kita memasang video di dalam postingan blogger maka secara default blogger akan mengatur posisi video selalu di tengah postingan. Kondisi ini jelas sangat tidak enak dilihat karena banyak ruang kosong di samping kiri atau kanan video itu. Jika dalam postingan tersebut hanya berupa video saja mungkin posisi video tengah area posting memang itu yang diharapkan.

Tapi apabila postingan itu ada artikelnya maka posisi video di tengah menjadi kurang enak dilihat. Akan lebih asyik dipandang mata jika video kita atur posisinya agar menepi di kiri atau kanan artikel.

Sebagian blogger pemula mungkin tidak begitu mempedulikan akan hal ini, karena sudah memasangnya di blog dan bisa diputar saja sudah lumayan.

Namun ada hal terpenting bagi pengelola blog yang ingin memanjakan pembacanya sehingga keteraturan dan keserasian tampilan blog termasuk tata letak gambar atau video pun menjadi sangat perlu untuk ditertibkan.

Cara mengatur posisi video agar berada di tepi kanan atau kiri adalah sebagai berikut:

1. Pastikan memposting dalam mode HTML

2. Setelah meng-upload video di dalam posting blogger, akan didapat kode seperti ini :
<div class="separator" style="clear: both; text-align: center;">
<object width="320" height="266" class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="http://i.ytimg.com/vi/8hG9N4wpjvw/0.jpg"><param name="movie" value="http://www.youtube.com/v/8hG9N4wpjvw?f=user_uploads&c=google-webdrive-0&app=youtube_gdata" /><param name="bgcolor" value="#FFFFFF" /><embed width="320" height="266" src="http://www.youtube.com/v/8hG9N4wpjvw?f=user_uploads&c=google-webdrive-0&app=youtube_gdata" type="application/x-shockwave-flash"></embed></object></div>

3. Perhatikan Kode yang berwarna merah, jika menginginkan letak video di kiri artikel, ubah kode tersebut menjadi seperti ini:
<div class="separator" style="float:left;text-align:left;margin-right:10px">

4. Apabila menginginkan letak video di kanan artikel, ubah kodenya menjadi seperti ini:
<div class="separator" style="float:right;text-align:right;margin-left:10px">

Cara membuka situs terblokir pada modem geemobile

Situs tertentu menurut provider Indonesia dianggap perlu untuk dilakukan pemblokiran. Alasannya adalah untuk menjaga keamanan, menghindari computer dan penggunanya dari bahaya entah itu virus, scam, spam atau bahaya kebobrokan moral bangsa. Langkah memblokir situs tertentu di satu sisi berguna sekali agar terhindar dari hal-hal yang tidak diinginkan, di sisi yang lain juga perlu membuka situs yang terblokir. Tapi perlu diingat bahwa membuka situs tertentu yang terblokir adalah untuk kepentingan hal-hal positif.

Ketika seseorang mengakses internet menggunakan modem, biasanya oleh ISP telah dipasang filter untuk memblokir situs-situs yang dianggap berbahaya. Hal ini pernah dialami penulis sewaktu masih menggunakan USB modem CDMA dengan merek gee mobile ternyata terhadap situs anu tidak dapat dibuka. Ini hanya untuk ujicoba saja untuk memastikan aman tidaknya akses internet pada laptopku dimana di dalam keluarga masih ada anak di bawah umur.

Lantas bagaimana cara membukanya agar situs tersebut terbebas dari pemblokiran modem gee mobile, berikut ini tipsnya:

1. Tancapkan modem gee mobile anda
2. Klik settings
3. Klik DUN Profile, Klik New
4. Dalam hal ini saya memakai kartu Smartfren, maka isiannya sebagai berikut:
• Profile name : Anu (bisa diganti dengan kata yang lain)
• APN : (dikosongkan saja)
• User name : smart
• Password : smart
• Dial number : #777
5. Setelah itu klik Advanced settings
6. Pada DNS Setting, klik Static, lalu isi 4 kotak yang atas dengan angka 8888, dan 4 kotak yang bawah dengan 8844.

7. Lalu klik tombol confirm, kemudian klik save
8. Dan terakhir klik Set as default
9. Lanjutkan dengan mengklik tombol Connect

Catatan:
Penelusuran Google kini telah dilengkapi filter penelusuran, sehingga untuk bisa mengakses situs tertentu, tidak bisa dilakukan melalui kotak penelusuran melainkan harus mengetikkan alamat url situs tersebut di kotak address. Sehingga anda harus tahu dulu alamat situs yang akan akan dibuka.

Menghapus kode readmore yang tidak perlu

Readmore istilah kerennya adalah baca selengkapnya, yaitu sebuah link untuk memenggal paragraf. Postingan tidak ditampilkan secara penuh melainkan hanya sebagian kalimat saja yang muncul di halaman depan. Cara menggunakannya tidaklah sulit karena pada posting editor telah tersedia tombol untuk memenggal paragraf dan readmore pun segera tercipta.

Dengan kepintarannya banyak ahli blogger telah berhasil membuat readmore menjadi otomatis. Readmore yang seperti ini biasa disebut dengan auto readmore. Kalau sobat blogger mau tau apa itu auto readmore, baca saja disini (http://brugkembar.blogspot.com/2011/10/sukses-membuat-auto-readmore-atau-baca.html ). Namanya saja otomatis sehingga kita tidak perlu lagi repot-repot menentukan di kalimat mana dalam sebuah paragraf yang akan dipenggal.

Jika anda salah satu dari banyak pemilik blog yang memasang auto readmore, berarti readmore asli bawaan blogger yang masih melekat di dalam template menjadi mubazir keberadaannya. Oleh karena itu daripada tidak terpakai lebih baik dihapus saja. Penghapusan kode readmore yang tidak terpakai ini berdasarkan pengalaman saya tidak berakibat fatal karena sudah tergantikan oleh kode auto readmore.

Kode readmore yang tidak perlu tersebut adalah :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Karena sekarang sudah tidak lagi memerlukan kode readmore, dan sudah diganti dengan kode auto readmore, maka tinggal dihapus saja kode tersebut di atas. Selamat belajar dan mencoba, semoga berhasil.

Cara hilangkan link pada gambar header

Link pada gambar header  menurutku sangat mengganggu karena ketika kita sedang asik membaca postingan dan tanpa sengaja gambar header tersebut kena klik, maka browser akan mengembalikannya pada home page blog.  Sementara itu artikel belum sampai selesai dibaca, sudah kembali lagi ke halaman depan. Ini menyebabkan rasa tidak nyaman bagi pengunjung yang sedang asik membaca.

Untuk itu link yang menempel pada gambar header harus segera dihilangkan, caranya adalah sebagai berikut :

1. Masuk blogger
2. Desain
3. Edit html
4. Back-up template (Download Full Template)
5. Centang (Expand Widget Templates)
6. Cari kode   <div id='header-inner'>

Kode lengkapnya seperti ini :

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Pusatkan pandangan anda pada kode yang berwarna merah, lalu ganti kode tersebut dengan div

Jadi kodenya menjadi seperti ini :

<div id='header-inner'>
<div style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</div>

Setelah semua langkah dilaksanakan, jangan lupa disimpan / save.
Kini anda memiliki gambar header yang tidak ber-link sehingga bila diklik tidak akan kembali lagi ke halaman depan blog anda.

Cara Hilangkan Sidebar template blogger designer

Sekedar berbagi buat yang suka edit template blogger, kali ini saya ingin berbagi kebahagiaan atas kesuksesan eksperimen yang telah saya kerjakan dalam membangun blog roomantik. Merupakan kebanggaan tersendiri bagi saya manakala berhasil membuat blog dengan tampilan unik dan elegan. Blog itu mempunyai tampilan pada halaman posting berbeda dengan halaman utama blog.

Ternyata rahasianya adalah terletak pada teknik menghilangkan sidebar. Artinya pada blog tiga kolom dengan susunan sidebar-posting-sidebar, dapat dihilangkan sidebarnya sehingga halaman posting menjadi lebih lebar. Ketika berada di home, tiga kolom sedangkan setelah masuk halaman posting menjadi 2 kolom, unik bukan..?

Teknik menghilangkan sidebar blogger ada beberapa pilihan, silahkan dicoba barangkali script ini dapat membantu anda untuk menghilangkan sidebarnya. Tapi perlu diketahui pula bahwa setiap template memiliki koding yang berbeda. Dalam hal ini saya memakai template bawaan blogger, dan umumnya blogger template designer memiliki kode seperti yang saya tulis di bawah ini.

Cara untuk menghilangkan sidebar yaitu dengan mengkopi paste script berikut ini lalu pasangkan tepat di bawah kode ]]> </b:template-skin> dan jangan lupa disimpan. Eit hampir lupa, sebelum mengedit html sebaiknya dibackup dulu templatenya demi keamanan.

Menghilangkan Sidebar Kanan dan kiri

<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Menghilangkan Sidebar Kanan

<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-right-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Menghilangkan Sidebar Kiri

<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .column-left-outer {
display: none !important;
}
</style>
</b:if>

Sukses membuat auto readmore atau baca selengkapnya

Kemaren saya sempat dipusingkan sewaktu membuat posting, sudah capek-capek mengetik setelah dipubish eh.. jadi berantakan tampilan home nya. Lalu kuedit lagi postingan tersebut karena read more atau dalam bahasa kita disebut Baca selengkapnya. Tentu hal ini sangat menyita waktu harus tau dulu di bagian mana paragraf itu hendak dipenggal.

Memang sih dalam blogspot sudah disediakan preview namun sering kali tampilanya berbeda dengan tampilan sesungguhnya. Apalagi bila dalam postingan disertakan readmore, pasti ketika dipreview yang muncul adalah tampilan posting satu halam penuh, sedangkan readmorenya tidak nampak.

Dalam hati terbesit pemikiran apakah ada cara lain agar ketika membuat artikel kita tidak perlu lagi memasang readmore.? Ternyata jawabannya ada, yaitu dengan jalan meletakkan script auto readmore ke dalam template. Sehingga secara otomatis paragraf akan terpenggal sendiri kalimatnya apabila telah menempati ruang posting yang telah kita seting lebar dan tingginya.

Banyak veri auto readmore tapi dari beberapa sumber yang pernah kubaca dan kucoba, script inilah yang paling cocok diterapkan ke dalam template blogku.

Karena keberhasilan tersebut maka patut disyukuri bagi saya untuk sharing dengan anda di blog ini. Mudah-mudahan dapat berguna bagi kita semua.

Auto readmore dapat dipasang melalui langkah berikut ini :
Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script -http://brugkembar.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://brugkembar.blogspot.com- End -->

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more -http://brugkembar.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://brugkembar.blogspot.com- End -->

Pengaturan lainnya :
Ganti Read More >> dengan kata-kata yang diinginkan misalnya “Baca selengkapnya”.
Apabila menginginkan kalimatnya rata kanan dan kiri, lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:
<div expr:id='&quot;summary&quot; + data:post.id'>
Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
sehingga menjadi:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

Semoga berguna, and happy blogging.

Seluruh Halaman post tanpa sidebar

Tips ini berlaku untuk template blogger baru yaitu untuk menghilangkan sidebar di setiap postingan, dengan catatan :

1. Apabila template anda terdiri sidebarkiri-posting-sidebarkanan (3 kolom), maka sidebar kanan jadi hilang.
2. Jika template anda terdiri dari post-sidebarkanan, maka yang hilang juga sidebar kanannya.

Yang saya tulis disini adalah kode pada template dari salah satu blog saya yang menggunakan template asli bawaan blogger. Kalau anda memakai template yang sudah dimodif tentu kodenya beda dengan apa yang saya tuliskan. Dan bila ada kesamaan, maka suatu keuntungan bagi anda karena saya menulis tips Seluruh Halaman post tanpa sidebar ini sudah melalui ujicoba berulang kali. Jadi kemungkinan berhasilnya lebih banyak.
Baiklah langsung saja kita mulai cara agar Seluruh Halaman post tanpa sidebar :

1. Copy kode warna merah berikut ini dan pasang di bawah kode]]> </b:template-skin>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>.main-inner .columns { padding-right: 0; } .main-inner .fauxcolumn-center-outer { right: 0; _width: expression(this.parentNode.offsetWidth - parseInt(&quot;$(main.column.left.width)&quot;) + &#39;px&#39;); } .main-inner .fauxcolumn-right-outer { width: 0px; } .main-inner .column-right-outer { width: 0px; margin-right: 0; display: none; } </style></b:if>

2. Save, atau simpan

Kini anda memiliki blog yang Seluruh Halaman postingnya tanpa sidebar
Selamat berkarya.

Penulisan internal link yang baik

Anda tentu sering menjumpai link rujukan dalam sebuah blog, dimana link tersebut mengarah kepada artikel serupa dalam blog tersebut. Link rujukan itulah yang dinamakan internal link.

Contohnya link yang diawali dengan kata "baca:" dan diikuti dengan link ke postingan yang lain tetapi masih dalam satu blog.

Contoh penulisan kode internal link yang kurang baik:
<a href="http://brugkembar.blogspot.com/2011/06/hiasi-header-dengan-floating-unique.html">Header dengan unik topnav</a>

sedangkan kode penulisan internal link yang baik adalah sebagai berikut:
<a href="/2011/06/hiasi-header-dengan-floating-unique.html">Header dengan unik topnav</a>

Pada URL kita tidak perlu menyertakan http://brugkembar.blogspot.com.

Dengan penulisan seperti ini otomatis link akan mengikuti akar domain yang berbeda jika kita suatu saat mengganti domain. Contoh kode penulisan untuk home:
<a href="/">Home</a>

Pada URL hanya dituliskan / yang berarti alamat link adalah akardomain ditambah /. Jika domain blog tempat link tersebut adalah http://brugkembar.blogspot.com, maka tujuan link menjadi http://brugkembar.blogspot.com/, jika domain tempat link tersebut adalah http://google.com, maka tujuan link adalah http://google.com/

Cara penulisan seperti ini adalah cara yang baik dan efektif, karena  jika kita suatu saat nanti mengganti domain karena suatu alasan, maka link otomatis mengikutinya, dan kita tidak harus mengeditnya satu persatu.

Hiasi header dengan The floating unique topnav

Mungkin sobat bloger bertanya apa itu the floating unique topnav, yaitu sebuah tab navigasi yang dipasang diatas header. Sebenarnya aku bingung mau diberi nama apa navigasi ini, namun demikian sobat boleh menyebutnya apa saja terserah anda, yang pasti menurutku tab ini unik dan lain dari pada yang lain.
Penasaran? Lihat demonya.

Lihat Demo

Sudah jelas kan..? Kenapa dikatakan The unique karena tab navigasi ini sungguh berbeda dari navbar yang telah ada sebelumnya. Dengan warna dasar hitam dan efek hover jika disorot mouse akan menampilkan gambar bintang berwrna ungu yang berkedip. Di bagian tepi kanan sengaja saya pasang kaligrafi Basmalah sebab saya bangga sebagai orang Islam.

The floating unique topnav ini takkan lenyap dari pandangan mata pengunjung meski scroll mouse diputar ke atas atau ke bawah, sehingga sangat menarik bila dipasang di template blog.

Satu lagi keunikan yang dimiliki The floating unique topnav yaitu pada border-bottom diberi sentuhan warna kuning dengan efek blur yang akan menyala bila templatenya berwarna gelap (seperti hitam pekat misalnya).

Bagaimana cara memasang The floating unique topnav ke dalam template?
Ada syarat yang harus anda penuhi yakni Navbar bawaan blogger harus dilenyapkan, kenapa harus dihapus karena bila navbar blogger masih terpasang akan tertutup oleh The floating unique topnav tersebut. Sehingga keberadaan navbar blogger menjadi mubadzir. Mengenai bagaimana cara menghapus navbar blogger saya anggap anda telah dapat melakukannya.

Syarat yang lain adalah bahwa anda disarankan memakai template dengan warna dasar gelap agar tampilannya lebih kontras dan menarik. Mengenai syarat ini sebenarnya bukanlah syarat yang mutlak, sebenarnya template gelap ataupun terang tidaklah menjadi persoalan serius dengan catatan anda tau kode warna.

Nah itulah sedikit gambaran tentang The floating unique topnav.
Bila anda tertarik dan berkeinginan untuk memilikinya, silahkan download kode dan cara pemasangannya.

Download kode The floating unique topnav

Ganti Favicon blog sekarang lebih mudah

Sobat blogger tentu sudah tau yang namanya icon, kalau belum tau saya jelaskan sedikit apa itu icon dan bagaimana cara mengganti icon blogger.
Icon atau Favicon adalah sebuah gambar kecil sebagai logo yang memberikan cirri khusus pada sebuah web blog.

Agar lebih jelas jika sobat menggunakan browser firefox, di bagian address bar di situ ada sebuah logo kecil yang berada di sebelah kiri alamat url yang sedang dibuka atau dikunjungi.

Gimana, sudah jelas…..?
Favicon bawaan blogger sebelum diganti bergambar huruf B berwarna orange. Sebetulnya tidak usah diganti juga tidak apa-apa, Cuma menurut saya akan lebih asyik lagi jika diganti dengan gambar icon milik sendiri karena ada rasa kebanggan tersendiri.

Dulu ketika pertama kali aku membuat blog begitu susahnya mengganti favicon diperlukan kode yang sedikit rumit serta harus mengupload gambar yang akan dijadikan favicon. Belum lagi harus mengobok-obok template html yang sangat menyita waktu.

Kini Blogger lebih maju, banyak kemajuan serta fitur-fitur yang sangat mudah diaplikasikan sehingga bagi pemula yang baru mengenal blogpun tidak akan mengalami banyak kesulitan seperti dulu.
Salah satu kemajuan blogger dalam melayani cliennya adalah tersedianya widget untuk mengganti favicon. Kita bisa dengan mudah mengganti favicon dengan gambar apa saja yang kita inginkan.

Namun ada satu syarat yang tidak boleh dilupakan, yakni gambar harus berukuran maksimal 1.0 kb. Format gambar yang didukung adalah gambar jpg, gif, png, ico. Sangat disarankan memakai gambar dengan format ico.

Nah kalau persyaratan sudah dilengkapi, saatnya kita mengganti icon blog.
1. Pertama harus masuk ke draft blogger (http://draft.blogger.com)
2. Lalu klik Design --> Page elements
3. Setelah itu lakukan sesuai petunjuk gambar seperti di bawah ini :

Kini Favicon sudah berubah setelah diganti dengan gambar icon milik sendiri

Begitulah cara mengganti icon blog dengan gambar kita, lebih mudah dan cepat.

Tutorial membuat Album Lagu di Ziddu

Taukah anda bahwa Ziddu itu mempunyai fitur untuk membuat Album? Kalau belum tau pada kesempatan ini saya ingin share kepada anda tentang cara membuat album lagu ziddu audio. Bukan hanya lagu yang dapat kita buat album, foto dan juga video juga bisa dibikin album.
Tetapi pada postingan ini saya hanya akan membahas tentang album lagu ziddu.

Pertama anda harus punya akun ziddu, kalau belum ya ndaftar dulu. Setelah anda mempunyai akun di ziddu kemudian upload lagunya ke ziddu.

Sedangkan untuk membuat album caranya sebagai berikut :
1. Login ke ziddu
2. Klik Albums
3. Klik Audio Album

4. Pada Create Audio Album, ketik Nama Album (contoh: Lagu Tegalan)
5. Klik Create

6. Beri tanda checklist pada file audio yang sudah anda upload

7. Klik create Album

8. Sampai di sini anda sudah selesai membuat album
9. Untuk membuka dan memainkan lagu dalam album tersebut, tinggal klik album yang baru saja selesai dibuat.

Nah sekarang saatnya anda menikmati Lagu dalam Album Ziddu yang sudah saya buat. Penasaran seperti apa tampilan albumnya…?
Makanya Klik disini atau disitu biar anda tau tampilan album ziddu

Efek Thumbnail hover preview pada image

Efek Thumbnail hover preview pada image, adalah sebutan berdasarkan pemahaman saya sendiri.  Maksudnya adalah efek preview yang memunculkan gambar ketika disorot mouse (hover) dengan ukuran lebih besar dari ukuran sebelumnya.

Tetapi dalam kondisi normal / tidak dalam posisi hover, hanya menampilkan gambar berukuran kecil. Lihat gambar di bawah ini :

Atau bila ingin melihat hasil jadinya, klik Live Demo.

Live Demo

Cara pembuatan Efek Thumbnail hover preview pada image :
Copy paste kode di bawah ini ke dalam gadget html atau bisa juga postingan pada postingan html :

<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIeVTMdxFE8N_srUxZ7yCnBXi8u5tWyQ5nZoF4X-Hl6Gng79V2IN0qfL3zzsuULGSHmmD6HhUJCSoqTxwZtYO0Me6T9rd6lK7vj1NcF4yEh-nLjtY2FmDmd3F8bBP8t0pyWMGoNau-F-a/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIeVTMdxFE8N_srUxZ7yCnBXi8u5tWyQ5nZoF4X-Hl6Gng79V2IN0qfL3zzsuULGSHmmD6HhUJCSoqTxwZtYO0Me6T9rd6lK7vj1NcF4yEh-nLjtY2FmDmd3F8bBP8t0pyWMGoNau-F-a/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwW7sYqVFOZjRlv3758Y9jv0C1JtJ6yHJ9hOlikbIQF-uJQO3qhTyCItff1AMQChLJYDZPx4XTxkjAd-sOWiwbwan0vHQR4iNuF0YW3sB1XtAJYI_q0nSXqQNxEWKPjyznvVkix3a5wnbn/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwW7sYqVFOZjRlv3758Y9jv0C1JtJ6yHJ9hOlikbIQF-uJQO3qhTyCItff1AMQChLJYDZPx4XTxkjAd-sOWiwbwan0vHQR4iNuF0YW3sB1XtAJYI_q0nSXqQNxEWKPjyznvVkix3a5wnbn/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EEnb9ZGz1b-t7ykl_12lZvLQ0lsIonym3b2rpQHZ3A7Gkwc7PcoYqeOzmNwgKT5hXZL_kxGA8QBmELq3vkRJL72RGA2FNLWzYFYk_qNNS9X1XpYJSkPjHGRsX0OeRAxpMdJamygSkmKo/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EEnb9ZGz1b-t7ykl_12lZvLQ0lsIonym3b2rpQHZ3A7Gkwc7PcoYqeOzmNwgKT5hXZL_kxGA8QBmELq3vkRJL72RGA2FNLWzYFYk_qNNS9X1XpYJSkPjHGRsX0OeRAxpMdJamygSkmKo/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>

Catatan:
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba.

Membuat Halaman Penuh tanpa sidebar Blogger Baru

Setelah berputar-putar mencari tips tentang cara membuat halaman penuh tanpa sidebar pada template baru blogger, akhirnya kudapatkan tipsnya orang bule.  Dan ternyata setelah kupraktekkan 100 persen berhasil.
Dalam melakukan percobaan saya memakai template watermark new template blogger, dengan sidebar di kiri kanan posting.

Hasil percobaan bisa dilihat di blog saya yang lain berikut ini silahkan diklik:

1. Sidebar masih ada di kiri kanan halaman posting
2. Sidebar kanan hilang, tapi yang sebelah kiri masih ada

Berikut ini caranya :

1. Membuat halaman penuh tanpa sidebar  Pada template dua kolom  Awesome Inc dan Watermark
Tambahkan kode ini tepat di atas kode </head> template anda :

<b:if cond='data:blog.url == "http://blogENTE.blogspot.com/p/page.html"'> <style type='text/css'> .main-inner .columns { padding-right: 0; } .main-inner .fauxcolumn-center-outer { right: 0; _width: expression(this.parentNode.offsetWidth - parseInt("$(main.column.left.width)") + 'px'); } .main-inner .fauxcolumn-right-outer { width: 0px; } .main-inner .column-right-outer { width: 0px; margin-right: 0; display: none; } </style> </b:if>

Setelah itu, klik save.
2. Membuat halaman penuh tanpa sidebar  Pada template Picture Window
   Tambahkan kode ini tepat di atas kode </head> template anda :
   

   <b:if cond='data:blog.url == "http://blogENTE.blogspot.com/p/page.html"'>
   <style type='text/css'>
   .main-inner .columns {padding-right: 220px;}
   .main-inner .fauxcolumn-center-outer {right: 220px;}
   .main-inner .fauxcolumn-right-outer {width: 220px;}
   .main-inner .column-right-outer {margin-right: -220px; width: 220px;}
   .main-inner .column-right-inner table.section-columns td
   {display: none;}
   .main-inner .column-right-inner table.section-columns td.first
   {display: inline; width: 100%;}
   #sidebar-right-2-2 {display: none;}
   </style>
   </b:if>

   Yang terakhir, klik save.
   

Harap diperhatikan :

1. http://blogENTE.blogspot.com/p/page.html silahkan anda ganti dengan URL POSTING yang akan dibuat penuh halamannya tanpa sidebar.
2. Kalau anda sudah berhasil Membuat Halaman Penuh tanpa sidebar Blogger Baru jangan lupa ucapkan syukur Alkhamdulillah

Terima kasih.
Wassalam

Cara ekstrim Menghapus Navbar blogspot

Bagi anda yang tidak suka dengan kemunculan navbar blogspot dan berkeinginan untuk menghapusnya secara permanen, berikut ini caranya :

1. masuk blogger
2. cari kode <body> dan tambahkan kode di bawah ini tepat di atasnya, lalu save.

<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>

Bila muncul pesan seperti gambar di bawah ini, klik DELETE WIDGETS lalu save.

Begitulah cara yang ekstrim menghapus navbar di blogspot. Dengan hilangnya navbar dari hadapan kita akan menambah bagus tampilan blog.

Cara Mengganti Tulisan Anonymous Komentar Blogspot

Cara Mengganti Tulisan Anonymous pada Komentar Blogspot adalah seperti ini :

1. Cari di dalam template anda kode yang seperti ini :
   

   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
   <data:comment.author/>
   </b:if>

2. Fokuskan penglihatan anda pada kode yang diberi warna merah lalu ganti dengan kata-kata yang lain misalnya: "Orang Asing". atau apalah sesuka anda.
3. Terakhir jangan lupa Save.

Kini Anonymous sudah berganti nama menjadi nama "Orang Asing".

Membuat Efek bayangan pada gambar diluar posting

Efek bayangan pada gambar diluar posting yang saya maksudkan disini adalah memberi efek bayang-bayang gelap ditepi gambar yang terpasang bukan di halaman posting melainkan gambar yang dipasang diluar area posting.  Misalnya gambar yang dipasang pada widget.  Tips ini pada prinsipnya sama dengan postingan saya dulu yang berjudul “Cara membuat Efek bayang pada gambar”

Tapi tips tersebut hanya berlaku untuk gambar yang ada di dalam postingan, efek bayang akan muncul secara otomatis setiap kita mengupload gambar ke dalam posting blog.

Bila ingin memberi efek bayang pada gambar yang dipasang di tempat tertentu atau luar posting, misalnya di dalam widget maka caranya tinggal copy saja kode berikut ini ke dalam widget html.
Ini kodenya :

<style type="text/css">
.redshadow {
-webkit-box-shadow:4px 2px 7px #f46d17;
-moz-box-shadow: 4px 2px 7px #f46d17;
box-shadow : 4px 2px 7px #f46d17;}
</style>
<img  class="redshadow"  src="URLGAMBAR.jpg"  />

Lihat contohnya di halaman demo:
LIHAT DEMO

Memasang Widget Informasi Penulis Blog

Sebetulnya Widget Informasi Penulis Blog ini sudah banyak diposting oleh blog-blog yang menyajikan tutorial blogger. Asal anda rajin berselancar di internet dan selalu mengikuti perkembangan blog-blog yang senior, maka Widget Informasi Penulis Blog pun akan dengan mudah kita dapatkan.

Namun demikian tidak ada salahnya saya postingkan Widget Informasi Penulis Blog ini selain sebagai jawaban dari teman blogger yang request cara bikin Widget Informasi Penulis Blog sekaligus sebagai koleksi pribadi.

Request dari sobat Fikri ini saya abadikan dalam gambar berikut ini:

Nah untuk cara membuatnya :

1. Masuk (Login) Blogger
2. download full template
3. Klik Expand Widget Templates
4. Cari kode ]]></b:skin>
5. Letakkan kode berikut, di atas kode  ]]></b:skin>
   

   /* Informasi Penulis*/
   #authorinfo{margin:0 0 5px;padding: 4px;background: #eee;background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));border: 1px solid #fff;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-webkit-box-shadow: #600 0 2px 12px;-moz-box-shadow: #600 0 2px 7px;width:auto;text-shadow:0 1px 0 #FFFFFF;}
   #authorinfo .informasi{line-height: 16px;margin:0;padding:2px;height:80px;}
   #authorinfo .informasi a {text-decoration:none !important;}
   #authorinfo img {float:left;margin: 2px 8px 2px 2px;padding:0;width:72px;height:72px;border:2px solid #999;}
   #authorinfo .informasi ul, #authorinfo .informasi ul li {margin:0;padding:0;list-style-type:none;}

6. Kemudian cari kode <div class='post-footer-line post-footer-line-3'>
7. masukkan kode berikut di bawah kode <div class='post-footer-line post-footer-line-3'>
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='authorinfo'>
   <div class='informasi'>
   <a href='LINK PROFILE ANDA'><img src='LINK GAMBAR PROFILE ANDA'/></a>
   <ul>
   <li>Artikel ini ditulis oleh <a href='LINK PROFILE ANDA' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
   <li>Diterbitkan pada hari : <b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><a expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if></b:if></li>
   <li>Dalam kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></li>
   <li>Telah dibaca sebanyak <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if> kali meninggalkan komentar</li>
   <li>Ayo Berlangganan artikel blog <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='LINK FEED RSS ANDA' target='_blank' title='Berlangganan Artikel via RSS Feed'>RSS Feed</a> atau <a href='LINK FEED EMAIL ANDA' target='_blank' title='Berlangganan Artikel via Email'>Email</a></li>
   </ul>
   </div>
   </div>
   </b:if>

8. Simpan dan lihat hasilnya

Jika berhasil maka hasilnya seperti gambar di bawah ini :

Silahkan Edit sendiri Tulisan yang berwarna biru

Membuat Tulisan Miring Stop Narkoba CSS3

Hari ini kepala terasa berat dan sakit bila digerakkan, bukan karena akibat mengkonsumsi Narkoba melainkan karena posisi tidurnya yang miring.  Terus terang sampai detik ini saya belum pernah merasakan kenikmatan semu Narkoba. Dan mudah-mudahan jangan sampai terjerumus Narkoba seperti yang sedang melanda para artis kita.

Ternyata ada hikmahnya rasa sakit di kepala ini yang maunya miring terus, yakni timbul inspirasi untuk mengabadikan peristiwa ini di catatan blogku.  Karena lagi santer-santernya berita di media massa Artis yang terjerat Narkoba makanya saya beri judul Membuat Tulisan Miring Stop Narkoba CSS3.

Nah sekarang kita mulai saja membuat tulisan miring :
Pada eksperimen ini saya menggunakan area posting blog sebagai media untuk membuatnya.  Jadi nantinya tulisan miring tersebut akan muncul di halaman posting.
Kode lengkapnya seperti ini :

<style type="text/css">

.narkoba-miring {
transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);

font-size: 120px;
text-align:center;
color: #d60204;
text-shadow: 2px 2px 2px #333;
filter: dropshadow(color=#333, offx=2, offy=2);
font-weight:bold;
font-style:italic;
font-family:georgia;}

</style>

<span class="narkoba-miring">STOP NARKOBA....!</span>

Copy paste semua kode tadi ke area posting (mode HTML bukan Compose) setelah itu terbitkan atau Publish Post.

Sekarang lihat hasilnya di halaman demo
Lihat Demo

Keterangan:

1. Teks yang berwarna merah adalah kode untuk membuat tulisan jadi miring
2. Dan yang berwarna biru adalah kode untuk mengatur warna, ukuran, jenis font, dan efek bayangan huruf.
3. STOP NARKOBA....! bisa diganti dengan tulisan yang lain.

Sekian dulu tutorial ini soalnya aku mau meluruskan dulu kepalaku yang miring.

Gambar miring setelah disorot

Masih seputar gambar miring, kalau kemaren aku bikin tips membuat gambar miring kali ini gambar tersebut akan saya buat bergerak miring ke kanan tujuh derajat. Dalam keadaan normal gambar tetap pada posisi lurus, akan tetapi bila mouse kita dekatkan pada gambar tersebut akan bergerak memutar searah jarum jam dengan kemiringan 7 derajat.

Entah kenapa akhir-akhir ini rey suka memposting artikel yang miring-miring, awalnya sih enggak suka tapi lama-lama bosen juga sama yang lurus dan setelah memakai gaya miring eh… ternyata gaya miring itu lebih enak lho (wah rey mulai nglenatur ngomongnya, jangan-jangan otaknya mulai miring neh?..)

Oke lah kalau begitu kita langsung ke cara membuatnya,
Ini kode yang dipakai untuk membuat gambar miring setelah disorot mouse :

Kode CSSnya :

.rotreys {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}

.rotreys:hover {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}

Dan ini kode HTMLnya:
Bila memakai link:

<a class="rotreys" href="Your Link"><img border="0" src="Your Image Link"/></a>

Bila tanpa link:

<span class="rotreys"><img border="0" src="Your Image Link"/></span>

Keterangan :

• Hover adalah keadaan saat kursor menyentuh/berada di atas objek (dalam posting ini adalah image).
• 7deg adalah nilai rotasi untuk rotasi 7 derajat searah jarum jam dan bisa diubah sesuai keinginan.
• Angka bisa diberi nilai negatif (-) untuk rotasi berlawanan arah jarum jam, misal -7.
• Your Link diganti dengan link tujuan (jangan lupa dengan http:// di depan)
• Your Image Link diganti dengan link image (jangan lupa juga dengan http:// di depan)

Contoh penerapan di dalam postingan :
Copas kode di bawah ini ke dalam postingan blog anda, lalu anda akan melihat hasilnya seperti pada demo berikut ini :

Lihat Demo

<style type="text/css">
.rotreys {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.rotreys:hover {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
</style>
<span class="rotreys">
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLvl3c6tgHr2WSqYo_2pAOPIq1ETI6xOkv5svu0xL32Hhk8rDfmNRxh3OWOv25ALXYNei6DSZb1sPrw-R2cdCFFmWVXDQ0lN8N6DGxGRZ5tD-YzxH4UuFvYpSCVMjKQHrSKUYUbYn8KQ/s320/pelampungrey.jpg" alt="efek_miring" width="320" />
</span>

Tips membuat gambar miring

Kalau biasanya gambar yang terpasang di blog lurus kini gambar miring pun bisa diciptakan menggunakan kode css. Meskipun saya sendiri kurang suka dengan hal-hal yang miring tapi kalau untuk sekedar koleksi sekaligus buat sensasi maka kuberanikan diri untuk memajang fotoku di blog.

Tapi sayangnya ketika memasang kurasa sudah lurus ternyata masih miring juga. Maklumlah tak ada seorang pun membantu memasangkan gambar fotoku hingga akhirnya apa boleh buat biar pun gambarnya miring asal orangnya enggak ikut miring.  Lagian siapa yang mau bantuin masang lha wong waktunya tidur kok malah sibuk sendiri..(wkwkwk)

Baiklah langsung kepada pokok cerita,
Penulisan kode css untuk membuat gambar miring tersebut adalah sebagai berikut :

.miring {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}

Cara penulisan Tagnya seperti ini:

<div class="miring">KODE GAMBAR</div>

Bila ingin memasukkan gambar miring ini ke dalam postingan blog maka penulisannya seperti berikut ini:

<style type="text/css">
.miring {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
</style>

<div class="miring">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_SYMwrhjRa_LLbpjKA9yCJuG2-htNJi-QvQ7P45HLolfnI-LdJIDf8cnmRYhXugnuSGxeRI8pYkn2STSwJDcDj8xGmQK9Q8ArPZYwnd4EbGmnyg5Ph5rm7YFeEGGNPyHPqEhpEwYsyE8/" width="245" /></div>

Bila diposting maka anda atau siapa saja akan menikmati gambar miring di postingan blog seperti yang ada pada halaman demo ini:
LIHAT DEMO

Catatan:
Kemiringan dapat diatur dengan cara merubah angka -10 dengan angka sesuai keinginan anda.

Salam blogger.