Cara Menambah 3 Kolom Elemen Pada Blogspot/Blogger

Kali ini Permak Blogs mau kasih tau Cara Menambahkan Tiga Kolom Elemen Pada Blog kamu. Permak Blogs pernah menulis cara permak header menjadi dua bagian. Nah sekarang kita permak blogs kamu dengan menambah tuga element dimanapun kamu suka, mau dibawah header, diatas footer, diatas posting pokoknya sesuka kamu ya.. Tapi kali ini gue letakin di bawah header seperti gambar dibawah ini.

Caranya sperti dibawah ini:

1. Seperti biasa masuk ke account Blogspot kamu
2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. Cari kode ]]></b:skin> jika sudah dapat copy paste kode dibawah ini diatasnya. trus klik simpan template dulu.
   
   #box-main-container {
   clear:both;
   }
   .box-column {
   padding:0px 10px 10px 10px;
   border:1px dotted $bordercolor;
   }
   
   
   
3. Kemudian cari kode <div id='main-wrapper'> kalau sudah ketemu copy paste kode di bawah ini di atasnya. kemudian klik simpan.
   
   <div id='box-main-container'>
   
   <div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
   
   <b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
   
   
   </div>
   
   <div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
   
   <b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
   
   </div>
   
   <div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
   
   <b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
   
   
   </div>
   
   <div style='clear:both;'/>
   
   </div>
   
   
   
4. Nah silahkan cek dengan klik elemen halaman muncul deh tiga kolom element tinggal klik tambah untuk menambah widget. :)

Cattan : kalau mau mengatur besarnya ubah widthnya
Contoh hasilnya sperti dibawah ini :

Ok bagaimana mudah bukan... selamat mencoba ya...

Continue

Dua Gadget Baru di Blogger in Draft Blogspot

Blogger/Blogspot kembali mengeluarkan sesuatu yang baru di Blogger in Draft. Kali ini Blogger mengeluarkan Gadget baru yaitu Popular Post dan Blog's Stats. Popular Post digunakan untuk menampilkan Postingan - postingan yang paling popular di baca oleh pengunjung misalkan : Cara menambah banner iklan di Blogger :) .

Jadi kalau biasanya kita maen kode HTML lalu di taruh di gadgets html/Javascript atau malah langsung edit di edit HTML.. Ini bisa langsung ditambahkan dengan mudah.

Nah sama seperti Gadgets Popular Post, Gadgets Blog's Stats biasanya juga kita tambahkan dengan mencari gadget di web lain dengan cara copas kode HTML ke gadgets html/javascript. Kalau dengan gadget Blog's Stats sudah bisa di pilih langsung di daftar gadgets Blogspot/Blogger.

Gadgets Blog's Stats ini digunakan untuk menghitung jumlah pengunjung di blog kita. nah berikut cara menambahkan gadget diatas :

1. login ke http://draft.blogger.com , menggunakan account blogger seperti biasa.
2. Pilih tab Tata Letak/Rancangan
3. Dan pada tulisan Tambah Gadget maka akan muncul pilihan Gadget
   
4. Klik tanda (+) pada gadget Popular Post atau Blog's Stats
5. Jika di pilih Gadgets Popular Post maka akan muncul settingan seperti di bawah ini :Isi Title dengan judul , lalu pilih Most View sesuai keinginan, kalau mau menmpilkan image secara thumbnail dan potongan artikel cek pada Image Thumbnail dan Snippet. Kalau sudah jangan lupa Klik Simpan/Save



6. Jika yang di pilih Gadget Blog's Stats maka akan muncul settingan seperti dibawah ini :
   Title diisi dengan judul, pilih tampilan yang di sukai lalu klik tombol Save/Simpan
   


7. Apabila settingan sudah selesai lihat Blog kamu kalau sudah ada seperti di bawah ini berarti sudah berhasil, kalau belum ada coba di baca sekali lagi artikel ini.Ok .... tertarik untuk mencoba.... ?
   

Continue

Fitur Statistik Blogger in Draft di Blogspot

Fasilitas Statistik di Blogspot/Blogger digunakan untuk mengetahui statistik suatu artikel dibaca oleh berapa orang, darimana saja mereka berasal, dan dari mana mereka mengetahui artikel blog. Kalau yang sudah terbiasa dengan Google Analistic mungkin sudah paham apa gunanya. Nah di Blogspot sudah menyediakan Statistiknya jadi dengan melihat fasilitas ini, dapat di mengetahui artikel - artikel apa saja yang sering di baca oleh pengunjung.

