loading...
/ Penelusuran Arsip Posting

Blogger Copy Template Release

oleh // 23 komentar

Sudah lihatkan format dan gambaran tentang blog ini?  Kira-kira bagaimana menurut pendapat kamu ?  bagus, lumayan bagus, atau hampir bagus.  Lho...lho... kok bagus semua pilihannya.  Apabila kamu tertarik untuk mencoba template ini, maka akan OB tunjukkan link downloadnya.  Tapi sebelum kamu mendownload, mari kita review fitur-fitur yang diadopsi oleh "Blogger Copy Template" ini.

Image Template

Blogger Copy Template support :

  • Meta Tag SEO friendly.
  • Favicon included.
  • Horizontal navigation & search box.
  • Bottom 3 column widget ready.
  • Highlight author comments.
  • Click the label showing the post title only.
  • Paralel date header with comment link.
  • Breadcrumbs included.

Sederhana bukan? Belum ditambahkan macam-macam script agar kamu yang mengadposi template blogger ini lebih leluasa untuk memodifikasinya. Berikut gambaran data waktu download (waktu halaman blogger copy template tampil penuh di layar monitor)  setelah dianalisa melalui Website Optimization.com (jelas cepat, karena belum banyak postingnya).

Download Times

Hampir kelupaan, ini link downloadnya dijamin cepat tanpa ada banner/link iklan yang melingkupinya.

Versi demo

Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".  Cukup ganti link copyright-nya saja, karena letaknya sudah OB optimasi yakni penutup dari seluruh content blog (paling bawah pojok kanan).

[ Baca selengkapnya ]

Membuat "Back to Top"

oleh // 21 komentar

Ketika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.

Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (Blog Rudi Azhar) yang merupakan salah satu admin optimasi blog.

Cara I :

  • Tambahkan kode CSS berikut di atas kode ]]></b:skin>.
p.to-top {
font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;
font-size:90%;
float:right;
padding-right:10px; }

Keterangan :
  1. font-family = keluarga bentuk teks yang akan kita tampilkan.
  2. font-size = ukuran teks.
  3. float = peletakkan teks (kanan atau kiri)
  4. padding-right = jarak antara teks dengan bidang sebelah kanan.
  • Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.
  • Cari kode yang menunjukkan awal footer, seperti : <div class='footer-wrapper'>, <div class='footer'>, <div id='footer-wrapper'>, <div id='footer'>, & sejenisnya.
  • Kemudian copas kode berikut di atasnya :
<p class='to-top'><a href='#to-top' title='back to top'>back to top</a></p>
  • Jangan lupa melakukan edit pada kode <body> menjadi <body id='to-top'>
  • Kemudian simpan template kamu.
Catatan :
  1. Untuk peletakkan back to top tidak harus di atas footer.
  2. Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.
  3. Blog demonya ada di utuharies.blogspot.com.

Cara II :
  • Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut & akan mengikuti scroll halaman.  Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("a[href*=#to-top]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
//]]>
</script>

Catatan :
Jquery di atas sudah dikompres (compress) menggunakan online YUI Compressor.

  • Letakkan jquery back to top tersebut di atas kode </head>
  • Tambahkan kode CSS berikut di atas ]]></b:skin>.
#back-to-top {right:20px;bottom:40px;position:fixed;}
  • Ganti kode <body> dengan <body id='to-top'>
  • Selanjutnya tambahkan kode berikut di atas kode </body>.
<div id='back-to-top'>
<a href='#to-top' title='Back to Top'><img alt='back to top' border='0' height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/></a>
</div>