Jadi ini juga bisa menjadi acuan untuk menulis artikel dengan judul yang banyak dicari pengunjung, dengan begitu traffic blog menjadi naik, kalau naik bisa buat jualan terserah mau jualan apa.... jualan link, jualan banner, atau apalah.. yang pasti blog jadi semakin banyak pengunjungnya dan terkenal.. kayak PermakBlogs ini :)
Bagaimana caranya melihat Statistik di Blogger/Blogspot ? mudah kok ikuti langkah berikut ini :

1. Buka http://draft.blogger.com log in menggunakan account blog kamu.
2. Klik Tab Statistik , maka akan keluar tabel statistiik
3. Fitur Statistik ini terdiri dari Overview, Post, Traffic Source, Audience. Di dalam Overview terdapat grafik seperti dibawah ini. arahkan krusor mouse ke graffik dan bisa kita lihat pertanggal berapa jumlah pengunjungnya. Di dalam Post dapat kita lihat statistik artikel yang paling banyak dibaca pengunjung, datanya seperti dibawah ini.
   Di dalam Traffic Source dapat kita lihat sumber terbesar yang mendatangkan pengunjung, datanya seperti di bawah ini.Di dalam Audience dapat kita lihat statistik pengunjung dalam tampilan peta seperti dibawah ini.

Jadi Bagimana asikan dengan fitur ini, gak usah pasang kode google analitic tau yang lain-lain.. hehehe

ok selamat mencoba... jangan lupa komenya ya...

Continue

Widget Ramadhan 1431 H - 2010 Blogspot/Blogger

Wah sudah masuk bulan Agustus ya, ini tandanya sudah saatnya temen -temen Muslim masuk di bulan Ramadhan. Seminggu lagi sudah pada puasa ya? permakblogs mengucapkan selamat menunaikan ibadah puasa ya..

Nah sebagai ucapan selamat ibadah puasa, nich dibagi in Widget Ramadhan 1431 H - 2010 buat Blogspot/Blogger. Ini juga di dapet dari zawa.blogsome.com, kalau dilihat ini postingan 2008 tapi lucu juga dipasang di 2010. Kata-katanya dapat di rubah sesuai keinginan. karakternya juga bisa dipilih cewek/cowok.
Ini karakternya dengan tulisan " Selamat Datang Bulan Ramadhan " :

<embed src="http://fc03.deviantart.com/fs47/f/2009/198/9/f/helloramadhan_by_blogclocks.swf?msg=Selamat%20datang%20bulan%20Ramadhan%2E%2E%2E&c=0xffbe59&r=0&k=2&w=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" height="170" width="140"></embed><a href="http://permakblogs.blogspot.com/2010/08/widget-bulan-ramadhan-blogspotblogger.html" style="display: none;">widget Ramadhan</a>

<embed src="http://fc03.deviantart.com/fs47/f/2009/198/9/f/helloramadhan_by_blogclocks.swf?msg=Selamat%20datang%20bulan%20Ramadhan%2E%2E%2E&c=0xffbe59&r=1&k=1&w=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="140" height="170" wmode="transparent"></embed><a href="http://permakblogs.blogspot.com/2010/08/widget-bulan-ramadhan-blogspotblogger.html" style="display: none;">widget Ramadhan</a>

Nah tinggal dipilih mau yang cowok atau cewek.. cara pasanganya tinggal Copas(copy paste) aja kode diatas ke Gadget HTML/Javascript lalu simpan deh dan lihat hasilnya... ok kan coy... :)

ok semoga bermanfaat. Pasang Widget Ramadhan 1431 H- 2010, jalin silahturahmi dengan temen kamu.
Selamat menunaikan Ibadah Puasa ya...

Continue

Widget FIFA World Cup AFSEL 2010 Blogspot

Euforia FIFA World Cup AFSEL 2010 sedang melanda di seluruh penjuru dunia... tentunya kamu semua juga tidak mau ketinggalankan?? nonton setiap pertandingan, tempel jadwal di dinding kamar instal jadwal di komputer, dll... Lalu bagaimana kalau kamu ketinggalan berita karena ketiduran atau temen kamu tanya tapi gak tau juga... Yuk berbagai berita dengan memasang Widget FIFA World Cup AFSEL 2010 di blog kamu, biar temen dan pengunjung kamu update berita terbaru dari pagelaran FIFA World Cup AFSEL 2010 ini...

Berikut kode widget News FIFA World Cup AFSEL 2010 :

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('8f98a2e1-9fd7-496b-a5fa-d45d0f6e26ab');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/fifa">2010 FIFA World Cup Latest News - Photos - VideosMore info)</noscript>

Hasilnya kayak di samping kanan blog ini....

Ehh ngomong - ngomong sudah tau cara pasangnya di Blogspot kan?? kalau gak baca artikel ini HTML/JavaScript Gadget Serbaguna Blogspot.
Ok, selamat ber Euforia FIFA World Cup AFSEL 2010...

Continue

Perkenalkan Diri dengan Gadget Profil Blogspot

Belum terkenal di dunia perbloggeran? pasang Gadget Profil di blog kamu, biar pengunjung tau siapa dirimu... (narsis dikit hehehheehee)

Tampilkan profil kamu dengan menggunakan Gadget Profil Blogspot/Blogger. Pilih foto kamu yang paling narsis :) lalu upload, biarkan pengunjung blog kamu tau siapa kamu sebenernya...

Bagaimana caranya, apa yang perlu disiapkan? ikuti langkah - langkah berikut ini :

1. Masuk ke Account Blogspot kamu.
2. Pilih tab Tata Letak
3. Klik Tambah Gadget, muncul pilihan Gadget silahkan pilih Profil. Setelah itu pada form Edit Profil lengkapi dengan data anda. Isi Judul, setting bagi pakai profil saya, dan mengenai saya.Tulis nama dan uraian tentang Kamu, Setting Lokasi kamu sekarang, mau ditampilkan atau tidak..
4. Setelah selesai klik simpan, lalu buka blog kamu untuk melihat hasilnya. contohnya seperti dibawah ini.

Catatan :

• pastikan profil kamu di dasbor sudah dilengkapi seperlunya ya, yang paling penting foto narsisnya :)

Mudah bukan... ada yang masih bingung ? bingung ninggal komen aja...

Ok semoga berhasil..

Continue

Jalin Pertemanan dengan Pengikut/Follower Gadget Blogspot

Biarkan pengunjung jadi pengikut/follower blokmu, ya itu judulnya. Apasih maksudnya? yang pasti bukan biarkan pengunjungmu menjadi pengikut aliran sesat... wkwkwkwkwk..Pengikut/Follower disini maksudnya, apabila temen kamu yang pengen dapet update postingan terbaru di blog kamu harus menjadi Pengikut/Follower blog kamu. Nah Blogspot memberikan failitas untuk memudahkan pengunjung yang ingin mengetahui postingan terbaru blog kamu yaitu dengan Gaget Pengikut/Follower.
Bagaimana cara pasang dan menjadi pengikut ? ini dia caranya :

1. Masuk ke Account Blogspot.com kamu.
2. Klik tab Tata Letak, pilih Elemen Halaman.
3. Pilih letak followernya, di samping kiri, samping kanan atau dimana kau suka lah.. Untuk memasangnya cukup klik Tambah Gadget, maka akan muncul layar baru Tambahkan Gadget. Pilih Gadget Pengikut/Follower.
4. Setelah di pilih akan muncul Konfigurasi Daftar Pengikut , isi judulnya dan atur warna sesuai keinginanmu.
   
5. Selesai ? Jangan lupa klik simpan, tunggu sampai jendela tertutup. Klik Lihat blog untuk melihat hasilnya.
6. Hasil persisnya seperti di samping kanan blog ini yang judulnya Follower, jangan lupa jadi pengikut PermakBlogs ya... :)
7. 

Lalu bagaimana cara menjadi pengikut suatu blog?

1. Caranya tinggal klik tombol Follower , trus akan muncul jendela baru dan disana ada pilihan kamu mau menjadi pengikut menggunakan account apa?
2. Setelah kamu pilih akan muncul login account masuk seperti biasa, kalau sudah berhasil baru klik ikuti dan kamu sudah berhasil menjadi pengikut suatu blog dan foto kamu akan terpublish di blog yang kamu ikuti.
   

Jadi tau kan pengikut/follower itu apa, dan mudah kan...
Oke selamat mencoba..

Continue

HTML/JavaScript Gadget Serbaguna Blogspot

Hello guys and girls, apa kabarnya nich... semoga sehat-sehat ya..