Catatan :
  1. height = tinggi image
  2. width = lebar image
  3. Silakan ganti image (http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu (Kenapa image tidak muncul?).
  • Simpan template.

Selamat membuat back to top...
[ Baca selengkapnya ]

Fitur-fitur baru pada Blogger

oleh // 20 komentar

Akhirnya blogger menampilkan banyak fitur-fitur baru untuk optimasi pengguna yang menggunakan blog di blogspot.
Kali ini saya akan membeberkan fitur-fitur apa saja yang telah disediakan oleh blogger :

1. Template Designer
Sebuah fitur yang sangat luar biasa ditambahkan ke blogger yang memungkinkan para blogger untuk membuat tema yang indah untuk blog mereka melalui program tunggal. fitur ini dapat dibaca di Blogger.buzz.


2. New sharing buttons
Pilihan ini adalah pilihan lain yang baru-baru ini ditambahkan. Sekarang kamu tidak perlu menambahkan tombol bookmark sosial untuk blogger secara manual. Ini dapat dengan mudah ditambahkan tetapi pergi ke PAGE ELEMENT>> BLOG POST.


3. Memasukkan Video Player
Blogger telah memperkenalkan sebuah pemutar video yang lebih baik untuk video yang menyerupai pemutar YouTube.



Player ini memungkinkan melihat video dengan full-screen. Player baru ini juga memiliki antarmuka pengguna yang lebih baik, seperti animasi seekbar (bar merah di sepanjang bagian bawah video) dan tombol yang lebih besar. Anda juga dapat klik kanan pada play untuk melihat informasi lebih lanjut tentang video, seperti kinerja pemutaran ("Tampilkan Video Info") atau jaringan kecepatan ("Take Speed Test").

Video yang akan Anda upload akan terlihat di blog Anda tetapi tidak di YouTube.

4. Pratinjau Posting yang lebih baik
Selain blogger desainer juga menambahkan opsi baru yang lebih baik pasca pratinjau. Sebelum Anda mempublikasikan posting, jika Anda ingin melihat posting Anda untuk melihat bagaimana sebenarnya akan tampak, tekan saja tombol Preview pada halaman Post Baru. Anda akan melihat jendela baru terbuka dengan tampilan yang lebih akurat.



5. Penambahan Amazon Associaties gadget.
Blogger juga terintegrasi dengan Amazon Associates. Anda bisa mendapatkan uang selain Google adsense.
Dengan fitur ini, Anda dapat mencari Amazon langsung dari editor Blogger dan menambahkan gambar dan link ke produk Amazon tepat ke posting Anda. pembaca Anda akan mendapatkan komisi Anda setiap kali mereka membeli produk yang Anda rekomendasikan, dan jika Anda belum memiliki account Amazon Associates, Anda dapat sign up secara gratis tanpa meninggalkan Blogger.

6. Blogger stats
Fitur ini telah saya jelaskan pada postingan sebelumnya tentang Statistik blog.



So, kenapa harus minder dengan yang lain, kalau fitur blogger sudah selengkap ini.
[ Baca selengkapnya ]

Mempercantik Search Buttom dengan CSS3

oleh // 11 komentar

Hampir setiap blog mempunyai tombol search untuk mempermudah pencarian pada blog kita, tapi tampilannya masih banyak yang terkesan standart aja, kalaupun ada yang bagus masih menggunakan image untuk mendukung tampilannya.
Kali ini saya ingin membuat search buttom hanya dengan menggunakan kode CSS tanpa image sama sekali.

Untuk postingan cara membuat search pada blog dapat anda lihat pada postingan sebelumnya.

kodenya HTMLnya seperti ini :

<form action='http://#/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value='Teks kamu...'/> <input id='searchsubmit' type='submit' value='Cari'/></form>

kamu ganti kode diatas dengan kode dibawah berikut ini :

<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<input class='searchbutton' type='submit' value='Go'/>
</form>

Langkah selanjutnya kamu harus membuat Kode CSS-nya biar tampilannya menjadi seperti gambar dibawah ini :

tombol search

Letakkan kode berikut ini diatas ]]></b:skin> :

/*- Search -*/
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #71787b;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #d5d5d5;
padding: 6px 6px 6px 8px;
width: 240px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Setalah itu coba kamu pratinjau blog kamu seperti apa tampilannya. Kode CSS diatas tampilannya akan sama persis dengan tampilan yang ada di blog Rudy Azhar, kamu bisa merubah warnanya yang saya kasih tanda merah dengan warna yang disesuaikan dengan template blog kamu.

Selamat berkreasi......
[ Baca selengkapnya ]
Langganan: Postingan (Atom)