Sorry nich baru nulis lagi, soalnya sibuk di kerjaan dan nyiapin blog traveling jadi semua aktivitas Permak Blogs terbengkalai. Moga - moga kalian masih setia baca artikel kami ya.. (ngarep mode on :) ). Ok kalai ini kami mau bahas dasar-dasar gadget Blogspot.com, buat yang baru ngeblog perlu tau nich. Makanya baca artikel ini biar tambah ilmu dan bisa nyaingin masternya he3.. Gadget pertama adalah HTML/JavaScript Gadget Serbaguna Blogspot. Gadget ini sangat serbaguna, banyak yang menggunakannya untuk Banner, Text link, backlinks, memasukan widget - widget yang berbasis HTML. Bagaimana cara pakainya? ikuti langkah di bawah ini :

1. Langkah pertama masuk ke Account Blogspot anda seperti biasa.
2. Kedua klik Tab TataLetak, untuk menambahkan gadget silahkan pilih posisi yang akan ditambahkan Header, sidebar, diatas postingan, footer, atau dimanapun anda suka (asal ada tulisan tambah gadget). Lalu Klik pada tulisan Tambah Gadget.
   
3. Setelah itu akan muncul jendela baru Tambahkan Gadget, pilih gadget HTML/JavaScript klik di tanda (+).
4. setelah itu akan muncul jendela konfigurasi HTML/JavaScript. Isi sesuai dengan keinginan anda mau di isi apa aja terserah :). kalau mau coba di isi widget shoutbox untuk chat silahkan, ndak tau caranya baca aja artikel cara pasang shoutbox.
   

Setelah semuanya selesai jangan lupa klik tombol simpan, lalu klik lihat blog untuk melihat hasilnya. Bagaimana mudah bukan... Selain shoutbox banyak kok widget-widget yang bisa digunakan dengan gadget HTML/JavaScript ini.. silahkan googling aja...

OK, selamat mencoba.. semoga berhasil....

oh ya kalau ada yang masih bingung tinggalin comment aja ya...

Continue

Fitur Baru Membuat Template Blogger/Blogspot

Template Designer

Hello para permaker.... apa kabar nich ? masih setia berkunjung dan baca artikel kami kan? ok...
Ada informasi terbaru nich sudah tau belum? kalau sudah ya ndak papa, yang belum ya harus tau nich informasi... Apa sich informasinya? informasinya ada Fitur Baru di Blogger in Draft, fitur nya adalah Template designer. Fitur ini bisa digunakan buat pemula yang pengen buat template sendiri, mudah di jalankan dan langsung bisa di terapkan tanpa menginstal untuk menggati tempaltenya.

Nah gimana caranya om... hmmm begini ni caranya, disimak ya ? :)

Ikuti langkah-langkah berikut ini :

1. Login ke http://draft.blogger.com , login menggunakan account blogger kamu seperti biasa.
2. Kemudian klik Layout/Tata Letak >Template Designer.
   
   
   
   Setelah muncul Blogger Template Designer saatnya kita membuat template.
3. Pada Template disediakan 15 jenis template yan di bagi dalam 4 kategori yaitu Simple, Picture Windows, Awesome Inc. , Watermark.
   
   
   
4. Pada Background tersedia banyak pilihan untuk menjadi background blog dan warna latar utamanya.
   
   
   
   
   Untuk mengganti Gambar latar belakang blog dapat di klik pada Background Image disana banyak pilihan background.
   
   
   
   
   
   Untuk warna utama pada blog dapat dipilih pada Main color theme, disana terdapat beberapa warna yang di sarankan tapi kalau kamu punya pilihan sendiri sebaiknya klik gambar "Change the color theme of your blog."
   
   
5. Pada Layout terdapat 3 fitur utama yang dapat di buat atau di edit yaitu Body layout, Footer layout, Adjust layout.
   Body layout digunakan untuk mengatur layout blog apakah mau menggunakan satu, dua atau tiga colom dan sebagainya.
   
   
   
   Footer layout digunakan untuk mengatur layout footer menjadi satu, dua atau tiga kolom.Adjust layoutdigunakan untuk menyesuaikan ukuran lebar sidebar dan layout blog. Tinggal di geser kanan kiri aja.
   
6. Pada Advancedfungsinya sapa dengan pengaturan font dan Warna bedanya di sini kamu dapat menambah CSS baru di Add CSS.
7. Ok kalau semua sudah jangan lupa klik Apply to Blog dan lihat lah hasilnya. Kalau belum puas di ulangi aja langkah 1 dan seterusnya sampai puas :)

Jadi ini menu baru pada blogger/blogspot...
Jangan lupa kalau masih bingung ninggalin komen aja, biar kami jawab...
Selamat mencoba

Continue

Cara Pasang Sexy Bookmarking

Kalo denger yang seksi-seksi biasanya bikin kita penasaran sambil ngiler. Tapi kalo setelah kata ‘seksi’ ada kata ‘bookmarking’ bukannya ngiler malah melongo. Apa coba yang seksi dari bookmarking? Nah ini dia… Sexy-Bookmarks v2 : gadget bookmarking untuk blogger yang seksi punya. Tools ini ‘menyembunyikan’ bookmarking yang diletakkan di bawah posting dan hanya akan nongol setiap kali ada mouse hover. Memang kadang yang keliatan dikit-dikit lebih seksi daripada yang langsung bugil (apa coba?!).

 

Caranya sebenarnya mudah, tapi agak panjang jalan yang harus dilalui, okelah kalo begitu, sudah siap?

Let’s get ready to rumble!!

1. Ada baiknya sebelum memulai anda mengunduh dulu file berikut - Gambar

2. Unpack file gambar PNG yang ada di zip tersebut menggunakan unzip tools dan upload file yang ada ke imagehosting kesayangan anda. (Misalnya imageshack.us, jangan gunakan picasa atau photobucket).

3. Masuk ke halaman layout kemudian edit HTML anda. Centang tanda Expand Widget Template untuk menampilkan semua widget yang mungkin tersembunyi.

4. Masukkan kode di bawah ini sebelum tag </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>

5. Lalu letakkan kode di bawah ini setelah script yang baru anda pasang di atas.

<style type="text/css">
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img717.imageshack.us/img717/3006/sexyspritenew.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>


6. Nah kalau kode yang di bawah ini diletakkan setelah <data:post.body/>

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a></div>

7. Tugas berikutnya bagi anda adalah mencari kode berekstensi PNG yang ada di script kedua dan mengubah alamat urlnya dengan alamat url gambar yang sudah anda upload di image hosting anda tadi.

8. Selesai! Tadaaaaa!!! 

Preview bisa dilihat di Sini 

Thanks to Mr Naeem Nur for the tutorial.

Continue

Static Page Fitur Baru dari Blogspot/Blogger

Ini dia Fitur baru blogspot/blogger Static Page dapat digunakan sebagai top menu navigation seperti About Us, Contact Us dan lain sebagainya. Meskipun masih dalam tahap pengembangan Fitur Static Page layak di coba. Fitur ini dapat di akses melalui http://draft.blogger.com.

Bagaimana cara setting  Fitur static page di blogspot/blogger ?

Ikuti langkah-langkah di bawah ini:

1. Login ke  http://draft.blogger.com , login menggunakan account blogger kamu seprti biasa.
2. Kemudian klik Posting > Edit Laman/Edit Page(1) , lalu klik Laman Baru/New Page(2).

3. Setelah muncul form untuk mengisi Laman Baru(New Page), isi judul halaman misal About Me, kemudian klik Tayangkan Laman(Publish). 
   
4. Akan muncul pilihan penempatan : di Navigation Menu, di Sidebar atau akan kita pasang manual.Setelah dipiling klik Simpan dan Terbitkan.
   

5. Untuk mengedit susunannya klik Tata Letak ( Layout), klik Edit pada Widget Laman(Page). dari sinilah kita dapat mengedit susunan linknya.

Selamat mencoba...




Sumber : bloggerindraft.

Continue

Widget Recent Post & Recent Comment

Wah, sudah lama nggak nulis buat PermakBlogs. Hampir dua minggu! Hahaha, oke deh, untuk salam pembuka tahun baru, kita berikan trik Blogspot yang bisa dibilang lumayan mudah dan pendek untuk pemanasan. Trik kali ini adalah bagaimana caranya kita membuat widget Recent Post dan Recent Comments tanpa harus menggunakan javascript, instalasi javascript pada Blogspot bisa lumayan berpengaruh memperlambat loading dan kurang begitu bagus diterapkan untuk Search Engine Optimization (SEO).

Seberapa gampang sih widget ini? Sangat gampang, anda hanya membutuhkan link RSS yang juga sudah disediakan oleh Blogspot.  Berikut adalah kode RSS untuk post dan comments.

http://namasitusanda.blogspot.com/feeds/posts/default

http://namasitusanda.blogspot.com/feeds/comments/default

Yang perlu anda lakukan hanyalah mengubah namasitusanda dengan nama situs anda, tentunya.

Oke setelah bahannya disiapkan, sekarang kita nyalakan kompornya. Masuk ke blogspot, pilih layout di dashboard kemudian pilih Page Element. Tambahkan widget, add page element dan pilih Feed. Masukkan url di atas masing-masing dengan judul Recent Post dan Recent Comments. Save.

Voila, job well done.

Anda bisa meletakkan kedua feed ini dimanapun di blog dengan hanya melakukan drag and drop kotak widgetnya. Mudah kan?

Selamat mencoba!

Continue

Cara Menambah Banner Iklan di Blogger

Akhirnya nulis artikel lagi setelah sekian lama... mumpung lagi semangat lanjut...

Kali ini mau bagi - bagi cara menambah banner di blogger, kayak di saamping kanan blog ini. Buat apa sich dikasih banner? Ndak usah dijelaskan ya? para blogger sudah pasti tau to. Langsung ke caranya aja ya?

ikuti langkah - langkah di bawah ini :

1. Masuk ke account blogger kamu.
2. Lalu pilih Tataletak/layout dan pilih tab Edit Html.
3. Jangan lupa backup Blog kamu dulu, klik Download Template Lengkap dan juga contreng Expand Template Widget.
4. Cari Kode di bawah ini :


]]></b:skin>

Setelah itu copy paste kode di bawah ini tepat diatas kode tersebut.


/* Banner Iklan 125x125 */
#spotbanner{
overflow: hidden;
padding:0;
}
.ad1, .ad3 {
float: left;
margin-bottom: 5px;
padding-left:0px;
}
.ad2, .ad4 {
float: right;
margin-bottom: 5px;
padding-right:0px;
}

klik simpan template

5. Masuk ke Tab Elemen laman
   Kemudian buat element HTML/Javascript baru (di bagian sidebar kiri atau kanan halaman sesuai keinginan kamu) lalu masukan kode di bawah ini


<div id='spotbanner'>
<!-- Ad1 start -->
<a class='ad1' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad2 start -->
<a class='ad2' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad3 start -->
<a class='ad3' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad4 start -->
<a class='ad4' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<div class='clearer'/>
</div>

*text warna biru dapat diganti dengan Url web yang lain
*text warna merah bisa diganti dengan Url gambar

6. Klik Simpan, setelah proses simpan selesai klik lihat blog... kelihatan kan banner iklannya?

ok semoga berhasil ya...

Continue

Cara Permak Header Menjadi Dua Bagian

Yes berhasil juga akhirnya mbagi header menjadi dua bagian. Sekarang saatnya bagi-bagi ke Permaker semua. Kalau dua artikel sebelumnya dah dikasih tau tentang bagaimana menyembunyikan Judul/diskripsi Blog dan bagaimana menambah gambar pada header kali ini membahas cara membuat header menjadi dua bagian. Mau langsung atau ngobrol dulu? langsung aja ya ntar malah ngantuk...

Ikuti langkah - langkah di bawah ini :

1. Masuk ke Account Blogger kamu
2. Pilih Tata Letak klik Edit Html ( jangan lupa contreng "Expand Template Widget").
3. Cari code di bawah ini :


/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

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

Kalau beda yang penting cari CSS bagian header biasanya

/* Header
===================================
*/

................... samai dengan
}
/* Posts
----------------------------------------------- */


4. Hapus kode bagian header diatas ganti dengan kode di bawah ini:


/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor;
height:190px;
}

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

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

#r_head{
width:300px;
float:left;
padding-top:10px;
}



5. Selanjutnya cari code di bawah ini :


<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Nama blog anda (Header)" type="Header">
</b:widget>
</b:section></div>


Hapus kode di atas dan ganti dengan kode di bawah 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>


6. Ok sudah selesai tinggal klik save template, trus klik Tab elemen halaman nah jadikan sekarang headernya jadi dua bagain satu buat logo satu bisa buat banner atau google adsense.
   

Gampangkan ? gampang dan menyenangkan memang permak blogs, kalau bisa itu puas rasanya.. bagaimana dengan kamu?

OK semoga berhasil ya.

NB : lebar kolom(width) di atas silahkan disesuaikan keinginan anda trial and error aja, Trus kalau template kamu berbeda sialhken lapor aja nanti kita bantu tenang aja :).

Continue